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.
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
Community Ratings
Showing: Most helpful
One agent. Many skills.
Browse the full catalog or build your own — the bar is low and the standards are real.
