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

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

- 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm)
- 发布时间: 2026-04-24T18:15:21.000Z
- 最近活动: 2026-04-24T18:24:09.773Z
- 热度: 163.8
- 关键词: Claude Code, Figma, MCP, AI设计, 产品设计, 自动化工作流, 设计系统, 人机协作, Model Context Protocol, 高保真原型
- 页面链接: https://www.zingnex.cn/forum/thread/agentic-design-system-claude-codemcp
- Canonical: https://www.zingnex.cn/forum/thread/agentic-design-system-claude-codemcp
- Markdown 来源: ingested_event

---

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

## 引言：AI驱动设计的新范式

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

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

## 核心理念：你定义产品，Claude构建设计

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

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

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

## 技术架构：文件组织与职责分离

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

### CLAUDE.md —— 系统大脑

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

### context.md —— 用户唯一需要填写的文件

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

### constraints.md —— 20项设计规则与UX模式

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

### prompts.md —— 各类设计任务的提示模板

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

### figma-map.json —— 自动管理的框架映射

这个文件由系统自动维护，记录了Figma文件中的页面结构、框架位置和组件关系。它作为Claude与Figma之间的"桥梁"，确保AI能够准确定位和操作设计元素。

## 快速开始：从安装到首次设计

### 环境准备

使用Agentic Design System需要三个核心组件：

**1. Claude Code CLI**

Claude Code是Anthropic推出的命令行AI助手，能够与代码库深度交互。安装和认证非常简单：

```bash
npm install -g @anthropic-ai/claude-code
claude login
```

**2. Figma MCP插件**

Figma MCP是官方提供的插件，让Claude Code能够直接与Figma文件交互，无需API密钥或复杂的JSON配置：

```bash
claude mcp add figma@claude-plugins-official
```

首次使用时，Claude会提示用户通过Figma账户进行认证（支持Google或邮箱登录），之后即可无缝操作Figma文件。

**3. Figma账户和文件**

需要一个Figma账户和专门的设计文件，建议设置一个名为"Flows"的专用页面，并配置好设计令牌（Variables）。

### 首次会话流程

```bash
git clone https://github.com/AbdullahQureshi1080/agentic-product-design
cd agentic-product-design
claude
```

首次会话大约需要10-15分钟来设置上下文。Claude会读取context.md，告知缺少哪些信息，并引导用户完成填写。之后的会话可以直接开始设计工作。

## 上下文准备：精准定义带来高效产出

### 新项目启动清单

为了让Claude高效工作并减少令牌消耗，建议在首次会话前准备好以下信息：

- **产品名称和一句话描述**：清晰定义产品是什么、解决什么问题
- **主要用户画像和使用设备**：了解目标用户和平台约束
- **核心用户流程**：用户在产品中完成的主要任务，Claude会据此映射页面结构
- **品牌主色**：Claude会基于这个颜色生成完整的设计令牌系统
- **Figma文件key**（如有）：Claude可以自动提取已有的Variables

### 现有项目接入指南

对于已有项目，Claude能够自动从Figma文件中提取信息：

- 读取页面列表和框架清单
- 提取Variables和文本样式
- 检查组件库状态
- 询问4个简短的产品问题

用户不需要手动填写context.md，Claude会自动从Figma文件填充。

### 精确描述的艺术

精确的描述能够节省令牌并避免反复沟通。以下是推荐的表达方式：

| 避免这样说 | 推荐这样说 |
|-----------|-----------|
| "我已经做了一些页面" | "Screens页面的1-8号框架已获批，9号进行中，之后的都还没开始" |
| "设计系统已经配置好了" | "我有颜色和字体的Figma Variables，没有间距令牌。组件库中有按钮和输入框，但导航组件缺失" |
| "从上次停下的地方继续" | "我们完成了CORE-01的线框图并已获批，接下来开始CORE-02的线框图" |

## 工作流程：从需求到交付的自动化之旅

### 阶段一：上下文理解

Claude首先读取context.md，理解产品需求、用户场景和设计约束。如果是现有项目，还会分析Figma文件的当前状态。

### 阶段二：流程映射

基于用户描述的核心任务，Claude自动映射出完整的用户流程，确定需要设计的页面和它们之间的关系。

### 阶段三：线框图生成

Claude在Figma画布上生成低保真线框图，快速验证信息架构和布局方案。这个阶段注重功能性和可用性，而非视觉细节。

### 阶段四：设计系统应用

将线框图升级为高保真设计，应用颜色、字体、间距等设计令牌，确保视觉一致性。

### 阶段五：约束审核

Claude对照constraints.md中的20项设计规则进行自动审核，检查可用性、可访问性、一致性等方面的问题。

### 阶段六：迭代优化

根据审核结果和设计师反馈，Claude进行迭代优化，直到设计达到生产级标准。

## 技术亮点：MCP协议的力量

Agentic Design System的成功很大程度上归功于MCP（Model Context Protocol）协议。这个由Anthropic推出的开放协议允许AI模型与各种工具和服务进行标准化交互。

### 无缝集成

通过MCP，Claude Code可以直接调用Figma的功能，无需复杂的API封装或中间层。这种原生集成带来了：

- **实时同步**：设计变更即时反映在Figma画布上
- **双向通信**：Claude既能读取Figma状态，也能执行设计操作
- **上下文保持**：AI始终了解当前设计文件的完整状态

### 扩展潜力

MCP的开放性意味着这个工作流可以轻松扩展到其他设计工具。未来可能支持Sketch、Adobe XD等平台，实现真正的跨工具设计自动化。

## 应用场景与价值主张

### 快速原型验证

对于需要快速验证产品概念的团队，Agentic Design System可以在几小时内生成可点击的高保真原型，大大缩短从想法到可演示产品的时间。

### 设计系统维护

当设计系统需要更新或扩展时，Claude可以批量应用新的规范到所有相关页面，确保一致性并减少人工遗漏。

### 多平台适配

需要为不同平台（iOS、Android、Web）生成适配设计时，Claude可以根据各平台的规范自动调整布局、组件和交互模式。

### 设计审核辅助

作为设计审核的辅助工具，Claude可以自动检查常见的设计问题，如对比度不足、触摸目标过小、信息层级不清等。

## 局限性与未来展望

### 当前局限

尽管Agentic Design System展示了AI辅助设计的巨大潜力，但它仍有局限：

- **创意边界**：AI擅长执行和优化，但在突破性创新方面仍依赖人类设计师的创意输入
- **复杂交互**：对于高度定制化的交互动效，AI生成的方案可能需要人工精调
- **品牌调性**：微妙的品牌个性和情感表达仍需要设计师的直觉把控

### 发展方向

随着AI能力的提升，我们可以期待：

- 更智能的创意建议，而非仅仅执行
- 与更多设计工具的集成
- 基于用户反馈的自动学习和优化
- 设计决策的可解释性增强

## 结语：人机协作的新篇章

Agentic Design System不是要取代设计师，而是要重新定义设计师的角色。在这个新范式中，设计师从执行者转变为策展人和决策者，AI则承担了繁琐但必要的执行工作。

这种协作模式让设计师能够将更多精力投入到真正重要的工作：理解用户需求、探索创新方案、打磨用户体验。正如项目作者所言，这个系统为"AI原生公司的设计师"而生——那些愿意拥抱新技术、探索人机协作边界的设计先锋。

对于希望提升设计效率、探索AI辅助设计可能性的团队来说，Agentic Design System提供了一个经过验证的工作流和一套可扩展的技术框架。它证明了AI不仅可以辅助编码，也可以深度参与设计创作——而这只是开始。