[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-designer-ai-workflow-zh":3,"seo:pack:designer-ai-workflow:zh":102},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":101},"designer-ai-workflow","🎨","#A855F7","new","本周新建","设计师的 AI 工作流","视觉 \u002F 产品 \u002F 品牌设计师把 AI 真正接进日常的十个选手：UI Designer agent、Google Stitch MCP、Open Pencil、Penpot、Together AI 图像生成、ComfyUI、Lucide 图标、Talk to Figma MCP、design-md-figma、brand-guidelines。按 调研 → 出稿 → 资产 → 交付 → 品牌守门 顺序装。",[16,28,38,48,55,63,70,77,85,93],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},4381,"cf9a445d-7f3f-4f95-a02c-01d912e2f732","claude-code-agent-ui-designer-cf9a445d","Claude Code Agent: UI Designer","Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design,...","TokRepo精选",24,0,"en","skill","Skill",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":35,"vote_count":24,"lang_type":25,"type":36,"type_label":37},151,"05e7ef0b-cc4a-46e5-8b15-d78a626fcd6f","google-stitch-mcp-ai-design-via-model-context-protocol-05e7ef0b","Google Stitch MCP — AI Design via Model Context Protocol","Connect Claude Code, Cursor, Gemini CLI, or VS Code to Google Stitch for AI-driven UI design. Create projects, generate screens from text, edit designs, manage design systems — all via MCP.","Google · Gemini Team",450,"mcp","MCP",{"id":39,"uuid":40,"slug":41,"title":42,"description":43,"author_name":44,"view_count":45,"vote_count":24,"lang_type":25,"type":46,"type_label":47},4720,"a11a5780-5595-11f1-9bc6-00163e2b0d79","open-pencil-ai-native-open-source-design-editor-a11a5780","Open Pencil — AI-Native Open Source Design Editor","An open-source AI-native design editor built as a Figma alternative, featuring real-time collaboration, Skia-based rendering, and AI-powered design assistance.","AI Open Source",5,"config","Config",{"id":49,"uuid":50,"slug":51,"title":52,"description":53,"author_name":44,"view_count":54,"vote_count":24,"lang_type":25,"type":26,"type_label":27},890,"609d5e22-349e-11f1-9bc6-00163e2b0d79","penpot-open-source-design-prototyping-platform-609d5e22","Penpot — Open Source Design & Prototyping Platform","Penpot is an open-source Figma alternative for UI\u002FUX design and prototyping. Web-based, real-time collaboration, SVG-native, and fully self-hostable.",183,{"id":56,"uuid":57,"slug":58,"title":59,"description":60,"author_name":61,"view_count":62,"vote_count":24,"lang_type":25,"type":26,"type_label":27},776,"84500559-5ce6-41c7-ba22-9712153bb821","together-ai-image-generation-skill-claude-code-84500559","Together AI Image Generation Skill for Claude Code","Skill that teaches Claude Code Together AI's image generation API. Covers FLUX and Kontext models for text-to-image, image editing, and style transfer with correct parameters.","Together AI",119,{"id":64,"uuid":65,"slug":66,"title":67,"description":68,"author_name":44,"view_count":69,"vote_count":24,"lang_type":25,"type":26,"type_label":27},208,"02888d06-d950-42f4-bc45-960c1f604ee4","comfyui-node-based-ai-image-generation-02888d06","ComfyUI — Node-Based AI Image Generation","The most powerful modular AI image generation GUI with a node\u002Fgraph editor. Supports Stable Diffusion, Flux, SDXL, ControlNet, and 1000+ custom nodes. 107K+ stars.",192,{"id":71,"uuid":72,"slug":73,"title":74,"description":75,"author_name":44,"view_count":76,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1009,"4fa5cff1-3580-11f1-9bc6-00163e2b0d79","lucide-beautiful-consistent-icon-toolkit-4fa5cff1","Lucide — Beautiful & Consistent Icon Toolkit","Lucide is a beautiful and consistent icon toolkit made by the community — a fork of Feather Icons with 1500+ crisp, minimalist SVG icons. First-class React, Vue, Svelte, Solid, Angular, and Web Component libraries.",163,{"id":78,"uuid":79,"slug":80,"title":81,"description":82,"author_name":83,"view_count":84,"vote_count":24,"lang_type":25,"type":36,"type_label":37},3241,"33c67558-0d65-48f6-842c-b3e88ec3d220","talk-to-figma-mcp-control-figma-from-cursor","Talk to Figma MCP — Control Figma from Cursor","Talk to Figma MCP connects Cursor\u002FClaude Code to Figma via an MCP server plus plugin, enabling read\u002Fmodify workflows for design automation.","MCP Hub",79,{"id":86,"uuid":87,"slug":88,"title":89,"description":90,"author_name":91,"view_count":92,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3599,"1dc5c57f-0978-54c8-b3ae-7a9d48f86d8b","design-md-figma-generate-design-md-from-figma-styles","design-md-figma — Generate DESIGN.md from Figma Styles","design-md-figma is a Figma plugin that extracts local styles and generates editable DESIGN.md\u002FSKILL.md so agents build UIs consistently.","Skill Factory",53,{"id":94,"uuid":95,"slug":96,"title":97,"description":98,"author_name":99,"view_count":100,"vote_count":24,"lang_type":25,"type":26,"type_label":27},75,"2c965821-0cc3-452a-8c44-faa989fc047a","claude-official-skill-brand-guidelines-2c965821","Claude Official Skill: brand-guidelines","Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidel...","Anthropic",141,"tokrepo install pack\u002Fdesigner-ai-workflow",{"pageType":103,"pageKey":8,"locale":104,"title":105,"metaDescription":106,"h1":107,"tldr":108,"bodyMarkdown":109,"faq":110,"schema":126,"internalLinks":132,"citations":145,"wordCount":158,"generatedAt":159},"pack","zh","设计师的 AI 工作流 — 出稿 \u002F 资产 \u002F 品牌守门的 10 个选手","UI Designer agent \u002F Google Stitch MCP \u002F Open Pencil \u002F Penpot \u002F Together AI 图像生成 \u002F ComfyUI \u002F Lucide \u002F Talk to Figma MCP \u002F design-md-figma \u002F brand-guidelines。视觉、产品、品牌设计师把 AI 接入从调研到品牌守门全流程的一份 pipeline。TokRepo 一键装。","设计师的 AI 工作流 — 从调研到品牌守门的完整 pipeline","十个资产按推荐顺序装：先装 designer agent 当指挥官，再装 AI 出稿、再装编辑器、再装图像资产、再装交付管道、最后装品牌一致性守门。是视觉设计师的 pipeline，不是工程师的。","## 这个 pack 包含什么\n\n这是一位真在干活的视觉 \u002F 产品 \u002F 品牌设计师**真要把 AI 接进设计日常**时会装的一套 — 不是那种「engineer 拿来出 React 代码」的工具箱。每一个都覆盖设计师梯子的一档：用 designer-tuned agent 调度工作 → 用文字 prompt 出第一稿 mockup → 在你真正拥有的编辑器里精修 → 生成本来要花钱授权的图像资产 → 打包图标库 → 通过 Figma 管道交付给工程 → 最后用品牌一致性 skill 守门，确保出稿前不丢牌子。\n\nPack 假设你**住在 Figma 或 Figma 替代品里**（Penpot、Open Pencil），希望 AI 接手日常里那些 *机械活* — 首稿布局、图标搜索、图像变体、设计系统文档、品牌审计 — 而不是替代仍然属于你的品味决策。\n\n## 推荐安装顺序（调研 → 出稿 → 资产 → 交付 → 品牌守门）\n\n1. **Claude Code Agent: UI Designer** (#4381) — 调研 + 调度。这是给设计师调过音的 agent，调下面的 MCP、读 design brief、推荐布局 \u002F 层级 \u002F 组件选择。日常入口，其他每个工具都从这里调用。\n2. **Google Stitch MCP** (#151) — AI 出稿。文字 prompt → 完整 UI 屏，在 Stitch 里可编辑。最适合首稿成本低的探索（营销变体、设置页、内部工具）。MCP 装好一次，上面的 agent 就能让它替你出屏。\n3. **Open Pencil** (#4720) — AI 原生设计编辑器。Stitch 的输出要手工精修但你又不想倒回 Figma 时，Open Pencil 是 Skia 渲染、原生集成 AI 辅助的编辑器。开源；和 UI Designer agent 配合干净。\n4. **Penpot** (#890) — 开源设计工具。给想自部署、要 SVG 原生文件、不接受被锁住的团队的 Figma 替代品。当主编辑器用 *也行*，当协作者没 Figma seat 时的交付格式 *也行*。\n5. **Together AI 图像生成** (#776) — 图像资产生成。FLUX + Kontext 模型，出 hero 图、产品图、插图、纹理变体。比图库订阅便宜，授权也清楚。这个 skill 教 Claude Code 正确的参数，agent (#4381) 就能替你调。\n6. **ComfyUI** (#208) — 节点式图像生成。Together AI 一发命中不够用时 —— 你要 ControlNet、IP-Adapter、LoRA 微调、可复现的批量 —— ComfyUI 是 power-user 操作面。学习曲线陡；做品牌一致性图像生产值得。\n7. **Lucide** (#1009) — 图标工具包。1,500+ 极简 SVG 图标，MIT 协议，跨框架。AI 脚手架工具默认就拿 Lucide，所以你上游选了它就意味着工程后面不用换图标。Figma 通过社区插件接入，代码通过 Lucide 包接入。\n8. **Talk to Figma MCP** (#3241) — 设计到代码的交付。让工程的 agent 读你的 Figma 文件、修改后回写。从设计师视角，这是让你的文件成为「单一信息源」的方法 —— 而不是工程在 Slack 里盯着的那张截图。\n9. **design-md-figma** (#3599) — 设计系统提取。Figma 插件，把你的本地样式（颜色、字体、间距 token）导出成 DESIGN.md \u002F SKILL.md，任何 agent 都能消费。没它，每个 AI 工具都在猜你的 token；有它，他们就能复现。\n10. **Claude Official Skill: brand-guidelines** (#75) — 品牌 QA 关卡。把品牌颜色、字体系统性地应用到所有需要上线的物料上。出文件前的最后一关 —— 抓住 AI 输出里跑偏的牌子，免得落到 deck 或营销页上。\n\n## 它们怎么协同\n\n```\n   Brief \u002F 调研笔记\n          │\n          ▼\n  UI Designer Agent (#4381)\n          │\n          │ ── 读 brief、选工具、调度\n          ▼\n  ┌───────────────────────────────────────────┐\n  │  出稿                                     │\n  │  Google Stitch MCP (#151)   ──┐           │\n  │  (文字 → 首稿屏)              │           │\n  │                               ▼           │\n  │  Open Pencil (#4720) ◀── Penpot (#890)    │\n  │  (AI 原生编辑器)       (开源编辑器 \u002F      │\n  │                         交付格式)         │\n  └───────────────┬───────────────────────────┘\n                  │\n                  ▼\n  ┌───────────────────────────────────────────┐\n  │  图像资产                                 │\n  │  Together AI (#776) ──── ComfyUI (#208)   │\n  │  (FLUX 一发命中)         (节点图 \u002F 批量 \u002F │\n  │                            ControlNet)    │\n  │                                           │\n  │  Lucide (#1009) ◀── 图标库               │\n  └───────────────┬───────────────────────────┘\n                  │\n                  ▼\n  ┌───────────────────────────────────────────┐\n  │  交付                                     │\n  │  Talk to Figma MCP (#3241)                │\n  │  (工程 agent 读文件)                      │\n  │                                           │\n  │  design-md-figma (#3599)                  │\n  │  (导 token → DESIGN.md)                   │\n  └───────────────┬───────────────────────────┘\n                  │\n                  ▼\n  brand-guidelines (#75)\n  (最后的品牌一致性守门)\n                  │\n                  ▼\n            上线 \u002F 发布\n```\n\n**UI Designer Agent + Stitch MCP + Talk to Figma MCP** 三者是关键连接：agent 读你的 brief、通过 Stitch 出首稿、在你编辑器里精修，然后把结果写回 Figma 让工程接走。没有 agent 你就要一只一只手动驱动工具；没有 Figma MCP 你的交付就退回到「截图上画红线」。\n\n## 你会遇到的取舍\n\n- **AI 出稿 vs 手工布局** — Stitch 在「首稿成本低的探索」上最快（营销变体、设置页、内部工具）。在「布局本身就是差异化」的场景最差。用它跳过空白画布；屏要有专属感时换回手工。\n- **Figma 插件 vs 独立编辑器** — Talk to Figma MCP 让你留在 Figma，那里的协作和工程交付都最成熟。Open Pencil 和 Penpot 是独立编辑器、AI 内建。组织跑 Figma seat 就留；solo 设计师或没 Figma 的团队，Open Pencil \u002F Penpot 帮你省下 $15\u002Fseat\u002F月。\n- **Together AI vs ComfyUI** — Together AI 一发命中、托管、每图 $0.003-0.05。ComfyUI 本地、节点图、GPU 成本之后免费，是 ControlNet 级精度（用这个人物的姿势、这个产品的轮廓）的唯一路径。先上 Together AI；要做品牌可复现的图像生产再升级 ComfyUI。\n- **Lucide vs Heroicons vs Phosphor** — 三个都维护良好。Lucide 进 pack 是因为 v0 和其他 AI 生成器默认就拿它 —— 上游选了，交付时就少换图标。住 Tailwind UI 就 Heroicons；要 weight 变体就 Phosphor。\n- **brand-guidelines skill vs 人工品牌审查** — skill 抓 *系统性* 漂移（主色 hex 错、字体跑偏、间距不一致）。它抓不了 *叙事* 漂移（hero 文案的语气、摄影风格、插图情绪）。用 skill 清理机械违规；剩下的人工审。\n- **Penpot vs Figma vs Sketch** — Penpot 是这里唯一完全开源的。真实团队上它要么因为 Figma 涨价终于过了痛点门槛，要么因为合规要求自部署。功能上 ~80% 的设计工作能持平；你会想念 Figma 的 variants、dev mode 精修、插件生态。\n\n## 常见踩坑\n\n- **过度依赖 AI 品味** — Stitch、Open Pencil、Together AI 都会出 *合格但没观点* 的东西。出合格越快，就把合格出得到处都是 —— 看完就忘。AI 接 70% 的机械脚手架，把省下的时间砸在让作品有差异化的 30% 上。\n- **资产授权混乱** — AI 生成图的法律环境在动。Together AI 的 FLUX 输出一般可商用；ComfyUI 的输出取决于你叠的基础模型和 LoRA。在设计文件里记下每张图的模型 + 授权，客户活尤其要 —— 因为 brief 可能指明来源要求。\n- **「以后再说」推迟 design-md-figma** — 没导出 token，每个 AI 工具都在猜你的色板和间距 scale。两周后 agent 在不同物料里发明了 14 种「品牌蓝」。第一天就导出 DESIGN.md；系统真改了再重新导。\n- **把 brand-guidelines skill 当唯一 QA** — 它抓系统性违规，不抓叙事性。一个页面可以通过品牌检查但仍然「不对味」 —— 摄影太通用、文案语气错、布局和竞品一样。用作关卡，不是绿灯。\n- **让 Stitch 输出直接进工程** — 任何 AI 工具的首稿在缩略图大小看都对，到细节就崩（对齐、层级、microcopy）。交付 MCP 接走之前，至少在 Penpot \u002F Open Pencil \u002F Figma 里过一遍编辑。工程的 agent 会继承每一处错位。\n- **没匹配团队成熟度选编辑器** — 有 ops 支持时 Penpot 自部署很爽，没有就很折磨。Open Pencil 令人兴奋但还很早（#4720 在 TokRepo 上目前几乎零使用量）。Figma 无聊但靠谱。工具成熟度要匹配团队耐心。\n\n## 这个 pack 故意没放什么\n\n没有 Adobe XD、没有 Sketch、没有 Framer Sites、没有 Webflow。这些是成熟的商业产品，不需要一份精选 AI pack —— 它们各自的生态覆盖了 AI 角度。这个 pack 是 AI 原生的边缘：尽量开源、MCP 驱动、agent 当指挥官。如果你住在 Adobe Creative Cloud 里、每月付 $60，没问题 —— brand-guidelines (#75) 和 Together AI (#776) 仍然能插进你的日常。",[111,114,117,120,123],{"q":112,"a":113},"我是品牌设计师，不是 UI 设计师，这 pack 对我还有用吗？","十个里有六个直接翻译：UI Designer agent (#4381) 做调度、Together AI (#776) 和 ComfyUI (#208) 做图像生成、Lucide (#1009) 做品牌系统里的图标活、design-md-figma (#3599) 记录品牌 token、brand-guidelines (#75) *本身就是* 品牌 QA skill。Stitch (#151) 和 Open Pencil (#4720) 对纯品牌活适配较弱（它们针对 UI 流程）。Penpot (#890) 和 Talk to Figma MCP (#3241) 如果你也做品牌应用（deck、网页）有用 —— 只交付品牌手册的话跳过。",{"q":115,"a":116},"每个都装吗？能不能先上手三个？","先上三个：UI Designer agent (#4381)、Talk to Figma MCP (#3241)、brand-guidelines (#75)。光这三个就够 agent 读你现有 Figma 文件、提改动建议、对输出做品牌检查。再加 Stitch MCP（如果你常对着空白画布发呆）、再加 Together AI 做图像资产。独立编辑器（Open Pencil、Penpot）承诺更大 —— agent 回路跑顺之后再试。",{"q":118,"a":119},"整套跑下来一个月多少钱？","大部分免费：Penpot、Open Pencil、Lucide、ComfyUI、design-md-figma、brand-guidelines、agents 是开源或 Claude Code 订阅自带。Figma seat（如果保留）$15\u002Fseat\u002F月。Together AI 图像生成大约每图 $0.003-0.05 —— 一个干活设计师按 $10-30\u002F月预算。ComfyUI 有本地 GPU 就免费；租 GPU 服务 $0.50-2\u002F小时。agent 背后 LLM 账单是浮动项：按量 $20-60\u002F月。",{"q":121,"a":122},"AI 生成的 mockup 真能上生产吗？还是我得重画？","实话：Stitch 和 Open Pencil 的首稿交付前要过一遍 —— 对齐、层级、microcopy、无障碍标注。预期花从零画 30-50% 的时间。赢的不是「AI 画终稿」，是「AI 3 分钟把你带过空白画布，让你把一天花在那 30% 差异化的地方」。把输出当结构性起点，在你编辑器里精修，出文件前跑 brand-guidelines (#75)。",{"q":124,"a":125},"为啥 pack 里没有 Midjourney \u002F Adobe Firefly 这类 AI 插画工具？","Together AI (#776) 和 ComfyUI (#208) 覆盖了 AI 图像生成这一档，授权开放、能接进 Claude Code agent 回路。Midjourney 很优秀但住在 Discord 里、没有给 agent 驱动工作流的 API；Adobe Firefly 如果你已经在 Creative Cloud 还行，对该生态外的设计师相对 Together AI 没增值。Pack 挑的是能插进 agent 的工具；其他都是很好的独立工具可以叠加。",{"@context":127,"@type":128,"name":13,"description":129,"numberOfItems":130,"inLanguage":131},"https:\u002F\u002Fschema.org","ItemList","十个 AI 资产，覆盖视觉 \u002F 产品 \u002F 品牌设计师从调研到品牌守门的完整 pipeline —— 调度 agent、AI 出稿、编辑器、图像资产、交付管道、品牌 QA —— 按推荐安装顺序排列。",10,"zh-CN",[133,137,141],{"url":134,"anchor":135,"reason":136},"\u002Fzh\u002Fai-tools-for\u002Fdesign","TokRepo 设计 AI 工具集","本 pack 的工具属于更大的设计类目",{"url":138,"anchor":139,"reason":140},"\u002Fzh\u002Ftopics","浏览其他主题 pack","相邻主题包含前端工程、MCP、图像生成等",{"url":142,"anchor":143,"reason":144},"\u002Fzh\u002Ffeatured","TokRepo 精选资产","这十个属于更大的 agent-ready 精选目录",[146,150,154],{"claim":147,"source_name":148,"source_url":149},"Penpot 是开源的设计与原型平台，文件为 SVG 原生格式","Penpot 官网","https:\u002F\u002Fpenpot.app\u002F",{"claim":151,"source_name":152,"source_url":153},"Lucide 是社区维护的图标工具包，1,500+ SVG 图标，MIT 协议","Lucide 官网","https:\u002F\u002Flucide.dev\u002F",{"claim":155,"source_name":156,"source_url":157},"Google Stitch 是基于文字 prompt 生成 UI 屏的 AI 设计工具","Google Stitch 介绍","https:\u002F\u002Fstitch.withgoogle.com\u002F",1150,"2026-05-22T13:30:00Z"]