skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

superdesign

Analyze codebases to extract UI context and design tokens.

Updated Apr 14, 2026
Search Tags:#design#ui#frontend#iterations#design-system#pixel-perfect#drafts
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill superdesign-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superdesign
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/superdesign
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill superdesign-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It automates the end-to-end UI design workflow by analyzing a codebase and generating design-ready context to speed up UI work.

Core Features & Use Cases

  • Analyze repositories to extract actionable UI context and design tokens
  • Generate pixel-perfect design drafts and design variations from existing code
  • Manage design-system fidelity by enforcing tokens, colors, spacing, and component styles

Quick Start

Request a design task to pixel-perfectly reproduce the current UI and then generate design variations.

Frequently Asked Questions about superdesign

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

FAQPage Schema
How do I extract design tokens and UI context from an existing codebase?▼

To extract design tokens and UI context from a codebase, you analyze frontend repositories to identify CSS tokens, color definitions, spacing rules, and source UI components. This generates actionable design context to speed up subsequent UI work.

Can I generate pixel-perfect UI drafts directly from frontend code?▼

Yes, you can generate pixel-perfect UI drafts directly from frontend code by enforcing a formal design system specification. Analyzing source UI components and CSS tokens ensures faithful reproduction of the existing UI before creating design variations.

What is a design system spec and do I need one to reproduce a UI?▼

A design system spec defines the formal rules for tokens, colors, spacing, and component styles. You need this specification alongside your source UI components to ensure pixel-perfect fidelity and faithful reproduction of the existing UI.

How do I create design variations from existing UI components?▼

To create design variations from existing UI components, first analyze the codebase to extract design tokens and context. Once the current UI is pixel-perfectly reproduced using the formal design system spec, you can generate iterative design explorations across components.

What's the best way to maintain design-system fidelity across frontend projects?▼

The best way to maintain design-system fidelity across frontend projects is to enforce consistent CSS tokens, colors, spacing, and component styles. Analyzing the codebase ensures a formal design system spec is applied correctly to produce faithful drafts and variations.

Why does UI reproduction require source components and CSS tokens?▼

Pixel-perfect UI reproduction requires source components and CSS tokens because they provide the foundational styling and structural context. Without these elements, a formal design system spec cannot accurately enforce fidelity across the generated drafts.

Related Skills

Explore More Design & Creative Skills→
vrcmsvrcms
1

design-system

Analyze codebase styling patterns to generate design tokens and audit visual consistency.

Community
Advanced
lawvablelawvable
630

skill-optimizer-malik-taiar

Analyze conversations to extract actionable improvement instructions for other skills.

Official
Advanced
Hashzin-0Hashzin-0

design-system-rigoroso

Enforce token-based styling and required visual states across UI components.

Community
Intermediate
bryanvillamilpragmabryanvillamilpragma
3

superdesign

Analyze frontend codebases and generate UI design drafts with SuperDesign CLI.

Community
Advanced