// 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.
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.
| 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.