让Claude变设计搭档！这个Skill专治AI设计垃圾 tropes
你有没有这种感觉——给 AI 一个设计需求，它出来的永远是一块紫色渐变背景 + 居中标题 + 两个 CTA 按钮，”AI 设计感” 十足但看起来假得要命？
问题不在 AI 笨，而是 AI 根本不知道什么叫「设计」。大多数 AI 设计工具只是把 UI 组件随机排列，出来的就是那套老掉牙的网页模板风。
Claude Designer 不一样。它不是生成图片，而是直接输出 HTML/CSS/JS/SVG 代码——做幻灯片、原型、落地页、数据看板，全部是可直接用的代码文件。更重要的是，它的设计逻辑本身就是在教 AI 什么叫「克制」。
它的设计观很反潮流
SKILL 里专门列了一章「别用 AI 设计垃圾 tropes」：
- 紫色到粉色的渐变背景 ❌
- UI 组件里塞 Emoji ❌
- 用 SVG 画假截图、假 Dashboard ❌（用占位图代替更好）
- 动不动玻璃拟态、浮动光球 ❌
- 用 Inter、Roboto、Arial 当设计感字体 ❌
这些都是 AI 最爱生成的”设计垃圾”，Claude Designer 直接告诉你别用。取而代之的是：用 CSS Grid 真布局、oklch() 颜色算法、Container Queries、View Transitions 这些真正强大的 CSS 工具。
工作流程很专业
它的核心循环是：理解需求 → 收集设计系统上下文 → 制定方案 → 搭建结构 → 构建 → 验证 → 总结。每一步都有方法论，特别是「收集上下文」这一步——它会强制你提供：品牌色板、字体系统、现有 UI 截图、设计规范文件。没有任何参考，它会直接告诉你：「没有上下文的设计通常会更差，你能提供点什么吗？」
给选项的方式也很聪明——不是换颜色，而是跨维度给：常规版、大胆配色/版式版、实验性交互版、夸张比例/质感版。设计师可以自由混搭。
输出格式覆盖全面
- 幻灯片 decks（带演讲者备注、PDF 导出）
- 可交互高保真原型（React+Babel）
- 时间线动画视频（Stage/Sprite 结构）
- 静态视觉对比画布（设计变体对比）
- 落地页、仪表盘……
内置 assets 文件夹里有：Mac 窗口 chrome、iOS/Android 设备框、浏览器窗口组件、动画引擎、幻灯片舞台——全部拿来就用，不用从零搭。
适合谁用
如果你经常需要：做演示 PPT、做产品原型、做 AI 相关的数据看板、做品牌设计稿……这个 Skill 可以把你从 Figma 的重复劳动里解放出来一部分，让 AI 按你的设计系统生成真实代码，而不是生成一堆假图。
工具：filesystem、browser、documents。
GitHub：https://github.com/tsukhani/jclaw
评论区
登录后可评论。