frontend-design
Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.