Analyse Design Skill: Reverse-Engineer a Design System

What is the analyse-design skill?

Most design skills help you create an interface. The analyse-design skill works backwards: it studies an interface that already exists and writes the design system down. It sits in the Skills folder of a repository of agent rules, skills and templates.

The SKILL.md casts the agent as a UI and UX design analyst. Unless you say otherwise, the goal is a reference document that lets a developer build components that belong in the application, whether the source is a codebase, a website or screenshots.

Where it looks first

1. Theme and token files, such as tailwind.config, Tailwind v4 CSS-first @theme blocks, theme.ts, tokens.json and variables.css.
2. Global styles, including global.css, app.css and CSS custom properties on :root or [data-theme].
3. Component library config, such as shadcn components.json, a MUI theme, a Chakra theme or Ant Design config.
4. Layout components like the shell, sidebar, header and navigation.
5. Representative components, such as buttons, inputs, cards and modals.

What the reference document contains

• A design philosophy with a Key Characteristics list, such as 0px radius on primary buttons or a single accent color.
• A colour table with real values, usage and contrast notes, a typography table, and a spacing scale listing values and where they apply.
• A component inventory with radii, shadows, states and the source file for each pattern.
• Do and Don't lists derived from the dominant patterns, plus notes on inconsistencies and one-off values.
• An AI implementation guide with copy-paste color and type values and sample component descriptions.

Who the analyse-design skill is for

Best for

• Joining an unfamiliar frontend and needing its visual rules written down before you change anything.
• Documenting a design system that only exists in code.
• Giving a coding agent a precise style brief so new components match the old ones.
• Auditing consistency, since the output lists one-off values and places where the system breaks down.

Not for

• Designing something new from scratch. The skill describes what exists. For design documents of another kind, see design-md.
• Scoring visual quality. It records observed patterns and does not give a grade.
• Cloning a site automatically. It produces documentation, not a rebuilt page.

Use it with UiChemy

If you are recreating a look in WordPress, run the skill on the source site or codebase first, then use its color and type tables as the brief in UiChemy Composer, which writes real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com. See also extract-design-system.

How to install Analyse Design Skill: Reverse-Engineer a Design System

git clone https://github.com/sammcj/agentic-coding.git

1. Clone the repository

   Run git clone https://github.com/sammcj/agentic-coding.git. The skill sits in the Skills/analyse-design folder.

2. Copy the skill folder

   Copy Skills/analyse-design to wherever your AI coding agent loads skills from. The README says most skills in the repository are reasonably portable between agentic coding tools.

3. Open the project to analyse

   Start the agent in the codebase you want documented, or provide screenshots of the website or document.

4. Ask for the analysis

   Request something like extract the color palette, document the UI patterns or audit design consistency, and choose a markdown file or chat output when asked.

Check that it loaded

Ask the agent to analyse the design system of a small project. It should create tasks for each phase, cite the theme files it found and offer a markdown file or an in-chat reference.

Read the official instructions on GitHub

Key features

• Prioritized source scanThe agent checks theme and token files before global styles, library config, layout components and representative components, so the strongest evidence is read first.
• Task per phaseBefore analysing, the agent creates a task for scope, source scan, dimension analysis and each output section, then works them to completion.
• Eight analysis dimensionsDesign language, color palette, typography, spacing and layout, component patterns, iconography, motion and responsive behavior are each analysed with specific files and style definitions cited.
• Actual color valuesThe agent extracts real values and names primary, secondary, accent, background, surface and semantic colors, noting contrast ratios and dark or light mode support.
• Ten-part output structureFindings are organized as philosophy, color system, typography scale, spacing scale, component inventory, icons and motion, responsive strategy, Do and Don't, consistency notes and an AI guide.
• Derived Do and Don't rulesRules come from observed dominant patterns, for example that depth comes from background layering instead of shadows on cards.
• Consistency notesInconsistencies, one-off values and areas where the design system breaks down are listed in their own section.
• AI implementation guideA quick color and type reference, plus three to five natural-language component descriptions, lets an AI agent build matching UI, with iteration hints.
• Delivery choice and tipsThe agent asks whether you want a markdown file such as docs/DESIGN_LANGUAGE.md or an in-chat answer. It suggests screenshots and sub-agents for parallel work.

Frequently asked questions