Synthesize design references into a design system
A comprehensive DESIGN.md file containing design tokens, CSS variables, palette, typography, spacing, motion, and section structure derived from curated reference sites.
How it works
Changes data in your accountsDesign and content
The agent uses the search_sites or search_by_component tools to find relevant design references based on the user's project requirements. It then uses extract_essence to synthesize 2-5 selected references into a structured design document. The agent should verify that the selected references match the desired mood and purpose before generating the final output.
Prompt
Paste this into an agent that has the servers below connected. Adjust the names and dates to your own.
Prompt for Synthesize design references into a design system
Search for sites with a minimal, editorial feel. Then, extract the essence of the top 3 results to create a DESIGN.md file with design tokens, CSS variables, and typography guidelines.MCP servers it needs
Source
The vendor page this playbook is drawn from, and the passage that supports it.
Primary tool — synthesize 2-5 references into a ready-to-save DESIGN.md: design tokens, CSS variables, palette, typography, spacing, motion, section structure, and binding do's-and-don'ts.MCP Integration Guide — AllGoodInsp