analyse-design_skill

Overview

This skill reverse-engineers an application's design system from its frontend codebase and any provided screenshots. It produces a practical design system reference developers can use to build consistent UI components. The output highlights colours, typography, spacing, component patterns, iconography, motion, and responsiveness with file-level citations when available.

How this skill works

I scan the project for theme/token files, global styles, component configs, layout and representative components using glob/grep heuristics. I extract explicit tokens (colors, fonts, spacings) and infer missing rules from CSS/JS values and screenshots. The result is a structured design reference with concrete tokens, usage notes, and places to fix inconsistencies.

When to use it

• When you need a component library or style guide for an existing frontend codebase.
• To audit visual consistency and find mismatched colours, spacing, or typography.
• When onboarding designers or engineers to a legacy project without documentation.
• Before implementing a redesign or migrating to a design-token system.
• When you have screenshots and want the visual language codified into tokens.

Best practices

• Provide theme/token files and representative screenshots for highest-fidelity results.
• Point to primary layout and component files (shell, buttons, cards) to speed analysis.
• Use consistent naming in tokens; I will call out one-off values to consolidate.
• Include both light and dark screenshots if dark mode exists to capture variants.
• Accept suggested token mappings and then run a follow-up pass after changes.

Example use cases

• Generate a colour palette and semantic token mappings from tailwind.config.js and CSS variables.
• Document typography scale and assign semantic roles (heading, body, caption) from fonts.css and components.
• Audit button/input/card patterns and produce recommended border-radius, shadow, and state rules with source file links.
• Identify responsive breakpoints from layout files and describe mobile adaptations.
• Detect animation easing and durations from CSS/JS and summarize motion patterns for transitions.