设计师的 AI 工作流

这个 pack 包含什么

这是一位真在干活的视觉 / 产品 / 品牌设计师真要把 AI 接进设计日常时会装的一套 — 不是那种「engineer 拿来出 React 代码」的工具箱。每一个都覆盖设计师梯子的一档：用 designer-tuned agent 调度工作 → 用文字 prompt 出第一稿 mockup → 在你真正拥有的编辑器里精修 → 生成本来要花钱授权的图像资产 → 打包图标库 → 通过 Figma 管道交付给工程 → 最后用品牌一致性 skill 守门，确保出稿前不丢牌子。

Pack 假设你住在 Figma 或 Figma 替代品里（Penpot、Open Pencil），希望 AI 接手日常里那些 机械活 — 首稿布局、图标搜索、图像变体、设计系统文档、品牌审计 — 而不是替代仍然属于你的品味决策。

推荐安装顺序（调研 → 出稿 → 资产 → 交付 → 品牌守门）

1. Claude Code Agent: UI Designer (#4381) — 调研 + 调度。这是给设计师调过音的 agent，调下面的 MCP、读 design brief、推荐布局 / 层级 / 组件选择。日常入口，其他每个工具都从这里调用。
2. Google Stitch MCP (#151) — AI 出稿。文字 prompt → 完整 UI 屏，在 Stitch 里可编辑。最适合首稿成本低的探索（营销变体、设置页、内部工具）。MCP 装好一次，上面的 agent 就能让它替你出屏。
3. Open Pencil (#4720) — AI 原生设计编辑器。Stitch 的输出要手工精修但你又不想倒回 Figma 时，Open Pencil 是 Skia 渲染、原生集成 AI 辅助的编辑器。开源；和 UI Designer agent 配合干净。
4. Penpot (#890) — 开源设计工具。给想自部署、要 SVG 原生文件、不接受被锁住的团队的 Figma 替代品。当主编辑器用 也行，当协作者没 Figma seat 时的交付格式 也行。
5. Together AI 图像生成 (#776) — 图像资产生成。FLUX + Kontext 模型，出 hero 图、产品图、插图、纹理变体。比图库订阅便宜，授权也清楚。这个 skill 教 Claude Code 正确的参数，agent (#4381) 就能替你调。
6. ComfyUI (#208) — 节点式图像生成。Together AI 一发命中不够用时 —— 你要 ControlNet、IP-Adapter、LoRA 微调、可复现的批量 —— ComfyUI 是 power-user 操作面。学习曲线陡；做品牌一致性图像生产值得。
7. Lucide (#1009) — 图标工具包。1,500+ 极简 SVG 图标，MIT 协议，跨框架。AI 脚手架工具默认就拿 Lucide，所以你上游选了它就意味着工程后面不用换图标。Figma 通过社区插件接入，代码通过 Lucide 包接入。
8. Talk to Figma MCP (#3241) — 设计到代码的交付。让工程的 agent 读你的 Figma 文件、修改后回写。从设计师视角，这是让你的文件成为「单一信息源」的方法 —— 而不是工程在 Slack 里盯着的那张截图。
9. design-md-figma (#3599) — 设计系统提取。Figma 插件，把你的本地样式（颜色、字体、间距 token）导出成 DESIGN.md / SKILL.md，任何 agent 都能消费。没它，每个 AI 工具都在猜你的 token；有它，他们就能复现。
10. Claude Official Skill: brand-guidelines (#75) — 品牌 QA 关卡。把品牌颜色、字体系统性地应用到所有需要上线的物料上。出文件前的最后一关 —— 抓住 AI 输出里跑偏的牌子，免得落到 deck 或营销页上。

它们怎么协同

   Brief / 调研笔记
          │
          ▼
  UI Designer Agent (#4381)
          │
          │ ── 读 brief、选工具、调度
          ▼
  ┌───────────────────────────────────────────┐
  │  出稿                                     │
  │  Google Stitch MCP (#151)   ──┐           │
  │  (文字 → 首稿屏)              │           │
  │                               ▼           │
  │  Open Pencil (#4720) ◀── Penpot (#890)    │
  │  (AI 原生编辑器)       (开源编辑器 /      │
  │                         交付格式)         │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  ┌───────────────────────────────────────────┐
  │  图像资产                                 │
  │  Together AI (#776) ──── ComfyUI (#208)   │
  │  (FLUX 一发命中)         (节点图 / 批量 / │
  │                            ControlNet)    │
  │                                           │
  │  Lucide (#1009) ◀── 图标库               │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  ┌───────────────────────────────────────────┐
  │  交付                                     │
  │  Talk to Figma MCP (#3241)                │
  │  (工程 agent 读文件)                      │
  │                                           │
  │  design-md-figma (#3599)                  │
  │  (导 token → DESIGN.md)                   │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  brand-guidelines (#75)
  (最后的品牌一致性守门)
                  │
                  ▼
            上线 / 发布

UI Designer Agent + Stitch MCP + Talk to Figma MCP 三者是关键连接：agent 读你的 brief、通过 Stitch 出首稿、在你编辑器里精修，然后把结果写回 Figma 让工程接走。没有 agent 你就要一只一只手动驱动工具；没有 Figma MCP 你的交付就退回到「截图上画红线」。

你会遇到的取舍

• AI 出稿 vs 手工布局 — Stitch 在「首稿成本低的探索」上最快（营销变体、设置页、内部工具）。在「布局本身就是差异化」的场景最差。用它跳过空白画布；屏要有专属感时换回手工。
• Figma 插件 vs 独立编辑器 — Talk to Figma MCP 让你留在 Figma，那里的协作和工程交付都最成熟。Open Pencil 和 Penpot 是独立编辑器、AI 内建。组织跑 Figma seat 就留；solo 设计师或没 Figma 的团队，Open Pencil / Penpot 帮你省下 $15/seat/月。
• Together AI vs ComfyUI — Together AI 一发命中、托管、每图 $0.003-0.05。ComfyUI 本地、节点图、GPU 成本之后免费，是 ControlNet 级精度（用这个人物的姿势、这个产品的轮廓）的唯一路径。先上 Together AI；要做品牌可复现的图像生产再升级 ComfyUI。
• Lucide vs Heroicons vs Phosphor — 三个都维护良好。Lucide 进 pack 是因为 v0 和其他 AI 生成器默认就拿它 —— 上游选了，交付时就少换图标。住 Tailwind UI 就 Heroicons；要 weight 变体就 Phosphor。
• brand-guidelines skill vs 人工品牌审查 — skill 抓 系统性 漂移（主色 hex 错、字体跑偏、间距不一致）。它抓不了 叙事 漂移（hero 文案的语气、摄影风格、插图情绪）。用 skill 清理机械违规；剩下的人工审。
• Penpot vs Figma vs Sketch — Penpot 是这里唯一完全开源的。真实团队上它要么因为 Figma 涨价终于过了痛点门槛，要么因为合规要求自部署。功能上 ~80% 的设计工作能持平；你会想念 Figma 的 variants、dev mode 精修、插件生态。

常见踩坑

• 过度依赖 AI 品味 — Stitch、Open Pencil、Together AI 都会出 合格但没观点 的东西。出合格越快，就把合格出得到处都是 —— 看完就忘。AI 接 70% 的机械脚手架，把省下的时间砸在让作品有差异化的 30% 上。
• 资产授权混乱 — AI 生成图的法律环境在动。Together AI 的 FLUX 输出一般可商用；ComfyUI 的输出取决于你叠的基础模型和 LoRA。在设计文件里记下每张图的模型 + 授权，客户活尤其要 —— 因为 brief 可能指明来源要求。
• 「以后再说」推迟 design-md-figma — 没导出 token，每个 AI 工具都在猜你的色板和间距 scale。两周后 agent 在不同物料里发明了 14 种「品牌蓝」。第一天就导出 DESIGN.md；系统真改了再重新导。
• 把 brand-guidelines skill 当唯一 QA — 它抓系统性违规，不抓叙事性。一个页面可以通过品牌检查但仍然「不对味」 —— 摄影太通用、文案语气错、布局和竞品一样。用作关卡，不是绿灯。
• 让 Stitch 输出直接进工程 — 任何 AI 工具的首稿在缩略图大小看都对，到细节就崩（对齐、层级、microcopy）。交付 MCP 接走之前，至少在 Penpot / Open Pencil / Figma 里过一遍编辑。工程的 agent 会继承每一处错位。
• 没匹配团队成熟度选编辑器 — 有 ops 支持时 Penpot 自部署很爽，没有就很折磨。Open Pencil 令人兴奋但还很早（#4720 在 TokRepo 上目前几乎零使用量）。Figma 无聊但靠谱。工具成熟度要匹配团队耐心。

这个 pack 故意没放什么

没有 Adobe XD、没有 Sketch、没有 Framer Sites、没有 Webflow。这些是成熟的商业产品，不需要一份精选 AI pack —— 它们各自的生态覆盖了 AI 角度。这个 pack 是 AI 原生的边缘：尽量开源、MCP 驱动、agent 当指挥官。如果你住在 Adobe Creative Cloud 里、每月付 $60，没问题 —— brand-guidelines (#75) 和 Together AI (#776) 仍然能插进你的日常。