缝合设计符合规范
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/
- 系列轮毂： 代理开发指南
______________________________________________________________________
一个完整的工作流模板，用于使用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______________________________________________________________________
设计系统
野兽派赛博朋克美学使这个系统与众不同：
| 代币 | 价值 | 斯沃琪 |
|---|---|---|
背景 #000000 | ⬛ 纯黑色 | |
| 主要口音 | #e050b0 | 🟣 艳粉色 |
| 次要重音 | #4dacde | 🔵 青色 |
| 表面 | #111111 | ⬛ 暗牌 |
| 表面Alt | #1a1a1a | ⬛ 高架 |
| 主要文本 | #ffffff | ⬜ 白色 |
| 文本次要 | #a0a0a0 | 🔘 灰色 |
| 边界 | #2a2a2a | ▪️ 微妙 |
排版： JetBrains Mono——仅适用于各种尺寸和重量。
边界半径： 0px 到处都是。没有例外。野蛮主义者的设计。
组件库： shadcn/ui图元，使用自定义CVA变体进行样式设置。
______________________________________________________________________
会话经济学
| 度量 | 值 |
|---|---|
| 生成的屏幕 | 21 |
| 木偶验证行动 | 107 |
| Figma文件已打开 | 0 |
| 手写CSS | 0行 |
| 设计代币 | 47 |
| shadcn/ui组件 | 5 |
| 示例组件 | 4 |
| 会议记录 | ~13432行 |
______________________________________________________________________
目录结构
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 install2.启动开发服务器
npm run dev
# Visit http://localhost:30003.运行验证套件
# In a second terminal (while dev server runs)
npm run validate4.查看结果
- 终端输出通过/失败
- 屏幕截图
./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个操作：
| 组 | 屏幕 | 检查 |
|---|---|---|
| 公共 | 主页、资源、搜索、关于、类别、类别详细信息、资源详细信息 | 36 |
| 身份验证 | 登录、注册、忘记密码 | 14 |
| 用户 | 个人资料、书签、收藏夹、历史记录 | 18 |
| 管理员 | 管理员仪表板（20个选项卡），建议编辑 | 29 |
| 法律 | 隐私政策，服务条款 | 16 |
| 总计 | 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代理构建生产软件。