skills.rest
sarthkdobriyal
sarthkdobriyalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

superdesign

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

Updated Aug 4, 2026
Search Tags:#frontend#design system#canvas#ui design#poster generation#website extraction#superdesign
One-click install
npx skills add https://github.com/sarthkdobriyal/hisaabi --skill superdesign-sarthkdobriyal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superdesign
Source: https://github.com/sarthkdobriyal/hisaabi/tree/main/.agents/skills/superdesign
Command: npx skills add https://github.com/sarthkdobriyal/hisaabi --skill superdesign-sarthkdobriyal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Designing or redesigning frontend UI requires translating codebases, brand styles, and requirements into visual drafts, which is slow when done manually. This Skill drives the Superdesign CLI to analyze a repository, extract design systems, and generate or iterate design drafts on a shareable canvas. ## Core Features & Use Cases - Repo-aware UI design: Analyzes a codebase into .superdesign/init/ context files (components, layouts, routes, theme, pages) and reproduces existing pages pixel-perfectly before branching design variations. - Design system extraction: Builds or refreshes design-system.md from scratch or from a live website URL using extract-website, capturing style DNA, tokens, and brand assets. - Static graphics: Creates posters, flyers, and social/marketing assets on fixed canvases with platform-specific dimension presets, composing AI-generated key visuals with HTML text layers. - Use Case: Ask to redesign your app's dashboard — the Skill reads the real render branch, reproduces the current UI as a ground-truth draft, then generates two branch variations you can review on the canvas and iterate on. ## Quick Start Ask the agent to design a landing page for your product or redesign an existing page, and it will run the Superdesign CLI preflight, analyze the repo if present, and return a canvas link with the generated drafts.

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 build six context files in .superdesign/init/, then creates a pixel-perfect reproduction draft of the current page as ground truth. After that it uses iterate-design-draft in branch mode to generate design variations you review on the canvas.

How do I design a poster or social media graphic with the Superdesign CLI?▼

Confirm the brief (copy, canvas size, layout, style) in one round, generate a key visual with your own image tool, upload it with upload-asset, then run create-design-draft with --kind graphic and the platform dimensions. Text is rendered by the HTML layer, never baked into the image.

Can Superdesign extract a design system from a live website URL?▼

Yes, the extract-website command pulls a site's design DNA into .superdesign/website/<domain>/, including a design.md style guide, tokens, brand assets, and content structure. Through the CLI this produces a style-informed rebuild, not a pixel-perfect clone.

Does Superdesign work in an empty workspace with no codebase?▼

Yes, the brand-new-project path skips repo init entirely and gathers design context conversationally instead. It then sets up a design system, optionally from a reference site, and creates the draft directly.

Why does the Superdesign design command fail with a 400 error?▼

A 400 means the context payload is too large. Trim files over roughly 900 lines to their render sections using the --context-file path:startLine:endLine syntax, and pass the compact token summary from theme.md instead of a full globals.css.

What happens if the Superdesign CLI cannot run in my environment?▼

The Skill requires shell access to run npx @superdesign/cli commands. If command execution is unavailable, it stops and tells you to switch to an environment with shell access or use the web app at superdesign.dev.

Related Skills

Explore More Design & Creative Skills→
vesvietvesviet

setup-design-system

Configure design tokens, styling frameworks, and component primitives for frontend projects.

Community
Intermediate
SaberAlouiSaberAloui

mockup-graduate

Transforms approved sandbox mockups into production components matching the main app's conventions.

Community
Intermediate
tiankong0101-bytetiankong0101-byte

graphic-design

Create visual assets for branding, marketing, and presentations.

Community
Intermediate
ma-waisma-wais

website-cloning

Clone a website's design and content into a deployable React + Vite web app.

Community
Advanced