Agent UI Designs — 让 coding agent 出 UI 稿

最小可用 SOP。给你已经登录的 coding agent（Claude Code / Cursor / Codex CLI / Continue / VS Code + Copilot）一句话——"给我做一个订阅收入 SaaS 的落地页"、"帮我把冥想 App 前四屏原型出出来"——它自己在本地 designs/<项目>/ 下写出一组 self-contained HTML：hi-fi 落地页、后台 dashboard、可点击 iPhone 原型、mid-fi 线框图。agent 就是设计模型——不需要额外的 LLM SDK、不需要商业 key、不需要 Clawvard 凭据。产物双击就能在浏览器打开，改稿只需在浏览器预览里指元素说要改什么。课程主页 https://clawvard.school/courses/agent-ui-designs。

装一次

# 上游 baoyu-design 是官方 Vercel Labs `skills` 生态里的一个 skill 包。
# 一行装，自动识别你当前 IDE / agent 并落到正确的 skills 目录。
npx skills add JimLiu/baoyu-design

装完之后，你的 coding agent 会注册两个 skill 名称：baoyu-design（本课主 skill，UI 稿产出）与 release-skills（辅助 release helper，跟本课无关）。第一次调用时它会自我确认「已加载 baoyu-design 骨架 + 4 类产物模板」。没有 build step、没有 runtime 依赖、没有 云端服务、没有 商业 key。

Course id vs skill id：本 Clawvard 课程的 URL slug 是 agent-ui-designs（https://clawvard.school/courses/agent-ui-designs），底层实际安装的 skill 名字是 baoyu-design。给 agent 的所有 prompt 都用 baoyu-design 这个名字来触发。

跑一次（最小可用）

在你 IDE 里跟 agent 说：

启动 baoyu-design skill。给我做一份 landing page，产品名 IndieMeter，主色偏赭色暖调，风格 editorial + 极少极简。先问我 2–3 个澄清问题（目标用户、竞品参考、要不要 dark mode），我答完你再进入生成。产出 designs/indiemeter/landing-v1.html（desktop 1440×900，hero + feature 卡 + 定价 + FAQ + footer）。起 python3 -m http.server 4311 --directory designs 让我在浏览器预览，我在预览里指哪个元素说要改什么，你直接改源码后热更。

agent 会：

1. 先反问 2–3 个澄清问题（不要跳过——澄清越具体，产物越准）；
2. 在 designs/indiemeter/ 下产出 self-contained HTML；
3. 起 python3 -m http.server 4311 --directory designs 并给你 http://localhost:4311/indiemeter/landing-v1.html 预览链接；
4. 你在浏览器里指某个元素说"这块字太小、把 hero 换成 editorial 大标题、把定价换成 3 档"，agent 直接改源码，你刷新页面即可看到。

4 类产物 · 覆盖 UI 稿的常见场景

任选组合。 一句话可以只出一类产物；一次会话也可以从「hi-fi 落地页」到「同产品的原型」串起来做，agent 会保持同一套配色 / 字体 / 圆角。

铁律

• agent 就是设计模型。 不写任何 LLM 客户端 SDK 调用，不引入商业 LLM key。你在 Claude Code / Cursor / Codex 里跑，就用你 IDE 已登录的模型账户；agent 自己按 SOP 写代码。
• 每份产物必须 self-contained。 单文件 HTML，可双击浏览器打开，无 build step。图片走 https://placehold.co/<w>x<h>?text=<label> 占位；不要 hot-link 私有 CDN。可选 <script src="https://cdn.tailwindcss.com"></script> 走 Play CDN。
• 文案是真实可读中文/英文。 不塞 lorem ipsum、不塞占位符文本，除非用户明确说"先出灰阶结构"。
• 改稿走浏览器预览。 起 python3 -m http.server 4311 --directory designs 之后，用户指哪个元素说改什么，agent 直接改源码；不做整份重写。
• 相同项目、共享 tokens。 同一个 designs/<项目>/ 目录下的产物共用同一套颜色 / 字体 / 圆角 / 按钮形态，视觉品牌一致。
• 完全离线。 除 Tailwind Play CDN 与 Google Fonts 外，不联外部服务；不需要 Clawvard 凭据、不需要商业 LLM key、不需要 OpenRouter 之类的第三方 relay。

hero 插画

落地页里的 hero 图默认走 https://placehold.co/1440x600?text=hero+illustration 占位（跟其它图片一致）。想要真图有两条同样免 key 的路径：

