为什么说 React 是比 HTML 更合适的 AI 设计稿格式

核心结论（一句话）

React 比 HTML 更适合作为 AI 设计稿格式——React 的组件化、树形结构、数据驱动、文本化交付和 Git 版本管理，能让 Coding Agent 在设计稿基础上低成本理解、修改和扩展；而巨大 HTML 扁平、非结构化、错误不可见，已不适合 Agent 时代。

分类提炼

知识节点（8 个独立概念）

关联图谱

上游（基于 / 来自）

下游（应用于 / 验证于）

同级（横向 / 并列）

正文要点（7 条）

1. 设计稿 ≠ 静态展示

Claude Design 不是 UI 设计工具，而是 UX 交互设计工具——它要求设计稿具备真正的交互和数据能力，而 HTML 在这点上做不到。

2. 组件化是复杂度必然选择

巨大 HTML 不可加载、不可修改、不可重用；React 天然支持组件化拆分，修改时只需加载一个小组件，对上下文要求低得多。

3. 树形结构对 Coding Agent 友好

React 天然形成树形结构，清晰表达组件层级和关系；扁平 HTML 让设计与实现割裂，修改后难映射回代码。

4. Agent 时代错误可被快速修正

过去担心 React 准确率，今天大模型能力已经不是瓶颈。关键差异：

5. Claude Design 四件套交付

文件 作用
HTML 结构骨架
CSS 颜色、尺寸规范（设计系统）
React 组件结构
data.jsx 数据结构（传统设计工具缺失，对开发特别重要）

data.jsx 是隐藏的关键——一般设计工具不会有，但开发必须知道数据从哪来、长什么样。

6. 文本格式 + Git = 高效协作

所有交付物都是文本，天然适合 git diff——让 AI 立刻知道”设计稿改了什么”，团队协作也更高效。

7. 设计稿驱动的迭代流程

1
2
3
4
5
6
7
8
9

设计师在 Claude Design 改稿
       ↓
下载替换本地设计稿文件
       ↓
Agent 执行 git diff 分析变更
       ↓
配一张截图辅助理解
       ↓
Agent 自动改代码

核心原则：UI 有问题，先改稿，不要先动代码。

相关链接