返回主页

北京工作坊 #001:AI 辅助开发 + 零门槛部署实战

全天工作坊:从 AI 编程入门到成功部署上线

v1.0

工作坊基本信息

核心定位

全天工作坊:从 AI 辅助开发入门到成功部署上线

前置文档和问卷

5分钟快速开始(黑客松必看)

时间紧?先看这里!按这个顺序 3 步上线你的 Demo:

Step 1:用 AI 生成项目骨架(2 分钟)

对 AI 说:

请帮我用 Vite + React 创建一个 [你的创意] 项目,
包含首页、核心功能页面和基本样式。
要求:可以本地运行,代码结构清晰。

运行:npm install && npm run dev,确认能跑起来。

Step 2:迭代核心功能(按需求时间)

黑客松技巧:

  • 只做 1-2 个核心功能,不要贪多
  • 每做一个功能就 git commit,避免出问题回退困难
  • 用 AI 时说清楚"只改 X,不要动 Y"

Step 3:部署上线(3 分钟)

纯静态项目(推荐新手):

  1. 推送代码到 GitHub
  2. 仓库 Settings → Pages → 选择分支 main 和目录 //dist
  3. 等 1-2 分钟,访问 https://<你的用户名>.github.io/<仓库名>/

需要 API/后端功能:

  1. 使用 EdgeOne Pages(支持 Node.js 函数)
  2. 参考前置教程中的 EdgeOne Pages 部署指南

💡 展示技巧:部署成功后把链接发到群里,比本地 demo 更有说服力!

Vibe Coding 入门

Vibe Coding 的核心:用自然语言描述需求,让 AI 生成代码,你负责验收与迭代。

它强调"先做出能用的 MVP,再逐步完善"。

可落地的 Vibe Coding 工作流(强烈推荐照做):

  1. 写清楚验收标准
    • "打开首页能看到 X"
    • "点击按钮 Y 会出现 Z"
  2. 让 AI 先输出方案与文件清单
    • 例如:需要哪些页面/组件/接口/表结构/环境变量
    • 明确数据流、路由、权限、部署方式
  3. 分小步生成代码
    • 每次只让 AI 做一个模块,避免一口气要做个淘宝
  4. 本地跑起来
    • 在本地运行 npm install && npm run dev
    • 打开浏览器验证核心功能可用
    • 检查控制台是否有报错
  5. 写最小测试/自测脚本
    • 至少保证关键路径不挂(登录、下单、提交表单等)
    • 可以用手动测试清单,或让 AI 帮你写简单的测试用例
  6. 推送到 Git,部署到线上
    • git add . && git commit -m "feat: 完成 XX 功能"
    • git push origin main
    • 触发自动部署或手动在平台上部署

AI 编程工具速览与选型

把 AI 编程工具按用途分三类,你会更容易选对工具:

A. 对话式大模型(需求 → 方案 → 代码草案)

B. IDE 内助手(边写边补、边改边测)

C. 终端/仓库级工具(批量重构、自动修复、多文件改动)

黑客松里最实用的组合:对话式大模型(定方向)+ IDE 助手(落地)+ 测试。

工具类型 推荐工具 说明
AI编程工具 Cursor / Kiro / TRAE AI辅助编程,生成和修改代码
对话式AI DeepSeek / Kimi / Claude 辅助编程、代码解释、需求分析
部署工具(国际) Vercel / GitHub Pages 可以翻墙的参与者使用
部署工具(国内) EdgeOne Pages 不能翻墙的参与者使用,支持全栈
数据库 Supabase PostgreSQL数据库,支持实时功能

部署方案选择

EdgeOne Pages vs GitHub Pages

先用一句话分清:

  • GitHub Pages:静态站点托管服务,从仓库拿 HTML/CSS/JS(可选构建)并发布
  • EdgeOne Pages:基于 Tencent EdgeOne 的现代 Web 开发/部署平台,支持静态站点与无服务器应用,并可通过边缘函数扩展动态能力
平台 适用场景 优势 限制
GitHub Pages 纯静态站点(博客/文档/活动页/作品集) 免费、简单、与GitHub集成 只支持静态内容,需要翻墙
EdgeOne Pages 需要API、鉴权、WebSocket、SSR/动态功能 国内可用、支持全栈、边缘函数 相对复杂一些

怎么选(最常用决策)

  • 你做的是纯静态站(博客/文档/活动页/作品集)→ GitHub Pages
  • 你需要API、鉴权、WebSocket、SSR/动态功能 → EdgeOne Pages(更省事)
  • 你特别在意国内访问体验/需要按"加速区域"考虑备案 → EdgeOne Pages

数据库支持:Supabase

工作坊支持使用 Supabase 作为数据库解决方案

Supabase 优势

适用场景

访问 Supabase 官网了解更多

Vibe Coding 常用提示词模板(可复制)

模板 1:需求 → 任务拆分

你是资深全栈工程师。请把下面需求拆成最小可交付任务列表

模板 2:只改一件事

只做"X 功能",不要顺带重构。给出代码差异(或完整文件)。

模板 3:部署排障

我在(EdgeOne Pages / GitHub Pages)部署失败,构建日志如下:……
请给我 3-5 个候选排查方式,并告诉我优先排查顺序。

上线前检查清单

静态站(GitHub Pages / EdgeOne Pages 都适用)

全栈(EdgeOne Pages)

最终产出

每位参与者将带走:

  1. AI 辅助编程项目经验
  2. 一个可访问的线上部署链接(核心成果)
  3. 一套可复制的AI工具流程+部署方案
  4. 一个持续更新的资源库
  5. 一个同行者社群