设计师用 Fable、MCP 和 Sketch 搭出 2026 工作流
michalmalewicz · x · 2026-07-21
一位设计师分享了自己到 2026 年的完整 AI 设计工作流，核心是把 AI 放在“重复劳动”上，把关键判断留给人工。
工作流大致分成 10 步
- 先做需求收集和竞品分析。
- 写用户故事。
- 用 Fable 把用户故事转成 flow diagram。
- 手动给流程图加注释，修正 AI 错误，并补齐每个界面的 UI 元素。
- 导出为 JSON，再用 Fable 生成 HTML/CSS 原型，还会带上两个自定义 .MD 文件用于 lo-fi 风格和原型导航。
- 测试可点击的低保真原型。
- 需要时手动改 HTML 代码。
- 通过 MCP 把 HTML 导入 Sketch，作为按具体 div/section 命名的 frames。
- 在 Sketch 里做高保真设计。
- 再把样式导回给开发者。
作者的结论
这套流程比以前快了大约 20%，而且覆盖了更多边缘情况。作者强调，关键不是“AI 能不能全自动”，而是要知道它适合做哪里、哪些地方必须人工介入，尤其是定义 box 里的内容、去重和去 slop。作者还表示，步骤 2–6 的内部工具会在几周后作为可自部署的产品发布。
「应用」频道最新
- Whop 推出 CLI，业务开始能在终端里程序化运行 — eptwts · 2026-07-21
- 业务聊天机器人只有依赖内部文档时才该上 RAG — recro69 · 2026-07-21
- HandoffAI 称 H1 可像人工估算员一样自动做建筑算量 — ycombinator · 2026-07-21
- 一家隐私邮件服务商在为 AI agent 做邮件，已积累 2000 个账号 — Atomic_Ke · 2026-07-21
- 开源 PenEcho AI 白板开始渲染交互式动画解释 — Civil-Direction-6981 · 2026-07-21
- Gamma 展示个性化 AI 导师概念，实时适配每个学生 — ahuja_priyank · 2026-07-21