When to use this workflow
Use this resource when you need a working interface represented in Figma for design review or further editing. Establish which page, viewport, state, and destination are in scope. A default screenshot of a page does not represent every responsive layout, theme, or interaction state.
A worked example
For a settings-screen exercise, open the intended state in the running product and import that bounded screen. Inspect the result as a design artifact: can text be edited, do related elements remain grouped sensibly, and do the styles connect to the intended system? Compare a long field label and an error message with the original page rather than judging only the tidy default state.
Decisions and common mistakes
A visually convincing import can still be difficult to maintain. Watch for duplicated styles, flattened content, missing assets, and layers that do not behave usefully when resized. Record these as reconciliation work. Do not describe the result as a synchronized component library unless your actual integration and maintenance process establish that behavior.
What to hand off
Hand off the source page, captured state, destination frame, and known limitations. Decide which elements should become reusable components and which remain one-off page content. Review any changes made in Figma before treating them as requirements for the implementation.
Set up and try the skill
1. Start with one concrete task
Bring: A working page URL or local preview, target Figma file, and the intended viewport.
First task: Import one representative screen, then reconcile its layers and styles with your design system.
Choose a small task for “bring a coded page into figma.” 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 figma-generate-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
Check editable text, responsive hierarchy, missing assets, and whether components remain reusable.
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.
Translate this existing page into a Figma frame using our documented tokens. Preserve content, hierarchy, component states, and responsive intent; list any conversion limits.
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.