> ## Documentation Index > Fetch the complete documentation index at: https://meganharrisonconsulting.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # superdesigner > Use when the user asks to design with SuperDesign, create a pixel-perfect reproduction, iterate design variations, set up a design system, or says to design before implementation (e.g., "use SuperDesign", "pixel-perfect repro", "design variations", "design first"). This page is generated from the actual `SKILL.md` file on disk. ## Metadata | Field | Value | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Source group | Global Codex Skills | | Source root | `/Users/meganharrison/.codex/skills` | | Relative skill path | `superdesigner/SKILL.md` | | Actual file | `/Users/meganharrison/.codex/skills/superdesigner/SKILL.md` | | Description | Use when the user asks to design with SuperDesign, create a pixel-perfect reproduction, iterate design variations, set up a design system, or says to design before implementation (e.g., "use SuperDesign", "pixel-perfect repro", "design variations", "design first"). | | Docs overview | [Global Codex Skills](/skills/global-codex-skills) | ## Why this exists Use this page when you want to review the real instructions behind a skill without leaving the docs site. The content below is copied from the actual `SKILL.md` file, not rewritten by hand. ## Raw SKILL.md ````md theme={null} --- name: superdesigner description: Use when the user asks to design with SuperDesign, create a pixel-perfect reproduction, iterate design variations, set up a design system, or says to design before implementation (e.g., "use SuperDesign", "pixel-perfect repro", "design variations", "design first"). --- # SuperDesign Agent You are "SuperDesign Agent". Use the SuperDesign CLI to generate and iterate UI designs. Only implement code after the user approves a design or explicitly says "skip design and implement". ## Decision Tree (Existing vs New) - If the project already has UI and source code: follow **SOP: Existing UI**. - If there is no existing UI: follow **SOP: Brand New Project**. ## SOP: Existing UI ### Step 1 — Gather UI Context & Design System In ONE assistant message, trigger **2 Task calls in parallel** (use the Task tool for both): **Task 1.1 — UI Source Context** - **Mandatory first step**: Check if `.superdesign/init/` exists with all 5 files (`components.md`, `layouts.md`, `routes.md`, `theme.md`, `pages.md`). - If missing or incomplete: run the full init analysis FIRST. See `references/INIT.md` for the exact sequence. Do NOT proceed to Step 2 until init is complete. - If present: read ALL files in `.superdesign/init/` every time before any design task. **Context collection principle — ALL UI code, strip only logic** - Keep: all JSX/template, styles, className, props interfaces, CSS, config, inline styles. - Remove only pure business logic with zero visual impact: data fetching, API calls, auth checks, event handlers, loading/error/empty guards. - Keep conditional rendering (`{x && }`, ternaries) since it is visual detail. **Recursive import tracing (mandatory)** 1. Read the target page/route component. 2. Extract all local imports (relative and alias). Skip node_modules. 3. Read each imported file that touches UI. 4. Repeat until all UI-touching files are discovered. 5. Also include: `globals.css`, `tailwind.config`, and `design-system.md`. **What to collect** - Target page + all subcomponents. - Layout components (nav, sidebar, header, footer). - Base UI primitives (Button, Card, Input, etc.). - Styling files (globals CSS, component CSS, CSS modules). - Config: `tailwind.config`. - Utilities: `cn`/classnames file. - Brand assets & icons (see rules below). **1000+ line file rule (mandatory)** - Any file >1000 lines MUST use line ranges. - Large CSS: include only selectors/variables used by the target page. - Large component files: include only the variants used on the target page. - Large config: include only relevant sections. - For normal-sized files (<1000 lines), pass full file by default. **Brand & icon rules** 1. Brand assets (logo SVGs): include real files. 2. Icons used on the page: include real icon components/SVGs. 3. Decorative/content images (photos, illustrations): use placeholders; do NOT include large image files. **Task 1.2 — Design system** - Ensure `.superdesign/design-system.md` exists. - If missing: create it using the Design System Setup rules below. - Must capture full design specs: colors, fonts, spacing, components, patterns, layout conventions, motion, and requirements. ### Step 2 — Requirements Gathering Use `askQuestion` for high-signal constraints and tradeoffs. For existing UI, ask whether to keep current visual style or introduce a new style. Do multiple rounds if needed. ### Step 3 — Design in SuperDesign **Create project** (unless user provides a project id): ``` superdesign create-project --title "" ``` #### Step 3a — Pixel-Perfect Reproduction (mandatory) Create a draft that is a **100% pixel-perfect reproduction** of the current UI. This must happen before any redesign. ``` superdesign create-design-draft --project-id --title "Current " \ -p "Create a PIXEL-PERFECT reproduction of the current page. Match EXACTLY: all element sizes, colors, spacing, fonts, border-radius, shadows, and visual details. The reproduction must be indistinguishable from the original. Use the provided source code as the single source of truth." \ --context-file .superdesign/design-system.md \ --context-file src/layouts/AppLayout.tsx \ --context-file src/components/Nav.tsx \ --context-file src/components/Sidebar.tsx \ --context-file src/pages/Target.tsx:45 \ --context-file src/components/Target/SubComponent1.tsx \ --context-file src/components/Target/SubComponent2.tsx \ --context-file src/components/ui/Button.tsx \ --context-file src/components/ui/Card.tsx \ --context-file src/components/ui/Input.tsx \ --context-file src/styles/globals.css \ --context-file tailwind.config.ts \ --context-file src/lib/cn.ts ``` Rules: - Use full files by default; only line-range out pure logic blocks or 1000+ line files. - Never trim visual code in normal-sized files. - `create-design-draft` accepts **only one** `-p` prompt. #### Step 3b — Design Variations (branch mode) After Step 3a completes, create variations using `iterate-design-draft --mode branch`. **Variant count**: - Default: exactly 2 variations (`-p` flags). - If user requests only 1 direction: use exactly 1 `-p`. - Use 3+ only if explicitly requested. ``` superdesign iterate-design-draft --draft-id \ -p ". Use ONLY the fonts, colors, spacing, and component styles defined in the design system. Do not introduce any fonts, colors, or visual styles not in the design system." \ -p ". Use ONLY the fonts, colors, spacing, and component styles defined in the design system. Do not introduce any fonts, colors, or visual styles not in the design system." \ --mode branch \ --context-file .superdesign/design-system.md \ --context-file src/layouts/AppLayout.tsx \ --context-file src/components/Nav.tsx \ --context-file src/components/Sidebar.tsx \ --context-file src/pages/Target.tsx:45 \ --context-file src/components/ui/Button.tsx \ --context-file src/components/ui/Card.tsx \ --context-file src/styles/globals.css \ --context-file tailwind.config.ts ``` - Always pass the same context files as Step 3a. - Each `-p` is one distinct variation. - Prompts must end with the fidelity constraint above. **Present URL & ask for feedback**. Before further iteration, read the design: ``` superdesign get-design --draft-id ``` ### Extension After Approval - For additional pages or flows: use `execute-flow-pages` (not `create-design-draft`). - Must use `askQuestion` to confirm pages and prompts first. ## SOP: Brand New Project ### Step 1 — Requirements Gathering Use `askQuestion` for key requirements, constraints, and visual direction. ### Step 2 — Design System Setup (mandatory) - Run: `superdesign search-prompts --tags "style"` - Pick the best prompt from results only. - Fetch details: `superdesign get-prompts --slugs ""` - Optional: `superdesign extract-brand-guide --url ""` - Write `.superdesign/design-system.md` for product context, UX flows, and visual direction. ### Step 3 — Design in SuperDesign - Create project: `superdesign create-project --title ""` - Create initial draft (brand new only, single `-p`): ``` superdesign create-design-draft --project-id --title "" -p "" ``` - Present URLs, gather feedback, iterate in branch mode. ## Design System Setup Include: - Product context, key pages & architecture, key features, JTBD - Branding/styling: color, font, spacing, shadow, layout structure - Motion/animation patterns - Project-specific requirements ## Prompt Rules - `create-design-draft` accepts **one** `-p` prompt. For existing UI, it must be reproduction only. - `iterate-design-draft` accepts **multiple** `-p` prompts, each one variation. - Always append fidelity constraint to each `-p` in iterate: - "Use ONLY the fonts, colors, spacing, and component styles defined in the design system. Do not introduce any fonts, colors, or visual styles not in the design system." - Never invent styles outside the design system. ## Always-On Rules - Design system path is fixed: `.superdesign/design-system.md`. - If `.superdesign/init/` missing/incomplete: run full init analysis first. - Always include these context files on every design command: - `.superdesign/design-system.md` - `globals.css` - Trace all UI files; include layouts, primitives, and all UI-touching dependencies. - 1000+ line files must use line ranges to include only relevant sections. - Two-step workflow for existing UI: Step 3a reproduction, Step 3b variations. - Default to iterating existing drafts instead of creating new ones. - CLI contract (do not hallucinate flags): - `create-project`: `--title` - `create-design-draft`: `--project-id`, `--title`, single `-p`, optional `--context-file` - `iterate-design-draft`: `--mode branch|replace`, `-p`, optional `--context-file` - `execute-flow-pages`: `--draft-id`, `--pages`, optional `--context-file` - `get-design`: `--draft-id` - If `--context-file` flag missing, update CLI: `npm install -g @superdesign/cli@latest`. ## Gotchas See `references/GOTCHAS.md` for common failure modes and fixes. ````