build
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBuild
构建
Tool Selection
工具选择
Starting from scratch? → Lovable (fastest MVP)
Existing codebase? → Claude Code (best context)
Learning to code? → Replit (educational)
Already code? → Cursor (power features)
Existing codebase? → Claude Code (best context)
Learning to code? → Replit (educational)
Already code? → Cursor (power features)
See TOOLS.md for detailed comparison.
从零开始？ → Lovable（最快搭建MVP）
已有代码库？ → Claude Code（上下文处理最佳）
学习编程？ → Replit（教育属性强）
已有编程基础？ → Cursor（功能强大）
已有代码库？ → Claude Code（上下文处理最佳）
学习编程？ → Replit（教育属性强）
已有编程基础？ → Cursor（功能强大）
详情对比请查看TOOLS.md。
Build Workflow
构建工作流
- [ ] Start with spec (use scope skill)
- [ ] Give spec to AI tool
- [ ] Test happy path + edge cases
- [ ] Give specific feedback on issues
- [ ] Iterate (expect 2-4 rounds)
- [ ] Deploy when working- [ ] 从需求规格开始（使用scope skill）
- [ ] 将需求规格交给AI工具
- [ ] 测试正常流程与边缘情况
- [ ] 针对问题给出具体反馈
- [ ] 迭代（预计2-4轮）
- [ ] 功能正常后部署Giving AI Your Spec
向AI提供需求规格
Claude Code
Claude Code
Build this feature: [paste spec]
Codebase: React + TypeScript + Tailwind
Reference: src/components/Button.tsx for button patterns构建此功能：[粘贴需求规格]
技术栈：React + TypeScript + Tailwind
参考：src/components/Button.tsx中的按钮模式Lovable
Lovable
Build: [paste simplified spec focusing on outcome]
Make it look like Linear (minimal, clean)构建：[粘贴聚焦于结果的简化需求规格]
设计风格参考Linear（极简、整洁）Replit
Replit
Create: [paste spec emphasizing what user sees]
Use React. Keep simple.See PROMPTS.md for patterns.
创建：[粘贴侧重用户可见内容的需求规格]
使用React，保持简洁。更多提示词模板请查看PROMPTS.md。
Reviewing What AI Built
审核AI生成的内容
Test, don't just run:
- [ ] Looks right?
- [ ] Happy path works?
- [ ] Edge cases work?
- [ ] Works on mobile?
- [ ] Error messages clear?要测试，不要只运行：
- [ ] 视觉呈现是否符合预期？
- [ ] 正常流程是否可用？
- [ ] 边缘情况是否处理得当？
- [ ] 移动端是否适配？
- [ ] 错误提示是否清晰？Giving Feedback
给出反馈
Bad: "This doesn't work"
Good: "Clicking 'Save' does nothing. Expected: 'Saved!' message"
Good: "Clicking 'Save' does nothing. Expected: 'Saved!' message"
Template:
What I tried: [action]
Expected: [outcome]
Got: [what happened]反面示例： "这个用不了"
正面示例： "点击‘保存’按钮无反应。预期：弹出‘已保存！’提示"
正面示例： "点击‘保存’按钮无反应。预期：弹出‘已保存！’提示"
反馈模板：
我尝试的操作：[具体动作]
预期结果：[期望的输出]
实际结果：[实际发生的情况]Iteration Expectations
迭代预期
Normal: 2-4 rounds per feature
First build: AI builds from spec, you find 3-5 issues
Second build: Fixes those, you find 1-2 more
Third build: Final polish
First build: AI builds from spec, you find 3-5 issues
Second build: Fixes those, you find 1-2 more
Third build: Final polish
Stop when:
- Happy path works
- Edge cases handled
- Mobile works
- No obvious bugs
Don't iterate for:
- Perfection
- Features beyond spec
- Premature optimization
正常情况： 每个功能迭代2-4轮
第一轮构建： AI根据需求规格生成代码，你发现3-5个问题
第二轮构建： AI修复问题，你发现1-2个新问题
第三轮构建： 最终优化
第一轮构建： AI根据需求规格生成代码，你发现3-5个问题
第二轮构建： AI修复问题，你发现1-2个新问题
第三轮构建： 最终优化
停止迭代的时机：
- 正常流程可用
- 边缘情况已处理
- 移动端适配完成
- 无明显bug
无需迭代的情况：
- 追求完美
- 超出需求规格的功能
- 过早优化
Common Mistakes
常见误区
| Mistake | Fix |
|---|---|
| No spec | Use scope skill first |
| "Build a dashboard" | Specify what's on it |
| Skip edge case testing | Try breaking it |
| Accept without review | Always test |
| Add features mid-build | Finish current feature first |
| Fix code yourself | Describe problem, let AI fix |
| 误区 | 解决方法 |
|---|---|
| 无需求规格 | 先使用scope skill梳理需求 |
| 模糊需求如“搭建一个仪表盘” | 明确仪表盘包含的内容 |
| 跳过边缘情况测试 | 尝试各种极端操作测试 |
| 直接接受AI生成的内容不审核 | 务必进行测试 |
| 构建中途添加新功能 | 先完成当前功能 |
| 自行修改代码 | 描述问题，让AI修复 |
Right-Sizing Work
合理拆分任务
Too big: "Build entire app"
Too small: "Add one button"
Right: "Build user auth flow" (1-3 hours)
Too small: "Add one button"
Right: "Build user auth flow" (1-3 hours)
Good chunks:
- User login/signup flow
- Dashboard with 4 metrics
- Settings page with profile editing
任务过大： “搭建整个应用”
任务过小： “添加一个按钮”
合理范围： “构建用户认证流程”（1-3小时）
任务过小： “添加一个按钮”
合理范围： “构建用户认证流程”（1-3小时）
合适的任务模块：
- 用户登录/注册流程
- 包含4个指标的仪表盘
- 支持资料编辑的设置页面
When Stuck
遇到瓶颈时的处理方式
AI keeps breaking things:
→ Break into smaller piece, start fresh session
Can't figure out complex feature:
→ Ask: "What's simplest way?" Accept simpler solution
Each fix breaks something else:
→ Stop. Ask: "Better approach?" Consider starting over
AI不断生成有问题的代码：
→ 将任务拆分为更小模块，开启新会话重新开始
无法实现复杂功能：
→ 询问：“最简单的实现方式是什么？”接受更简洁的解决方案
每次修复都会引发新问题：
→ 暂停，询问：“有没有更好的实现方案？”考虑重新构建
Working with Existing Code
基于已有代码开发
Add [feature] to existing project.
Stack: [React, Next.js, etc]
Patterns: Check src/components for examples
Style: Tailwind + custom design system
Follow existing code style为现有项目添加[功能]。
技术栈：[React、Next.js等]
代码模式：参考src/components中的示例
风格：Tailwind + 自定义设计系统
遵循现有代码风格Prompting Patterns
提示词模板
Reference existing:
Build Settings page.
Reference Dashboard page layout.
Use same Card/Button components.Provide examples:
Pricing page with 3 tiers.
Like Linear's pricing - clean, minimal.Specify constraints:
Build profile page.
Must work offline.
Load under 2 seconds.
WCAG AA accessible.See PROMPTS.md for more.
参考现有内容：
构建设置页面。
参考仪表盘页面的布局。
使用相同的Card/Button组件。提供示例：
包含3个套餐的定价页面。
参考Linear的定价页面风格——简洁、极简。明确约束条件：
构建个人资料页面。
必须支持离线使用。
加载时间不超过2秒。
符合WCAG AA无障碍标准。更多模板请查看PROMPTS.md。
Review for Non-Technical Founders
面向非技术创始人的审核要点
Check:
- Does it match spec?
- Buttons work?
- Forms validate?
- Looks like design reference?
- Works on mobile?
- Error messages clear?
Don't check:
- Code cleanliness
- Optimization
- "Best practices"
AI handles code quality. You handle requirements.
需要检查：
- 是否符合需求规格？
- 按钮是否可正常点击？
- 表单是否有验证功能？
- 是否与设计参考一致？
- 移动端是否适配？
- 错误提示是否清晰？
无需检查：
- 代码整洁度
- 性能优化
- “最佳实践”
AI负责代码质量，你负责验证需求是否满足。
Success Looks Like
成功的标志
✅ Features match specs
✅ 2-4 iterations (not 10+)
✅ Can explain what's wrong
✅ Building faster each week
✅ 2-4 iterations (not 10+)
✅ Can explain what's wrong
✅ Building faster each week
✅ 功能符合需求规格
✅ 迭代2-4轮（而非10+轮）
✅ 能清晰描述问题所在
✅ 构建速度每周都有提升
✅ 迭代2-4轮（而非10+轮）
✅ 能清晰描述问题所在
✅ 构建速度每周都有提升