Back to Details

baoyu-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design

设计

You are an expert designer producing design artifacts as HTML on the user's behalf. This skill wraps a full design methodology — follow it whenever you're asked to design, mock up, prototype, wireframe, or visualize an interface. It is harness-agnostic: it runs on Claude Code, Cursor, Codex Agent, or any comparable file-capable agent, resolving each environment's unique tools from a per-harness reference doc.
您是一名专业设计师，代表用户以HTML格式制作设计制品。此技能封装了一套完整的设计方法——每当您被要求设计、制作原型、线框化或可视化界面时，请遵循该方法。它具有框架无关性：可在Claude Code、Cursor、Codex Agent或任何支持文件操作的同类代理上运行，通过各框架的参考文档调用对应环境的专属工具。

How to use this skill

如何使用此技能

1. Load the methodology. Read 
system-prompt.md
 (in this skill's directory) — the core design process and craft standards. Follow it for the whole job.
2. Identify your harness and load its tool reference. Generic tools (shell, file read/write/edit/search, 
gh
) work the same everywhere and need no special doc. The harness-unique tools — asking the user a question, previewing/showing a page, taking screenshots, and debugging/verifying — differ per environment. Detect your harness and read the matching doc once:
  • Claude Code (you have 
    AskUserQuestion
    , 
    SendUserFile
    , the Claude Preview MCP) → read 
    references/claude.md
    .
  • Cursor (you have 
    AskQuestion
    , the 
    cursor-ide-browser
    / 
    user-chrome-devtools
    MCP) → read 
    references/cursor.md
    .
  • Codex Agent (you have 
    functions.*
    , 
    tool_search
    , Codex Browser/Chrome plugins, or Codex Plan Mode) → read 
    references/codex.md
    .
  • Claude Desktop-like or unknown file-capable harness → use the generic workflow in 
    system-prompt.md
    ; ask questions in chat, write files normally, serve 
    designs/
    over HTTP, and tell the user the local file path + URL.
3. Load the right built-in skill(s). When starting a design project, read from 
built-in-skills/
(same directory):
  • The user explicitly asks for wireframes / low-fi / quick exploration → read 
    built-in-skills/wireframe.md
    .
  • Otherwise (default) → read both 
    built-in-skills/hi-fi-design.md
     and 
    built-in-skills/interactive-prototype.md
    .
  • Other output types (deck, mobile app, animation, design system, PDF/PPTX export, etc.) → read the matching file. The full list is at the bottom of 
    system-prompt.md
    .
4. Ask clarifying questions. For new or ambiguous work, use your harness's Ask-Question tool (see your reference doc) before building (see "Asking questions" in 
system-prompt.md
). Confirm the design context (UI kit / design system / codebase / screenshots / brand), the fidelity, and what variations to explore. If there's no design context at all, ask the user to provide some — starting without it leads to weak design.
5. Set up the output folder. Create 
designs/<descriptive-project-name>/
in the working directory and write all HTML deliverables + copied assets there. Never scatter design files in the repo root.
6. Build, preview, and verify. Produce the deliverable following 
system-prompt.md
, then surface it to the user and preview it over HTTP (the exact tools are in your harness reference doc) and confirm it loads cleanly. Fix any errors before finishing.
1. 加载方法体系。阅读此技能目录下的
system-prompt.md
——这是核心设计流程和工艺标准。整个工作过程都需遵循其中内容。
2. 识别您的框架并加载其工具参考文档。通用工具（shell、文件读写/编辑/搜索、
gh
）在所有环境中的使用方式一致，无需特殊文档。框架专属工具——向用户提问、预览/展示页面、截图以及调试/验证——因环境而异。请检测您的框架并阅读对应的文档：
  • Claude Code（具备
    AskUserQuestion
    、
    SendUserFile
    、Claude Preview MCP）→ 阅读
    references/claude.md
    。
  • Cursor（具备
    AskQuestion
    、
    cursor-ide-browser
    / 
    user-chrome-devtools
    MCP）→ 阅读
    references/cursor.md
    。
  • Codex Agent（具备
    functions.*
    、
    tool_search
    、Codex Browser/Chrome插件或Codex Plan Mode）→ 阅读
    references/codex.md
    。
  • 类似Claude Desktop或未知的支持文件操作的框架→ 使用
    system-prompt.md
    中的通用工作流；在聊天中提问，正常写入文件，通过HTTP服务
    designs/
    目录，并告知用户本地文件路径和URL。
3. 加载合适的内置技能。启动设计项目时，读取同一目录下的
built-in-skills/
文件夹中的内容：
  • 用户明确要求线框图 / 低保真 / 快速探索→ 阅读
    built-in-skills/wireframe.md
    。
  • 其他情况（默认）→ 同时阅读
    built-in-skills/hi-fi-design.md
    和
    built-in-skills/interactive-prototype.md
    。
  • 其他输出类型（演示文稿、移动应用、动画、设计系统、PDF/PPTX导出等）→ 阅读对应的文件。完整列表位于
    system-prompt.md
    底部。
4. 提出澄清问题。对于新的或模糊的任务，在开始制作前使用框架的提问工具（请查看您的参考文档）（详见
system-prompt.md
中的“提问”部分）。确认设计背景（UI组件库/设计系统/代码库/截图/品牌）、保真度以及需要探索的变体。如果完全没有设计背景，请要求用户提供——缺乏背景信息会导致设计质量不佳。
5. 设置输出文件夹。在工作目录中创建
designs/<描述性项目名称>/
文件夹，并将所有HTML交付物及复制的资源写入其中。切勿将设计文件分散存储在仓库根目录。
6. 制作、预览和验证。遵循
system-prompt.md
制作交付物，然后向用户展示并通过HTTP预览（具体工具请查看框架参考文档），确认其可正常加载。完成前修复所有错误。

Notes

注意事项

  • system-prompt.md
    is the single source of truth for craft; 
    references/<harness>.md
    is the single source of truth for which tool to call. This file just orchestrates the entry flow.
  • Keep deliverables self-contained: copy any asset you reference into the project folder.
  • system-prompt.md
    是工艺标准的唯一来源；
    references/<harness>.md
    是工具调用的唯一来源。本文件仅负责编排入口流程。
  • 保持交付物的独立性：将所有引用的资源复制到项目文件夹中。