1. 项目概述：当“说”成为新的设计工具

最近，我的Figma文件打开频率直线下降，取而代之的，是我对着电脑屏幕“自言自语”。这听起来有点奇怪，但如果你体验过Claude Code搭配特定Skill的工作流，你就会明白，这绝非天方夜谭。所谓的“用嘴做设计”，并不是真的靠声波震动生成像素，而是指通过自然语言指令，驱动AI编码工具Claude Code，结合能够连接设计软件（如Figma）的Skill（技能插件），直接生成或修改设计稿的代码实现。这本质上是一种“自然语言驱动的前端开发与设计对接”模式。

这个工作流的核心价值在于，它极大地压缩了从想法到可视原型的路径。传统上，一个产品想法需要经历“需求讨论 -> UI设计师在Figma中绘制静态稿 -> 标注切图 -> 前端工程师手动编码实现”的漫长链条。而现在，对于许多标准化的、组件化的界面需求，我可以通过描述直接让AI生成可运行的代码，甚至通过Skill同步更新到Figma的对应画板中，实现双向或多向的同步。这并不意味着设计师要失业，而是意味着设计师和工程师的“语言”壁垒被打破了，我们可以用更接近人类思考的方式——“说”——来快速搭建和迭代数字产品的骨架与皮肤。

它最适合谁呢？我认为是三类人：一是独立开发者或创业小团队，资源有限，需要一人分饰多角，这个工具能让你快速验证想法；二是前端工程师，可以用它来快速生成重复性的UI组件代码，或者将设计稿快速转化为代码框架；三是具备一定技术理解的产品经理或UI/UX设计师，你可以用它来制作高保真的交互原型，而不必深陷于代码细节。当然，它的前提是你需要对网页技术（HTML/CSS/JS）和设计工具的基本逻辑有了解，否则你甚至不知道该如何准确地“描述”你的需求。

2. 核心工作流与工具链拆解

要理解“用嘴做设计”如何实现，我们必须拆解其背后的工具链。这个链条通常由三部分组成：自然语言交互界面（Claude Code）、执行引擎（Skill）、目标平台（Figma）。每一环的选择和配置都决定了最终体验的流畅度。

2.1 Claude Code：你的“翻译官”与“指挥官”

Claude Code并不是一个独立的、全新的软件，它本质上是Anthropic公司推出的Claude模型的一个特定应用模式或界面优化，专注于理解和生成代码。你可以把它想象成一个极度擅长编程的对话伙伴。它的核心能力在于：精准理解你用自然语言描述的界面功能、交互逻辑和视觉样式，并将其转化为结构清晰、语法正确的代码（主要是HTML, CSS, JavaScript，以及React、Vue等框架的代码）。

为什么是Claude Code，而不是其他AI编码助手？从我的实测体验来看，Claude Code在代码生成的逻辑一致性和对上下文的长期记忆方面表现突出。当你描述一个复杂的、多步骤的交互时，它能更好地记住之前设定的状态、变量和组件关系。例如，你让它“创建一个登录模态框，背景是半透明黑色，表单包含邮箱和密码输入框，下方有‘登录’和‘忘记密码’按钮”，它不仅能生成对应的HTML结构，还会附上完整的CSS来实现半透明遮罩、表单样式和按钮悬停效果。更重要的是，你可以接着命令：“现在，给登录按钮添加一个点击事件，如果邮箱或密码为空，则在对应输入框下方显示红色错误提示文字”，它能基于已生成的代码进行准确的修改和扩充。

注意：Claude Code本身并不直接操作Figma。它是一个“大脑”，负责理解和规划。你需要告诉它输出的代码格式（比如，是要纯粹的HTML/CSS/JS，还是React组件），以及如何与下一步的Skill进行对接。

2.2 Skill：连接想法与现实的“桥梁”

Skill是这里真正的魔法所在。在Claude的生态中，Skill可以理解为一些预定义的功能插件或API接口，能够扩展Claude的能力，让其与外部工具（如Figma、GitHub、数据库等）进行交互。对于“用嘴做设计”这个场景，关键的Skill就是那些具备Figma API操作能力的Skill。

这类Skill的工作原理是：它作为中间件，接收来自Claude Code的指令和生成的代码，然后通过Figma的官方REST API或插件API，对Figma文档进行增删改查操作。例如，一个典型的指令流可能是：“使用Figma Skill，在‘首页’画板中创建一个新的Frame，宽度375px，高度667px，然后将我刚生成的登录框组件的代码样式同步到这个Frame中，生成对应的矢量图形和文本图层。”

