Convert a chosen HTML variant into production Next.js components using detected project conventions and component libraries
Converts selected HTML designs into production-ready Next.js components by analyzing your project's existing conventions and libraries.
npx claudepluginhub dlabs/claude-marketplaceOptional target path (e.g., src/app/pricing/page.tsx)Convert the most recently picked HTML variant into production Next.js components. Scans project conventions including component libraries (shadcn/ui, Radix UI), proposes a conversion plan, and writes components after confirmation.
/design-studio:ds:design-ship
/design-studio:ds:design-ship src/app/pricing/page.tsx
/design-studio:ds:design-pick first (needs a chosen.html in a session)tailwind.config.*)Scan .design/sessions/ for the most recent session with a chosen.html. Also read:
.design/tokens.json for design tokensmanifest.json for session metadataIf no chosen variant found, suggest running /design-studio:ds:design-pick first.
Check for Next.js project indicators:
next.config.ts / next.config.js / next.config.mjssrc/app/ (App Router) or src/pages/ (Pages Router)package.json with next dependencyCheck for component libraries:
components.json in the project root and components/ui/*.tsx filespackage.json for @radix-ui/react-* packagescn() in lib/utils.ts and class-variance-authority in package.jsonIf no Next.js project found:
Use the nextjs-converter agent to analyze the project and produce a conversion plan. The plan should include detected component library info:
Conversion Plan:
Detected stack:
Framework: Next.js (App Router)
Component library: shadcn/ui (button, card, tabs, badge, input)
Styling: Tailwind CSS v3
Utilities: cn() from @/lib/utils
Files to create:
1. src/app/pricing/page.tsx — Server Component (page entry)
2. src/app/pricing/pricing-cards.tsx — Client Component (uses <Card>, <Badge>)
3. src/app/pricing/pricing-toggle.tsx — Client Component (uses <Tabs>)
Files to modify:
1. tailwind.config.ts — extend colors with design tokens
shadcn components used: Card, CardHeader, CardTitle, CardContent, Badge, Tabs, TabsList, TabsTrigger, TabsContent, Button
No existing files will be overwritten.
Conventions detected:
- App Router with src/ directory
- kebab-case file names
- Named exports
- shadcn/ui with default style
If no component library is detected, omit the library-specific lines and show the simpler format.
Present this to the user and wait for explicit confirmation before proceeding.
After confirmation, the nextjs-converter agent:
tailwind.config.ts with design tokens (if needed).design/DESIGN_NOTES.md with conversion detailsShow the user:
Shipped! Components created:
src/app/pricing/page.tsx — Page entry (Server Component)
src/app/pricing/pricing-cards.tsx — Interactive cards (Client Component)
src/app/pricing/pricing-toggle.tsx — Billing toggle (Client Component)
tailwind.config.ts — Updated with design tokens
Source: session {session-id}, variant {letter}
Design notes: .design/DESIGN_NOTES.md
Next steps:
Run your dev server to preview the components
/design-studio:ds:design-status — View workspace state
The converter will NEVER:
layout.tsx, template.tsx)<Button>, <Card>, <Tabs>, etc.) instead of raw HTML elements/design-studio:ds:design-ship again with a different path to ship the same variant to multiple routes