SISLAND × VIBE-CODING WORKSHOP · 2026-09-13 · 深圳 · vol.01

VIBE-CODING
工作台WORKSHOP

从想法到 Demo —— 一次说干就干的实践。 带上一个想法，把双手弄脏（get your hands dirty），就是最好的开始。

~/workshop/start.sh
sisland@sz ~ $ ./start.sh --date 2026-09-13
▸ loading participants ....... ok 零基础友好 · 全女社群
▸ loading toolkit ............. ok 你 + 任意 Coding Agent
▸ goal ....................... 想法 → demo，跑起来就算赢
sisland@sz ~ $
SISLAND 主办 logo
主办：SISLAND
分享人 Neko：用笔记本电脑的小猫手绘
分享人：Neko
00今日路线图
SISLAND · VIBE-CODING WORKSHOP · 约 50 MIN
CH.01
slide 03–10
开场与工具准备
社群 · 目标 · 五个概念 · Agent 选型 · 选题
15MIN
▶
CH.02
slide 11–14
怎么做：MVP 与 Prompt 工作流
MVP 三原则 · 第一版四连问 · 功能取舍 · Prompt 五步
10MIN
▶
CH.03
slide 15–17
工作台的技术路径
本地页面 · 公网部署 · 手机端
20MIN
▶
CH.04
slide 18
收束与进入实操
答疑 · 感谢 · 合影 → 动手
5MIN
▶
01关于 SISLAND · 往期活动
CH.01 开场与工具准备 · 15 MIN
WHO WE ARE

SISLAND

From 2023 · 深圳 · 全女社群

一座小岛，偶尔上岛透气。

PAST EVENTS · 往期活动

轻娱乐活动 · 不定期

🥾 徒步 📖 读书会 🎬 观影 💼 职业分享 …
观影会合影
🎬 观影
职业分享沙龙
💼 职业分享
海边徒步
🥾 徒步
01关于 SISLAND · 重启
CH.01 开场与工具准备 · 15 MIN
WHY · AI 游乐园

为什么重启、为什么是 AI

参加完5场黑客松后，我们希望传递这种创造的能量
聚焦AI主题活动，创造充满生命力的场域
让非科班姐妹也能从零上手 vibecoding，相互学习，一起共创

充满生命力的场域会激发创造欲，创造会反哺能量

让更多女性掌握技术——
由女性来重新定义科技。

—— SISLAND · WHY WE RESTART

02今天要完成什么
CH.01 开场与工具准备 · 15 MIN

最重要的是开始实践 —— 学到多少技术不重要

GOAL 01

一个能运行的雏形

跑起来，就赢了一半

GOAL 02

一个真实工作流的第一版

丑没关系，能用就行

GOAL 03

一个已拆解清楚的项目

想明白了，就差动手

做项目 = 解数学题

不知道有哪些公式，才觉得不会做。

今天教公式 · 解法各异

✎ 今天的三条约定 · GROUND RULES

不比完整漂亮 —— 开始实践就是胜利
共同学习 有其它解法，随时提
你的痛点 = 下期主题
03基础概念 · LLM 与 Prompt
CH.01 开场与工具准备 · 15 MIN
CONCEPT · LLM 大模型

LLM的核心是概率预测器

能推理规划 ≠ 像人脑思考

小心 幻觉 · 一定要“有人在场”

人机协作核心是「人」 —— AI 辅助思考，而不是代替思考和决策

CONCEPT · PROMPT 提示词

给AI足够，但不过量的信息

约束太少 发散 ↗

上下文太多 没重点 ↘

  • 和AI多轮沟通，确认ta需要的信息
  • 用plan模式，人工审阅

黄金法则 上下文 + 目标 + 约束 不多不少

Prompt公式： 角色设定+ 背景信息+ 具体任务+ 输出格式+ 注意事项
03基础概念 · Agent / Token / API
CH.01 开场与工具准备 · 15 MIN
CONCEPT · AGENT

给大模型装上手脚

Skill = 预封装 任务的 SOP
MCP = 连外部服务 像 USB 接口
能操作本地文件

心脏（大模型）+ 器官（Skill + MCP）= 数字化员工

CONCEPT · TOKEN

最小计价单位

上下文 128K 一次约 128,000 token
输入 · 输出分别计费

换算一下：1M token ≈ 200 份英文合同（2000 字/份）

CONCEPT · API

任务怎么送达模型

你的电脑 —— 请求 → API —— 请求 → 模型服务器 ←—— 响应原路返回

所以 API 可以接入不同 agent 框架

寄信：API = 邮局 + 地址

