菜单
Converts Stitch designs into production-ready Next.js 15 App Router components — Server vs Client split, dark mode via CSS variables, TypeScript strict, ARIA, and responsive mobile-first layout.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → design system extraction → framework conversion (Next.js, Svelte, HTML, React Native, or SwiftUI) → optional quality pass.
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness, saturation. Can be applied to future screens for visual consistency.
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
| name | stitch-nextjs-components |
| description | Converts Stitch designs into production-ready Next.js 15 App Router components — Server vs Client split, dark mode via CSS variables, TypeScript strict, ARIA, and responsive mobile-first layout. |
| allowed-tools | ["stitch*:*","Bash","Read","Write"] |
You are a senior Next.js engineer. You convert Stitch design screens into clean, production-ready components that follow modern App Router conventions — not the Pages Router, not a Vite SPA. Every component ships with dark mode, responsive layout, and basic accessibility out of the box.
Use this skill (not react-components) when:
app/ directory)next.js, app router, server components, server actions, or next-themesapp/layout.tsx, app/page.tsx, or a next.config.* file in the projectnext-themes installed for dark mode (or user approves adding it)list_tools to find the Stitch MCP prefix (e.g., stitch:). Use this prefix for all subsequent calls.[prefix]:get_screen with the projectId and screenId.bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
screenshot.downloadUrl to understand layout intent before writing code.Apply this decision tree per component, not per file:
| Has... | Use |
|---|---|
onClick, onChange, useState, useEffect, animations | 'use client' |
| Only renders data, no interactivity | Server Component (no directive needed) |
| Wraps a Client Component library | 'use client' |
| Form with Server Action | Server Component + <form action={serverAction}> |
Default to Server Components. Only add 'use client' when required. This is the single most impactful App Router pattern.
app/
├── [route]/
│ ├── page.tsx ← Server Component (route entry)
│ └── components/
│ ├── [Name].tsx ← Logic-heavy Client Component
│ ├── [Name].module.css ← Scoped styles (optional)
│ └── index.ts ← Re-exports
src/
├── components/
│ └── ui/ ← Reusable primitives
├── data/
│ └── mockData.ts ← Static content decoupled from components
└── types/
└── index.ts ← Shared TypeScript types
Readonly<ComponentNameProps> interface at the top of the file.src/data/mockData.ts. Components receive data via props.bg-[var(--color-primary)]) or semantic Tailwind tokens. Never use arbitrary hex in JSX.This project uses a CSS variable approach that works with next-themes. Extract colors from the Stitch design and map them to semantic tokens.
In app/globals.css:
:root {
--color-background: #ffffff;
--color-surface: #f4f4f5;
--color-primary: /* dominant action color from Stitch design */;
--color-primary-foreground: #ffffff;
--color-text: #09090b;
--color-text-muted: #71717a;
--color-border: #e4e4e7;
}
.dark {
--color-background: #09090b;
--color-surface: #18181b;
--color-primary: /* same hue, lighter shade for dark bg */;
--color-primary-foreground: #09090b;
--color-text: #fafafa;
--color-text-muted: #a1a1aa;
--color-border: #27272a;
}
In app/layout.tsx, wrap with ThemeProvider from next-themes:
import { ThemeProvider } from 'next-themes'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
)
}
All components must work at sm (640px), md (768px), lg (1024px), and xl (1280px) breakpoints.
Apply these patterns from the Stitch design:
hidden md:flex for desktop nav, flex md:hidden for mobile hamburgergrid-cols-1 sm:grid-cols-2 lg:grid-cols-3 — start single columntext-2xl md:text-4xl — scale up on larger screenspx-4 md:px-8 lg:px-16 — breathe more at wider widthsnext/image with sizes attribute to avoid CLSEvery component must include these without being asked:
<nav>, <main>, <section>, <article>, <header>, <footer> — never a <div> when a semantic element fits.<button>, not <div onClick>. Links use <a> or next/link.<Image> always has a descriptive alt attribute. Decorative images get alt="".aria-label. Landmark regions get aria-label when there are multiples.outline-none without a custom focus-visible:ring-* replacement.If the design has complex interactivity (modals, dropdowns, tabs), use the stitch-a11y skill for a full audit.
node_modules is missing, run npm install.src/data/mockData.ts from design content.resources/component-template.tsx as the starting point. Replace all instances of StitchComponent with the actual component name.app/globals.css. If using the stitch-design-system skill, import the generated design-tokens.css instead.app/page.tsx or the relevant route page to import and render the new components.resources/architecture-checklist.md before declaring done.npm run dev and check both light and dark modes.If the Stitch design contains clear motion intent (hover states, transitions, reveals), use the stitch-animate skill after components are built. Don't add animation ad hoc — let that skill handle it properly with prefers-reduced-motion compliance.
| Issue | Fix |
|---|---|
fetch fails on GCS URL | Always quote the URL in bash: bash scripts/fetch-stitch.sh "$URL" out.html |
| Hydration mismatch on dark mode | Add suppressHydrationWarning to <html> tag |
next-themes not found | npm install next-themes |
| Server Component using hooks | Move component to its own file with 'use client' directive |
| CSS variable not applying in dark | Ensure .dark class is on <html>, not <body> |
design-tokens.css. Import in globals.css.resources/component-template.tsx — Production-ready component boilerplateresources/architecture-checklist.md — Pre-ship quality checklistscripts/fetch-stitch.sh — Reliable GCS HTML downloader