浙大 · Vibe Coding 分享
Vibe Coding · 团队实战分享
✦ 浙大 · Vibe Coding 分享

Vibe Coding
从想法到实现

从评论区的两类人说起:一个产品,怎么被想到,又怎么被做好。
方
分享人 · SPEAKER
方颖
引入 · 一个被忽视的视角

做产品前,我先去看评论区

确定主题之前,我们团队会大量研究对标品。看得多了我发现——真正的信号常常不在产品本身,而在评论区,那里站着最容易被忽视的、真实的用户和受众。

competitor-ai-product.com
大家的目光 · 都盯着产品
↓ 我的目光 · 移到这里
评论 · 夸夸党
主包怎么这么多 idea?灵感到底哪来的…
评论 · 求知党
求教程!博主能分享一下 coding 过程吗?
评论 · 路人
刚好解决了我一直头疼的问题…
评论区 = 你的产品与真实受众之间,最直接的一面镜子。
引入 · 评论区的两类人

评论区,总坐着这两类人

🤩
画像 A
夸夸党
"主包怎么这么多 idea?这些灵感哪来的!"
惊叹 · 佩服感0%
"刚好戳中我"的共鸣0%
但自己从没觉察到0%
🧐
画像 B
求知党
"求教程!博主能分享 coding 过程吗?"
求知 · 想学会0%
动手欲 · 想复刻0%
想要一套可复用的方法0%
※ 画像为示意,用来刻画两类留言者的特征,非统计数据。
引入 · 背后的两个大转变

这两类留言,藏着两个转变

转变一 · 从前

🔒 有洞察,没出口

做设计、做产品的人能洞察到很多需求,却很难全链路把它做出来给人看,只能锁在脑子里、备忘录里。

→
现在

🌱 表达欲被激发

想法如雨后春笋涌上社媒,人人都有了展示的媒介,分享欲、表达欲一起被点燃。

转变二 · 从前

💬 只问"好不好用"

发布一个产品,大家关心的是它干嘛的、怎么用、体验丝不丝滑——很少有人问"这怎么做出来的"。

→
现在

🛠️ 追问"怎么做的?"

只要沾上"vibe coding"这个词,它就有种魔力——大家都想知道,你到底是怎么把它做出来的。

引入 · "怎么做的"背后的潜台词

大家在找的,其实是一个可复用的东西

"反正代码都被 AI 包了——
我上我也行。"
01 一个神奇的 Prompt
02 一个没听过的 AI 技巧
03 一个现成的 Skill 文件
而真正能沉淀、能反复复用的 →
一套可迁移的方法 · Skill

vibe coding 降低了编程门槛,很多人是真心想学;但潜台词里,也藏着"人人都能轻松做出来"的期待。我们确实能从实践里,沉淀出一些可反复复用的优质方法。

引入 · 今天讲什么

两个现象,引出两大方面

一个产品要能可持续做下去、不烂尾,最关键的就是这两件事。今天就顺着它们展开。

CORE
让产品持续迭代
不烂尾
01

怎么想到的

产品的来源与去处——idea 从哪来,又流向哪里。

模块一 · 内容与共创
02

怎么做好的

不硬聊技术,究竟有哪些拿得出手的过程方法。

模块二 · 做产品而非玩具
MODULE 01

怎么想到的?

自媒体内容,和产品之间的关系——一个产品的 idea 从哪来,又流向哪里。
模块一 · 从"怎么定义产品"说起

经典方法值得学,但今天我讲另一个

选题和产品定义,邱老师的网页上有一套很经典的方法,强烈建议大家去用一用、学一学:

METHOD四维公式
METHOD产品画布
METHOD5W1H
METHOD双钻模型

🔗 打开邱老师的方法页 zwy.alimq.com/huozi/method.html

但这些课本上都有,今天不聊→ 我要讲 AI 时代的一个关键方法
模块一 · 什么是共创

共创
= 和真实受众,反复迭代地畅聊

这也是邱老师的信条:做产品,你得和这件事真实业务场景里的那帮人——你的真实受众——反复地聊、不断地改。

✗ 没有共创

🔨 闭门造车

