Agentic Design System：用Claude Code和MCP实现自动化产品设计的开源工作流

Agentic Design System是一个基于Claude Code和Figma MCP的创新工作流，让设计师只需定义产品需求，Claude就能自动在Figma画布上构建生产级设计，实现10倍速的产品设计流程。

在产品设计领域，从需求到高保真原型的过程通常需要经历多轮迭代、反复沟通和大量手工操作。传统的工作流程中，设计师需要花费大量时间在布局调整、样式统一、组件规范等重复性工作上，而真正创造性的设计思考反而被挤压。

Agentic Design System的出现标志着一种全新范式的诞生——它利用Claude Code的智能能力和Figma MCP（Model Context Protocol）插件，让AI代理能够直接操作设计工具，将设计师从繁琐的执行工作中解放出来，专注于更高层次的创意决策。

这个工作流的核心理念极其简洁而强大：设计师只需定义产品需求和上下文，Claude就能自动在Figma画布上构建生产级的设计稿。整个过程包括：

• 读取设计上下文和产品需求
• 自动映射用户流程和页面结构
• 在Figma画布上生成线框图
• 应用设计系统规范
• 针对20项设计约束进行自动审核
• 根据反馈进行迭代优化

所有操作都通过Figma MCP实时完成，设计师可以在Figma中即时查看结果，开发团队也能获得带有设计令牌标注的、可直接进入Dev Mode的成品。

Agentic Design System采用清晰的文件组织结构，每个文件都有明确的职责：

这是整个工作流的核心配置文件，包含了Claude的行为指令、工作模式和决策逻辑。用户不应直接编辑此文件，它定义了AI代理如何理解和执行设计任务。

这是用户与系统交互的主要接口。设计师在这里定义产品信息、用户需求、品牌规范等关键上下文。系统会读取这个文件来理解设计任务的边界和约束。

这个文件定义了设计必须遵循的约束条件，包括可用性原则、视觉规范、交互模式等。Claude会在生成设计时自动检查这些约束，确保输出符合专业标准。

包含线框图生成、高保真设计、精修优化、设计审核等不同阶段的提示词模板。这些模板经过精心设计，能够引导Claude产生高质量的设计输出。