Stitch Design To Code

缝合设计符合规范

Node.js——设计令牌+Stitch MCP集成，用于设计到代码生成。

现场： with gents.dev/posts/post-10学院设计 现场日记账分录： with gents.dev/posts/post-10学院设计

______________________________________________________________________


相关岗位

在代理开发博客系列中精选——帖子#10:21 AI生成的屏幕，零Figma文件

• 发送日期：2026年6月15日星期一
• 领英： _发送日添加链接_
• 规范博客文章：https://ai.hack.ski/blog/
• 系列轮毂： 代理开发指南

______________________________________________________________________

  ](https://nodejs.org)

一个完整的工作流模板，用于使用Stitch MCP+React+Puppeteer验证进行AI驱动的设计编码。

将自然语言设计提示转化为生产就绪的React组件——通过自动视觉验证证明每个屏幕都能正确渲染。零Figma文件。零手写CSS。21个屏幕。107项验证操作。

______________________________________________________________________

周期

flowchart LR
    A[🖊️ Craft Prompt\nEmbed design system\nDescribe layout + states] --> B[⚡ Stitch MCP\nGenerate visual design\nfrom structured prompt]
    B --> C[🎨 Design Output\nReview for spec compliance\nCheck brand + colors]
    C --> D[⚛️ React Conversion\nBuild components\nAdd data-testid attrs]
    D --> E[🤖 Puppeteer\nValidation\n107 actions / 21 screens]
    E --> F{All Checks Pass?}
    F -- Yes --> G[✅ Ship It]
    F -- No --> A

______________________________________________________________________

设计系统

野兽派赛博朋克美学使这个系统与众不同：

排版： JetBrains Mono——仅适用于各种尺寸和重量。

边界半径： 0px 到处都是。没有例外。野蛮主义者的设计。

组件库： shadcn/ui图元，使用自定义CVA变体进行样式设置。

______________________________________________________________________

会话经济学

______________________________________________________________________

目录结构

stitch-design-to-code/
│
├── design-system/
│   ├── tokens.json              # 47 design tokens (colors, type, spacing, shadows)
│   ├── tailwind-preset.js       # Tailwind theme consuming tokens.json
│   └── README.md                # Token reference + installation guide
│
├── prompts/
│   ├── README.md                # Prompt engineering guide + A/B/C strategy
│   ├── public-screens.md        # 7 screens: Home, Resources, Search, About, Categories (2)
│   ├── auth-screens.md          # 3 screens: Login, Register, Forgot Password
│   ├── user-screens.md          # 4 screens: Profile, Bookmarks, Favorites, History
│   ├── admin-screens.md         # 2 screens: Admin Dashboard (20 tabs), Suggest Edit
│   └── legal-screens.md         # 2 screens: Privacy Policy, Terms of Service
│
├── validation/
│   ├── puppeteer-checks.js      # 107-action check suite (21 screens)
│   ├── run-validation.js        # Puppeteer runner with pass/fail reporting
│   └── README.md                # Methodology, action types, CI integration
│
├── components/
│   ├── ui/
│   │   ├── button.tsx           # 7 variants (default, outline, ghost, link, secondary...)
│   │   ├── card.tsx             # Card system (header, title, desc, content, footer)
│   │   ├── input.tsx            # Input + Textarea + SearchInput
│   │   ├── tabs.tsx             # Radix tabs + ScrollableTabs for 20-tab admin
│   │   └── badge.tsx            # 13 variants (primary, secondary, status, role...)
│   │
│   ├── home-hero.tsx            # Hero section + StatsBar
│   ├── resource-card.tsx        # ResourceCard + ResourceGrid
│   ├── auth-form.tsx            # Unified login/register/forgot-password form
│   └── admin-tabs.tsx           # 20-tab admin dashboard with content placeholders
│
├── docs/
│   ├── branding-checklist.md    # The "Awesome Lists vs Video Dashboard" bug + prevention
│   └── workflow-guide.md        # Step-by-step: design system → prompts → Stitch → React → validate
│
├── package.json
├── .gitignore
├── LICENSE
└── README.md

______________________________________________________________________

快速开始

先决条件

• Node.js 18+
• npm 9+

1.克隆并安装

git clone https://github.com/krzemienski/stitch-design-to-code.git
cd stitch-design-to-code
npm install

2.启动开发服务器

npm run dev
# Visit http://localhost:3000

3.运行验证套件

# In a second terminal (while dev server runs)
npm run validate

4.查看结果

• 终端输出通过/失败
• 屏幕截图 ./screenshots/
• 完整报告 ./validation-report.json

______________________________________________________________________

使用设计系统

在你自己的项目中

# Copy design-system/ to your project
cp -r design-system/ your-project/

# Install dependencies
npm install tailwindcss class-variance-authority clsx tailwind-merge @fontsource/jetbrains-mono

// tailwind.config.js
module.exports = {
  presets: [require('./design-system/tailwind-preset')],
  content: ['./src/**/*.{ts,tsx}'],
}

// In your root layout
import '@fontsource/jetbrains-mono/400.css';
import '@fontsource/jetbrains-mono/700.css';

使用提示模板

在中打开任何文件 prompts/ 并将嵌入式提示块与Stitch MCP结合使用。每个提示：

• 内嵌完整的设计系统规范
• 描述布局、关键元素和交互状态
• 可以按原样使用，也可以根据您自己的产品进行调整

______________________________________________________________________

写自己的提示

关键规则： 在每个提示中嵌入完整的设计系统。

Design a [SCREEN NAME] for "Your Product" — [one-line description].

DESIGN SYSTEM:
- Background: #000000 (pure black)
- Primary Accent: #e050b0 (hot pink)
- Secondary Accent: #4dacde (cyan)
- Surface/Card: #111111 background, #1a1a1a elevated
- Text: #ffffff primary, #a0a0a0 secondary
- Font: JetBrains Mono, monospaced, used everywhere
- Border radius: 0px — brutalist aesthetic
- Component library: shadcn/ui
- Borders: 1px solid #2a2a2a

LAYOUT:
[Describe structure here]

KEY ELEMENTS:
[List all UI elements with specifics]

看 prompts/README.md 完整的指南，包括A/B/C变化测试策略。

______________________________________________________________________

验证

Puppeteer套件可验证21个屏幕和107个操作：

仅管理仪表板就有25项检查——每个选项卡一项，外加KPI验证。

______________________________________________________________________

避免品牌缺陷

该模板包括一个记录在案的人工智能品牌漂移案例研究。看 docs/branding-checklist.md 用于：

• 出了什么问题（屏幕上的产品名称替换）
• 为什么它发生在长时间的人工智能会话中
• 基于grep的自动化预防脚本
• 将品牌名称视为设计符号

太长，读不下去了 在每次生成会话后运行此命令：

grep -rn "Video Dashboard\|Placeholder\|lorem ipsum" src/ components/ app/

______________________________________________________________________

相关资源

• design-system/README.md --令牌参考和顺风设置
• prompts/README.md --及时的工程指导
• validation/README.md --Puppeter方法论
• docs/workflow-guide.md --完成分步工作流程
• docs/branding-checklist.md --品牌错误预防

______________________________________________________________________

故障排除

npm run validate 失败，显示“无法连接到服务器”

首先启动Next.js开发服务器： npm run dev。验证套件需要一个正在运行的服务器 http://localhost:3000.

Puppeter浏览器启动失败

跑 npx puppeteer browsers install chrome 安装所需的浏览器。在CI中，使用 --ci 模式： npm run validate:ci.

屏幕截图与预期布局不匹配

确保您的视口设置正确。验证套件使用默认的1280x720视口。每次签入都可以设置自定义视口 puppeteer-checks.js.

缺失 @/lib/utils 导入错误

这是模板仓库所期望的。这 @/ 路径别名通过解析 tsconfig.json 构建完整Next.js项目时的路径。

设计令牌不适用

验证 design-system/tokens.json 正确导入。所有47个标记都使用野兽派调色板（borderRadius:0px是有意的）。

许可证

麻省 理工© 尼克 Krzemienski

部分 代理发展系列 --使用AI代理构建生产软件。