Fullstack AI App Builder

fullstack-ai-app-builder：快速搭建全栈AI应用

核心哲学：Andrej Karpathy 说的——"不要一上来就写代码。先用文字把你想做的系统完整描述一遍。"

🎯 这个Skill能帮你什么？

你有个想法，但不知道怎么快速把它做成一个真实的web应用？

这个Skill会引导你完整的3阶段过程：

第一阶段：想清楚（30分钟）
  ↓ 痛点三问 + 信息收集
第二阶段：设计清楚（30分钟）
  ↓ 技术栈决策 + 数据模型
第三阶段：快速实现（3-6小时）
  ↓ 代码生成 + 配置 + 部署

结果：你的应用在网上了，可以给用户试用。

第一阶段：需求清晰化（30分钟）

Step 1：痛点三问

用这三个问题把你的想法从"模糊"变成"清晰"：

Q1: 你（或你的用户）每天/每周重复做什么低效的事？
    → 这是你的痛点

Q2: 如果这件事自动化了，你省了多少时间？带来多少价值？
    → 这是你的价值主张

Q3: 最核心的一个功能是什么？把其他都删掉，只保留这一个。
    → 这是你的MVP（最小可行产品）

我会根据你的回答，帮你确认这个想法值不值得做。

Step 2：信息收集

根据你的项目类型，我会问以下问题：

企业内部工具类：

• 使用人数？（1人？10人？100人？）→ 决定架构复杂度
• 现有数据在哪里？（Excel/纸张/微信群？）
• 谁来维护？（有IT？还是业务自己用？）
• 访问方式？（内网Only？外网？手机？）

个人效率工具类：

• 数据是否需要跨设备同步？
• 是否需要分享给别人？
• 是否需要AI能力？（提取/分析/生成？）

对外产品/SaaS类：

• 用户画像？（国内？海外？技术背景？）
• 商业模式？（免费？订阅？按次付费？）
• 初期DAU预期？（决定是否需要服务器）

Step 3：确认MVP

我会帮你删掉所有"看起来很cool但实际不必需"的功能，只保留核心的1-2个。

第二阶段：技术方案设计（30分钟）

决策树1：根据用户量选技术

你的项目需要多少用户同时使用？

├─ 只有1-3个人用
│  → 单HTML文件 + localStorage（零成本，无服务器）
│
├─ 团队（4-50人）用，需要共享数据
│  ├─ 国内为主 → Supabase（有国内代理方案）
│  └─ 国内外都有 → Supabase（自带全球CDN）
│
└─ 对外产品，用户量不确定
   ├─ 前期验证阶段 → Supabase（免费，够用）
   └─ 规模化后 → 迁移到专用服务器（代码无需大改）

决策树2：需要什么AI能力？

需要AI吗？

├─ 图片识别/OCR 
│  → 通义千问VL（国内快，免费额度大）或 Gemini（更强，需代理）
│
├─ 文字提取/结构化 
│  → DeepSeek（国内直连，性价比最高）
│
├─ 复杂推理/写作 
│  → Claude API 或 GPT-4o（看预算）
│
└─ 不需要AI 
   → 删掉AI，简单就是美

推荐技术栈（覆盖90%小项目）

数据模型设计

原则：花30分钟设计数据模型，比花30小时修改代码更值得。

我会帮你：

1. 识别核心对象：系统里最重要的"一件事"是什么？

   • 例：会议纪要、销售线索、项目任务、用户反馈

2. 列举属性：这个对象有哪些属性？

   • 删掉80%不必要的，只保留"在界面显示+会被查询筛选"的

3. 识别子对象：有没有"一对多"的关系？

   • 例：会议纪要（父）→ 行动项（子）

4. 生成SQL：我会给你建表语句

示例SQL模板：