目前社区和第三方开发者已经创建了一些相关的Skill原型或集成方案。有些Skill专注于从Figma到代码，即解析Figma设计稿，生成代码片段；而我们这里需要的恰恰是反向流程——从代码到Figma，或者至少是双向同步。这要求Skill不仅能“读”Figma，还要能“写”Figma。实现这种Skill需要开发者对Figma API的节点创建、样式应用有深入理解。

2.3 Figma：从静态画布到动态数据接收端

Figma在此工作流中扮演着最终成果的“容器”和“可视化预览器”角色。传统上，Figma是设计的起点；而在这个新模式里，它也可以成为代码产出的终点之一。通过Skill同步后，在Figma中你会看到由代码生成的、精确的矢量图形和文本。这带来了几个好处：

1. 设计系统同步：生成的UI元素可以严格遵循你在Figma中定义的设计系统（颜色、字体、间距、圆角等）。Skill在同步时，可以调用Figma的本地样式，确保视觉一致性。
2. 团队协作无缝：设计团队的其他成员仍然可以在熟悉的Figma环境中查看、评审甚至微调这些由AI生成的界面，无需接触代码。
3. 高保真原型基础：生成的界面不再是冰冷的代码文件，而是在设计工具中可进一步添加交互原型（如通过Figma的Prototype功能连接页面）的素材，使得产品演示更加直观。

然而，这里有一个必须面对的现实挑战：还原度。正如一些网络讨论中提到“Figma MCP还原度很低”，通过API将代码样式100%精准地映射为Figma的矢量图形是极其复杂的。CSS的某些效果（如复杂的阴影、渐变、CSS Grid布局、Flexbox的细微对齐）在转换为Figma的图层和效果时，可能会有损耗或差异。因此，目前的实践更多是生成核心的结构和基础样式，复杂的视觉细节可能仍需设计师手动调整优化。

3. 实操搭建：从零构建你的“语音设计”环境

理论讲完，我们来点实在的。下面是我经过多次尝试后，总结出的一套相对稳定可用的环境搭建与基础操作流程。请注意，由于相关Skill和集成方式仍在快速演进中，以下步骤可能涉及多个工具的配合使用。

3.1 基础环境准备

首先，你需要确保拥有以下几个基础账户和工具：

1. Claude.ai 账户：访问Anthropic官网，注册并开通Claude的使用权限。通常你需要选择支持Claude Code的套餐（如Claude Pro）。
2. Figma 账户：免费版即可，但为了API调用更顺畅，建议使用专业版。
3. Figma 个人访问令牌：这是让外部程序（Skill）操作你Figma账户的钥匙。
   • 登录Figma，点击右上角头像 -> “Settings”。
   • 左侧找到 “Account” 下的 “Personal access tokens”。
   • 点击 “Create new token”，为其命名（如“ClaudeCodeSync”），权限至少需要包含：file_read,file_write。创建成功后，立即复制并妥善保存这个令牌字符串，它只会显示一次。
4. 代码编辑器与本地服务：你需要一个本地环境来运行和测试Claude Code生成的代码，同时可能作为一些本地Skill的宿主。推荐使用VS Code。

3.2 配置Claude Code与Skill的连接

这是最关键也最易出错的一步。目前没有一个官方的、一键式的“Figma Skill”可供直接安装。常见的实现方式有两种：

方案A：利用现有的“代码转设计稿”工具链进行桥接有些开源项目或在线工具能够将HTML/CSS代码转换为Figma认可的JSON格式或直接通过API创建图层。你可以指示Claude Code生成代码后，再手动或通过脚本调用这些工具。例如：

1. 让Claude Code生成一个完整的、独立的HTML文件。
2. 使用像html-to-figma这类开源库（需要一定的Node.js环境），将生成的HTML文件转换为Figma API可接受的格式。
3. 编写一个简单的Node.js脚本，使用你的Figma个人令牌，调用Figma API的POST /v1/files/:file_key/nodes等接口，将转换后的数据创建到指定的Figma文件中。

方案B：使用支持自定义集成的AI工作流平台（如Zapier、Make、n8n）这些平台可以作为“胶水”，连接Claude的API（如果开放）和Figma的API。你可以在平台上配置这样的工作流：当你在特定平台（如一个笔记应用）中写下设计描述 -> 触发平台调用Claude API生成代码 -> 解析代码 -> 调用Figma API创建图层。这种方式无需编程，但配置复杂，且依赖平台对Claude API的支持度。

方案C：期待社区成熟的Skill密切关注Claude的Skill开发社区。已经有开发者在尝试创建类似的集成。一旦有公开可用的Skill，配置过程通常会简单很多：在Claude的Skill设置页面，找到该Skill，输入你的Figma个人访问令牌和需要操作的文件ID，即可完成授权绑定。