那位研究生做外贸询单产品,业务场景和工作流程全是自己 YY 的——拿着锤子找钉子。

结局:没人用,烂尾
VS
✓ 有共创

🤝 和真人一起改

需求来自真实场景里的人,反复对齐痛点、一版版迭代,做出来的东西真的有人要。

结局:越做越准
模块一 · 一个现实问题

怎么找到这群共创人?

🤔
只能做同学之间的产品?
还是拉上家里人?
K12 小朋友不在现场怎么办?
解法 · 你和用户之间的媒介
做内容 / 自媒体
📣
用内容吸引、衔接你的用户,
并持续从中拿到反馈。
简单说:用内容把对的人聚过来,让共创随时随地发生——哪怕他们不在你面前。
模块一 · 一个相互促进的关系

内容和产品,是双向喂养的

🧪
你的产品
产品快速、低成本到达受众
一发就有人用,反馈最快→
→受众反过来决定你做什么
有了流量和渠道,他们帮你想更好的 idea
👥
你的受众
很多人只看到上面那条(产品→受众),却忽略了下面那条——受众其实在悄悄决定你产品的走向。
模块一 · 这个方法,我拆成三点讲

共创,具体怎么用起来

点 01 · 为什么是我们

站在「开发者 × 创作者」的交界上

我一开始也有误区:做产品是一拨人,做内容分享的博主是另一拨人。但其实——传统岗位上,做产品的大多没影响力,有影响力的又很少真做产品。这两个圈的重叠处,就是巨大的杠杆。

产品侧
产品开发者
内容侧
内容创作者
你在这里 · 杠杆
同样的付出,撬动更大的结果
点 01 · 一个很有憧憬的例子

大家其实爱看创始人自己在讲什么

想了解 OpenAI,你更想看 Sam Altman 的推特;想了解特斯拉,你就看马斯克在聊什么。把做产品的挑战、你怎么解决、功能为什么这么设计——这些幕后分享出来,用户会觉得他在跟你、跟你的产品一起成长。

Sam Altman
Sam Altman · 亲自澄清 OpenAI 的立场
Elon Musk
Elon Musk · 直接聊算法的取舍
点 02 · 怎么做 · 内容帮你筛选用户

一个转起来就停不下的共创飞轮

你持续输出同一类内容,它会自动帮你筛出"对的共创者"。比如我们常讲 vibe coding、AI 未来教育、K12 成果,吸引来的就是那些理念前沿的教育者和家长。内容和社区,其实是一体两面。

FLYWHEEL
从群众中学习
到群众中开发
①
输出好的产品内容
②
筛选、聚起对的共创者
③
他们暴露真实的痛点需求
④
做出更好的产品
点 03 · 重新发现需求

"做什么",来自对人的洞察

我们默认最先洞察的是自己——我的痛点我最清楚。但做产品,最终得把个人痛点泛化成很多人的共同痛点。待在小圈子里很难知道别人在想什么,破圈靠这三招:

所以——很多需求和 idea,其实是从评论区里长出来的。
点 03 · 我们真的这么做了

上线前,我们做了大量内容与共创

原创IP作品集
原创 IP 作品集
成果展示
IP 周边成果
学生作品集
过程与亮点
学生作品集
从草图到产品化
鹿源
设定到落地
小茶猫
IP 应用延展
成果展示
成果展示
创意家居
创意家居落地
产品实拍
给万物加灵魂
教学分享
用 AI 编程让它开口
课堂实拍
教学过程实拍
课堂实拍
真实使用现场
成果展示帖教学/使用实录多渠道共创依据反馈迭代了好几版
模块一 · 一种新的产品定义模式

AI 时代,把顺序倒过来

◷ 传统 · 先产品后市场
先做出产品→再去找用户测试
问题 1 很难确保是真实痛点,多半在拿着锤子找钉子,或太小众私人。
问题 2 产品做出来,冷启动、吸引第一波人来用,很难。
✦ 新模式 · 先用户后产品
内容吸引受众→交互理解痛点→做真正解决问题的产品→过程做成内容↺ 再吸引更多人
产品来自他们的真实场景,所以粉丝愿意陪你迭代、愿意试用——哪怕它还不完美,因为你已经先给了他们价值。
模块一 · 收尾 · 如果你还难以起步

