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.

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.