04Coding Agent 速查表
CH.01 开场与工具准备 · 15 MIN
AGENT免费额度连续包月充值 TipsAPI备注
Workbuddy初始 2000 积分，每天登录 +100；近期 hunyuan 模型免费体验（有限额）¥70 / 140 / 700薅免费积分即可，不建议购买/办公软件生态做得很好，现成的「专家团」很适合做特定任务
Zcode300 万 token GLM-5.3，500 万 token GLM-5.3-flash¥118 / 538 / 1078可以闲鱼购买体验周卡月订阅可生成 API key 接入其它 agent代码、执行能力强，可以和 Codex 搭配使用省钱
TRAE初始 2500 + 2000 积分，每天签到 +150¥69 / 219 / 629当前 10% 折扣可接入火山 coding plan模型能力现在不如 GLM 和 DS
Kimi有一定免费额度（无具体数值），可看小红书测评¥49 / 99 / 199 / 699/月订阅可生成 API key 接入其它 agent代码、执行能力强；但 K3 很贵，订阅不经用，不如 Codex Plus
Deepseek
Harness		不建议新手使用 harness，可根据情况购买 API 接入其它 agent—可以买 opencode 月订阅使用 ds4-flash按量计费 API，可接入其它 agent代码、执行能力强，可以和 Codex 搭配使用省钱
Codex
ChatGPT		桌面端和 Web 端免费使用 5.6-luna，每日一定免费生图额度$8 / 20 / 100 / 200闲鱼代充 / 小红书日区低价充值 / 购买中转站 API可接入中转站 API、国产模型 API（建议接 DeepSeek、GLM、Kimi）除了充值比较麻烦，目前综合能力最强的
Claude5 小时滚动窗口免费额度使用 sonnet5$19 / 110容易被封号，建议接入 API 使用同上（可接国产模型 API）Claude + GLM/DS 也很能打，编程能力最强
Opencode有一定免费额度（无具体数值），可看小红书测评$10 或按量计费/可以包月使用 deepseek开源、多模型、可扩展性强，适合编程工作流
04Agent 怎么选
CH.01 开场与工具准备 · 15 MIN
推荐路线

顺手的，就是最好的。

新手这样起步

  • 先用有免费额度的国产agent上手 Workbuddy、TRAE、Zcode
  • 熟悉操作后，根据使用需求选择海外agent，搭配国产agent省钱
  • 商汤、百炼等国产模型API供应商 均有免费额度

先用免费额度体验，在实操中找到最适合你工作流的一个或几个agent

注意
国内模型Coding时尽量不混接
API key 不要泄露！！！
进阶 · 高自由度

按自己的工作流定制，可玩性高

Deepseek Harness Hermes Pi
AGENT 使用习惯养成

1.建立项目文件夹，一个项目对应一个工作区

2.亲自审阅文件，保持 human in the loop

3.有时候古法手搓修改比 agent 更快

4.善用但不滥用 skill 和 MCP

5.一个对话中尽量不切换模型，不同对话间通过文件进行协作

6.用贵的模型推理规划，用便宜的模型执行

05什么适合做成工作台
CH.01 开场与工具准备 · 15 MIN
判断标准
信息量较大
需要持续更新
多步骤 / 多信息流协作

零基础先从「单端本地实现」开始上手

创

内容创作系

选题 · 素材 · 排期
参考：姜dora 工作台

学

学习系

语言学习
科研论文

副

副业系

客户对接进度
多副业进度总控

周

周期型项目系

社群活动
系列黑客松

家

生活管理类 —— 完全定制化的记录工具

现有的记录 app 不符合你的思路？那就做定制版。不建议新手第一个做此类，使用率低、多端同步复杂

05不局限于工作台
CH.01 开场与工具准备 · 15 MIN

任何你想做的 idea，
都可以从今天开始打造一个 demo。

先实操才有实感 → 知道缺什么 · 哪里卡
先完成再完美 → 每一个demo都有意义

以练代学，就是最好的开始。 ✎

实操才是最快的学习！

START
TODAY
★★★
06先完成，再完美
CH.02 MVP 与 PROMPT 工作流 · 10 MIN
MVP原则
① 先能运行 ② 先解决一个核心问题 ③ 静态数据 + 简单交互先行

MVP · MINIMUM VIABLE PRODUCT —— 先拉出一个能运行的版本，体验成立再继续优化

动手前 · 第一版四连问

① 这个工作台帮助谁？

② 它解决什么具体问题？

③ 第一版必须包含哪 1–3 个功能？

④ 哪些内容明确放到下一版？

脑暴路线
Web AI 脑暴 ChatGPT / DeepSeek ↓ 让 AI 给出 PRD / 实施方案 · 执行计划 ↓ 把计划丢给 Coding Agent
07评估：加不加这个功能？
CH.02 MVP 与 PROMPT 工作流 · 10 MIN
Q1 · 性价比

