# Design System Synthesizer — Respira Skills > Read your site's representative pages, theme files, and media library to extract a complete reusable design system — logo, colors, typography, spacing scale, component patterns. Persist it as machine Source: https://www.respira.press/skills/design-system-synthesizer --- Audit & diagnose # Design System Synthesizer Every page you build, automatically on brand. Tell Respira your design system, and every new page Claude generates matches your logo, colors, fonts, and component patterns. RP **Respira Core** · maintained skill ·v1.4.2 · MIT [Install this skill ](#install) [ View on GitHub ](https://github.com/respira-press/agent-skills-wordpress/tree/main/skills/design-system-synthesizer) 24 sites use it — no ratings yet — avg run time 1w ago last run ## About this skill Read your site's representative pages, theme files, and media library to extract a complete reusable design system — logo, colors, typography, spacing scale, component patterns. Persist it as machine data AND generate a visible style-guide page on your site that renders the tokens visually. **Read-only by default.** Any write operation creates a duplicate first, so the original page stays intact and you have an undo handle. All execution runs through Respira's MCP server with your existing credentials. ## What it does 6 capabilities run in one pass — each one focused on a single failure mode. #### Brand identity capture Logo, dark logo, favicon, social card, wordmark — extracted from the media library and site identity settings. #### Color palette synthesis Primary, secondary, accent, 9-step neutral scale, and semantic colors (link / success / warning / error) — extracted from CSS variables, theme.json, and per-page observation. #### Typography + spacing scales Heading family + weights + sizes (H1–H6), body family + weight + line-height, mono family, spacing scale, section padding norms, container max width. #### Component patterns Button styles, card styles, hero patterns, section patterns — captured as named patterns future skills can reference. #### Visible style-guide page (new in v1.1) Renders the synthesized design system as a real page on your site (private by default) — color swatches with hex codes, typography samples in actual styles, spacing scale blocks, component previews. Built with your active page builder, editable like any other page. #### Persistent — pairs with every content skill Saved at the site level. Every Respira content-creation skill from that point on references the system, so new pages snap to your brand instead of guessing. ## What you'll need **Respira for WordPress plugin** installed on the target site, with a valid API key. **An AI agent** that supports Skills + MCP — Claude Code, Codex, Antigravity, or Cursor. **SKILL.md saved** where your agent looks for skills (see install panel above). Community feedback ## What people say Rate this skill and share what worked (or what needs to improve). Community rating — / 5 0 ratings [See reviews](#ratings-design-system-synthesizer) 5★0 4★0 3★0 2★0 1★0 ### Community Ratings Sort Showing: Most helpful No ratings yet. Be the first to leave one. ## Related skills Other skills in audit & diagnose. [ Audit & diagnose Brand Voice Synthesizer Read 5-10 published posts and extract the brand voice — tone, lexicon, sentence patterns, person used, formality, signature phrases, phrases the site never uses. Persist it so every future content-wri ](https://www.respira.press/skills/brand-voice-synthesizer)[ Audit & diagnose Art Direction The taste layer for every page an agent builds. Loads the site's saved Art Direction before any visual work, plans tokens in two passes against the direction's donts and the known AI-default aesthetic ](https://www.respira.press/skills/art-direction) ## One agent. Many skills. Browse the full catalog or build your own — the bar is low and the standards are real. [Browse all skills ](https://www.respira.press/skills#skills-grid) [Contribute on GitHub ](https://github.com/respira-press/agent-skills-wordpress)