Prompt With Jarvis
Work with meGet the free pack
All guides

CANVASYou commented this keyword

Superdesign

A skill that lets Claude Code design UI, slide decks and graphics on the Superdesign canvas, using your existing design system as the starting point.

Before you start:
  • Claude Code
  • Node.js (npm)
  • A Superdesign account
Setup
5 min
Level
Intermediate
Stars
628
License
MIT
Jump to the install commandView on GitHub

What it does

Coding agents tend to ship generic-looking interfaces. Superdesign is an AI product design agent that this skill connects to Claude Code.

It reads your code for context, gathers real style references, and produces design drafts on an infinite canvas that you can branch and refine. It also makes presentations and graphics like posters, covers, social posts and ads, and it can set up or extract a design system for your project.

Install it

  1. Open Claude Code.
  2. Add the marketplace and install the plugin with the first block below.
  3. In your terminal, install the Superdesign CLI and log in with the second block.
  4. Do not also run npx skills add in Claude Code. That installs a second copy of the same skill.

Install the plugin

Claude Code
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign

Install the CLI and log in

Terminal
npm install -g @superdesign/cli@latest
superdesign login

Use it

  1. Installed as a plugin, the skill is called /superdesign:superdesign. Type it, then say what you want.
  2. Try: "set up a design system from my current codebase".
  3. Then: "help me redesign this settings page so it doesn't look like default AI slop" or "create an 8-slide presentation about our product launch".
  4. Superdesign shares a preview link for each draft. Give feedback and it iterates.

Good to know

Using another coding agent like Cursor or Codex? Install with npx skills add superdesigndev/superdesign-skill, then install the CLI the same way.

This is not the older archived Superdesign VS Code extension. The skill and superdesign.dev are the current product. The README does not list pricing, so check superdesign.dev before you sign up.

Links

Want the next one first?

One new guide a week, straight to your inbox.

More like this