从一个很小的痛点切进去

起点
从你自己的痛点出发
↓
收窄
收进一个很小、很具体的点
↓
延展
再延展到一类很具体的人
只不过——全程都要提醒自己共创:怎样更好地构建内容、聚起你的共创者。这,就是"怎么想到的"。
MODULE 02

怎么做好的?

做一个真正的产品,而不是一个看着炫酷的玩具。
模块二 · 一个前提感受

为什么我说"做好",不是"做出"

当下 AI 最容易做出来的,恰恰是那种看着很炫、很 fancy 的东西——这也是它最擅长的。完全不会编程的人,几句话就能生成一个动效炫酷的网页,成就感巨大。比如网上很火的"手搓个人主页 / 作品集":

这类偏前端样式的作品看着惊艳,也很重要——它是你审美和检索能力的体现。但只要肯花时间、能把需求讲清楚,它的实现其实不难。
模块二 · 给"用 AI 做东西"的难度打个分

从 1 到 1000,体感差距就是这么夸张

0
炫酷的 HTML
做一个看起来很炫的网页
0
自用顺手的工具
做一个自己真正用得顺手的 AI 工具
0
发布给一群人
一群人用完还觉得不错,且长期跑下来稳定不出问题
很多外部作品很有想法、很炫酷,但往往只是"某一个点的体验",不一定能成为一个完整闭环的产品。
模块二 · 反过来看真正在流通的产品

真正天天被用的产品,其实挺"朴实"

看看市场上大家天天在用的教育产品,比如科大讯飞、好未来——你会发现它们并不炫,反而很朴实、很扎实。

学习类产品
学习类 App · 功能扎实、界面朴实
教育产品
教育产品 · 围绕真实教学场景
所以用 AI 做应用,比"学 AI 技巧"更重要的是两件事:对真实业务场景的理解 + 对技术的一定理解。
一 · 产品定位与需求洞察

最该先想清的:产品定位

一个清晰的定位,得说清这四件事。它会贯穿你后面每一个决策——每改一个功能,都要回来问:这符不符合我的定位。

01 · WHAT

一句话定位

用一句话,把你做的是什么讲清楚。

02 · GOAL

目标

你想让用户最终达成什么。

03 · WHO

目标用户

到底是给谁做的。

04 · NEED

需求洞察

他们真正需要得到的是什么。

↻ 定位贯穿每一个决策:改功能前,先回来对一次定位
一 · 我们的定位,迭代了三版

"说法"一直在变,"核心"从没变

V1 · 2023 起步

IP 创作课

面向青少年的「AI × IP 创作启蒙课」
目标系统学会用 AI 做原创 IP 创作
用户K12 青少年(线下课学生)
洞察内容太垂太专业,孩子不感兴趣、受众窄 →
IP创作课
V2 · 游戏化

IP 大富翁

「搭建你自己的商业帝国」游戏化平台
目标持续创作动力,走完「创作→商业化」闭环
用户K12(线下+线上)+ 教师 / 机构
洞察要即时反馈和成就感 → 游戏化 + 应用拆分 →
IP大富翁商业帝国
V3 · 现在这版

少年主理人

从 0 打造个人 IP 品牌小店、市场化变现的素质教育
目标从一个创意走到市场,长出原创力·设计思维·商业素养
用户K12 为核心 + 家长 / 教育者共创
洞察家长要"学到什么"、老师要教育逻辑 → 加重教育、弱化游戏感
少年主理人作品
始终不变的核心
让 K12 孩子当创造者 · 用 AI 走完 IP 创作全流程 · 最终 把它商业化。定位的"说法"可以升级,但"核心"理念不能变。
二 · 功能从何挖掘

别坐在电脑前拍脑袋想功能

怎么把"给小朋友做 AI 创作教育"这么大一句话,拆成一个个具体功能点?我们不东想一个、西补一个,而是从三类真实来源去挖:

来源 ① · 真实业务场景

