When to use this workflow
Use this skill to turn a bounded product task into a working interface that follows the existing visual system. Supply real content, the user’s goal, supported states, and representative references. A vague request for a polished screen leaves the agent to invent both the product behavior and the design direction.
A worked example
For an invitation-form exercise, identify the fields, available roles, primary action, and outcomes before styling. Map the interface to existing components and tokens. Build the complete happy path, then inspect empty, invalid, pending, and failed-request states that the feature actually supports. Keep the design decisions visible in the implementation review.
Decisions and common mistakes
When the output feels generic, identify the specific cause: typography, density, content hierarchy, imagery, or an invented component. Compare it with an approved product screen. Adding more adjectives to the prompt is less useful than naming the wrong relationship and pointing to a concrete reference.
What to hand off
Review the running page at narrow and wide widths with realistic text. Complete its main task using the keyboard and inspect the diff for duplicated components or raw values. Capture the approved pattern in the design context so the next screen starts from the same decisions.
Set up and try the skill
1. Start with one concrete task
Bring: A screen brief, real content, existing tokens, and the project’s component conventions.
First task: Implement the main user action first, then add empty, loading, error, and success states.
Choose a small task for “build a frontend interface.” 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 frontend-designRead 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
Use the screen at narrow and wide widths; complete its main action with a keyboard.
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.
Build this product screen using our design tokens and actual content. Include loading, empty, error, and keyboard-focus states. Explain any new component decisions.
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.