// 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.
| 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. |
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.
Scan for design-relevant sources in this priority order:
:root / [data-theme])Use Glob and Grep to locate these efficiently before reading files.
For each dimension, cite specific files and style definitions.
Structure findings as:
AskUserQuestion or similar you may ask the user multi-choice questions to clarify the scope of the analysis, their desired goals and output format.Creates structured development plans with phased task breakdowns, requirements, and QA checklists. Use when the user explicitly asks to create a dev plan, development plan, or document development requirements.
Creating and maintaining CLAUDE.md project memory files and .claude/rules/ rule files that provide non-obvious codebase context. Use when (1) creating a new CLAUDE.md for a project, (2) adding architectural patterns or design decisions to existing CLAUDE.md, (3) capturing project-specific conventions that aren't obvious from code inspection, (4) organising instructions into path-scoped rule files.
Delays execution of a task until a specified time or after a duration. Use when the user asks to run something later, in X minutes/hours, at a specific time, schedule a command, or defer work to a future point.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Rewrites text containing AI slop to make it more human-like. Use when explicitly asked to rewrite AI generated text.
Applies a modified Fagan Inspection methodology to systematically resolve persistent bugs and complex issues. Use when multiple previous fix or debugging attempts have failed repeatedly,or when a methodical root cause analysis or complex problems is needed. Do not use for simple troubleshooting.