Claude Design Skills: Brand Guidelines & UI Spec Patterns

Claude design skills teach Claude how your team talks about brand, layout, components, and critique. They do not replace Figma or generate final pixels by default. This page covers SKILL.md patterns for brand guidelines, UI spec summaries, accessibility checklists, and engineer handoff notes. Draft on https://promptmake.net/skills, then commit and test in Claude Code. PromptMake generates config text. It does not upload to Figma or publish skills for you. Guests get about three generations per day on the skills path. Free accounts get about five per day. You leave with brand, UI spec, and critique templates plus test phrases designers actually type.

What claude design skills are (and are not)

Design skills are instruction folders with SKILL.md entry points. Description fields trigger on phrases like brand review, UI spec, component audit, and design critique. Bodies return structured feedback or spec blocks aligned to your design system documentation.

They are not Midjourney prompt packs. They are not automatic layout generators. They do not export SVG from Claude alone unless you pair approved tools and human export steps outside the skill.

Design teams use skills to scale repetitive language tasks: critique decks against brand rules, turn Figma notes into engineer-ready bullets, summarize research for PMs, draft accessibility issue lists from screenshots described in chat.

Skills complement Figma and your design system site. They encode how Claude should respond once context is in chat or readable reference files.

Design skill vs image prompt workflow

Image prompts target generators like Midjourney v7 or FLUX for pixels. Design skills target structured design language, checklists, and handoff sections. Do not merge triggers for hero image briefs with triggers for component spacing audits.

When you need photo-to-prompt for a reference still, use https://promptmake.net/image. Design skills stay on language and spec shape.

Host limits designers should plan for

Claude does not see Figma files directly via SKILL.md alone. Export notes, describe frames in chat, or use integrations your org approves. Skills encode response shape after context arrives.

Vision of screenshots helps critique skills when users paste images in supported hosts. Automated WCAG compliance still needs human audit and proper testing tools.

Brand guideline skill pattern

Brand skills enforce voice, color, logo, and typography rules against references your team owns. Description triggers: brand review, voice and tone check, logo usage audit, color token check against brand doc.

Body sections: Brand rules cited, Violations found, Severity, Suggested fix, Unknown when brand PDF is silent. Link references/brand-guidelines.pdf or references/brand.md instead of inline pasting fifty pages.

Fences: do not invent new brand colors, flag unapproved fonts, no legal sign-off language, no trademark claims the skill cannot cite from references.

Test with a real slide export description or pasted marketing copy, not lorem ipsum only. Brand skills fail when triggers overlap generic marketing brief skills.

Brand skill example output shape

Return Summary in two sentences, Violations as bullets with rule IDs from references, Recommended edits, Open questions for brand owner.

Severity tags help designers triage: blocker, major, minor. Without severity, everything looks equally urgent.

Voice and tone sub-pattern

When voice rules live in a separate doc, link references/voice.md. Triggers may include tone check and voice audit. Body cites voice principles before suggesting rewrites.

Keep voice skills separate from UI spec skills when triggers differ. Merge only if your team always requests both in one message.

UI spec and handoff skill pattern

UI spec skills turn design notes into engineer-ready structure. Description triggers: UI spec from notes, component handoff, spacing audit, design-to-dev checklist.

Body maps to your system: Component name, States, Spacing tokens, Typography tokens, Interaction notes, Open questions.

Link references/design-tokens.json or Storybook URLs as read-only pointers. Do not paste megabytes of token tables inline.

Pair with screenshots described in chat or exported frame notes. Claude does not open Figma unless you supply context through approved paths. Handoff skills should name token sources every time so engineers know which file to trust.

Handoff fences

Do not guess API names not in spec. Mark TBD for missing breakpoint behavior. Separate design intent from implementation estimate hours.

Engineers should trust spacing token names from references, not invented names from the model.

Component state coverage

Require States section to list default, hover, focus, disabled, error when your system uses them. Missing state notes cause rework in implementation.

When token file date is older than ninety days, add a body line asking user to confirm tokens before spec output.

Critique and accessibility review skills

Critique skills return: What works, What fails brand or UX heuristics, One priority fix. Accessibility skills return: Issue, WCAG criterion if listed in references, Suggested text or structure fix, Needs human verify.

Honest limit: vision of screenshots helps when hosts support image input. Full WCAG compliance needs human audit, screen readers, and proper testing tools.

Critique skills should not approve brand legal language or guarantee compliance. They flag issues for human brand and legal owners.

Keep critique triggers separate from UI spec triggers. Critique asks what is wrong. Handoff asks what to build.

Critique session shape

One priority fix prevents endless nit lists that designers ignore. If everything is critical, nothing is.

Reference heuristics file in references/ux-heuristics.md when you want consistent vocabulary across critiques.

Accessibility checklist pattern

Link references/wcag-checklist.md with criteria your team cares about. Body maps findings to criterion IDs from that file only.

Mark Needs human verify on color contrast and motion sensitivity issues the model cannot measure from a screenshot alone.

Progressive disclosure for design docs

Keep SKILL.md scannable. Put full brand PDF summaries in references/brand.md. Put component tables in references/components.md. Claude loads depth only when the ticket needs it.

Update references when tokens change. Stale token docs cause confident wrong specs. Schedule reference updates when design system ships.

Progressive disclosure also keeps description matching accurate. Thin entry files load faster and reduce context burn when multiple skills sit in one repo.

