宝玉分享开发模式：先用 Claude Design 设计 App UI/UX，生成 HTML+CSS+React+data.js（优于 Figma，利于 AI 理解和 Git 版本管理）；再用 Claude Opus 4.8 实现 MVP（GPT 5.5 在 UI 实现上差距明显）。因反复在本地与网页间导出替换设计稿繁琐，他编写工具解析 HAR 文件、解密 Claude Design 二进制内容，分析其 Prompt 和内置组件，将核心逻辑本地化集成到 Cursor（利用网页标记功能），配合 Opus 4.8 即可本地运行。最终开源 GitHub 项目“baoyu-design”。
之所以研究 Claude Design，是因为最近摸索出一套不错的开发模式：
先用 Claude Design 去设计 App 的 UI 和 UX，第一版本越简单越好。
Claude Design 交付的结果是 HTML + CSS + React + data.js，通过 CSS 一下就可以看清楚设计系统的颜色系统、尺寸规范，通过 React 可以看清楚组件结构，通过 data 可以知道数据结构什么样子。
这几个组合可比 figma 对于 AI 来说友好多了，尤其是 data.jsx，这是一般的设计 App 不会有的，但对开发特别重要的。
还有一个优势就是交付的结果都是文本格式的，可以一起提交到 git 做版本管理，用 git diff 就可以清楚的让 AI 知道设计稿修改了什么。
把 Claude Design 生成设计稿交给 Claude Opus 4.8 去实现一个 MVP，第一个版本只实现 UI 功能，告诉它技术栈（比如 AppKit 而不是 SwiftUI），通过几个小版本的迭代，让它逐步完善。比如第一个版本只是主界面
之所以不用 GPT，是因为 Opus 在 UI 实现上比 GPT 好太多，同样的设计稿，GPT 实现的各种细节问题的，不能很好的遵守设计稿。
宝玉分享开发模式：先用 Claude Design 设计 App UI/UX，生成 HTML+CSS+React+data.js（优于 Figma，利于 AI 理解和 Git 版本管理）；再用 Claude Opus 4.8 实现 MVP（GPT 5.5 在 UI 实现上差距明显）。因反复在本地与网页间导出替换设计稿繁琐，他编写工具解析 HAR 文件、解密 Claude Design 二进制内容，分析其 Prompt 和内置组件，将核心逻辑本地化集成到 Cursor（利用网页标记功能），配合 Opus 4.8 即可本地运行。最终开源 GitHub 项目“baoyu-design”。
之所以研究 Claude Design，是因为最近摸索出一套不错的开发模式：
先用 Claude Design 去设计 App 的 UI 和 UX，第一版本越简单越好。
Claude Design 交付的结果是 HTML + CSS + React + data.js，通过 CSS 一下就可以看清楚设计系统的颜色系统、尺寸规范，通过 React 可以看清楚组件结构，通过 data 可以知道数据结构什么样子。
这几个组合可比 figma 对于 AI 来说友好多了，尤其是 data.jsx，这是一般的设计 App 不会有的，但对开发特别重要的。
还有一个优势就是交付的结果都是文本格式的，可以一起提交到 git 做版本管理，用 git diff 就可以清楚的让 AI 知道设计稿修改了什么。
把 Claude Design 生成设计稿交给 Claude Opus 4.8 去实现一个 MVP，第一个版本只实现 UI 功能，告诉它技术栈（比如 AppKit 而不是 SwiftUI），通过几个小版本的迭代，让它逐步完善。比如第一个版本只是主界面
问题是 GPT 5.5 模型设计能力不够，在 Codex 里面设计效果也不会好。
接着 Cursor 也发布了网页标记功能，这下正好，Cursor 里面可以用 Opus 4.8，做成 Skill 就可以本地运行了，还可以在 Cursor 内置浏览器中，直接标记、评论修改。
好在 Claude Code 的核心逻辑都在浏览器前端，他们在网页上做了个 Harness，这给了我分析的便利，耐心一点就可以分析出所有的 Prompt、内置 Skills、初始组件，再针对 Cursor 的工具做一些兼容就可以跑起来了。（图3）
测试对比了一下和在 Claude Design 上跑的效果差不多。（图4）
归根结底，还是 Claude Desktop 太拉胯了，Claude Design 本应该集成在 Claude Desktop 的，不然也不需要我这么折腾。
当然不折腾下我也没机会学习 Claude Design 优秀的设计，真的很棒，接下来会系列更新我的学习心得。
推荐去试试最终的 Skill，让你本地就可以跑 Claude Design： https://github.com/jimliu/baoyu-design
宝玉最近为了研究 Claude Design,专门写了一个工具,可以解析 HAR 文件,解密 Claude Design 传输的二进制内容,这样可以方便的看到请求的 Prompt
宝玉@dotey · X