Create DESIGN.md
Extract a durable design document from evidence in a product or public website.
The field guide
One moment.
Loading the selection…
The field guide
Loading the selection…
A closer look / 7 skills
Find AI skills for research synthesis, UX planning, design documentation, Figma handoff, and focused redesigns. Turn evidence into the next useful step.
Extract a durable design document from evidence in a product or public website.
Implement Figma designs using design context, real assets, and existing components.
Turn approved product scope into task flows, recovery states, and UX handoffs.
A scan, diagnose, and fix workflow for an interface that already exists.
Generate, edit and compare screen designs through Google Stitch.
Turn interviews, surveys and feedback into findings with traceable evidence.
Turn complex ideas, comparisons and reviews into interactive HTML explanations.
Choosing a skill
Design workflows can start with research evidence, an approved feature, a Figma design, or a product that needs improvement. Choose the next deliverable: findings, task flows, reusable design context, or implementation. Supply the evidence and constraints that should guide it.
Organize interview notes, surveys, and feedback into themes, contradictions, and recommendations linked to evidence. Bring real source material and review the confidence behind each finding.
Read the Synthesize Research reviewTranslate approved scope into navigation, permissions, error recovery, and acceptance criteria before implementation. Use it when a feature's behavior needs definition or a team needs a clear UX handoff.
Read the Product Design and UX reviewCreate DESIGN.md from an existing repository or a rendered public website. The workflow asks for evidence behind design rules and distinguishes intentional choices from accidental patterns. Use it when another coding session needs durable context; its scope is the document rather than changes to the interface.
Read the Create DESIGN.md reviewBuild from structured design context, screenshots, and existing components. Connect the Figma MCP server first, then check the implementation against the design and your project's conventions.
Read the Figma Design to Code reviewScan the current stack, identify weak hierarchy and missing states, then make targeted improvements within the existing implementation. Supply the brand rules, working interactions, and technical constraints that must survive the redesign. The skill's visual preferences need to be weighed against those project requirements.
Read the Redesign Existing Projects reviewGather the inputs your workflow needs: research notes, approved scope, design files, or representative pages. Keep findings traceable to evidence and identify assumptions that still need research. Review planned behavior with the team, and verify implemented changes in the working product.