课堂的节奏,框定了功能

一堂线下课
有节奏地创作
课程终点 · 做了一大堆
课堂要一直有反馈、有热度
即时评分爆金币作品擂台 PK排行榜
老师端
全班作品进度看板
顺着课程终点 · 收纳 + 展示 + 被认可
路演作品集我的品牌店铺
生成反馈
生成即时反馈
结算金币评分
爆金币 · AI 评分
我的作品
路演作品集 · 个人主页
来源 ② · 教育方法论 / 专家 SOP

把做 IP 的专业流程,翻译成孩子能上手的应用

我们不是凭空发明"怎么做 IP"。传统品牌行业打造全套 IP 体系,本就有一整套成熟流程:

STEP 01

角色概念

从世界观、性格、动机出发,把角色的"魂"定下来。

STEP 02

角色形象

把概念变成一个能被识别的视觉形象。

STEP 03

内容创作

表情包、绘本、短视频——让 IP 被看见、被传播。

STEP 04

周边开发

把它做成能商业变现的产品。

应用矩阵
↑ 这套专业流程,被我们翻译成一个个"能玩的应用"(形象创作 × 商业帝国)
来源 ③ · 真实用户心理洞察

抓住孩子的深层动机

"IP 品牌"这个概念本身有门槛,离 K12 太远,只当课外拓展很难激发兴趣。但我们洞察到两件事:

洞察一 · 表达欲

🎨 想做出"属于自己的东西"

孩子有很强的创作和表达欲,渴望拥有一个真正属于自己的作品。

洞察二 · 成就感

💰 亲手做的能变成收益

当他发现自己做的东西能变成实实在在的收益,成就感巨大,动力一下被点燃。

于是对应两个主推功能
我的品牌店铺 · 把作品变成收益路演作品集 · 把作品推销出去
路演作品集与品牌店铺
路演作品集 × 品牌店铺
二 · 小结

功能,从这三个真实来源里长出来

来源 ①真实业务场景 · 课堂
来源 ②教育方法论 · 专家 SOP
来源 ③真实用户心理洞察
→
FEATURE SET
一个个真实、
站得住的功能点
所以——探索"该放什么功能"时,别拍脑袋,回到这三个来源去分析。
三 · 如何编排功能 · 三层收敛

拆产品,像用显微镜逐级收敛

功能有了大致概念后,怎么把它结构清晰地编排起来?分三层:范围越来越小,看得越来越细,每一层都钻进上一层最核心的那块。

🌐
第一层 · 宏观
应用架构
拆整个产品——它由哪 6 个维度组成、每一块长什么样
俯瞰全貌
🔎
第二层 · 中观
业务维度
聚焦某个核心板块,按业务需求拆成 N 个功能应用点
聚焦板块
🔬
第三层 · 微观
Pipeline
具体到某一个应用点,内部一次流程/生成怎么一环扣一环跑完
解剖单点
第一层 · 应用架构

整个产品,由这 6 个通用维度组成

01 整体信息02 导航与跳转03 视觉风格04 配色方案05 交互效果06 页面结构 · 骨架
01 整体信息

是什么/给谁/目的

K12 IP 创作教育平台,创作→展示→变现

02 导航与跳转

页面结构的缩略

小课堂·舞台·商业帝国·我的

03 视觉风格

整体调性

糖果游戏 · 贴纸风

04 配色方案

主色/强调/文字

IP 蓝 #078DFD + 黄·紫糖果按钮

05 交互效果

切换/滚动/加载

爆金币 · 成卡飞入灵感册

06 · 页面结构(骨架) —— 这一支是核心,用业务需求来拆
★ M2 创作中心(核心页面)
① 角色概念
世界观维度 · 人设构思
② 角色形象
标签魔法屋 · 涂鸦变角色 · 拍照变伙伴 · 三视图/3D
③ IP 内容
服装/表情包/海报 · 插画 · 绘本 · 视频
④ IP 周边
商品效果图 · 包装/场景/模特 · 宣传视频
M1
账号与用户

SSO · 班级课程码 · 个人主页/IP 小店

M3
作品与社区

作品墙 · 排行榜

