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 a standalone skill (it does not require the PMA workflow) and runs on Claude Code or Codex 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 — previewing/showing a page, taking screenshots, and debugging/verifying — differ per environment. Asking the user a question works the same everywhere: structured ask tools (e.g. AskUserQuestion) are disabled in this environment, so always ask as a concise list in chat and wait for the reply. Detect your harness and read the matching doc once:

• Claude Code (you have Read/Write/Edit/Glob, Agent subagents) → read references/claude.md.
• Codex Agent (you have functions.*, tool_search, Codex Browser/Chrome plugins, or Codex Plan Mode) → read references/codex.md.
• Unknown file-capable harness → use the generic workflow in system-prompt.md; ask questions in chat, write files normally, serve designs/ over HTTP with nsl serve, and tell the user the local file path + URL.