用开源设计系统搭一个AI原型

被朋友安利了 Coinbase 开源设计系统，试试看到底好不好用。我的判断是，值得用，但不适合直接拿来做正式上线产品。AI 原型就是用自然语言或设计说明，让 AI 快速做出一个能点、能看、能演示的页面。从财务角度看，如果能把想法到可点页面从几周压到几天，省的是等待成本和重复沟通成本。页面好不好看不是最关键的，最关键的是少返工、少养一整个临时前端小组。

设计系统就是一套现成的按钮、输入框、颜色、间距和代码组件。以前设计师画一遍，前端照着敲一遍。现在拿现成组件，AI 负责拼页面。

我这边测试的任务很简单，做一个「用户余额、充值入口、交易记录」的支付首页原型。目标是给投资人、财务和运营看，确认流程能不能走通。

准备工具有四样。一个代码编辑器，我用 Cursor，大概用了一个月，主要是它能看项目文件。一个 AI 编程助手，我用 Claude Code，用了1个月，可以在对话框里让它写代码。一个 Node.js 环境，这个你不用懂，只要官网装好，能运行 npm 命令就行。还有一个空文件夹，新手不要一开始就塞进大项目。

从 0 到 1 跑一遍可以这样做。在浏览器搜索 Coinbase Design System，打开官方说明页，找到 React 组件安装方式。React 是做网页界面的常见工具。然后在终端（命令行窗口）输入创建项目命令，比如 npm create vite@latest cds-demo -- --template react。Vite 是快速创建前端项目的小工具。会问项目名称和模板，选 React。看到下载进度，最后没有红字报错，说明项目建好了。进入项目，输入 cd cds-demo，再输入 npm install。这一步是安装项目依赖，可以理解为买齐乐高积木。接着在说明页里找到 React 组件包名，复制到终端安装。不要凭感觉装最新包，先看官方文档里要求的版本范围。新建页面文件，比如 src/PayPage.jsx，这是 React 页面文件。然后在 Claude Code 对话框输入需求，用 Coinbase 设计系统组件做一个移动端支付首页，包含顶部余额卡片、主按钮充值、下方交易记录列表。让 AI 生成代码时，明确要求只用已安装的组件，不要自造样式，状态用假数据，也就是先填一些演示数字。最后运行 npm run dev，浏览器会弹出一个本地地址（通常是 localhost 开头）。打开后，预期看到手机宽度下的页面，有余额卡、充值按钮、几条交易记录。

我第一版跑出来，按钮是丑的。后来发现 AI 把普通网页按钮和组件混用了。改提示词后，页面立刻规整很多。

原型阶段，先把流程跑通，再决定值不值得投入工程化。

踩坑和财务判断方面，我这边最容易出错的地方有三类。依赖没装对时，终端出现 Cannot find module，就回到官方安装步骤，确认包名和版本。组件没导入时，页面白屏，先按 F12 看控制台（浏览器调试窗口），红色报错通常缺 import（导入组件）。AI 自作聪明时，它会生成一堆普通网页标签和样式，看起来能跑，其实没复用设计系统。解决方式是每轮只让它改一个模块，并说不要新增自定义样式。

从 CFO 视角，我会给这种工具算三笔账。研发账是前端少写重复组件，省工时。决策账是业务、财务、产品能在同一版可点原型上确认，少开无效会。融资账是早期演示不再只靠 PPT，估值模型里的产品完成度，终于有一点可验证的东西。

但也要泼冷水。开源设计系统解决的是长得像正规产品，不解决账户安全、交易撮合、合规审计、支付通道。这些如果要做真实业务，现金流健康吗？不能只看页面，要看单位成本、留存、坏账、合规成本和收入确认（什么时候能把钱算成收入）。

学完这个，下一步可以试着把同一套流程接进一个真实小需求，比如给内部费用报销系统做一版移动端原型，再让财务同事用假数据走一遍审批流。如果原型只要几天就能做出来，团队还愿不愿意花很久写 PRD（产品需求文档）？

---

📌 本文编译自 Hacker News 上的相关讨论，原文链接 https://www.coinbase.com/blog/how-coinbase-design-systems-are-powering-the-ai-prototyping-era

版权归原作者所有，本文为基于公开报道的编译与独立分析。