实操心得：在现阶段，完全自动化的“一句话出设计稿”体验还不完美。我更常用的模式是“半自动”。即：我用语言让Claude Code生成高质量、可运行的代码，然后在本地浏览器中预览、调试。确认无误后，我手动将核心的尺寸、颜色、字体、间距等样式数据，作为设计规范补充到Figma的设计系统中，或者仅将代码作为参考，在Figma中快速重绘。这个“重绘”过程因为有了精确的代码参考，速度也比从零构思快得多。这其实是一种更高效的“人机协作”。

3.3 核心操作指令范例

假设我们采用“半自动”模式，核心交互发生在你与Claude Code之间。以下是一些高效指令的范例：

• 生成独立组件：

  “请用React（函数组件，使用Hooks）生成一个商品卡片组件。卡片包含商品图片（占位图即可）、商品标题（最多两行，超出省略）、价格标签（原价和折扣价）、一个‘加入购物车’按钮。样式使用Tailwind CSS。请确保组件样式美观、布局合理，并给出完整的组件代码。”

• 基于现有设计系统：

  “这是我Figma设计系统中的主要颜色和字体CSS变量定义：--primary: #007AFF; --font-family: 'Inter', sans-serif;。请基于这些变量，为我生成一个导航栏组件，包含Logo、三个导航链接和一个用户头像图标。导航栏在滚动时背景变模糊。”

• 交互逻辑描述：

  “为上面生成的登录模态框添加交互逻辑：1. 点击页面上的‘登录’按钮，显示模态框。2. 点击模态框背景或右上角的X图标，关闭模态框。3. 表单提交时，用console.log打印出输入的值。请提供完整的JavaScript实现。”

Claude Code会根据这些指令，生成可直接复制粘贴到项目中使用的代码块。你可以将其放入在线代码编辑器（如CodePen、JSFiddle）或本地项目中进行实时预览。

4. 优势、局限与最佳实践

任何新技术工作流都有其适用边界。狂热追捧或全盘否定都不可取，理性分析才能让它真正为你所用。

4.1 无可比拟的效率优势

1. 快速原型验证：在构思初期，我能用几分钟时间“说”出几个关键页面的框架代码，并立即在浏览器中运行查看效果，比在Figma中拖动组件搭建静态稿更快，且是“可交互”的原型。
2. 打破沟通壁垒：与非技术背景的同事讨论时，“我想要一个那种滴滴打车地图上车辆平滑移动的效果”这样的描述，可以直接转化为一段使用requestAnimationFrame实现平滑动画的JavaScript代码示例，沟通效率极高。
3. 代码片段生成器：对于已知样式、但编写起来繁琐的CSS效果（如复杂的加载动画、渐变边框、网格布局），用语言描述生成比手动编写调试更快。
4. 设计一致性辅助：通过让AI基于同一套设计变量生成多个组件，可以在代码层面保证基础样式的一致性，减少因手动编写导致的细微差异。

4.2 当前存在的核心局限

1. 像素级还原的鸿沟：正如前文所述，代码与Figma矢量图形之间的无损转换仍是难题。AI生成的界面在浏览器中完美显示，但同步到Figma后，图层结构可能混乱，高级CSS效果丢失。
2. 复杂交互与状态管理：对于涉及复杂状态流转、数据管理的交互（如一个多步骤的表单向导、拖拽排序列表），仅靠自然语言描述很难让AI一次性生成完美、可维护的代码。通常需要拆解成多个步骤，并人工介入架构设计。
3. 设计审美与创新瓶颈：AI生成的设计偏向于“常见、合理”的解决方案，缺乏真正突破性的、富有情感和品牌个性的设计创意。它更像一个高效的执行者，而非创意发起者。
4. 工具链的脆弱性：依赖多个工具（Claude、Skill、Figma API）的串联，任何一环的更新、API变动或网络问题都可能导致整个流程中断。

4.3 我的最佳实践建议

基于这些优势和局限，我总结出以下让这个工作流价值最大化的使用原则：

1. 明确分工：AI做“砖瓦”，人做“架构”与“精装”。将重复性、标准化的UI组件生成（按钮、卡片、表单、表格）交给AI。而整体的页面信息架构、复杂的交互动效、品牌视觉风格的定调，以及最后对AI产出的视觉细节打磨，必须由人来主导。
2. 采用“代码先行，设计同步”的迭代模式。对于新功能，可以先用Claude Code快速产出可交互的代码原型，进行功能逻辑验证。待逻辑跑通后，再将确认的布局、尺寸、色彩等核心样式反哺到Figma设计稿中，进行视觉优化和设计系统归档。这样，设计和开发几乎是并行推进的。
3. 积累你的“提示词库”。将你常用的、能产出高质量结果的指令模板保存下来。例如：“生成一个符合ARIA标准的、支持键盘导航的树形菜单组件，使用React和TypeScript，样式用CSS Modules。” 精准的提示词能极大提升输出质量。
4. 将输出视为“高级草稿”。不要期望AI一次生成生产级代码。生成的代码需要经过审查、重构、集成到项目代码规范和架构中。但它提供了一个远超空文件的、高质量的起点。

