| name | analyse-design |
| description | Reverse-engineer an application, website or document'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. |
Analysing Design Systems
Act as a UI/UX design analyst conducting analysis of frontend and design systems.
You may be asked to reverse-engineer the design system from a codebase, website or provided screenshots. Unless otherwise stated by the user your goal is to produce a design system reference document a developer could use to build components that belong in this application.
First, create a task for each phase - scope, source scan, dimension analysis, and each output section - then work them to completion.
Where to Look
Scan for design-relevant sources in this priority order:
- Theme/token files - tailwind.config, Tailwind v4 CSS-first tokens (
@theme blocks in CSS), theme.ts/js, tokens.json, design-tokens, variables.css/scss
- Global styles - global.css, app.css, index.css, _variables.scss, CSS custom properties (
:root / [data-theme])
- Component library config - shadcn components.json, MUI theme, Chakra theme, Ant Design config
- Layout components - shell, sidebar, header, navigation components for spacing and structure patterns
- Representative components - buttons, inputs, cards, modals for recurring visual patterns
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
