SkillFoxx

Superdesign skill

A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI

  • 982 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • Runs a CLI in the shell and reads the project code for context
  • Talks to the superdesign.dev service and requires a login
All reasons and checks

superdesigndev/superdesign-skillAuthor:Superdesign

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/superdesign

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Runs a CLI in the shell and reads the project code for context
  • Talks to the superdesign.dev service and requires a login

This is third-party code. Review the repository files before installing.

What it does

The skill gives the agent a design process: it reads the project code for context, gathers style references and produces UI drafts on an infinite canvas. Work runs through the superdesign CLI, which the agent calls to search the prompt library, extract a site's style and generate drafts. Beyond pages and flows it builds presentations from an approved slide outline and graphics like posters and covers. Drafts can be branched and refined, and across sessions the skill remembers the project and extracted components.

Who it is for. For developers and product designers who want polished UI without leaving their coding agent.

Good fit when

  • The agent shipped generic UI and it needs a considered look
  • You need a design system extracted from the current codebase
  • You need a presentation or graphics from an approved plan rather than random slides

Not a fit when

  • The session has no shell access, and the superdesign CLI runs only over the shell
  • You only need code without a canvas design step

Example request

Help me redesign this settings page so it doesn't look templated

Limitations

The skill runs through the superdesign CLI, which needs shell command execution, installing @superdesign/cli and signing in with superdesign login. Some models and features belong to the superdesign.dev service. Without shell access the skill cannot run.

How to disable. Remove the superdesign plugin via /plugin or the skill folder, and optionally uninstall the global @superdesign/cli package.

FAQ

Do I need an account?

Yes. The skill drives the superdesign CLI, which needs @superdesign/cli installed and superdesign login.

Is this the old VS Code extension?

No. The open-source superdesign VS Code extension is a separate, legacy project; this skill and superdesign.dev are the maintained ones.

Discussion

No questions or reviews yet.

Skills

A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.

SkillExtended access51

A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL

SkillMinimal access54K48

A design skills pack for agents: research, UX strategy, design systems, UI, interaction, prototyping and visual critique

PluginMinimal access3.3K

A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content

SkillExtended access2.1K

An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look

SkillExtended access685

Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile

SkillMinimal access114.1K111

README in short

The README describes a skill that gives coding agents design judgment: the agent finds a style direction, sets up a design system, and generates and iterates UI, slides and graphics on a canvas. It reads the project code, gathers real references and makes branchable drafts. Unlike theme-swap skills, it designs inside your existing design system. It installs with one npx skills add command for many agents or as a Claude Code plugin, and needs the CLI installed and a login. MIT licensed.

README badge

Original SKILL.md

---
name: superdesign
description: "Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide deck, or brand-new product; improve or reproduce existing UI; compare design results across top models; explore visual variants; set or extract a design system; build reusable components or multi-page flows; create presentations; or create posters and marketing graphics, even if they never say the word 'design tool'. Also supports generating supporting image or video assets when a design needs them."
---

Superdesign helps you find design inspiration and generate or iterate design drafts on an infinite canvas, with multiple leading models available for different design tasks and side-by-side exploration. When a design needs a new visual asset, it can also provide image and video generation.

# Core scenarios (what this skill handles)

1. Analyze a codebase for design work
2. Design, reproduce, or improve UI
3. Choose and compare leading design models
4. Create design systems and reusable components
5. Design from a live website or reference URL
6. Create or export presentations
7. Create graphics
8. Generate supporting images or video
9. Continue or directly correct existing work

Report a problem