Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Superdesign Canvas

Drives the Superdesign CLI to design UI, slide decks, posters and image/video assets on an infinite canvas across multiple frontier models.

Design & UIIntermediate★ 600⑂ 46AI score 8/10Last updated: Aug 21, 2026

What it does

  • Runs the Superdesign CLI (npx @superdesign/cli) to create projects and drafts, then hands you the live canvas: URL to watch designs stream in.
  • Auto-analyzes a real codebase into six context files under .superdesign/init/ (components, layouts, routes, theme, pages, extractable components) before designing existing UI.
  • Lets you pick and compare leading models side by side, with clear replace-vs-branch iteration routing and version history.
  • Extracts design language from a reference URL, builds design systems, and covers presentations, posters/social graphics, and supporting image/video generation.
  • Checks .superdesign/resume.json first so follow-up edits reuse warm context instead of rediscovering the repo.

Who it's for

  • Frontend devs and designers with a Superdesign account who want multiple UI directions fast.
  • Product teams redesigning existing pages or needing on-brand decks and marketing graphics.
  • Anyone who wants to A/B different AI models on the same design brief.

Examples

  1. "Make the dashboard darker and denser" → warm resume path updates the existing draft using only the saved context bundle.
  2. "Design a landing page in the style of this URL" → extract-website pulls the design DNA, then several models generate variants.
  3. "Ten-slide investor deck" → outline approved in chat, real presentation draft generated, optional editable PPTX export.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/superdesigndev/superdesign-skill/HEAD/skills/superdesign/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/superdesign folder from the GitHub repo superdesigndev/superdesign-skill into my ~/.claude/skills/superdesign/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/superdesigndev/superdesign-skill.git /tmp/superdesign-skill && cp -r /tmp/superdesign-skill/skills/superdesign ~/.claude/skills/superdesign

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js is installed (node -v); the CLI is invoked via npx.
  2. Clone the repo: git clone https://github.com/superdesigndev/superdesign-skill.git
  3. Copy the skill folder: cp -r superdesign-skill/skills/superdesign ~/.claude/skills/superdesign
  4. Verify the references/ docs (SUPERDESIGN.md, INIT.md, PRESENTATION.md, GRAPHIC.md, etc.) came along.
  5. Run npx --yes @superdesign/cli@latest once as a preflight and read the auth: line; if not authenticated, run npx --yes @superdesign/cli@latest login.
  6. Restart Claude Code and ask something like "redesign this landing page". Note that the session needs shell access and each generation consumes Superdesign credits.
View source on GitHub ↗License: MIT