Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Claude Design Integration
Claude Design (claude.ai web Apps, 2026-04-14 launch) ↔ Claude Code (terminal) handoff…
A handoff workflow that connects Claude Design (the web tool where you produce layouts in natural language) to Claude Code (the terminal that implements them in your real codebase). You generate and iterate a design in the browser, click handoff to create a bundle, and the implementation layer refactors that bundle into production components with accessibility, responsive testing, and safe deployment. It closes the design-to-development gap so design becomes the default first step on every visual task.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
This is a design-to-code handoff pipeline with two verified entry points: the claude.ai Design web app produces, the terminal implements. The exact flow:
- The design starts in claude.ai Design with a natural-language brief (client, page, tone, palette, fonts, trust cues, CTAs, 3 variants requested); the chosen variant's Handoff to Claude Code button produces a bundle: working HTML/CSS, design tokens JSON, component specs and screenshots.
- The terminal agent reads the bundle and verifies it against the sector design database before touching code: does the palette and style match what the client's sector actually needs, any drift gets flagged.
- Pulls the current state of the client repo and the existing components, then refactors the bundle's HTML/CSS into Next.js with shadcn-ui and Tailwind while preserving existing i18n keys instead of overwriting translations.
- Runs the quality gates in sequence: WCAG 2.2 AA accessibility audit, responsive test across three viewports, then a safe commit and deploy followed by a live URL test of the actual rendered result.
- When Design must be driven from the terminal, uses the verified browser bridge: the playwright persistent profile carries an authenticated claude.ai session, so login and the Cloudflare wall are passed automatically, with a mandatory account check before any brief is entered.
- Falls back from Claude Design only in four defined cases (photorealistic product photos, client-supplied Figma files, deep shadcn component polish, trivial single icons), and every fallback must be justified in writing.
One power source. 6 lines out.
claude-design-integration · core
core active · 6 lines
- ✓ redesigning a landing page
Redesigning a landing page hero and header from a natural-language brief
- ✓ turning a design bundle
Turning a design bundle into production framework components
- ✓ producing a slide deck
Producing a slide deck, email template, or social post layout
- ✓ iterating a design with
Iterating a design with plain-language edits instead of pixel tweaks
- ✓ implementing a chosen va…
Implementing a chosen variant while preserving existing translation keys
- ✓ keeping design work on a
Keeping design work on a separate quota bucket to protect your main usage
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Go from prompt to a working multi-page prototype in seconds instead of hours
license: perpetual -
Ship designs as accessible, responsive production components, not just mockups
license: perpetual -
Iterate by talking ('make the hero bigger, accent gold') rather than dragging pixels
license: perpetual -
Protect your main usage budget by routing design work to its own quota
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
A 3-role, step-by-step handoff workflow from web design to terminal implementation
6 parts · one working system · ships instantly by email
From the field · a real case
This wasn’t written at a desk.
2026-06-09 · The problem
Driving claude.ai Design from the terminal kept hitting the Cloudflare Turnstile bot wall when opened through the chrome-devtools automation profile, and the working method had been rediscovered and forgotten multiple times.
The fix
The playwright persistent-profile route was verified and locked in as canonical: that profile already carries an authenticated claude.ai session with a long-lived Cloudflare clearance cookie, so navigation passes login and the bot wall automatically. A mandatory account-verification step was added before any brief entry, and the chrome-devtools path was marked as the anti-pattern.
The result
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Designers, agencies, and developers who want to ideate visually in natural language and ship the result as real, production-grade code.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
Do I need both the web tool and the terminal side for this to work?
Yes, the workflow is the bridge between them: you design in Claude Design in the browser and implement through Claude Code in your repo. The handoff bundle is what carries the layout from one to the other.
-
Does the handoff drop in real components or just paste a static HTML blob?
The implementation layer refactors the bundle into your framework's components rather than leaving a one-off markup dump. So the hero and header you iterated in the browser land as code you can actually maintain.
-
Does this come up with the design direction for me?
No, it carries a design you have already shaped in natural language into production. The taste and the brief are still your call; the workflow handles the ideate-to-ship gap, not the idea itself.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.