ClaudeSkills
Browse documentation

Editorial guide

Artifact-Design Skill - Design Guidance for Claude Artifacts

Anthropic's official artifact-design skill explained: the design guidance Claude applies when building Artifacts, and how it differs from Web Artifacts Builder.

ClaudeSkills editorial

Existing editorial guidance is preserved. The current pinned official reference is separately labelled in English; translated editorial is not a new translation of the full source.

Source text is documentation. These workflows have not been executed or tested by this site.

View source
On this page

Overview

artifact-design (also written artifact design skill) is Anthropic's official design-guidance skill for Artifacts - the interactive web pages, documents, and mini apps Claude can create alongside a conversation. Its short description reads: "Design guidance and fundamentals for Artifacts."

Where most skills teach Claude how to produce a file format or call a tool, artifact-design shapes judgment: before Claude writes an artifact's HTML, the skill guides how much design investment the request warrants and what visual fundamentals the page should follow.

What the skill covers

The skill is a set of design fundamentals rather than an API, and its exact contents evolve with Claude's releases. In practice it guides:

  • Design calibration - deciding how much visual polish a given artifact actually needs: a quick throwaway page does not get the same treatment as a polished report or landing page.
  • Visual fundamentals - hierarchy, typography, spacing, and color choices that keep a generated page readable instead of looking like a default template.
  • Consistency across themes - Artifacts render in the viewer's light or dark theme, so the guidance pushes Claude toward color choices that hold up in both.
  • Self-contained, responsive pages - Artifacts are standalone pages, so layouts need to work across screen widths without relying on external assets.

Because the skill is bundled with Claude rather than published as an installable folder, there is no public SKILL.md to inspect - treat this page as a usage guide rather than a source walkthrough.

When Claude uses it

You don't invoke artifact-design directly. When you ask Claude to build an artifact - a report page, a dashboard, a one-pager, a small interactive tool - Claude loads the design guidance first, then writes the page. In agent environments that expose a skill list (such as Claude Code), artifact-design shows up there and is loaded before an artifact page is produced.

If you want to nudge it explicitly, asking Claude to design the artifact - rather than just "output some HTML" - reliably puts the guidance to work.

Artifact-design vs Web Artifacts Builder

The names are close; the jobs are not:

artifact-design Web Artifacts Builder
What it is Design guidance: how the page should look Build tooling: how a complex artifact gets assembled
Ships as Bundled with Claude Open-source folder in anthropics/skills
Reach for it when Any artifact that should look intentional React/Tailwind/shadcn artifacts with state, routing, many components
Output Better visual decisions Single-file HTML bundle from a React project

The two compose: on a complex artifact, Claude can scaffold with Web Artifacts Builder while artifact-design guides the visual decisions.

Key takeaways for your own skills

  • Guidance-only skills are valid: artifact-design ships no scripts - it changes outcomes purely by shaping decisions before generation, the same way Frontend Design does for UI code.
  • Calibration beats maximalism: encoding "how much effort does this deserve?" prevents both lazy defaults and over-designed throwaways - a useful pattern for any generation skill you write.