5. 常见问题与故障排查实录

在实际操作中，你肯定会遇到各种问题。下面是我踩过的一些坑和解决方案，希望能帮你节省时间。

5.1 Claude Code相关问题

问题1：生成的代码结构混乱或不符合项目规范。

• 排查：检查你的提示词是否足够具体。是否指定了框架（React/Vue/Svelte）？是否指定了样式方案（纯CSS/Tailwind/Styled-Components）？是否说明了组件是类组件还是函数组件？
• 解决：在提示词开头就定好基调。例如：“请使用Vue 3的<script setup>语法，配合组合式API，并使用Element Plus组件库，生成一个带分页和筛选功能的表格组件。”

问题2：AI不理解某些特定的业务逻辑或交互。

• 排查：你的描述可能过于笼统或隐含了未说明的上下文。
• 解决：将复杂逻辑拆解成步骤，分多次对话完成。先让AI生成静态UI，再在后续消息中描述交互。使用伪代码或举例说明会很有帮助。例如：“第一步，生成一个列表UI。第二步，为每个列表项添加一个复选框。第三步，实现一个全选按钮的逻辑：当点击全选时，所有项被选中；当所有项都被手动选中时，全选按钮自动变为选中状态。”

5.2 Figma同步与Skill相关问题

问题3：找不到可用的、稳定的Figma Skill。

• 现状：这是目前最大的瓶颈。成熟的、开箱即用的Skill很少。
• 应对：
  • 关注社区：定期在GitHub、Reddit的r/FigmaDesign、r/ClaudeAI等社区搜索“Claude Figma Skill”、“code to figma”等关键词。
  • 降低预期，手动同步：采用前述的“半自动”模式。将Claude生成的代码在浏览器中截图，粘贴到Figma作为参考图，然后在其上快速绘制矢量版本。或者，只提取颜色、字体大小、间距等设计令牌，更新到Figma的设计系统中。
  • 探索替代工具：有些设计工具本身就在加强AI生成能力，或与AI编码助手有更深集成。可以保持对新兴工具的关注。

问题4：通过API创建的Figma图层样式不正确或位置错乱。

• 排查：这通常是CSS到Figma样式映射不匹配导致的。Figma的API对于阴影、渐变、边框等样式的参数格式有严格要求。
• 解决：
  • 简化样式：在让AI生成代码时，提示它“使用基础的、标准的CSS属性，避免使用实验性属性或过于复杂的复合样式”。
  • 分步创建：先创建基本的框架、矩形、文本图层，再通过API逐步添加填充、描边等样式，便于定位问题。
  • 日志调试：如果你是自己编写集成脚本，务必加入详细的日志，记录发送给Figma API的每个请求和响应，对比Figma官方文档检查数据格式。

5.3 工作流整合问题

问题5：整个流程感觉割裂，操作繁琐，没有想象中流畅。

• 分析：这是因为工具链尚未无缝集成。你需要在聊天界面、代码编辑器、浏览器、Figma之间来回切换。
• 优化：
  • 打造个人工作台：使用VS Code作为核心工作区。安装Claude Code的相关插件（如果可用），在编辑器内直接与AI对话并插入代码。同时，在VS Code中集成Figma的插件或使用命令行工具来操作设计文件。
  • 建立自动化脚本：对于重复操作，比如将生成的CSS变量自动转换为Figma的颜色样式，可以写一个小的Node.js脚本来自动化处理。
  • 聚焦核心价值环节：不要追求全自动。识别出对你而言最耗时的环节（比如写重复的组件结构），用AI去攻克它。其他环节保持原有高效工作方式。

这个过程让我深刻体会到，当前AI工具带来的并非“替代”，而是“增强”。它没有让我的Figma真正“吃灰”，而是改变了它的角色。Figma从一个纯粹的创作起点，变成了一个集“灵感参考、样式规范库、设计评审中心、最终设计定稿容器”于一体的协同平台。而大量基础、重复的代码构建工作，则交给了更擅长此道的AI伙伴。我的角色，则更侧重于思考“要做什么”、“为什么这么做”以及“如何做得更优雅、更人性化”。这种分工的转变，或许才是“用嘴做设计”背后，更深层次的生产力解放。