What is the design system synthesizer skill?
The design system synthesizer skill is defined in a SKILL.md in respira-press/agent-skills-wordpress and needs the Respira for WordPress plugin 7.1 or newer plus its MCP server. It extracts logo, colors, typography, spacing and components from 5 to 10 pages, then saves a draft design direction.
It reads a WordPress site's representative pages, theme files and media library to extract a reusable design system: logo, color palette, typography, spacing scale and component patterns. It persists the result to the site so later content skills reference it.
It triggers when you say things like build a design system for my site, extract design tokens, capture my brand or build my style guide, or after a rebrand.
What it extracts
- Brand: logo URL, favicon, social card and wordmark text.
- Colors: primary, secondary and accent, a neutral scale from 100 to 900, background, text, link, success, warning and error.
- Typography: heading, body and mono families, weights, H1 to H6 sizes, line height and letter spacing.
- Spacing: a scale base, scale steps, section padding and container max width.
- Components: primary and secondary buttons, cards, a hero pattern and a section pattern.
How the workflow runs
It confirms the site, picks 5 to 10 representative pages, reads the logo, the theme stylesheet and theme.json, and extracts builder content from each page. It then merges the observations into one schema and asks you to confirm or correct the summary.
When pages disagree, the homepage wins for hero patterns, the most common value wins for body typography, a CSS custom property overrides a page observation, and theme.json overrides a CSS custom property.
Saved draft and style guide page
After you confirm, it checks respira_list_design_directions and updates an existing draft instead of saving a duplicate. It saves the result with respira_save_design_direction and reports readiness, including what is still missing.
It then builds a style guide page with respira_build_page. The default title is Design System, the default slug is /design-system/, and the status is private unless you choose public. It uses the active builder's native modules, not raw HTML.
Safeguards
- Every token must trace to an observation in the source pages, theme files or media. A value filled in by judgment carries
inferred: true. - An existing design system is diffed and shown to you before anything overwrites it.
- A direction is activated only after your explicit yes.
- A snapshot from
respira_get_snapshotis taken before the style guide page is built, andrespira_restore_snapshotplusrespira_delete_pageroll it back. - Colors are written as
#RRGGBBhex and font families keep their full stack.
Who the design system synthesizer skill is for
Best for
- Setting up an AI workflow for an existing site so future content is on brand.
- Re-synthesizing after a rebrand so the new tokens are captured.
- Running before content creation skills so new pages match the brand.
- A quarterly refresh to capture brand drift.
Not for
- Writing a design system from reference screenshots and drafting a product PRD, which the ui-designer skill covers.
- Frameworks for brand voice, visual identity and messaging with scripts that sync guidelines into design tokens, which the brand skill covers.
- Fetching any public URL over plain HTTP, reading its CSS and writing a skill.md of colors, type, spacing and layout, which the Website Design Systems MCP covers.
How to install Design System Synthesizer Skill for WordPress Sites
npx skills add respira-press/agent-skills-wordpress -g -a claude-code -yRun the install command
Run the command above to install every skill in the repository globally for Claude Code. Drop
-gto install into the current project only.Set up the requirement
The skill requires the Respira for WordPress plugin 7.1 or newer and its MCP server.
Swap the agent
Replace
-a claude-codewith your agent, for example-a opencode.Update later
Run
npx skills update -gto update the installed skills.
Check that it loaded
Ask your agent to build a design system for your site. Expect it to call respira_get_active_site and respira_get_site_context first, then list pages to pick 5 to 10.
Key features
- Design token extractionReads representative pages, theme files and the media library to extract logo, colors, typography, spacing and components.
- Page samplingPicks 5 to 10 pages, including the homepage, the about page, a service or product page, a blog post and the contact page.
- Theme file readingReads
style.csscustom properties, andtheme.jsonon a full site editing theme, wheretheme.jsonoverrides a custom property. - Builder content extractionCalls
respira_extract_builder_contenton each picked page to note colors, typography, spacing and component patterns. - Draft design directionSaves a schema validated draft with
respira_save_design_directionand reports a readiness block that names missing color roles or font slots. - Style guide pageBuilds a visible page of the tokens with
respira_build_page, private by default, excluded from the sitemap and set to robots noindex. - Builder global tokensWith your confirmation, registers or aligns tokens in the builder's global store through
respira_create_design_tokenandrespira_update_design_token. - Inferred flagA token that was guessed instead of observed carries
inferred: true, which keepssync_readyhonest. - Optional activationOffers
respira_activate_design_directionwhen readiness is true. Once a direction is active,respira_check_designcan score a build or saved page against it.
Frequently asked questions
What is the design system synthesizer skill?
It is a SKILL.md in respira-press/agent-skills-wordpress that lets your AI coding agent read a WordPress site's pages, theme files and media, extract a design system of logo, colors, typography, spacing and components, and save it as a draft design direction with a visible style guide page.
How do I install the design system synthesizer skill?
Run npx skills add respira-press/agent-skills-wordpress with the flags -g, -a claude-code and -y. That installs every skill in the repository globally. Without -g it installs into the current project only, and npx skills update -g updates them later. Swap claude-code for your agent, for example opencode.
What does the skill require?
It requires the Respira for WordPress plugin 7.1 or newer and its MCP server. The skill calls Respira tools such as respira_get_site_context, respira_list_pages and respira_extract_builder_content to read the site. On older plugins without the direction tools, it saves through respira_update_option instead, and the plugin lifts that option into a draft direction once it updates.
Which pages does the skill read?
It picks 5 to 10 representative pages: the homepage, the about page if present, one typical service or product page, one blog post and the contact page, plus a landing page if one exists. With fewer than 5 pages it uses whatever exists, and above 10 it samples by recency.
Where is the design system saved?
After you confirm the summary, it is saved as a draft design direction through respira_save_design_direction. The response includes a readiness block, and a missing list names the color roles or font slots that still need values. On older plugins the legacy respira_design_system option is the fallback.
What does the skill write to my site?
A draft design direction and a style guide page. The page is private by default, slugged design-system, and built after a respira_get_snapshot checkpoint so you can roll back with respira_restore_snapshot and respira_delete_page. Activation is only offered, and happens only on your explicit yes.
Does the skill invent design values?
No. Every color, font, size and pattern must trace to an observation in the source pages, theme files or media. If you ask it to fill a gap by judgment, that token is flagged inferred: true. It also shows a diff before overwriting an existing design system.
Which page builders does the style guide page work with?
It builds with the active builder's native modules, such as Bricks, Elementor, Divi 5 and Gutenberg, not raw HTML. Builders without a global token store, including Brizy, Thrive Architect, WPBakery, Visual Composer, Flatsome and SeedProd, register no tokens, and the skill says so.