Design System Synthesizer

Version: 1.3.0 Updated: 2026-08-04 Freshly updated: v1.3.0 catches up with the design-token surface. Builder global palettes and typography are now written through first-class token tools (respira_list_design_tokens, respira_create_design_token, respira_update_design_token, respira_delete_design_token), replacing v1.2.0's describe-it-in-plain-words guidance. HTML/design conversions register the colors and typography they carry as named tokens in the builder's own global styles automatically, and converted pages reference those tokens instead of carrying value copies — so the synthesizer reads what is already registered before synthesizing, reuses those names instead of re-inlining values, and reports token registration in its summary. Category: intelligence Status: stable Requires: Respira for WordPress plugin 7.1+ + MCP server

Description

Read a WordPress site's representative pages, theme files, and media library to extract a complete, reusable design system — logo, color palette, typography, spacing scale, component patterns. Persist it to the site so every future content-creation skill references it, and every new page Claude builds matches the existing brand.

This is the foundation for on-brand AI-generated content. Without a design system, the agent guesses at colors, fonts, and spacing — and the result looks like every other AI-generated WordPress page. With a design system, the agent has explicit tokens to use, and new pages snap to the brand.