1. 从“画”到“说”设计工作流的范式转移最近几个月我的 Figma 文件打开频率直线下降甚至一度吃灰。这并非因为我转行了而是我的设计工作流发生了一次根本性的转变。过去从产品原型到高保真界面我需要不断地在画布上拖拽组件、调整间距、匹配颜色。而现在我更多地是在和我的“新同事”——Claude Code 进行一场场对话。这个转变的核心是一个名为“Skill”的机制。它让我意识到设计的未来可能不再完全依赖于鼠标和像素级的精雕细琢而是转向了用清晰的语言描述意图由智能体来理解和执行。这听起来有点像天方夜谭但实际体验下来它解决了一些非常具体的痛点。比如当产品经理提出一个模糊的需求变更时我不再需要立刻打开 Figma 去猜测和尝试各种布局而是可以先用自然语言和 Claude Code 讨论“我们需要在用户个人主页顶部增加一个成就勋章展示区勋章是圆形带光泽的一行最多显示5个点击可以查看详情。请先帮我生成几种可能的布局草图描述。” Claude Code 基于它的理解能迅速给出几种结构化的方案描述甚至直接输出对应的前端组件代码框架。这种“对话即设计”的体验极大地加速了从想法到可视方案的早期探索阶段。当然这绝不意味着 Figma 这类专业设计工具会被完全取代。Figma 在精细化视觉设计、团队协作、设计系统管理和交互动效制作上依然拥有无可替代的地位。Claude Code with Skill 更像是一个强大的“设计副驾驶”或“概念加速器”。它擅长的是理解意图、快速生成方案、处理重复性结构代码以及基于现有设计规范进行扩展。当我们需要进行高保真视觉打磨、复杂的交互逻辑推敲或者与上下游进行像素级对齐时Figma 仍然是主战场。两者的关系从“替代”变成了“协同”。我的工作流变成了用 Claude Code Skill 进行快速构思和框架搭建然后将成熟的概念导入 Figma 进行深化和美化最后再借助 Skill 将设计稿的关键部分转化为可用的前端代码。这个流程让“设计”和“实现”之间的鸿沟被显著缩小了。2. 拆解 Claude Code Skill它到底是什么又如何工作要理解这个工作流如何运转我们必须先拆解“Claude Code”和“Skill”这两个核心概念。Claude Code 是 Anthropic 公司推出的专注于编程和复杂任务执行的 AI 智能体。你可以把它想象成一个拥有极强代码理解、生成和推理能力的专家级程序员伙伴。而“Skill”则是赋予 Claude Code 执行特定领域任务能力的关键模块。它不是简单的预设指令Prompt而更像是一个个可安装、可组合的“技能插件”。一个 Skill 通常包含几个核心部分清晰的任务描述、必要的上下文理解能力、一套可供调用的工具或 API以及成功执行任务所需的逻辑步骤。例如一个用于生成 UI 组件代码的 Skill其内部可能定义了如何理解“卡片”、“按钮”、“列表”等设计元素如何调用特定的前端框架如 React、Vue的代码库以及如何遵循给定的设计规范如颜色、间距、圆角。当用户用自然语言提出需求时Claude Code 会先判断哪个或哪些 Skill 最适合处理该请求然后激活相应的 Skill按照其内部逻辑调用工具并生成结果。那么这个 Skill 是如何与“设计”产生关联的呢关键在于许多社区开发者和团队已经创建了专注于 UI/UX 设计和前端开发的 Skill。这些 Skill 可能具备以下能力从描述生成代码这是最直接的应用。你可以描述一个组件“一个带有头像、用户名、简短简介和‘关注’按钮的用户信息卡片使用浅灰色背景和圆角。” 相关的 Skill 能够理解这些元素并生成对应的 HTML/CSS 甚至带有样式的 React 组件代码。设计规范解释与扩展你可以提供一个基础的设计系统规范例如主色、辅色、字体、间距阶梯然后要求 Skill“基于这个配色生成一个成功、警告、错误三种状态的按钮变体代码。” Skill 能够理解规范中的约束并生成符合一致性要求的新组件。布局与响应式处理描述一个复杂的页面布局比如“一个仪表盘左侧是导航栏顶部是全局搜索和用户菜单主内容区分为上下两部分上部是数据概览卡片网格下部是最近活动列表。需要适配从手机到桌面的不同屏幕尺寸。” 对应的 Skill 可以生成利用 Flexbox 或 CSS Grid 实现的响应式布局框架代码。与设计工具桥接虽然标题说“Figma 吃灰”是一种夸张但确实存在一些 Skill 或通过中间工具如 Codex尝试与 Figma API 进行有限度的交互。例如将 Figma 中的图层名称、尺寸和相对位置信息提取出来由 Skill 转换为结构化的代码注释或基础组件框架。不过目前这类集成在“还原度”和深度上还有很大局限更多是辅助性的无法替代设计师在 Figma 中的精细操作。其工作流程可以简化为用户自然语言指令 - Claude Code 意图识别与 Skill 匹配 - 激活特定 UI/Design Skill - Skill 调用内部逻辑与知识库 - 生成代码、方案描述或执行操作 - 输出结果给用户。这个过程的核心价值在于它将设计思维中“概念化”的部分与“实现化”的部分更流畅地连接了起来尤其适合快速原型、概念验证和设计系统扩展场景。3. 实战从零开始用 Claude Code Skill 完成一个设计需求理论说得再多不如亲手操作一遍。让我们以一个具体的、微小的需求为例看看如何在不打开 Figma 的情况下利用 Claude Code Skill 完成从概念到代码的闭环。假设我们的需求是为一个内部任务管理工具设计一个“任务卡片”组件用于在列表视图中展示单个任务的信息。第一步环境准备与 Skill 探索首先你需要一个能够运行 Claude Code 并管理 Skill 的环境。目前常见的方式是通过 Claude 的 API 配合支持 Skill 的客户端或开发框架或者使用一些社区封装的集成工具。例如在 VSCode 中安装相应的扩展配置好 Claude API 密钥后便可以在编辑器内直接与 Claude Code 对话并调用 Skill。注意Skill 的生态仍在早期并非所有公开宣传的 Skill 都稳定可用。建议从官方文档或活跃社区如 GitHub 上标星较高的项目中寻找经过验证的、与 UI 设计相关的 Skill。一个典型的安装过程可能类似于在命令行中运行claude-skills install ui-component-generator这样的命令。安装并激活一个你认为合适的 UI 组件生成 Skill 后就可以开始我们的设计了。第二步用自然语言描述设计需求这是最关键的一步也是与传统设计流程差异最大的地方。你需要从一个“描述者”而非“操作者”的角度来思考。你的描述需要尽可能清晰、结构化但不必涉及具体的像素值除非有严格要求。我会这样向 Claude Code 提出请求“请使用已激活的 UI 组件 Skill帮我生成一个任务卡片的 React 组件代码。这个卡片需要包含以下元素任务标题显眼最多显示两行超出部分省略。任务描述次要文字颜色较浅最多显示三行。标签区用于显示优先级高、中、低和分类如‘开发’、‘设计’。优先级用彩色小圆点表示分类用文字标签。负责人头像和姓名。截止日期如果已过期则标红。一个操作区包含‘标记完成’和‘更多选项’两个按钮。 视觉要求整体卡片有轻微阴影和圆角内部有合理的间距。使用现代简约的风格。”第三步解析与迭代 AI 的初版输出Claude Code 配合 Skill 会生成一段 React 组件代码可能是 Function Component 并使用 CSS-in-JS 如 styled-components 或 Tailwind CSS。初版代码很可能是一个可用的基础但几乎肯定需要调整。可能的问题1样式过于通用。生成的样式可能比较基础不符合你产品整体的视觉调性。这时你需要进行“设计对话”。你可以说“请将卡片的背景色改为我们设计系统中的浅灰色#f5f5f5标题颜色改为深蓝色#1a365d并将圆角从8px调整为4px以匹配我们的设计语言。”可能的问题2交互细节缺失。生成的按钮可能只有静态样式。你需要补充“请为‘标记完成’按钮添加点击事件处理函数函数名暂定为handleComplete。并为‘更多选项’按钮添加一个下拉菜单的交互状态鼠标悬停时背景色变深。”可能的问题3响应式考虑不周。初始代码可能只考虑了桌面端。你可以要求“请让这个卡片组件具备响应式能力。在移动端屏幕宽度小于768px时卡片变为全宽负责人信息和操作区上下排列而非左右排列。”通过这样多轮的、聚焦于具体细节的对话Claude Code 会不断修改和优化代码。这个过程本质上是你用语言在“编程”和“设计”。你会发现你思考的重点从“这个图标该放哪”变成了“这个信息的层级关系是什么交互逻辑如何”。第四步代码落地与整合当生成的组件代码满足要求后你可以直接将其复制到你的前端项目中。由于代码是结构化的、符合现代前端框架规范的整合工作通常很顺畅。你可以在真实的开发环境中运行它查看实际效果如果还有细微的样式偏差你可以选择继续用语言让 Claude Code 调整或者手动微调几行 CSS——这时你才可能需要短暂地离开对话回到代码编辑器进行最终打磨。通过这个实战流程一个可用的、带有基本样式和交互的任务卡片组件就从无到有被“说”出来了。对于快速增删改查类的后台管理系统、工具类产品的初期原型这种效率的提升是惊人的。4. 优势、局限与当前生态下的最佳实践拥抱 Claude Code Skill 进行设计辅助带来了显而易见的优势但也必须清醒认识其局限性。核心优势速度与效率的飞跃对于中低复杂度的、重复性的 UI 组件用语言描述生成的速度远高于手动绘制。特别适合快速搭建原型、生成设计系统衍生组件。打破工具与思维壁垒产品经理、开发者甚至不懂设计工具的业务人员都可以通过描述参与前期的视觉构思降低了沟通成本。设计意图能以更直接的方式传递。保证代码与设计的一致性直接生成的是可运行代码避免了从设计稿到代码的二次翻译过程中的失真。对于需要严格遵循设计系统的项目能减少偏差。专注于逻辑与体验设计师可以从繁重的“画图”劳动中部分解放出来将更多精力投入到信息架构、交互流程、用户体验深度优化等更高价值的工作上。无法回避的局限性精细控制力的缺失这是最大的短板。当你需要调整两个元素之间1像素的间距、追求完美的视觉平衡、创作复杂的插画或独特的交互动效时自然语言的模糊性无法满足要求。Figma 的像素级控制和无与伦比的视觉设计体验目前无法被替代。“还原度”问题正如热词中提到的“figma mcp 还原度很低”当前任何试图连接设计工具与代码生成的方案在复杂设计稿的还原上都不尽如人意。阴影、渐变、复杂路径、字体渲染细节等极易丢失。创意与探索的局限AI 基于现有模式生成在突破性的、前所未有的视觉风格探索上能力有限。设计的“灵感火花”和“艺术性”部分仍然高度依赖人类设计师的直觉和创造力。技能依赖与调试成本描述需求本身成为一种需要练习的技能。如何清晰、无歧义地表达当生成结果不理想时如何精准定位是描述问题、Skill 能力问题还是 Claude Code 理解问题这带来了新的调试成本。当前阶段的最佳实践基于以上优劣分析我总结出目前最有效的工作模式不是“二选一”而是“三段式协同”概念化与框架构建阶段Claude Code Skill 主场当需求还处于模糊期需要快速产出多种布局方案、组件结构时大力使用 Claude Code。通过对话快速生成多个代码原型在浏览器中实时查看效果进行快速筛选和方向确认。这个阶段不求完美只求速度和多样性。精细化与高保真设计阶段Figma 主场选定方向后将最接近理想的代码原型所体现的布局和基本样式作为参考在 Figma 中进行“深加工”。在这里完成像素级调整、视觉美化、图标设计、复杂动效制作并利用 Figma 的协作功能与团队进行评审。交付与开发协同阶段两者结合设计定稿后对于标准化的、有明确规约的组件如按钮、输入框、卡片可以再次利用 Claude Code Skill基于 Figma 中定义的设计 Token颜色、间距、字体等生成或校验对应的组件库代码。对于复杂的、定制化的视觉模块则仍然需要开发者手动实现但基础框架已由第一阶段打好。这个模式的核心思想是让 AI 处理它擅长的、结构化的、基于规则的任务让人专注于需要创造力、精细度和审美判断的任务。我的 Figma 并没有真正“吃灰”而是改变了用途——从早期的构思草图工具变成了后期的精修和定稿平台。5. 未来展望Skill 生态与设计工具的进化Claude Code 的 Skill 机制为我们打开了一扇窗让我们窥见了一种人机协作的新范式。未来的设计工具生态可能会围绕以下几个方向演化深度集成的“智能设计伙伴”Figma、Sketch 等主流设计工具必然会深度集成 AI 能力。这种集成不会是简单的“聊天框”而是能够理解画布上下文、根据你的操作意图提供建议、自动完成重复劳动如批量调整间距、生成变体的智能体。你可以用语言命令它“选中所有次级按钮把圆角从4px改成8px”或者“基于这个卡片样式为暗黑模式生成一套配色”。从“设计稿”到“可交付物”的无损管道当前的设计到代码Design to Code环节仍然是痛点。未来的工具链可能会通过更丰富的语义层注解和更强大的 AI 翻译引擎实现更高保真度的自动代码生成。设计师在 Figma 中做的每一个设计决策都能被准确无误地映射为对应的样式代码或组件属性。Skill 市场的专业化与垂直化就像现在的 Figma 插件生态一样未来可能会出现繁荣的 AI Skill 市场。不仅有通用的“UI 组件生成器”还会有专注于“移动端电商首页生成”、“数据可视化大屏设计”、“无障碍A11Y合规性检查”等垂直领域的专业 Skill。设计师可以根据项目需要灵活组装自己的“智能工具箱”。对设计师能力模型的重塑这意味着对设计师的要求也在变化。除了传统的视觉、交互技能“提示词工程”如何精准描述需求、基础代码理解以判断 AI 生成代码的质量、AI 工具工作流整合能力将变得越来越重要。设计师需要成为“设计导演”既能把握宏观体验和创意方向又能高效指挥 AI 工具完成执行层的工作。回过头看“用嘴做设计”虽然是一个吸引眼球的说法但其本质是设计创造过程的抽象层上移。我们将意图和规则通过语言传递给 AI由它来处理底层的实现细节。这解放了我们的双手让我们能更专注于思考“为什么要这样设计”以及“怎样设计更好”。我的 Figma 文件虽然打开得少了但我的设计产出效率和探索的广度反而得到了提升。对于任何一位身处数字产品设计领域的从业者来说理解并尝试将 Claude Code 这类 AI 智能体融入自己的工作流已不再是一个前瞻性的探索而是一项值得投入的、实实在在的提效投资。