值不值得做

时间成本 vs 产出效果

Q2 · 重复造轮子？

能不能借力

自己写更好？
MCP 打通现有软件？

Q3 · API 可行性

能不能外挂

API 能实现？
性价比如何？

Sometimes, less is more.

第一版砍得越狠，跑得越快。

08Prompt 工作流 · 五个步骤
CH.02 MVP 与 PROMPT 工作流 · 10 MIN · STEP 1–5
1

需求澄清

别只说「帮我做 X」→ 让 LLM 反问你

2

制定计划

Agent 出计划 页面 · 数据 · 顺序 · 验证 —— 先不执行

3

人工审核 ★ 核心步骤

删掉过大范围 · 确认现场能完成

4

派生「一天版」MVP 计划

完整计划 → 一天能出结果 核心流程优先

5

执行与调优

每次只改一个方向 · 先框架可用，后视觉细节

COPY ME · 第一步的开场白模板

「我想做一个 ______ 的 MVP，希望能在五小时内搭建一个基本框架。 请先不要写代码，和我一起脑暴（反问我 5–10 个问题）， 帮我明确目标用户、使用场景、核心数据、必须功能和暂时不做的内容。」

报错

报错了怎么办

  • 给Agent足够的信息：完整报错 + 相关文件 + 复现步骤
  • 网页标注 · 截图 帮 Agent 定位
  • 先保证大框架可用，再优化视觉、细节别一味堆功能
  • Tip：UI先生效果图再丢给agent执行
09技术路径 · 本地页面 与 可访问网址
CH.03 工作台的技术路径 · 20 MIN · 1/2
PATH A · 本地页面

只能电脑本地打开

不部署 · 不上网 · 文件在你电脑里

local storage 换浏览器会丢
本地文件 / 本地数据库 可跨浏览器使用
技术栈
HTML + CSS + JS零构建，够用了 Vite + 原生 JS开发体验更好 Vite + Vue / React组件化，进阶 本地应用

直接问 agent：你的需求最适合什么技术形式的工作台 ✎

PATH B · 可访问网址

部署到公网服务器

浏览器干不了的活 程序脚本 隐藏密钥 用户登录 多端同步

无后端 · 静态托管

GitHub Pages Cloudflare Pages Vercel 需🪜 Netlify 需🪜

有后端 · 服务器

Cloudflare Workers 腾讯云 / 阿里云轻量部署

一键部署

星可云 OpenDeploy （只支持 Claude）

数据库

Supabase 多端同步时再考虑
09技术路径 · 在手机上使用
CH.03 工作台的技术路径 · 20 MIN · 2/2
1

部署公网 + 登录

手机直接访问 安全性弱 · 勿长期

2

Agent 远程控制

自然语言 → 电脑代操作 ⚠ 需保持电脑开启

3

iCloud 同步

有延迟 · 易冲突 频繁切端不推荐

4

改造现有平台 ★ 推荐

flomo · Notion · 得到大脑 · Obsidian 都支持 MCP 接 agent ▸ Obsidian · 本地 → 个人知识库 ▸ Notion · 云端 → 协作

5

问 AI · 查小红书

总有更多解法 每个人的同步需求不同

10嘉宾分享
GUEST SHARING · 分享人 Yusually
嘉宾分享人 Yusually
分享人 · Yusually

她的工作台，
是怎么长出来的？

SHARING · 分享内容
工作台制作思路 从想法到成品的思考路径
案例分享 真实工作台现场拆解

欢迎现场提问 ✎

10收束 · 进入实操
CH.04 收束与进入实操 · 5 MIN

现在，把你的想法跑起来。

遇到问题别卡住
任何问题 → 找志愿者 ✋ 安装 · 需求 · 报错 · 部署
别有压力！希望你把这里当游乐园，而不是课堂
其它事项提醒
~/workshop/wrap-up.sh
sisland@sz ~ $ cat THANKS.md
▸ 场地方 · 壹号喜阅
▸ 主办 · Sisland ｜ 联合招募 · Leanin深圳
▸ 策划筹备 · 小太阳、Neko
▸ 主持分享 · Neko ｜ 分享嘉宾 · Yusually
▸ 路线指引 · 八月瓜 ｜ 签到与协调 · 杲杲、Vivian
▸ 技术支持 · 清盏、晨月、Yusually、Neko
▸ 摄影摄像 · 小太阳、糕糕、清盏
▸ Demo场控 · 金雅、小一 ｜ 气氛组 · 三斤、杲杲
▸ 机动组 · 小满、李李、三木、西洲
SISLAND 主办 logo
主办：SISLAND
SISLAND · VIBE-CODING WORKSHOP · 2026.09.13
GET YOUR
HANDS
DIRTY ★