• 第一步：头脑倾泻 — 低摩擦，就是王道
  • 第二步：界定范围与规划 — 定位核心价值
  • 第三步：“粗糙初稿” 搭建 — 从 “能用” 开始
  • 第四步：创意总监模式 — 以挑剔视角，拆解重构
  • 第五步：迭代优化 — 功能先行，暂别视觉精致
  • 第六步：重构梳理与留存上下文 — 为精准设计铺路
  • 第七步：Figma 精细化设计 — 回归专业，打磨质感
  • 第八步：重新搭建原型 — 衔接设计与落地
  • 第九步：交付开发 — 专业开发者，依旧无可替代
  • 结语：工具更迭，设计本质从未改变
 

 

每天都在被取代和被取代的路上，近期新工具层出不穷，也在持续关注行业里走在前沿的团队和设计师是如何运用的，他们目前究竟把 AI 用到了什么程度？

 

最近在 X 上看到一位知名设计师分享的全新工作流，步骤不算短，但格外真实、落地，没有 “一键出稿”、“三步搞定” 的噱头，反而完整呈现了 AI 如何真正融入设计全流程。今天就把这套方法整理分享给大家，希望能给同样在探索、尝试 AI 工具的你，带来一些实用灵感。

 

 

 

 

全文图片均来自网络（Behance Doug Rodas）

第一步

头脑倾泻 - 低摩擦，就是王道

 

这是我随心口述、释放思绪的环节。内容可能是与同事的对话，也可能是自言自语，或是按住听写键，结合手头所有信息，天马行空地梳理待解决的问题。我个人最常用的听写工具是VoiceAI —— 此刻我正用它记录这些内容。

若涉及与他人的沟通，我会直接将通话转录稿导入 Claude，不做结构化处理、不整理、不分类、不补充上下文，把项目相关的所有信息一股脑投喂给它。
有时我甚至不说明粘贴内容的目的，只说：“这是一份转录稿，你自行梳理。” 目前我用 Notion 的录音功能完成这类操作，但若有专门为此设计的工具，我会很感兴趣。对我而言，Notion 更便捷，毕竟团队所有文档都存储于此。

低门槛、高效率，才是核心。

 

第二步

界定范围与规划方案 - 定位核心价值

 

这一步，Claude Code 的价值尤为突出。我与它反复沟通、补充上下文，它会提出极具启发性的问题，而我在描述问题的过程中，也能更深刻地理解核心诉求。
我将 AI 当作研究助手，持续深挖问题，同时分配子任务：让它完成网络搜索、生成文件与表格、撰写相关 Markdown 文档，还会从其他有权限的渠道调取关联资料。
简单来说，这一步就是在海量信息中筛选关键线索，或是定位可能藏有核心价值的信息领域。
 
 

 

第三步

“粗糙初稿” 搭建 - 从 “能用” 开始

 

这是至关重要的一步，起初我颇为抵触，如今却深知其价值。

AI 在设计层面的能力十分薄弱。

我指的并非 UI 视觉，而是应用架构、交互提示、文案细节、页面布局、与现有产品的融合度 —— 所有能让产品使用起来流畅顺手的设计维度。

表现得尤为糟糕。

但我并不在意。
我发现，像 Claude Code 这类工具产出的粗糙设计，反而有一个巨大优势：为我提供了一个更优的起点。
无需从空白画布开始，也不必基于不完全契合需求的现有功能迭代，而是从一个设计粗糙、实现简陋但功能完整的版本起步。
接下来，真正的创作便开始了。
 
 

 

第四步

创意总监模式 - 以挑剔视角，拆解重构

 

我以极致挑剔的视角审视这份粗糙的产品，直接指出问题，而非给出建设性反馈，比如：“这部分太粗糙了，把 X、Y、Z 优化掉。”
我会梳理所有边界场景、特殊情况、缺失的页面、各类异常状态与交互提示，明确信息展示的必要性，将内容精简至核心本质。
AI 设计倾向于 “过度堆砌”，会把色彩、标签、图标、标题、分类、卡片杂乱地铺满页面，在外行看来形似产品，实则设计逻辑混乱。
放在过去，这样的初稿几乎等同于 “死刑”，修正这些不合理设计的成本曾高到难以承受。

但如今，一切都变了。

现在，推翻不合理设计的成本几乎为零。我一天内可以从零开始重构十次，将粗糙的原型拆解到核心框架，再在数小时内重新搭建。
这份简陋的雏形、粗糙的应用，只是新生作品的 “基石”。我的任务，就是从中挖掘优化的可能。
我以总监的身份，标注批注、梳理信息展示逻辑，清晰感知到：若经过专业设计，产品最终会呈现出怎样的体验。
 
 

 

第五步

迭代优化 - 功能先行，暂别视觉精致

 

这一步我会使用 Vibe Coding 等工具，在不借助 Figma 或其他传统设计软件的前提下，尽可能优化应用结构与 UI 表现。
我会确保信息在合适的时机呈现、信息架构趋于合理、应用运行流畅，且具备预期的所有功能。但即便它看起来初具雏形，设计层面仍显粗糙，需要进一步打磨。
它依然缺乏精致感。

尚未达到 “专业设计” 的标准。

文本与语音作为设计媒介，精准度不足，无法深入细节、打磨质感、设计图标、统一组件规范，也难以理清各模块的关联、元素复用逻辑，以及与整体应用的融合方式。
在这个阶段，AI 容易出现问题：新增功能时，它会随意添加新组件、新按钮样式，遗忘已创建的元素，导致原型愈发臃肿。
持续在这个阶段迭代看似诱人，却存在明显瓶颈，无休止地停留只会徒劳无功。
这一步适合收集利益相关方的反馈，了解用户的交互习惯，让团队成员直观看到成果，推动团队层面的沟通与讨论。
当团队成员清晰了解工作进展与处理思路后，就该彻底告别这份粗糙雏形，进入下一阶段。

 

 

 

 

