When to use this workflow
Use extraction to create an evidence-based starting inventory of a product’s visual foundations. It can identify repeated colors, type, spacing, and component patterns, but observation alone does not establish which variations are intentional or which source is authoritative.
A worked example
For a dashboard exercise, inspect a form, a data view, and a feedback state. Record actual values and their sources, then propose roles such as primary text, secondary text, action background, and section spacing. Keep screenshot-based estimates distinct from values read from implementation styles.
Decisions and common mistakes
Do not merge every identical value or delete every outlier. A field boundary and a divider can share a color while serving different responsibilities. An unusual card padding may be a deliberate featured layout. Ask the owner to resolve these cases before promoting the inventory into the design system.
What to hand off
Validate the proposed map on one real screen and compare the result with the source. Deliver the inventory, semantic mapping, unresolved exceptions, and sampling limits. The related extraction guide explains how to turn that first pass into a maintained token source.
Set up and try the skill
1. Start with one concrete task
Bring: Reference screens or source styles, target platform, and access to actual implementation values where possible.
First task: Inventory repeated colors, type, spacing, and components; label inferred values separately.
Choose a small task for “extract a design system.” Provide the relevant file, screen, or brief and define what a useful result should contain. Keep the original version available for comparison.
2. Install and verify the instructions
Run this command from the project where you want the skill available. Follow the installer’s host selection, then confirm the skill appears in that host. The command is the installation method documented by the TDP repository.
npx skills add thedesignproject/agent-skills -s extract-design-systemRead the full skill instructions for prerequisites and supported tools. Installing a skill does not automatically connect Figma or grant access to external tools.
3. Apply it with your project context
Use the starter request below with the relevant inputs attached or referenced. Confirm that the host loaded the intended skill; a matching name alone is not evidence that its instructions were applied.
4. Review the result
Compare tokens against multiple screens; preserve exceptions until their purpose is understood.
Compare the output with the task’s acceptance criteria. Check factual claims, unsupported assumptions, and any changes to the interface. For code or design changes, review real states and behavior before treating the result as finished.
5. Keep what works
Save approved outputs with their source and ownership. Note which instructions helped, where the result needed correction, and what must be checked next time. Use the workflow below to connect this task to its next step.
A starter request
Adapt this example to your files, audience, and requirements.
Extract recurring colors, type styles, and spacing from this reference. Separate observed values from inferred token names and flag inconsistent or uncertain values.
Completion checklist
- The inputs and intended result are explicit.
- Required files and tools are available in the chosen host.
- The result has been reviewed against the actual task.
- Limitations and follow-up checks are recorded.