playbooks

home / skills / sammcj / agentic-coding / analyse-design

analyse-design skill

/Skills/analyse-design

This skill reverse-engineers a design system from code and screenshots to produce a developer-ready design reference for components.

npx playbooks add skill sammcj/agentic-coding --skill analyse-design

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.2 KB
---
name: analyse-design
description: Reverse-engineer an application's design system from its codebase and screenshots. Use when asked to analyse visual design, extract a colour palette, document UI patterns, identify typography and spacing systems, audit design consistency, or understand the design language of a frontend codebase.
# allowed-tools: Read,Write,Edit,Grep,Glob
# model: inherit
---

Act as a UI/UX design analyst conducting a visual audit. Reverse-engineer the design system from the codebase and any provided screenshots.

Goal: produce a design system reference document a developer could use to build components that belong in this application.

## Where to Look

Scan for design-relevant sources in this priority order:

1. **Theme/token files** -- tailwind.config.*, theme.ts/js, tokens.json, design-tokens.*, variables.css/scss
2. **Global styles** -- global.css, app.css, index.css, _variables.scss, CSS custom properties (`:root` / `[data-theme]`)
3. **Component library config** -- shadcn components.json, MUI theme, Chakra theme, Ant Design config
4. **Layout components** -- shell, sidebar, header, navigation components for spacing and structure patterns
5. **Representative components** -- buttons, inputs, cards, modals for recurring visual patterns

Use `Glob` and `Grep` to locate these efficiently before reading files.

## Dimensions to Analyse

For each dimension, cite specific files and style definitions.

- **Design language** -- visual school/philosophy (e.g., neo-brutalist, material, glassmorphism, minimal flat). Mood conveyed. Unique visual signatures
- **Colour palette** -- extract actual values. Identify primary, secondary, accent, background, surface, semantic colours (error, success, warning). Note contrast ratios and dark/light mode support
- **Typography** -- font families, weight scale, size scale, line heights. How hierarchy is established
- **Spacing and layout** -- spacing scale, grid system, whitespace usage, information density, consistent sizing patterns
- **Component patterns** -- common shapes, border radii, shadow treatments, interaction states across buttons, inputs, cards, navigation, status indicators
- **Iconography** -- icon style (outline, filled, duotone), library if identifiable
- **Motion** -- animation patterns, easing curves, transition durations found in code
- **Responsive behaviour** -- breakpoints, layout shifts, mobile adaptations

## Output Format

Structure findings as:

1. **Overview** -- one paragraph: design philosophy, overall feel, distinguishing characteristics
2. **Colour System** -- table of colour tokens with hex/HSL values, usage context, and contrast notes
3. **Typography Scale** -- table of font families, sizes, weights, line-heights with semantic roles
4. **Spacing Scale** -- list of spacing values and where they apply
5. **Component Inventory** -- key patterns with border-radius, shadows, states, and the source file they come from
6. **Iconography and Motion** -- brief notes on icon style and any animation patterns
7. **Responsive Strategy** -- breakpoints and layout behaviour
8. **Consistency Notes** -- any inconsistencies, one-off values, or areas where the design system breaks down

Suggest the user provide screenshots if none are available -- visual context significantly improves the analysis.

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.

FAQ

What files should I provide for best results?

Provide theme/token files (tailwind.config, theme.ts/js, tokens.json), global styles (index.css), and representative component files (buttons, inputs, layout). Screenshots are highly recommended.

Can you infer values if tokens are missing?

Yes — I extract computed CSS values and sample pixels from screenshots to infer colours, spacing, and type scales, and I flag inferred items vs explicit tokens.

Will you modify the codebase?

No — I only read and analyze files and images. I produce a reference document and remediation suggestions for developers to apply.