-- 主表
CREATE TABLE your_entity (
  id TEXT PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  content TEXT,
  status TEXT DEFAULT 'active',
  tags JSONB DEFAULT '[]',
  meta JSONB DEFAULT '{}',
  created_by TEXT,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- 子表
CREATE TABLE your_sub_item (
  id TEXT PRIMARY KEY DEFAULT gen_random_uuid(),
  parent_id TEXT REFERENCES your_entity(id) ON DELETE CASCADE,
  text TEXT NOT NULL,
  owner TEXT,
  due_date DATE,
  status TEXT DEFAULT 'open',
  created_at TIMESTAMP DEFAULT NOW()
);

-- 索引
CREATE INDEX idx_parent ON your_sub_item(parent_id);
CREATE INDEX idx_status ON your_entity(status);

第三阶段：快速实现（3-6小时）

Step 1：生成完整代码

基于你的需求和数据模型，我会生成一个单HTML文件，包含：

• ✅ 完整的前端界面（React组件）
• ✅ 本地存储逻辑（localStorage或Supabase连接）
• ✅ 响应式设计（手机和电脑都能用）
• ✅ AI集成代码（如需要）
• ✅ 错误处理和加载状态

你可以立即在浏览器里打开测试。

Step 2：配置后端（如需要）

如果需要Supabase：

1. 打开 https://supabase.com
2. 创建新Project（免费）
3. 复制URL和Anon Key
4. 我会告诉你在HTML代码里粘贴哪里
5. 在Supabase的SQL Editor里执行建表语句

Step 3：配置AI（如需要）

如果需要AI能力：

获取API Key：

• 通义千问：https://dashscope.console.aliyun.com/apiKey （国内推荐）
• DeepSeek：https://platform.deepseek.com/api_keys （文本处理推荐）
• Gemini：https://aistudio.google.com/app/apikey （需梯子）

存储Key：

• 小项目：直接存在HTML的localStorage里（不用上云）
• 中型项目：存在Supabase Edge Function的环境变量里（前端不暴露Key）

我会给你详细的代码模板和步骤。

Step 4：本地调试（四阶段测试）

你在浏览器里测试这4个阶段：

□ Phase 1：UI能正常显示？响应式正常？
  按F12，看有没有JavaScript报错
  
□ Phase 2：本地存储能读写？
  添加数据，刷新页面，数据还在吗？
  
□ Phase 3：Supabase能连接？数据能读写？
  看Network标签，API请求有返回数据吗？
  
□ Phase 4：AI接口能调用？结果正确吗？
  调用AI，看返回的数据格式对吗？

如果遇到问题，给我Console的红色错误信息，我帮你快速修复。

第四阶段：上线部署（30分钟）

推荐方案：Vercel（最简单）

1. 打开 https://vercel.com
2. 登录（用GitHub账号最快）
3. 点 "Add New Project" → "Upload"
4. 把你的 index.html 文件拖上去
5. 等待部署完成
6. 获得一个公网URL（格式：https://xxx.vercel.app）

完成！你的应用现在在线了。

其他部署方案

常见项目模式（拿来即用）

模式1：会议纪要系统（2-3天）

痛点：纸质记录难追踪
功能：记录会议 → AI提取待办 → 人工确认 → 保存
数据：meetings表 + action_items子表
AI：通义千问VL（OCR识别）或 DeepSeek（文本提取）
成本：0-5元（AI调用费，免费额度可能够）

模式2：销售CRM（3-5天）

痛点：客户信息散落在微信/Excel
功能：添加客户 → 跟进记录 → 机会分析
数据：customers表 + follow_ups子表
AI：可选（AI自动分析热门客户）
成本：0元

模式3：项目任务看板（1-2天）

痛点：任务没有统一视图
功能：添加任务 → 拖拽更新状态
数据：tasks表（title, status, priority, due_date）
AI：不需要
成本：0元

模式4：个人效率工具（1天）

痛点：自己的数据分散
功能：快速记录 + 本地查询
数据：本地localStorage
AI：可选
成本：0元

AI工作流设计（如需要AI）

标准流程

【输入层】用户上传或输入
    ↓
【预处理】检测格式（图片？文字？PDF？）
    ↓
【AI提取】调用AI API → 返回结构化JSON
    ↓
【人工确认】展示给用户，允许修改（关键！不要完全依赖AI）
    ↓
【保存】写入数据库
    ↓
【展示】更新界面

Prompt工程（如何让AI返回你想要的格式）

关键原则：

1. 角色设定
   "你是一个专业的[领域]信息提取助手"

2. 格式约束（最重要）
   "请严格按照以下JSON格式返回，不要包含任何其他文字"
   然后给出schema

3. 少样本示例
   "例如，输入'明天下午3点小明负责写报告'，
    输出：{"text": "写报告", "owner": "小明", "due": "2024-XX-XX"}"

4. 容错处理
   "如果无法确定某个字段，请填null，不要猜测"

API Key安全存储

小项目（1-5人内部用）

// 直接存localStorage，不上云
const storage = localStorage;
storage.setItem('api_key', 'sk-xxxxx');
const key = storage.getItem('api_key');

中型项目（有多用户）

Key存在Supabase Edge Function的Secret环境变量里
前端永远不拿到Key，只调用你的Edge Function接口

对外SaaS

有自己的后端服务器
Key统一管理，用户付费后获取调用额度

常见错误快速修复

上线前检查清单

• 核心业务流程完整走通（从输入到输出）
• 数据能正确保存和读取
• AI接口调用成功，结果符合预期
• 错误情况有友好提示（不要让用户看报错堆栈）
• Chrome/Firefox/Safari都能正常使用
• 手机上显示正常（无横向滚动条）
• API Key没有硬编码在前端代码里
• Supabase已开启RLS策略
• 首页加载时间 < 3秒

与AI工具高效协作的提示词模板

初始需求描述

我需要搭建一个[系统名称]，用于[核心场景]。
主要用户是[用户描述]，他们目前的痛点是[痛点]。

核心功能（只要最重要的1-2个）：
1. [功能1]
2. [功能2]

技术要求：
- 单HTML文件
- 使用React（CDN版本）
- 后端用Supabase（URL: xxx, Key: xxx）
- 需要调用[AI名称] API处理[具体任务]
- 手机和电脑都能用
- UI风格：[企业商务/科技/极简]

数据模型：
- 主表：[表名]，字段：[字段列表]
- 子表：[子表名]，字段：[字段列表]

请先确认你理解了需求，然后生成完整代码。

遇到问题时

【问题描述】点击[按钮名]后，期望[结果]但实际[实际结果]
【错误信息】[Console红色错误文字或截图]
【代码位置】大约在[函数名]附近
请只修改有问题的部分，保留其他代码不变。

要求扩展功能时

现在需要添加[新功能]：
- 触发时机：[什么时候触发]
- 输入：[用户操作什么]
- 处理：[需要做什么]
- 输出：[界面如何变化]
请在现有代码基础上添加，不要修改已有功能。

核心总结：从0到1的通用路径

1. 【想清楚】用三问法定义痛点和MVP（30分钟）
   ↓
2. 【设计数据】画出数据模型（10分钟）
   ↓
3. 【选技术栈】根据用户量和AI需求选技术（10分钟）
   ↓
4. 【生成框架】用本Skill的模板+Claude生成初始代码（30分钟）
   ↓
5. 【配置后端】Supabase建表（15分钟）+ 如需AI则配置Key（15分钟）
   ↓
6. 【本地调试】按四阶段测试，遇到问题截图给Claude修（1-3小时）
   ↓
7. 【用户测试】给真实用户试用，记录反馈（1天）
   ↓
8. 【上线部署】Vercel一键部署（15分钟）
   ↓
9. 【持续迭代】每周1-2个小功能更新（持续）

记住这句话

"The best code is no code at all. The second best is simple code you understand completely." 最好的代码是没有代码。次好的是你完全理解的简单代码。

"先让它能用，再让它好用，最后才让它快。" Make it work. Make it right. Make it fast.

你的任务是"想清楚需求"。AI的任务是"快速实现"。完美配合。

费用预估

第一个月（完全免费）

✅ Vercel部署：完全免费
✅ Supabase：500MB存储免费
✅ React CDN：完全免费
✅ Claude API：免费额度足够初期
✅ DeepSeek/通义千问：有免费额度

总成本：¥0

有付费用户后

用户付费 → 覆盖服务器成本
一般不需要你额外花钱

你的下一步

1. 用痛点三问描述你的想法
2. 我会确认需求和信息收集
3. 我给出技术方案（技术栈+数据模型）
4. 我生成完整代码（一个HTML文件）
5. 你本地测试，遇到问题给我错误信息
6. 我快速修复
7. 你部署到Vercel（3分钟）
8. 完成——你的应用在网上了

准备好了吗？告诉我你的想法吧！