M4
激励与商业化

AI 评分 · 金币 · 店铺/商业帝国

M5 · ★
产出核心

路演作品集 · 我的品牌店铺

M6
AI 学情报告

给家长 · 给老师

M7
AI 工具箱

PPT/报告 · 提示词/抠图/改

第二层 · 业务维度

把核心板块「创作工具」,拆成能上手玩的应用

先按业务流程拆成四个节点,再在每个节点里,按"不同的创作方法/内容"拆成 N 个功能点。

节点 01

IP 设定

角色世界观维度
角色人设构思
节点 02

形象创作

标签魔法屋
涂鸦变角色
拍照变伙伴
三视图 · 3D 建模
节点 03 · 举例展开

内容创作

服装设计
表情包
海报
插画
绘本
节点 04

周边商品

商品效果图(多品类)
包装 · 场景 · 模特
贯穿全流程 · 通用工具提示词背景抠除汇报 PPTAI 报告通用修改AI 评分
K12 每个环节要足够具体聚焦,所以我们拆得比较细——大家实操时,功能点要有轻重取舍,不必都做。
第三层 · Pipeline

钻进一个应用,看它内部怎么一环扣一环

Pipeline,就是把一次完整处理,拆成一串有先后、每环只干一件事、上一环产出正好是下一环输入的流程。用「涂鸦画板」举例——孩子只看到头和尾,中间是黑箱,而我们要把黑箱拆清楚。

① 头 · 孩子的输入
创作界面
涂草图 + 写一句话
中间 · 黑箱
BLACK BOX
等待 30–150 秒
孩子不知道、也不需要知道
← 我们要拆的就是这里
② 尾 · 结果 + 决策
生成完成
IP 形象出现 → 决定"提交到作品墙"?
结算
提交后 → 评分与金币蹦出
第三层 · Pipeline · 黑箱拆开

整条流程,被切成了两段

阶段一

图像生成

同步 · 孩子在等
前端→后端收输入→ 后端→SSO验身份→ 后端→DB存 pending→ 后端→n8n图生图工作流→ n8n回传图→ 后端→DB存图→ 后端→前端看到角色卡
✂ 断点 · 用户决策:「提交到作品墙」?——满意了才提交
阶段二

作品结算

用户点提交才触发
前端→后端提交→ 后端→素材中心上报产物→ 平台/评分服务AI 打分·发金币→ 前端轮询查分与币→ 前端叮·爆金币
为什么断、在哪断,是产品决策——让孩子先挑到满意的那张再提交。一生成就给分给币,他就没有"我要做到最好"的空间了。这不是技术能力,是为体验服务的产品决策力。
一个常见问题

为什么很多作品,深化不下去?

✗ 常见状态

😵 想到哪做到哪

丢一个概念给 AI,生成几次就不知道怎么深化了,干脆开个新项目;功能也是想一个加一个。

结果:第一次上手不会用 / 核心功能没体现
→
✓ 应该做的

🧭 回到定位与架构

重新梳理你的产品定位,再用三层收敛把功能结构清晰地编排一遍。

让用户一眼看懂你的核心
四 · 游戏化的教育方式

同样的结果,一个输入框就够了——但对孩子是灾难

我们有个隐性主题:推荐大家做教育类产品,尤其是 K12 喜闻乐见的游戏化产品。

拿"生成 IP 形象"举例,最偷懒的做法就是一个输入框 + 传图入口,背后写段提示词接生图 API——结果是一样的。但让小朋友"写提示词、丢参考图",就是把他当工具人:太抽象,他不知道写什么、目的是啥,逼两下就没兴趣了。

表单反例
✗ 反面例子:一个冷冰冰的表单
四 · 同一件事,三种体验

光是"生成一个 IP 形象",我们做了三种玩法

