showpiece.
A Claude Code skill that turns "build me a real website" into a studio-grade pipeline: lock the brief, decide the design system before any code, pull design DNA from real references, build section by section, and verify with screenshots until the output survives inspection.
#What it is
An orchestrator skill that sits on top of Anthropic's frontend-design skill and adds process around it. frontend-design supplies taste and bans the generic AI look; showpiece supplies the discipline: a locked brief, a design system decided before any code exists, real references instead of imagination, and a screenshot loop where the model has to look at its own output. MIT licensed, with a vendored offline design database (standard-library Python only, attributed in full in the repo's NOTICE.md).
#The itch
A one-shot "make me a portfolio site" prompt produces the same page every time: default fonts, a purple gradient, filler copy. The failure is structural. The model never made a design decision, never looked at a real reference, and never saw its own output. showpiece exists to close exactly those three gaps.
#How it works
Seven stages, and the skill announces each one as it enters it:
Stage 0
Lock the brief: purpose, audience, tone, differentiation, collapsed into one testable "Design Read" line
Stage 1
Decide the design system: offline database query (layout, palette hex, typography, three ambition dials) filtered through frontend-design taste
Stage 2
Extract design DNA: scrape or screenshot 2-3 reference sites, read off real colors, type scale, spacing
Stage 3
Build section by section: hero first, with scroll-driven motion as part of the build
Stage 4
Verify-loop: screenshot with Playwright, list concrete deviations, fix, re-render, 2-3 passes
Stage 5
Assets: fal.ai for the one or two moments that need real imagery, max 2 attempts per image
Stage 6
Hand-off: optional Claude Design link for last-mile tuning by the user
The boundary against plain frontend-design is ambition: quick mockups, single snippets and internal report visuals stay there. showpiece fires when the artifact will actually be shipped or sent.
It expects frontend-design and a Playwright MCP in the environment. A fal.ai key is optional and only feeds stage 5. Libraries like GSAP or Three.js are never installed on its own initiative; the skill asks for consent and shows the official repo first.
#In real use
The verify-loop is where the studio quality comes from, and it is also the hard dependency: without a working Playwright MCP the skill degrades to a build without self-review, which defeats its point. The Claude Design hand-off at the end is best-effort and needs one interactive login by the user. And the vendored design database is a trimmed subset whose generator sometimes proposes safe defaults, which is why frontend-design keeps the last word on taste. Slide decks reuse the same pipeline but get less mileage from the motion stage.
Version 1.0.0 shipped on 2026-07-17 with the full pipeline, the vendored database and the verify-loop references.
#Install
$ git clone --depth=1 https://github.com/belschak/showpiece.git ~/.claude/skills/showpieceClaude Code discovers skills in ~/.claude/skills/ automatically. No build step, no dependencies for the skill itself; the vendored design generator needs Python (stdlib only, offline).