Split brand, UI spec, critique, and research synthesis skills instead of one design mega-skill with bloated description fields.

Reference file hygiene

Version filenames or maintain a CHANGELOG in references/. Designers should know which token file is canonical.

Remove deprecated components from references when you retire them from the system. Orphan component docs confuse handoff output.

SKILL.md length discipline

If SKILL.md grows past a comfortable screen, move tables and long examples to references/. Entry file should state workflow and point to refs.

Anthropic Agent Skills documentation recommends thin entry plus linked depth. Design teams benefit the same way engineering teams do.

Design research and synthesis skills

Research synthesis skills support PM and design research workflows. Description triggers: synthesize interview notes, affinity map bullets, research readout for PM.

Body: Themes, Evidence quotes from pasted notes only, Open questions, Recommended next study. Fences: no invented participant quotes, mark small-n samples explicitly.

Pair with pasted research snippets in chat. Skill shapes output. Chat carries confidential content policy allows.

When research concludes with UI implications, run a separate UI spec skill or section block. Do not merge research synthesis and dev handoff triggers in one description.

Research handoff to UI spec

Research skill ends with Recommended UI implications as bullets without full spec detail. UI spec skill picks up when engineers need tokens and states.

Split keeps triggers sharp and reduces wrong loads when someone only wants synthesis.

Confidentiality fences

Do not store participant names in SKILL.md or committed references. Session paste carries sensitive quotes. Skill body should remind users not to commit PII into git.

Regulated research may require skills that only run on sanitized exports.

Build on PromptMake /skills

Paste a rough design job brief: outcome, triggers, output sections, fences, and link paths to your token files. Generate Claude tab output on https://promptmake.net/skills. Swap token names and file paths for your system. Install in repo. Run trigger tests with phrases designers type in Slack.

PromptMake does not push to Figma or Anthropic. You edit generated text, test in Claude Code or supported hosts, commit like config.

Guest users receive about three runs per day on skills paths without signup. Free accounts get about five per day.

Cross-link anthropic-skills-format and what-are-claude-skills for general SKILL.md anatomy when your team is new to Agent Skills.

Design brief one-liner

Example: Brand review skill. Triggers brand review and voice check. Output Summary, Violations, Fixes, Questions. Fence no new colors. Link references/brand.md.

One-liners feed PromptMake faster than vague ask for design help.

Designer trigger test phrases

Collect five real Slack messages designers sent last month. Three should load. Two engineering messages should not. Update triggers until matrix passes.

Designers often use informal phrasing. Triggers should include natural language, not only formal ticket titles.

Design system token drift

Schedule token reference updates when design system ships. Add a line in SKILL.md: if token file date older than ninety days, ask user to confirm before spec.

Token drift causes confident wrong spacing and color names in handoff docs. Engineers implement wrong values. QA catches late.

Pair token updates with skill reference updates in the same release train when possible.

Common mistakes

Mistake 1: Expecting Claude to replace Figma. Skills handle language and checklists.

Mistake 2: Inline fifty-page brand PDF in SKILL.md. Use references/.

Mistake 3: Skills that approve brand legal language. Humans sign off legal copy.

Mistake 4: No link to current token file. Stale refs break handoff trust.

Mistake 5: Mixing marketing copy skill triggers with UI spec skill triggers.

Mistake 6: One design mega-skill for brand, spec, critique, and research.

Model and access notes for mid-2026

Claude Fable 5, Claude Opus 5, and Claude Sonnet 5 are common targets for design skills in Claude Code and supported claude.ai surfaces. Critique and accessibility drafts may use Sonnet for volume. Sensitive brand compliance drafts may use Opus when policy allows.

Vision input quality depends on host and model surface, not on SKILL.md alone. Confirm current vision support in Anthropic docs before training designers on screenshot critique workflows.

Teams on ChatGPT for some design copy can mirror jobs as Custom GPT instructions via PromptMake tabs. Teams on Gemini can use Gems. You paste into each vendor UI yourself.

FAQ

What are claude design skills?

Agent Skills tuned for brand enforcement, UI spec handoff, design critique, and research synthesis using SKILL.md entry files and linked design references in references/.

Can Claude skills read my Figma file?

Not directly via SKILL.md alone. Export notes, describe frames in chat, or use integrations your org allows. Skills encode how to respond once context is available.

How do brand guidelines fit?

Store guidelines in references/ and name them in SKILL.md. Skill returns violations against those docs, not invented rules. Update references when brand ships.

Can PromptMake draft design skills?

Yes, on https://promptmake.net/skills. PromptMake generates SKILL.md-style text. Edit token names, link paths, and fences before commit and test.

Are design skills the same as image prompts?

No. Image prompts target generators for pixels. Design skills target structured design language, checklists, and handoff sections for humans and engineers.

How do I test a design skill?

Run three real critique or handoff requests that should load and two engineering tasks that should not. Verify output sections match your template and token names match references.

What does PromptMake cost for design skill drafting?

Guests receive about three generations per day on the skills path without signup. Free accounts get about five per day. Pro removes daily limits for heavier weeks. Quotas are separate from /image.

How do I start today?

Pick one repeating handoff or brand review. Draft SKILL.md on https://promptmake.net/skills with triggers and sections from this page. Link your token doc. Test in Claude Code with real phrases. Assign a design owner.