yr.al

用 Claude Design 和 Baoyu-Design Skill 维护 UI 原型 — 宝玉 @ X

2026-08-09 · 原文 ↗ · 本页为存档备份
版本控制原型设计UI 设计AI 辅助开发React 开发
介绍一种原型驱动开发流程:先用 Claude Design 和 Baoyu-Design Skill 修改、验证本地 UI 原型,再实现实际功能,并通过项目规则保持两者同步。React 代码、JSON 数据及 Git diff 便于追踪变更和辅助开发。

我在开发项目时,第一版本会先用 Claude Design 设计好 UI 原型,打磨好后放到本地,配合 Baoyu-Design Skill 持续维护。每次开发新功能前,不是先实现功能,而是先修改本地原型,原型确认后再修改实际功能。

后来我直接把规则放到了 Agents.md / CLAUDE.md 里。只要提出修改或增加功能,默认会先修改原型,所以到现在为止,原型和实际功能都能保持一致。

这样可以先用较低成本通过原型验证产品设计和 UI 设计。

另一个好处是 Claude Design 的产出物是 React 代码和结构化 JSON 数据,通过 Git diff 可以清晰看到版本变更历史。功能确定后,Agent 参考 diff 结果实现代码会相对容易。

Baoyu-Design Skill:github.com/JimLiu/baoyu-design

原型设计示例 1

原型设计示例 2