Open Design 实战：从 AI 驱动设计到代码全流程实现

image.png

Open Design 实战：从 AI 驱动设计到代码全流程实现

1. 为什么选择 Open Design？

Open Design 是一款开源的 AI 驱动设计工具，能够帮助开发者和设计师快速完成产品原型设计并将其转化为真实代码。相比于近期热门的 Claude Design，它有以下显著优势：

  • 成本与额度： Claude Design 消耗额度极快，即使是昂贵的订阅版本也难以支撑几个项目的开发，且近期更新缓慢。
  • 灵活接入 Agent： Open Design 允许用户接入本地常用的 AI Agent（如 Cloud Code、Codex CI、Cursor Agent 等），直接使用个人的 API 额度，实现“额度自由”。
  • 丰富的系统设计： 提供更加丰富、开放的设计系统风格模板。
  • 迭代速度快： 作为开源项目，它的更新和迭代频率远超 Claude Design。

2. 安装与初始配置

github仓库：https://github.com/nexu-io/open-design

  • 下载与安装： 前往 GitHub 页面下载对应版本（支持 macOS 和 Windows），解压后即可使用。
  • 配置 AI Agent： 首次打开需选择本地调用的 Agent（如 Cloud Code 或 Codex）。若使用 Cursor Agent，可直接在 Cursor 编辑器中让其自动安装配置。配置完成后，可点击测试连通性，成功即可正常使用。

image.png

3. 核心概念：设计系统 (Design System)

Open Design 目前内置了 140 多种设计体系（如类似于 Vercel、Hugging Face 风格等）。

  • 什么是设计系统？ 它是一套提前约定的产品设计规范，包含基础视觉（风格、颜色、字体、间距）以及可复用的 UI 积木（如按钮、表单、卡片），并附带使用说明。
  • 作用： 就像乐高积木的标准说明书，确保无论谁来开发，最终产出的产品风格都是统一的。Open Design 提供的不是完整的企业级系统，而是帮助快速起步的风格模板。

4. 原型图创建与修改 (基础实战)

目前 Open Design 的“原型 (Prototype)”生成功能最为完善（其实施制品 Beta 版目前效果尚不如原型，暂不推荐）。

4.1 创建原型步骤：

  1. 输入基础信息： 项目名称及选择设计体系模板。
  2. 选择目标平台 (Target Platform)： 例如选择 Responsive Web（响应式网页），可根据屏幕宽度自适应布局。
  3. 设置细节： 可选择是否需要 OS 状态栏（开发落地页一般不需要），精度建议选择“高保真 (High-fidelity)”以便直观查看。
  4. 细化需求： 设定产品目标用户、一句话描述、视觉风格，强烈建议提供参考网站的链接让 AI 抓取规范。
  5. 选择页面区块 (Sections)： 根据需求勾选，如 Hero（首屏）、Features（特性）、Pricing（价格）、FAQ、Footer 等，最多可选 5 个。

4.2 生成与修改技巧：

  • 生成等待： 执行过程约需 5-10 分钟。如果中途遇到 reconnection 断连问题，直接在对话框输入“继续”即可。
  • 文本修改： 可以直接通过对话框修改整体主题配色。
  • 框选修改 (Picker)： 可以选中特定的布局（如觉得左右布局太挤，要求改成上下布局），或者将某个区块改成卡片 (tag) 样式。
  • 精细审查 (Inspect)： 类似于浏览器的审查元素，可以直接修改文案和跳转链接。但涉及更深度的修改需要一定的 HTML 和 CSS 基础。
  • 预览模式： 生成的文件包含完整的 HTML 和设计规范文档，支持切换桌面端、iPad 端和移动端查看响应式效果。

我这里以生成一个台球厅的小程序为例。可以看到，等待了约大约20分钟之后，它就生成了这样一套非常美观清晰的 UI 逻辑交互。我只给了它几张参考图片，它就能够根据对应的参考图片去生成我们整套的 UI。圆形图。

接下来我们来演示如何对具体的某一个界面图进行细节修改。比如说我对这个第二个球桌详情这个界面的，它的这个核心按钮设计的不太满意。可以看到它的这个8没有居中，并且字体相对于整个按钮来说，其实是有点偏小，我们需要让它设计的大一些。我们这里可以有很 多种修改的方式。当然我们需要先，这里它是整个预览的详情页，预览页，所以我们需要先进入到它的这个详情页。可以点击上方的设计文件，然后找到对应的那个具体详情页，这个的话应该是 Table active 这个详情页。啊，不对，不是这个，是我们的 Table Idol 是这个，对，是这个文件。然后呢，我们进入到详情页之后，把这里的视觉效果改成 Mobile ，手机端的视觉效果。 这里可以选择使用编辑，可以直接点击对应，选中对应的按钮，然后在这里进行编辑。比如说我觉得这个字体太小了，我们选中它，然后在这里找到 Font ，然后把 Font size 调大。现在就更加美观了，22这样子。 然后呢，这里其实还有一个8不好更改。如果不好更改的话，我们可以直接利用 AI 的这个评论的功能，点击我们的评论，然后去选中这个8。然后在这里输入对应的评论的详情，比如我们这里说这个元素8没有居中，我们让它居中。然后直接选中对应的元素，然后评论发送给 AI 它就可以自动帮我们的去更正和修改。

