# Superdesign

> Frontend UI/UX design agent for finding design inspiration and iterating design drafts on an infinite canvas, with CLI commands for projects, drafts, variations, and flow pages. USE WHEN designing a feature, page, or flow before implementation, exploring style variations, or reproducing an existing UI.

- Skill: `sheshiyer/superdesign` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add sheshiyer/superdesign`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sheshiyer/superdesign/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Sheshiyer (https://skillmd.com/u/sheshiyer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sheshiyer/superdesign

---


SuperDesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.

---

# Core scenarios (what this skill handles)

1. **superdesign init** — Analyze the repo and build UI context to `.superdesign/init/`
2. **Help me design X** (feature/page/flow)
3. **Set design system**
4. **Help me improve design of X**

# Init: Repo Analysis

When `.superdesign/init/` directory doesn't exist or is empty, you MUST automatically:
1. Create the `.superdesign/init/` directory
2. Fetch the init prompt from the URL below
3. Follow the prompt instructions to analyze the repo and write context files

```
https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/INIT.md
```

Do NOT ask the user to do this manually — just do it.

# MANDATORY: Read Init Files Every Time

**CRITICAL**: When `.superdesign/init/` exists, you MUST read ALL files in this directory at the START of every design task:
- `components.md` — shared UI primitives inventory
- `layouts.md` — full source code of layout components
- `routes.md` — route/page mapping
- `theme.md` — design tokens, CSS variables, Tailwind config

These files contain pre-analyzed codebase context that is ESSENTIAL for accurate design reproduction. Reading them is NOT optional — it's mandatory for every design task.


# Superdesign CLI (MUST run before any command)

**IMPORTANT: Before running ANY superdesign command, you MUST ensure the CLI is installed and logged in.**

Follow these steps in order — do NOT skip any step:

1. Check if CLI is already installed:
   ```
   superdesign --version
   ```
   - If the command succeeds (prints a version), **skip installation** and go to step 2.
   - If the command fails (not found), install the CLI:
     ```
     npm install -g @superdesign/cli@latest
     ```
2. Check login status by running any command (e.g. `superdesign --help`). If you see an auth/login error, run:
   ```
   superdesign login
   ```
   Wait for login to complete successfully before proceeding.
3. Only after login succeeds, run your intended superdesign commands.

> **Never assume the user is already logged in.** Always verify login first.

# How it works
MUST MANDATORY Fetch fresh guidelines below:
```
https://raw.githubusercontent.com/superdesigndev/superdesign-skill/main/skills/superdesign/SUPERDESIGN.md
```

Action accordingly based on instruction in the SUPERDESIGN.md