claude-design-system-architect
Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as Tailwind config, CSS variables, and a usage doc. Built to look editorial and human-crafted, not template-generated. Use when starting a new product/site, unifying an inconsistent UI, or codifying a brand into reusable tokens.
What this skill does
# Claude Design System Architect A design system is the difference between a site that looks bespoke and one that looks like every other AI-generated landing page. This skill builds the token layer and component language that makes everything downstream look intentional — then exports it in the formats your stack actually uses. Pairs with `claude-landing-composer` (which consumes these tokens to build pages) and `claude-design-critic` (which audits against them). ## Step 1 — Establish the brand inputs From a brief, an existing site (WebFetch / screenshots), or a few reference sites the user likes: - **Personality** — 3–5 adjectives (e.g. "warm, editorial, confident, calm"). These drive every later decision. - **Audience & context** — who uses it, on what device, in what mood. - **Existing equity** — logo, locked colors, fonts already in use. - **Anti-references** — what it must NOT look like. ### Defaults & house rules Unless the brand explicitly overrides: - **No purple** anywhere in the palette. - **No emoji** in UI — use an icon set (Lucide / Heroicons) and specify it as a token. - Lean toward **warm / earth tones** (sand, terracotta, clay) and consider a **dark surface** option. - Motion is part of the system, not an afterthought. ## Step 2 — Build the tokens Design each layer deliberately and document the *why*: - **Color** — a real ramp (50–900) per hue, semantic tokens (`surface`, `text`, `muted`, `accent`, `border`, `success`/`warn`/`danger`), and verified contrast (WCAG AA min for body text). Include a dark mode set. No arbitrary hexes scattered later — everything maps to a token. - **Type** — a font pairing with rationale, a modular scale (not random px), line-heights and tracking per size, and weights. Prefer characterful, legible pairings over the default system stack that screams "AI made this." - **Space & layout** — a spacing scale, container widths, grid, breakpoints. Generous, asymmetric whitespace reads premium; cramped uniform padding reads generated. - **Radius / border / elevation** — a small, consistent set. Shadows that match the brand's weight (soft for warm brands, crisp for technical ones). - **Motion** — duration + easing tokens, named patterns (entrance, emphasis, transition), and a reduced-motion stance. This is what makes it feel alive. ## Step 3 — Specify components For the core set (button, input, card, nav, section, badge, modal), specify variants, states (hover/focus/active/disabled), sizing, and accessibility notes — all expressed in the tokens above, never one-off values. ## Step 4 — Export Produce real files, not prose: - `tailwind.config` extension (or `@theme` for Tailwind v4) wiring every token. - `tokens.css` — CSS custom properties (light + dark). - `design-system.md` — the usage doc: palette with hexes + contrast, type scale, spacing, motion, component specs, and **do/don't** examples that call out the AI-tell patterns to avoid. ## Step 5 — Hand off End with a one-screen summary and the next move: `claude-landing-composer` to build pages on these tokens, or `claude-design-critic` to retrofit an existing UI onto them. ## What separates premium from generated (bake this in) - Intentional, restrained palette — not 6 competing accent colors. - A real type scale and characterful fonts — not default sans at 3 sizes. - Asymmetric, generous whitespace — not uniform padding everywhere. - Motion with personality — not the same fade-up on every element. - One confident accent — not rainbow gradients (and never purple-by-default). ## Guardrails recap Every value is a token, nothing arbitrary · contrast meets AA · dark mode + reduced-motion included · no purple / no emoji unless the brand demands it · export real config files, not descriptions.
Related in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".