第六步

重构梳理与留存上下文 - 为精准设计铺路

 

前五个步骤产出的应用虽有雏形，但充斥着冗余代码、模糊的设计决策，以及对内容定位与本质理解不到位的上下文信息。
这一步，我会让 Claude 新建文件夹，以 Markdown 格式记录上下文、历史逻辑与约束条件，为后续开发提供参考。

仅留存 Markdown 文档，不保留代码。

本质上是从零开始，但会基于前期的转录稿与现有代码，为应用的优化版本提供依据。
同时，我会截取所有场景的截图：各类状态组合、特殊情况，以及所有需要在专业层面优化设计的内容。

 

 

 

 

第七步

Figma 精细化设计 - 回归专业，打磨质感

 

就在三个月前，我还会从这一步启动设计。如今回想，反差巨大。
我结合所有截图与上下文信息，绘制用户流程图，再进入 Figma，以专业设计逻辑搭建应用：运用自动布局、规范配色、复用设计系统、统一排版与设计令牌，回归传统设计的核心流程。
说实话，经过前期的铺垫，这一步看似缓慢，却是产出高质量精致作品的关键。
目前存在明显的工具短板：虽能从应用中提取编码元素生成 Figma 界面，但我对转换工具的可靠性存疑，毕竟在 Figma 中还会进行大量探索性设计。
在这个阶段，我可以大胆尝试：优化交互提示、调整文案细节、尝试不同布局方向，覆盖应用的所有设计维度。在 AI 辅助阶段高成本的操作，在 Figma 中变得高效，反之亦然。
我发现，这个阶段最容易进入心流状态，能探索更多方案，想出此前未曾想到的创新解法 —— 因为此时的核心是视觉设计，而非梳理思路或理解应用组件。
设计过程中，我会同步分享截图、制作 Figma 原型、与团队沟通，确认设计方向的合理性。
必须强调，在这一步之前，所有 UI 设计都较为粗糙，我与团队沟通时会明确说明：

“无需关注视觉表现，重点看功能逻辑。”

我还能更自由地验证此前未落地的想法，最终产出的内容也无需像以往那样面面俱到 —— 大量构思已在前期完成，无需再设计过多页面。
但最终的成品，精致度远非 AI 所能比拟。

 

 

 

 

第八步

重新搭建原型 - 衔接设计与落地

 

我结合所有设计文件与上下文文档，在 IDE 工具中开启新对话，仍处于规划阶段。
这一步，我需要明确项目范围，基于新的原型稿梳理 AI 的疑问，确认原型解决的问题是否与前期上下文存在冲突 —— 这种情况大概率会出现，必须逐一梳理清晰。
这也是整个流程中我最不喜欢的环节。
Figma 的 MCP（模型上下文协议）功能有限，截图也无法满足需求，但目前我只能依赖这些工具…… 暂时如此。
理想状态下，我希望能传递应用截图、所有组件的名称与截图、完整的组件结构、文案内容、色彩规范，以及截图之外的更多设计信息。
同时，我也希望能传递原型的 JSON 文件，清晰展示所有状态逻辑。
Figma 原型在用户流程设计上十分便捷，但处理复杂交互、列表元素或数据驱动的动态内容时，能力有限。我仍想使用它，但需要更高效的方式，将其中的设计数据传递给 AI 进行搭建。
我认为 Figma 现有的开发者交付功能极具潜力，希望能标注设计细节、与 AI 沟通功能实现方案。若 AI 能针对设计文件提问，结合已有上下文，甚至指出设计中的潜在问题，将极大提升效率。
这与我和专业开发者的沟通逻辑完全一致。
当所有内容搭建完成，形成功能完善、逻辑合理、性能流畅的原型后，便进入第九步。

 

 

 

 

 

第九步

交付开发 - 专业开发者，依旧无可替代

 

我始终认为，优秀的专业开发者无可替代。AI 目前仍无法解决这一环节的核心问题，这一步依旧至关重要。
性能优化、功能实现、API 对接、代码架构、与其他开发项目的协同、功能集成、高效组件的选用 —— 所有这些都需要开发者具备专业的上下文理解能力。
虽然我可以将代码推送至 Vercel 生产环境，但除了小幅调整与 UI 修改外，我不会这么做。这一步的流程与以往相似：将设计成果交付给开发者，由他们在生产环境中落地实现。
若为个人网站或自用项目，这一步可省略。若是营销类网站，或不涉及海量用户、大额资金的项目，设计师完全可以自主发布前端代码。或许未来会有变化，但我更信任专业开发者 —— 他们具备严谨的专业背景，清楚问题出现时的应对方案。

 

 

 

总结

 

我认为核心差异在于规划环节，以及交付给开发者的成果。不再是静态的流程与原型稿，而是静态设计稿搭配有状态、集成化、高性能、体验逼真的动态原型。它可在任意设备上运行测试，还能基于搭建原型的 AI 继续优化设计，无需深入生产代码与复杂逻辑。
我不知道这个工作流会持续多久，工具、流程、复杂度都可能发生变化，但梳理后会发现，这本质上依然是设计。
依然是探索解决方案的过程。
依然是创造价值、进入心流的过程。
区别仅在于工具的选择，以及使用工具的先后顺序。
那么，你的呢？