Baoyu Design

选一个任务，开始使用

第一次使用可从“界面原型”开始：在项目终端安装对应技能，准备简报与内容，再回到 Claude Code 粘贴任务提示词。先选方向，完成原型后再决定是否需要图片或其他导出格式。

1. 安装本任务需要的技能

   复制安装命令

   在项目目录的终端运行，安装 baoyu-design 到 Claude Code；这是安装命令，不是在聊天里输入的指令。第三项任务改装 claude-design。保留完整技能目录；需要其他入口时再按下方地图选择。 安装其他入口时，将 --skill 后的名称替换为地图中对应的技能名。

   npx skills add JimLiu/baoyu-design --agent claude-code --skill baoyu-design

   查看作者安装说明

   第一次运行：先备材料，再选择方向

   复制安装命令

   在项目根目录新建 brief.md，写清目标用户、页面范围、必须完成的操作与验收条件；把准确文案和少量示例数据放入 content.md，已有品牌文件放入 brand/。本例明确不绑定设计系统、不生图，输出 designs/reader-prototype/Reader.html。安装后在 Claude Code 输入第一条提示词，选定一个方向后继续制作。让助手通过 HTTP 提供预览；若它使用 Python，可从项目根运行下方命令，再访问 http://localhost:4311/reader-prototype/Reader.html。检查筛选、空状态和手机布局后再确认交付。

   python3 -m http.server 4311 --directory designs

   查看作者安装与使用说明

2. 把这段话发给 AI

   复制提示词

   以下提示词是编辑编写的使用方案，文件名可替换成你的材料；结果列表是预期交付，不是本站已生成的样例。

   /baoyu-design 请读取 brief.md、content.md 和 brand/ 中的参考材料，为阅读清单产品设计界面。brief.md 写明目标用户、必须完成的操作和本次范围；content.md 是可使用的真实文案与示例数据。 产物保存到 designs/reader-prototype/；本次不绑定设计系统，也不生成图片。先确认材料中的目标、品牌色和字体；只追问缺失且影响设计的条件。 先提出 3 个在导航、信息密度或阅读流程上不同的方向，说明取舍，等我选定后完成 Reader.html 及所需资源。支持搜索、分类切换、收藏和空结果状态，用本地示例数据演示；不接入真实账号或服务。正文保持为可编辑文本。 通过 HTTP 预览，检查桌面和手机宽度、键盘操作、主要按钮、空状态、控制台与资源加载。若当前工具不能看图或测试浏览器，列出已完成的检查和仍需我查看的项目。 交付项目目录、入口文件、预览地址和检查摘要；记录该界面资产，但在我验收前保持 needs-review。

3. 检查你拿到的结果

   • 三个有明确取舍的设计方向，以及选定方向的 Reader.html 与同目录资源。
   • 可操作的搜索、筛选、收藏和空状态；示例数据与真实业务连接的边界清楚。
   • 预览地址、检查记录和待确认事项；项目资产标记为待审。
   查看这项任务的作者说明