Menu
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle 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.
Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
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.
| name | web-artifacts-builder |
| description | Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. |
| triggers | ["web artifacts","tailwind artifact","react artifact","anthropic artifact"] |
| od | {"mode":"prototype","category":"web-artifacts","upstream":"https://github.com/anthropics/skills/tree/main/web-artifacts-builder"} |
Curated from Anthropic's official skills repository.
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
web-artifactsThis 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/web-artifacts-builder
Then ask the agent to invoke this skill by name (web-artifacts-builder) or with
one of the trigger phrases listed in this skill's frontmatter.