Web Artifacts Builder
This is Anthropic's official reference workflow for building the kind of rich, interactive HTML artifacts you see in Claude.ai, complete with React and Tailwind support. You'd reach for this when you want Claude to generate embeddable components or single-page apps that look polished rather than minimal. It's marked as prototype mode, so expect some rough edges, but the pedigree matters here. If you've ever wondered how Anthropic's own team approaches artifact generation, this is their internal playbook made public. Worth installing from the upstream repo to see the full asset bundle and workflow structure they use in production.
- skills.sh installs
- 3K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill web-artifacts-builder --agent claude-codeInstalls into .claude/skills of the current project.
Files
web-artifacts-builder
Curated from Anthropic's official skills repository.
What it does
Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
Source
- Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
- Category:
web-artifacts
How to use
This catalogue entry advertises the skill in OpenDesign 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/skills/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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nexu-io/open-design
- Categories
- Frontend Development, DevOps & CI/CD, AI & Agent Building, Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Agent Browser3K
- Design Consultation3K
- Gsap Scrolltrigger3K
- Nanobanana Ppt3K
- Frontend Dev3K
- Hand Drawn Diagrams3K
- Theme Factory3K
- Ad Creative2.9K
- Platform Design2.9K
- Fal Lip Sync2.9K
- Shader Dev2.9K
- Brainstorming2.9K
- Figma Implement Design2.9K
- After Hours Editorial Template2.9K
- Ppt Keynote2.9K
- Login Flow2.9K
- Gsap React2.9K
- Enhance Prompt2.9K
- Video Downloader2.9K
- Fal 3d2.9K
- Imagen2.9K
- Field Notes Editorial Template2.9K
- Poster Hero2.9K
- Html Ppt Retro Quarterly Review2.9K
Recommended
More Frontend Development
trigger-realtimetriggerdotdev/skillsSubscribe to Trigger.dev task runs in real-time from frontend and backend. Use when building progress indicators, live dashboards, streaming AI/LLM responses, o2.9Kskills.sh installs
artifacts-buildernexu-io/open-designSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).2.9Kskills.sh installsdigits-fintech-swiss-templatenexu-io/open-designSwiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold n2.9Kskills.sh installsswiss-user-research-video-templatenexu-io/open-designSwiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact wit2.9Kskills.sh installs
motion-uiaffaan-m/eccProduction-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.2.8Kskills.sh installs
emilkowal-animationspproenca/dot-skillsEmil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers o2.8Kskills.sh installs