Menu
Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
A library of 150 brand and aesthetic design systems (Apple, Stripe, Linear, Vercel, Notion, GitHub, Figma, Spotify, Tesla, and more, plus styles like brutalism, glassmorphism, neumorphism, editorial, minimal). Use when the user wants a UI to look like a brand, match a brand's style or vibe, or adopt a named aesthetic. Read references/<brand>.md for that brand's colors, typography, spacing, radii, and component style before generating any UI.
Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.
Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.
Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.
Orchestrates UI and page design. Use when the user asks to design a page, screen, UI, landing page, dashboard, login flow, pricing page, invoice, resume, FAQ, article, slide deck, social card, or any web layout; to make it look like a brand (Apple, Stripe, Linear, Vercel, Notion, ...); or to build a mockup, prototype, wireframe, or HTML preview. Picks a matching layout skill, optionally adopts a brand design system, then writes a single self-contained HTML file to <project>/.devspace/preview/ so DevSpace can preview it.
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
| name | frontend-design |
| description | Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline. |
| triggers | ["frontend design","ui design","ux design","web design","production ui"] |
| od | {"mode":"design-system","category":"design-systems","upstream":"https://github.com/anthropics/skills/tree/main/frontend-design"} |
Curated from Anthropic's official skills repository.
Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
design-systemsThis catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/anthropics/skills/tree/main/frontend-design
Then ask the agent to invoke this skill by name (frontend-design) or with
one of the trigger phrases listed in this skill's frontmatter.