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

Ready to run

npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill superdesign-gerald-ica

💬 Prompt for ChatGPT / Claude Chat▼

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.