How to Design and Code with Claude Code and Figma MCP in 50 Min | Felix Lee

设计师如果还只守着 Figma，很快就会被能直接生成产品的 AI 工具甩在身后。

这期内容非常适合设计师、产品经理和任何需要快速将想法落地的人。它值得看，是因为它用真实的项目演示，彻底打破了“设计必须从 Figma 开始”的传统路径，展示了 AI 如何让“想法到产品”的周期从几天缩短到几十分钟。最值得注意的洞见是，Figma 的角色正在从“设计起点”转变为“协作与微调的中转站”，而真正的生产力爆发点在于掌握像 Cursor 和 Claude Code 这样的 AI 编程工具。

这期节目通过 ADP List CEO Felix 的演示，展现了 AI 编程工具（特别是 Claude Code）如何重塑从设计到产品的全流程。Felix 分享了几个他完全不用 Figma、直接通过 AI 编码构建的真实项目，包括个人网站、数据可视化地球仪和一个完整的增长分析工具。随后，他演示了如何利用 Figma 的 MCP（模型上下文协议）双向打通设计稿与代码，甚至从流程图直接生成可玩的游戏。核心议题是探讨在 AI 时代，设计师的工作流和核心技能应该如何转变。

• 设计可以不从 Figma 开始：Felix 构建的几个复杂项目都跳过了 Figma 设计环节，直接通过自然语言描述和截图，让 AI 生成可工作的代码。这证明对于许多产品原型和内部工具，传统设计工具可能已非必需。
• AI 编程工具的输出质量是关键：在尝试过多款 AI 编程助手后，Felix 认为 Claude Code 在代码质量和“品味”上显著胜出，这是他将其作为核心工具的原因。不同的模型和平台，即使底层模型相同，输出效果也可能差异巨大。
• Figma 的新角色是“连接器”而非“起点”：通过 MCP，Figma 可以高效地将设计稿转换为代码，也能将网页或应用界面“逆向”抓取为可编辑的矢量组件。这使其价值更多体现在团队协作、设计系统维护以及对 AI 产出进行视觉微调的“最后一公里”上。
• 设计师的危机感不足：Felix 指出，绝大多数设计师仍深陷 Figma 的工作流，没有积极学习和使用 Claude Code、Cursor 等更强大的 AI 编程工具。终端和 IDE 的界面构成了心理门槛，但这种回避正让他们错失生产力跃升的机会。
• “技能”（Skills）是定制化 AI 助手的关键：通过创建和调用特定的“技能”文件（本质是详细的任务指令集），可以让 AI 扮演特定角色（如 UX 评审员、文案写手），从而获得更专业、符合需求的输出。

对于设计师来说，最大的风险不是 AI 会做设计，而是你还在用旧工具做设计，而别人已经用新工具直接造出了产品。

这对 AI 产品开发者和技术决策者的启发很直接：不要再只把 AI 视为提高旧工作流效率的“外挂”，而要思考如何用它重构甚至颠覆工作流本身。就像演示中展示的，从流程图直接生成应用、从截图直接生成可迭代的代码，这些才是 AI 带来的范式革命。在构建 AI 产品时，应致力于降低从“非技术表达”（语言、草图、截图）到“可运行代码”的壁垒，而不是仅仅优化代码补全。同时，像 Figma MCP 这样的工具展示了“双向桥梁”的重要性——让新旧工具和数据能够流畅互导，是降低迁移成本、推动生态采纳的关键。