superdesign

Generates UI design context and design tokens from an existing frontend codebase.

3|Updated Dec 22, 2025

Search Tags:#automation #design #ui #code-analysis #design-system #drafts #component-extraction

Ready to run

npx skills add https://github.com/JoaquinCampo/Skills --skill superdesign-joaquincampo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: superdesign
Source: https://github.com/JoaquinCampo/Skills/tree/main/superdesign
Command: npx skills add https://github.com/JoaquinCampo/Skills --skill superdesign-joaquincampo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the generation of UI design context from a codebase to guide pixel-perfect drafts and design-system alignment.

Core Features & Use Cases

Generate initialization context (design tokens, layout guidance) from an existing frontend project.
Prepare on-demand design contexts for drafts, iterations, and component extraction.
Facilitate design-system-driven workflows with reusable components and layout primitives.

Quick Start

Run the SuperDesign agent to analyze the repository and generate initial UI context under .superdesign/init/.

Frequently Asked Questions about superdesign

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

FAQPage Schema

How do I generate UI design context from an existing codebase?▼

To generate UI design context from a codebase, this Skill performs static code analysis on full source files to produce init files, rhythm guidelines, and draft components under a designated directory.

Can I extract design tokens and layout primitives from existing web apps?▼

Yes, you can extract design tokens and layout primitives from existing web apps by analyzing the full source files to guide design-system-driven iterations and generate reusable components.

What do I need to provide for pixel-perfect UI design generation from code?▼

You need to provide static code analysis access, a design system definition, and full source files as context to successfully generate pixel-perfect UI drafts and initialization context.

Does this design system workflow work with modern frontend frameworks?▼

This design system workflow applies to existing web apps built with modern frameworks, enabling scalable design workflows, component extraction, and design-system-driven iterations.

What is the best way to automate design-system-driven iterations for web apps?▼

The best way to automate design-system-driven iterations is by running an agent that analyzes repository source files to generate initial UI context and on-demand design drafts.

Why does UI design context generation require full source files?▼

UI design context generation requires full source files because static code analysis needs complete repository context to accurately produce design tokens, rhythm guidelines, and draft components.