baoyu-design — Run Claude Design locally as an Agent Skill — Cursor, Claude

baoyu-design

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus 4.8.

GitHub: https://github.com/JimLiu/baoyu-design

指标	值
Stars	1,621
Language	JavaScript
License	MIT
Topics	agent-skills, claude, claude-code, claude-design, cursor

README 摘要

baoyu-design

在你自己的本地 Agent 上运行 Claude Design —— Cursor、Claude Code、Claude Desktop，或任何能读写文件的编码 Agent。

English · 简体中文 · 更新日志

baoyu-design 把 Claude Design（claude.ai/design 背后的设计引擎）打包成一个可移植的 Agent Skill（技能）。把它放进本地 Agent，你就能在自己的编辑器里获得这个网站绝大部分的能力：精致的 UI 稿、可交互原型、线框图、落地页、仪表盘、移动 App、幻灯片 —— 全部以「自包含 HTML」的形式产出。

不依赖网站，不需要额外订阅，也不用上传。活儿由你机器上已有的 Agent 完成，所有产物都留在你自己的仓库里。

---

截图

Cursor、Codex、Claude 和 Claude Design 使用的是同一个 Reader Mac App Prompt。

Cursor	Codex	Claude	Claude Design

展开查看共同使用的 Prompt

帮我开发一款Reader Mac App，帮助我更好的阅读和收藏文章。数据都在本地。

## 信息采集

1. 主动添加
可以手动添加不同类型的信息：
- URL：输入 URL，自动抓取内容和图片
- 附件：上传PDF、视频、图片
- Markdown 编辑：类似于发布博客，输入标题、内容、发布图片
- 其他

2. 自动订阅
- RSS 订阅
- 社交媒体账号：X、微博、YouTube
- 其他

## 信息编辑和分类

1. 标签
每条内容都可以打标签

2. 分类、目录
可以创建树形目录，可以把内容放到不同的分类

3. 收藏
可以点击收藏

4. 编辑
每一条内容都可以编辑，有个内置的Markdown编辑

## AI 辅助

1. 自动翻译
可以支持不同语言的翻译

2. 总结和摘要
可以去对抓取了的内容进行摘要

3. 二次创作
可以基于一条或者多条内容进行二次创作

4. 集成 AI Chat

可以通过 AI Chat 去调用 AI Agent 辅助对内容进行处理

---

为什么在本地跑

• 摆脱对网站的依赖。 不必离开编辑器，就能用上 claude.ai/design 绝大部分的功能 —— 同一套方法论、同样的工艺标准、同样的产出格式。
• 搭配 Opus 4.8 效果最佳。 这个技能本身是一份冗长且要求很高的设计指令，模型越强、效果越好。建议搭配 Claude Opus 4.8 获得最佳结果；在其他能力足够的模型上也能良好运行。
• 用「指」代替「描述」来迭代。 因为产物就是跑在 localhost 上的普通 HTML，你可以充分借助 Agent 自带的网页预览与元素标注能力（Cursor Browser / DevTools、Claude Preview 或 Codex Browser）：在实时预览里直接点选某个按钮，说出想改成什么，Agent 就会去改对应的源码 —— 这是一条紧凑、可视化的「二次编辑」回路，在网站上很难做到。
• 一切都归你所有。 产物会落到 designs/<项目名>/ 目录下，是可以纳入版本控制、二次分叉、导出或直接上线的自包含 HTML。

---

它能做什么

这个技能会驱动一套完整的设计流程 —— 先问澄清问题 → 收集设计上下文 → 产出一个或多个 HTML 交付物 → 预览并校验。它内置了一大批子技能，外加一组开箱即用的组件脚手架。

类别	内置子技能
核心设计	高保真设计 · 可交互原型 · 线框图 · 前端美学方向
幻灯片	制作演示文稿 · 演讲者备注
移动与动效	移动端原型 · 动画视频 · 音效
设计系统	创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件（.dc.html）· 可调参数化
导入设计源	Figma .fig（离线解码）· GitHub 仓库 · 现成 HTML/CSS
导出与交付	独立 HTML · PDF · PPTX（可编辑）· PPTX（截图）· 视频（MP4）· 导出到 Figma · 导出到 Canva · 交接给 Claude Code
AI 素材与集成	Gemini 图像生成 · 在原型中调用 Claude · 读取 PDF

起步组件（位于 starter-components/）让 Agent 不必从零手搓基础件：iOS / Android / macOS / 浏览器外壳、可平移缩放的设计画布、幻灯片舞台、时间轴动画引擎、参数调节面板，以及可填充的图

---

本文基于 GitHub 项目 JimLiu/baoyu-design 整理。