5. 从原型到真实代码落地 (高阶实战)

Open Design 生成的本质是一套原生的 HTML/CSS 文件，无法直接用于现代前端工程化部署，需要结合 Cursor/Codex 等工具转化为真实的前端项目（如 Next.js）。我们可以将生成的代码全部都放到工程目录下 temp/

  • HTML转NEXTJS提示词：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# Prompt：将 `temp/` 原生前端还原并组件化迁移到 Next.js 项目

请参考 `temp/` 目录下的原生 HTML 文件，将其中的设计系统与页面样式完整还原到当前 Next.js 项目中，要求尽可能做到：

- 视觉一致
- 布局一致
- 间距一致
- 颜色一致
- 字体一致
- 交互状态一致

## 具体要求

### 1. 分析并提取设计系统

先分析 `temp/` 中的 HTML/CSS 结构，提取可复用的设计系统，包括：

- 颜色、字体、间距、圆角、阴影等设计变量
- `Button`、`Card`、`Input`、`Navigation`、`Layout` 等通用组件
- 页面级布局与响应式规则

### 2. 建立清晰的前端架构

在项目中建立清晰的前端架构：

- 尽可能抽象可复用组件
- 避免在页面中重复堆叠样式
- 页面应基于已有组件和设计规范开发

### 3. 编写 `AGENTS.md` 文件

编写 `AGENTS.md` 文件，用于说明：

- 项目整体介绍
- 前端目录结构
- 设计系统架构
- 组件复用规范
- 后续开发注意事项

### 4. 明确组件开发规范

在 `AGENTS.md` 中明确开发规范：

- 开发页面时，必须优先复用已有组件
- 如果已有组件可以通过 `props`、`variant`、`className` 等方式扩展，应优先扩展，而不是重新创建相似组件
- 只有在现有组件无法满足需求时，才新增组件

### 5. 新增“设计系统预览”页面

新增一个“设计系统预览”页面：

- 仅用于开发环境查看
- 采用纯前端渲染
- 展示颜色、字体、按钮、卡片、表单、布局等核心组件
- 用于验证组件复用效果和样式还原质量

## 最终目标

1. 将 `temp/` 中的前端完整在当前 Next.js 项目中还原。
2. 将 `temp/` 中的前端迁移为 Next.js 项目中的可维护、可复用、可扩展的前端组件体系。

5.1 项目初始化与资源转移

  1. 创建 Next.js 项目： 可以在空文件夹中，直接利用 Codex 或 Cursor Agent 通过 prompt 帮你初始化一个最简的 Next.js 项目或包含后端的模版（如 Supabase）。
  2. 下载设计文件： 在 Open Design 中将原型对应的 HTML、CSS、JS 全部下载解压。
  3. 隔离临时文件： 将这些设计文件放入 Next.js 项目的一个临时文件夹（如 temp），并务必将其加入 .gitignore 中，防止这些一次性文件污染 Git 代码库。

5.2 核心技巧：用 Prompt 强制 AI 进行“组件化”封装

如果你直接让 AI 还原页面，它可能会写出几百行未封装的面条代码（原生 HTML/CSS）。为了构建可维护的项目，必须使用结构化的 Prompt 引导 Agent 建立规范 (Harness)。

推荐的架构级 Prompt 步骤要求：

  1. 分析与提取： 先分析 temp 目录下的结构，提取可复用的设计系统（设计变量、通用组件、布局规则）。
  2. 建立前端架构： 尽可能抽象可复用组件，避免在页面中堆砌样式。
  3. 编写 AGENT.md (核心)： 说明项目整体架构、设计系统架构和后续开发规范，这是约束 AI 后续行为的核心指南。
  4. 严格规定开发规范： 明确要求在开发新页面时，必须优先复用现有组件，只有在无法满足时才新增组件，避免重复造轮子。
  5. 生成设计预览页： 新增一个 Design System 的预览页面（仅用于开发环境），方便直观查看已封装了哪些组件（如按钮、卡片、表单等）。

5.3 组件化的优势验证

通过上述规范生成的代码，页面逻辑会非常清晰（例如代码从几百行精简到只引入几个 Component）。 当需要在其他页面（如单独的 Pricing 页面）复用“价格卡片”时，AI 会直接调用已封装好的组件。此时，如果修改底层组件的价格数据（比如从 15 美金改为 20 美金），首页和价格页的数据会自动同步更新，极大提升了项目庞大时的维护性和设计一致性。

6. 模型选择建议

虽然 Codex 提供的额度非常充足（适合频繁调试和日常使用），但从实际体验来看，如果是让 AI 负责设计生成阶段，Cloud Code 产出的设计样式和视觉效果通常会更好看一些。建议根据自身的 API 额度情况灵活切换使用。