涂鸦变角色
🖌️ 涂鸦变角色
for 想动手画的孩子
在画板上画草图——鼓励他快速表达脑海里的造型(设计里的"快速表达")。
拍照变伙伴
📷 拍照变伙伴
for 想玩元素融合的孩子
拍玩偶、拍猫做元素融合——潜移默化中观察身边事物造型的独特性。
标签魔法屋
🏷️ 标签魔法屋
for 还没想法的孩子
主体·性格·风格·体型四个维度,像点菜一样组合——建立"好 IP 该有哪些要素"的概念。
三种方式不是换个交互形式,背后植入了不同理念的教育方法论。 🔗 打开产品原型
四 · 教育和游戏化的结合

游戏化,本身就是更符合孩子学习方式的设计

课堂观察:孩子问我"斑马科普"
发现:比起坐着听,他更爱自己看、自己动手戳能玩的
于是:把课程功能换成交互式网页

每个知识点都带着交互操作,小朋友在"玩"的过程里,就把知识看进去了。所以游戏化不只是让产品更好玩——它本身就更贴合孩子的学习方式。

🔗 打开交互式课程演示 first-lesson

体验与反馈 · 回归用户

不炫,但孩子真的很沉浸

回到开头 1 / 10 / 1000 那个观点——我们这个产品其实并没有很多炫酷 UI。但在真实课堂上看到的是:小朋友非常沉浸地玩我们的应用。这个用户反馈,最说明问题。

界面为什么做成这样,是有取舍的:孩子注意力非常有限,功能入口一多,他就懵了、直接没兴趣。所以每个入口放在哪、一屏只让他做一件事——这也是教育产品很重要的一点。

课堂沉浸
真实课堂 · 孩子沉浸在创作里
MODULE 03

真正实用的
工具与方法

最后一小部分,分享一些我用下来真正好用的工具、网站和方法。
方法一 · 前端界面优化

别只会"发个对标网站让 AI 复刻"

最简单的做法是找对标网站直接发给 AI 复刻,但你会发现——复刻得并不像。这几个网站更好用:

1

Open Design

优质设计系统 / 视觉语言参考库。

🔗 opendesign.cc
2

Design Prompts

我最常用来快速试前端效果的。方法:直接复制提示词。

🔗 designprompts.dev
3

Design MD

和上一个类似,但 design system 更完善专业。方法:下载 md 文件或复制提示词。

🔗 designmd.ai
4

UI/UX Pro Max Skill

可下载里面的 skill,比较专业,值得看看它的工作原理。

🔗 ui-ux-pro-max-skill
方法二 · 我做 skill 的方法

把你的品味和标准,固化成一个 skill

第二步的真实迭代 · 一次"标尺转移"

从 客观好不好看,转成 你有没有实现自己的目标

V1.0

客观形象力

4 维 · 第一版,但孩子觉得打分不符合预期
维度权重评的是什么为什么放它
造型识别度30好不好认、有没有记忆点、剪影是否独特IP 的本质就是"被记住",识别度是地基,权重最高
美感与协调25配色、比例、结构是否协调,有无统一调性让人看着舒服,是形象被喜欢的第一道门槛
传播与扩散力25有没有情绪/梗/表情张力,适不适合做表情包、被转发IP 要能自己"长脚"传出去,传播力决定它走多远
商业应用潜力20放到杯子/T恤/玩偶上好不好看、能不能系列化呼应产品终点"把 IP 商业化、开店变现"
第三方视角的客观评估↓ 加入「作者意图达成度」并给最高权重 ↓评价标尺,交还给孩子自己
V2.0

意图感知

5 维 · 公开评价指标 → 孩子不再为迎合 AI,而是为兑现自己的意图
维度权重评的是什么为什么放它
作者意图达成度35孩子的人设/世界观构思 + 创作时输入的需求,最终形象兑现了多少踩坑后加的核心维度:把标尺交还给孩子自己,评"你想做的做到没"
造型识别度20好不好认、有没有记忆点仍是 IP 地基,但让位于意图
美感与协调18配色/结构是否舒适协调基础观感
传播与扩散力15情绪张力、可表情包化、可传播传播潜力
商业应用潜力12可周边化、可系列化商业落地潜力
THE END

以上,就是
我的全部分享

模块一怎么想到的 · 内容与共创
模块二怎么做好的 · 做产品而非玩具
模块三实用的工具与方法
方
分享人 · SPEAKER
方颖
01 / 06