skills.rest
JoaquinCampo
JoaquinCampoCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/JoaquinCampo/Skills --skill superdesign-joaquincampo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
leafcoderleafcoder
2

web-design-guidelines

Audit web interface code for WCAG, ARIA, and UX compliance.

Community
Intermediate
rotnitxerotnitxe

superdesign

Analyze frontend code to generate pixel-perfect UI design drafts.

Community
Advanced
fgarofalo56fgarofalo56
6

component-library

Develop reusable component libraries with design tokens and Storybook documentation.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced