Vercel Ship
26

Vercel Ship 26 · DS Skills Workshop

Turn your design system into an agent skill

The workshop flow: five beats, three framesA left-to-right spine of five beats: Open, Kickoff, Teach while it builds, Converge, Close. Beneath it, the three frames sit left to right in standard order: Adaptation, Extraction, Cultivation. Adaptation is tied to the converge beat, Extraction to the teaching beat, Cultivation to the teaching and closing beats.THE 40-MINUTE SPINE1 · Open5 min · the map2 · Kickoff3 min · you run it3 · Teach whileit builds15 min4 · Convergethe wow12 min5 · Close5 min · the payloadAdaptationroutes the agentExtractionbuilt from the DSCultivationgrown from feedback
Scroll →

Turn your design system's docs, GitHub, and repo into an agent skill that makes an LLM build with your components instead of generic slop, and prove it live. The skill you'll use, primer-react, already ships in the starter you clone. It was built ahead of time by a meta-skill, extract-ds-skill; the workshop shows you how that works without running it live.

The hands-on moment is generation: you load the skill and build the most satisfying moment on GitHub: a pull request going from waiting to Merged. Generation takes a few minutes, so the teaching fills the wait. When it lands, the quality of what comes out is the whole point.

Start the workshop →Read the talk

What you'll do

The only required path is Setup → Generate. Everything else is there to read.

  • Setup: Clone or fork the starter, install dependencies, launch Claude Code. The primer-react skill is already on disk.
  • Generate: Run prompts/pr-merged-switch-dark-mode.md with the skill loaded, hands-off. You have about 13 minutes. Work on main; don't push.
  • Check Your Output: A deterministic auditor (pnpm audit:craft) verifies behaviour and contract: types, exports, headless render. The agent does not grade its own work; a person watches the running app and the auditor catches the rest.

What happens on stage

The skill is already built, so nothing is extracted live. While your run churns, the teaching fills the time:

  • Three Frames: the map: a skill gets used (Adaptation), built (Extraction), and grown (Cultivation). Three lenses, not three steps.
  • Extraction: how primer-react was built: Discovery → Validate → Persist, at a glance. It's all in the repo to read later.
  • The Audit: the one deep dive: a citation can resolve perfectly and still be false. This is why you must audit the skill, not just trust it.
  • Evidence: what the runs actually showed: the same prompt on Sonnet and Opus (the skill holds the quality floor; the model changes the ceiling), and the skill on vs off (its cost of search).

Then the payoff lands on the best run: the light↔dark toggle flips, and the capsule flips from Open to Merged.

Next: Setup