← ClaudeAtlas

superdesignlisted

Superdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages). Supports line ranges: --context-file path:startLine:endLine
evgeniiakruglova/marketing-skills · ★ 0 · Web & Frontend · score 63
Install: claude install-skill evgeniiakruglova/marketing-skills
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 Init Files If `.superdesign/init/` exists, you MUST read ALL files in this directory FIRST before any design task: - `components.md`, shared UI primitives with full source code - `layouts.md`, shared layout components (nav, sidebar, header, footer) - `routes.md`, page/route mapping - `theme.md`, design tokens, CSS variables, Tailwind config - `pages.md`, page component dependency trees (which files each page needs) **When designing for an existing page**: First check `pages.md` for the page's complete dependency tree. Every file in that tree MUST be passed as `--context-file`. Then also add globals.css, tailwind.config, and design-system.md. # Superdesign CLI (MUST run bef