为 AI 协作优化的前端项目脚手架
传统前端框架（Next.js/Nuxt）的代码组织方式不适合 AI 协作：
- 文件过度分散（一个功能拆成 10 个文件）
- AI 需要跳转多个文件才能理解完整逻辑
- 类型和实现分离
- 按技术分层而非按功能组织
这导致：
- AI 协作效率低
- 对话轮数多
- 容易改错位置
- 出错率高
AI-First 编码方式：
- 功能内聚（一个文件包含完整功能）
- 类型和实现在一起
- 扁平目录结构
- 按业务功能组织
一个命令行工具，一键生成 AI-First 结构的前端项目。
快速开始：
npx create-ai-first-app my-app
cd my-app
npm install
npm run dev打开 http://localhost:3000 查看完整的 AI-First 编码规范文档。
- ✅ 创建项目脚手架
- ✅ 提供 Next.js AI-First 模板
- ✅ 自己实际使用验证
- 开源到 GitHub
- 收集用户反馈
- 迭代优化模板
- 如果验证有效，考虑做专门的框架
- 如果没人用，至少自己有个好用的工具
- Node.js CLI 工具
- 模板：Next.js 14 + TypeScript
- 包管理：npm
create-ai-first-app/
├── README.md
├── AI-FIRST-CODING-GUIDE.md # 完整规范文档
├── package.json
├── src/
│ └── cli.ts # CLI 入口
└── templates/
└── nextjs/ # Next.js 模板
├── AI-FIRST-CODING-GUIDE.md
├── public/
│ └── AI-FIRST-CODING-GUIDE.md
└── src/
├── app/ # Next.js App Router
├── api.tsx # API 封装
├── config.ts # 配置
├── guide.tsx # 文档展示
├── user.tsx # 用户 CRUD 示例
├── todo.tsx # 待办状态管理示例
├── product.tsx # 商品列表/详情示例
├── shared.tsx # 工具函数
└── lib/
├── validation.ts
└── storage.ts
- 功能内聚：200-500 行的功能放一个文件
- 类型就近：类型定义在使用处
- 扁平结构：目录深度 ≤ 3 层
- 按功能组织：user.tsx, todo.tsx，不是 components/, hooks/
- 渐进式：从简单开始，需要时再拆分
✅ 已完成 - 可以使用
- 创建项目目录
- 复制规范文档
- 编写项目说明
- 搭建 CLI 工具
- 创建 Next.js 模板
- 本地测试
- 完整示例代码
- 极客风格文档展示
- 发布到 npm
生成的项目包含：
- 16 条 AI-First 核心规则
- 极客风格的网页展示
- 详细的实践指南和示例
- user.tsx: 完整 CRUD + API 请求 + 错误处理
- todo.tsx: 本地状态管理 + 列表交互
- product.tsx: 列表 + 详情 + 加载状态
- api.tsx: fetch 封装 + 超时处理
- shared.tsx: 工具函数库 (日期/字符串/数组/异步)
- lucide-react 图标库
- react-markdown 文档渲染
- TypeScript 类型安全
- 扁平化目录结构
个人使用阶段：
- ✅ 我自己愿意用它开新项目
- ✅ 比用 create-next-app 更爽
- ✅ AI 协作确实更顺畅
开源阶段（如果做）：
- 🎯 GitHub > 100 star
- 🎯 有人提 issue/PR
- 🎯 有人在生产环境使用
- AI-First 编码规范：AI-FIRST-CODING-GUIDE.md
- （未来）GitHub 仓库：待定
- （未来）npm 包：待定
现在：开始做，先给自己用。 未来：如果有用，分享给别人。