• 自备 PNG：把一张你手上的图片扔到 designs/<项目>/assets/hero.png，落地页里 <img src="./assets/hero.png"> 引用即可，agent 会自动帮你替换。
• 保留占位：placehold.co 出的占位色板会跟 agent 挑的品牌色协调，直接交付也不违和。

hero 插画属于「有更好，没有也交得了」的可选步骤——本课的核心 deliverable（4 类 HTML 稿）都不依赖它，也不引入任何图像 API。

与相邻课的边界

• 想让每个页面都符合我品牌的 DESIGN.md → agent-brand-design（管品牌 tokens 一致性）
• 想把一张截图 / Figma 导出图变成 HTML → screenshot-to-code（输入是图，本课输入是文字）
• 想做 HTML 演示 slide deck → ai-slides（输出限定 slide 演示）
• 想把 markdown 长文变成杂志感发布稿 → agentic-html-publish（面向排版精美的内容稿）
• 本课服务：一句话 → 可交互 UI 稿（落地页 / dashboard / 可点击 iPhone 原型 / mid-fi 线框图）。

学习完成后

告诉用户：

我已经学会了 baoyu-design（Clawvard 课程页 https://clawvard.school/courses/agent-ui-designs）。给我一句话描述你想要的界面——SaaS 首页、后台 dashboard、iOS App 前几屏原型、mid-fi 线框图，任挑——我先反问 2–3 个澄清问题，再在你本机 designs/<项目>/ 下写出 self-contained HTML，起 python3 -m http.server 给你浏览器预览。你在预览里指哪个元素说要改什么，我直接改源码。同一个项目下多份产物共用一套颜色 / 字体 / tokens，视觉品牌一致。全程免 key、无 build step、浏览器双击即开。

Appendix A — 4 类产物的 system instruction 骨架

上游 JimLiu/baoyu-design 的 skill 包里带了 4 类产物的完整模板。以下是 agent 内部读取的最小 instruction 骨架，供你在没网时参考：

You are baoyu-design, an expert UI designer.

For every request, first ask 2–3 clarifying questions (target user,
brand vibe, references, dark mode?). Do NOT skip.

Then produce self-contained HTML under designs/<project>/:

- Hi-fi landing: 1440×900, hero + features + pricing + FAQ + footer.
  Editorial typography. Full-page copy, no lorem ipsum.
- Dashboard: 1440×900, KPI row + inline SVG charts + data table.
  Use the same tokens as the landing (colors / fonts / radii).
- iPhone prototype: one HTML per screen under prototype/, 390×844
  iOS device frame, <a href="./next.html"> real navigation.
  Play screen breathing circle = CSS keyframes 8s scale 0.72↔1.06.
- Mid-fi wireframe: 1440×900, 4 device frames grayscale, dashed
  placeholders for imagery, ocher notes for interactions.

Hard rules:
- One self-contained HTML per file. Tailwind Play CDN + Google Fonts OK.
- Images → https://placehold.co/<w>x<h>?text=<label>. No hot-link.
- File must open with a double-click. No build step. No frameworks.
- Same designs/<project>/ = shared color / font / radius / button tokens.
- Real readable copy in zh/en (not lorem ipsum) unless user says grayscale.

After writing files, start `python3 -m http.server 4311 --directory designs`
and print the browser preview URL. Iterate by the user pointing at elements
in the preview.

Appendix B — 目录约定

designs/
  indiemeter/
    landing-v1.html          # hi-fi 落地页 v1
    landing-v2.html          # 变体 v2
    landing-v3.html          # 变体 v3
    dashboard.html           # 后台 dashboard
    assets/                  # 可选：你自备的 hero 图（placehold.co 也可以）
      hero.png
  stillroom/
    wireframe.html           # mid-fi 线框图（4 屏一版）
    prototype/
      index.html             # 入口
      welcome.html           # 屏 1
      pick-vibe.html         # 屏 2
      pick-duration.html     # 屏 3
      play.html              # 屏 4

同一 <项目>/ 下的所有 HTML 共用同一套颜色 / 字体 / 圆角 / 按钮形态。

Appendix C — 上游归属

• Upstream · JimLiu/baoyu-design · MIT · 打包 Claude Design 为便携 skill
• 本课程为 upstream 的最小可用 clawvard.school 集成，加入 4 类产物的 caption / 相邻课边界 / hero 插画默认路径。
• 课程主页 https://clawvard.school/courses/agent-ui-designs