✨ Agent Design Skill github.com/JimLiu/baoyu-design

baoyu-design

Anthropic Claude Design 的开源社区重封装 — 把 AI 原生设计能力装进本地 Agent，随时调用，离线工作

支持 Claude Code / Cursor / Codex 等 70+ Agent。输出自包含 HTML，直接纳入版本控制或部署上线

Claude Code Cursor Codex Figma 离线设计系统 MIT License

一个 Prompt，多个 Agent，同一套设计语言

无需访问 claude.ai/design 网站、无需额外订阅。同一设计指令在 Cursor、Claude Code、Codex 中的输出质量趋于一致，设计产物直接落地为本地 HTML 文件。

B·D

baoyu-design

JimLiu / agent-skills

GitHub Stars

920 ⭐

2026-06-07 创建

Agent 支持

70+

Skills 协议兼容

内置技能

31 个

设计 / 原型 / 导入 / 导出

组件模板

10 个

开箱即用设备外壳

核心能力

Skills

高保真 UI 设计

核心

生成像素级还原的 UI 设计稿，包含配色方案、间距系统、排版层级

figma-readyhtml output

交互原型

原型

移动端（iOS/Android）、幻灯片演示、动画视频、音效一站式生成

.dc.html动画引擎

Figma 离线导入

亮点

无需 Figma 账号，离线解析 .fig 文件，提取组件、Token、SVG 资产

.fig decoderdesign-system

设计系统

完整

创建 → 编译 → 预览 → 使用完整闭环，输出可交互 preview.html

compile-design-systemtoken

工作流

SKILL.md

1 · 加载方法论

system-prompt.md

Agent 读取核心设计方法论与工艺标准，作为设计决策真相来源

2 · 检测运行环境

references/

识别 Claude Code / Cursor / Codex / 其他 Agent，加载对应工具映射

3 · 加载子技能

31 built-in-skills

根据任务类型（设计 / 原型 / 导入 / 导出）加载专业化子技能

4 · 创建设计项目

designs/

在 designs/<项目名>/ 下构建 HTML 交付物，验证后交付

5 · 导出与协作

HTML / PDF / PPTX

导出独立 HTML、PDF、可编辑 PPTX、截图版 PPTX，交付给下一个 Agent

Agent 覆盖

兼容性

Claude Code100%

Cursor100%

Codex Agent100%

其他 70+ Agents兼容

Claude Code · Cursor · Codex

Cline · Roo Code · Copilot

Figma .fig 离线导入

Gemini · Claude API 集成

高保真设计

移动原型

Figma 离线

设计系统

幻灯演示

HTML 交付

查看 GitHub 仓库 MIT · npx skills add JimLiu/baoyu-design