superdesign

Generate and iterate UI designs, presentations, and graphics on the Superdesign canvas via CLI.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/farslab/claude-skills --skill superdesign-farslab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superdesign
Source: https://github.com/farslab/claude-skills/tree/main/superdesign
Command: npx skills add https://github.com/farslab/claude-skills --skill superdesign-farslab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @superdesign/cli, and includes references (resource) components.

What problem does it solve? Designing or redesigning frontend UI, slide decks, and marketing graphics normally requires switching between design tools and manually translating codebase context. This Skill connects your repository and briefs to the Superdesign canvas, generating design drafts with leading AI models while preserving your existing design system, components, and brand assets. ## Core Features & Use Cases - UI design and redesign: Analyze a frontend codebase, reproduce existing pages pixel-perfectly, then branch design variations or iterate on a selected direction with version history. - Presentations and graphics: Create editable slide decks from an approved outline, and produce posters, covers, and social media assets on fixed canvases with platform-correct dimensions. - Asset generation and brand consistency: Generate supporting images or video, upload logos and fonts as Brand Assets, and extract reusable components so every draft matches your product identity. - Use Case: Ask to redesign your dashboard — the Skill analyzes your repo, reproduces the current page as ground truth, generates two alternative design directions on the canvas, and resumes the saved draft in later sessions without re-analyzing the codebase. ## Quick Start Ask the agent to redesign a page in your project, for example: redesign my dashboard page with a darker, more editorial style and show me the result on the Superdesign canvas.

Frequently Asked Questions about superdesign

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I redesign an existing page with Superdesign?▼

The Skill first runs repo init to analyze your codebase, then creates a pixel-perfect reproduction draft of the current page as ground truth. After that it branches design variations with iterate-design-draft so you can compare directions on the canvas.

How do I create a presentation or slide deck with Superdesign?▼

The Skill gathers your content, visual direction, and transition preferences, then shows a full slide outline for approval before generation. Once approved, it runs create-presentation and returns canvas and preview links for the deck.

Does Superdesign work without a codebase?▼

Yes. In an empty or scratch workspace the Skill skips repo init entirely and gathers design context conversationally. It then creates a design system and generates drafts directly through the brand-new-project path.

Can Superdesign generate images and video for a design?▼

Yes. It can use the host's native image generator or Superdesign's generate-image and generate-video models, chosen via list-models. Generation requires a quoted credit cost that you must explicitly confirm before it runs.

Why does Superdesign require shell access to run?▼

The Skill drives everything through the Superdesign CLI executed with npx, so the environment must be able to run shell commands. Without shell access it cannot authenticate, create projects, or generate drafts, and it will tell you to use a session with shell access instead.

What happens when my code changes after a design was created?▼

The Skill stores fingerprints of context files in .superdesign/resume.json and compares hashes on the next request. Matching hashes resume the saved draft directly, while mismatches trigger an incremental refresh that carries only the verified changes into the next iteration.