Vibe Coding CUC

提示词速查

全部 24 条提示词

按课程分组,点击右上角复制按钮即可使用。配合你正在用的 AI 编程工具(Trae / Cursor / Claude Code 等)。

01 Vibe Coding 概念 + 第一次成功体验

进入课程

生成一个好看的计算器

请帮我用 HTML/CSS/JS 写一个简洁好看的计算器,要求:
1. 单文件,直接用浏览器打开就能跑
2. 支持加减乘除和小数运算
3. 设计风格参考 iOS 原生计算器,圆角按钮,大字体
4. 配色用深色背景 + 橙色运算键
5. 按键有点击的视觉反馈

文本字数统计工具

帮我做一个文本字数统计网页:
1. 一个大文本框,用户可以粘贴任意中英文文本
2. 实时显示:总字数、中文字数、英文单词数、字符数(含/不含空格)、段落数
3. 设计简洁,统计结果以卡片形式展示在文本框下方
4. 单文件 HTML,响应式,手机也能用

让 AI 解释代码

请用初学者也能懂的方式解释下面这段代码做了什么。
逐行解释关键部分,不要省略,但语言要通俗,不要堆术语。

[在这里粘贴你的代码]

02 脚本与工具开发

进入课程

先要伪代码,再要实现

我想做一个 [描述你的工具]。

在写代码之前,请先给我一份"伪代码大纲":
1. 这个工具的输入是什么、输出是什么
2. 大致分成哪几个步骤,每步做什么
3. 可能会遇到哪些边界情况
4. 建议用什么技术栈实现

先不要写真正的代码,我看完大纲再让你实现。

批量重命名文件脚本

帮我写一个 Python 脚本,批量重命名一个文件夹里的所有图片:
- 按修改时间从早到晚排序
- 重命名为 "照片_001.jpg"、"照片_002.jpg" 这样
- 保留原扩展名
- 操作前先打印将要重命名的列表,等我输入 y 确认后再执行
- 不要破坏不是图片的文件

把脚本变成网页工具

上面那个脚本功能,帮我做成一个网页版:
- 用户可以拖拽文件到网页里
- 网页上预览即将重命名的列表
- 点"确认"后自动打包下载重命名后的文件
- 全部在浏览器里跑,不需要后端

03 个人网站搭建

进入课程

帮我挑模板

我想做一个 [大学生 / 设计师 / 学者 / 摄影师] 风格的个人主页,
希望整体感觉是 [简洁 / 极客 / 文艺 / 商务] 的。

请推荐 5 个适合的开源模板(GitHub 上 star 数较多的),
告诉我每个的特点、技术栈、适合谁,以及预览链接。

把模板改成我的

我刚 clone 了这个模板:[模板项目 URL]。
请帮我:
1. 阅读 README,告诉我哪些文件需要改才能换成我的内容
2. 用我下面的信息替换示例内容:
   - 姓名:[你的名字]
   - 简介:[一两句话介绍自己]
   - 作品:[列 2-3 个]
3. 一步步告诉我怎么本地跑起来看效果

部署到 Vercel

帮我把现在这个项目部署到 Vercel:
1. 告诉我需要先做什么准备(GitHub 账号、Vercel 账号等)
2. 一步步指导我怎么操作
3. 部署成功后,我怎么改内容、怎么重新发布
用截图描述而不是命令行术语,我是新手。

04 AI 网站改造

进入课程

看懂别人的项目结构

这是我 clone 的项目:[项目 URL]。
请帮我看一遍这个项目,告诉我:
1. 它的整体架构(用什么框架、文件怎么组织)
2. 哪些文件是配置、哪些是内容、哪些是组件
3. 如果我想 [加一个版块 / 改个颜色 / 换个字体],应该改哪里
用通俗语言,不要太多术语。

在现有页面加一个版块

我想在主页加一个"正在读的书"版块,要求:
- 卡片样式,横向滚动
- 每张卡片显示:书名、作者、封面图、我的简评
- 数据来源用一个 JSON 文件,方便我以后手动维护
- 视觉风格和当前主页保持一致

请告诉我具体改哪些文件、改成什么样。

改主题色

帮我把整个网站的主色从 [当前颜色] 换成 [新颜色]。
要求保持配色和谐,不只是简单替换:
- hover 态、激活态、文字、背景的关系都要协调
- 暗色模式(如果有)也要一起调整
列出所有需要改的文件和具体位置。

05 文生图网站

进入课程

做一个最简文生图网页

帮我做一个文生图网页:
1. 用户输入一段文字描述
2. 点击"生成"按钮,调用 [硅基流动 / Replicate] 的免费文生图模型
3. 在下方展示生成的图片,带下载按钮

技术栈:HTML + JS,单页应用,部署到 Vercel。
告诉我:怎么注册账号、怎么拿 API key、怎么填到代码里。

加风格选择器

在现在的网页上加一个风格选择器(下拉菜单或按钮组),
包含这些预设风格:
- 二次元 / 写实 / 油画 / 像素艺术 / 极简插画

用户选了之后,会自动在他输入的描述前面拼接对应的风格关键词。
比如选"油画"会变成:"oil painting, [用户输入], detailed brushwork"。

做成主题应用

我想把这个工具改造成"AI 头像生成器",专门生成头像。
请帮我:
1. 改首页文案,突出"头像"主题
2. 默认尺寸改成 512x512 正方形
3. 预设风格改成:动漫头像 / 真人写实 / Q 版插画 / 复古肖像
4. 在 prompt 模板里自动加入"portrait, headshot, centered"这类关键词
5. 给应用换个名字和图标

06 一键自动化工具

进入课程

把流程拆成步骤

我每周都要做这件事:[详细描述你的流程]。

请帮我:
1. 把这个流程拆成"原子操作"(每一步只做一件事)
2. 标出哪些步骤可以让 AI / 脚本自动完成,哪些必须人来做
3. 提出一个最小的自动化方案:先自动化哪一两步,效率提升最大

做一个'整理截图'工具

做一个自动整理截图的脚本:
1. 扫描我桌面上所有 .png / .jpg 文件
2. 用 AI 视觉模型给每张图打标签(代码 / 聊天截图 / 风景 / 表格 / 其他)
3. 在桌面建对应的子文件夹,把图分类归档
4. 整理完之后,弹一个对话框告诉我各类各多少张

技术选型:Python + 调用支持视觉的模型 API。

做一个语音指令小助手

做一个网页版的小助手:
1. 用户点麦克风按钮,说一句话
2. 用浏览器自带的语音识别 API 转成文字
3. 把文字发给 AI,AI 根据指令决定做什么(写邮件 / 总结文本 / 翻译 / 编个故事)
4. 把结果展示在界面上,带"再来一次"按钮

单文件 HTML,纯前端,无需后端。

07 进阶挑战项目

进入课程

拆解一个复杂想法

我想做这样一个产品:[详细描述你的想法]。

请帮我做项目拆解:
1. 这个产品由哪几个核心功能模块组成?
2. 每个模块单独看是什么样的小工具?有没有现成的开源参考?
3. 模块之间怎么连接?数据怎么流动?
4. 如果我只有一周时间,先做哪个模块能最快看到效果?
5. 列出技术栈推荐和潜在难点。

MVP 优先级排序

我想做的功能很多:[列举所有想要的功能]。

请帮我做 MVP(最小可用产品)排序:
1. 哪 3 个功能是"没有就不能叫这个产品"的?
2. 哪些功能可以放到 v2 再说?
3. 给我一个 v1 的功能清单,要求 1 周内能做完

项目从 0 到能跑

请用 [Astro / Next.js / 纯 HTML+JS] 帮我搭起项目骨架:
- 路由:[列出页面]
- 数据存储:[localStorage / JSON 文件 / 简单数据库]
- 第一个能跑的功能是 [选一个最简单的]

搭好后告诉我:本地怎么跑、怎么修改内容、下一步该做什么。

08 Demo Day 产品发布会

进入课程

写一段项目介绍

帮我给我的项目写一段对外介绍。我的项目是:[一两句话描述]。

请帮我写三个版本:
1. **一句话 slogan**:朗朗上口、说清价值
2. **三句话简介**:用什么、为谁做、有什么独特之处
3. **小红书风格的发布文案**:200 字左右,有钩子、有 emoji、有 hashtag

做一张产品介绍图

帮我设计一张 1:1 的产品介绍图(用于社交平台发布):
- 顶部是产品名,字体大且突出
- 中间是 1-2 句话 slogan
- 下方是 3 个关键功能点(图标 + 一行字)
- 底部留一个二维码区域(我后面会填)
- 配色用 [你的项目主色]

请输出 HTML+CSS,我可以截图导出成图片。

Demo 演讲脚本

帮我写一份 3 分钟的 Demo 演讲脚本,结构是:
1. (30 秒) 痛点 / 引入:为什么我要做这个
2. (1.5 分钟) 现场演示:打开网址,演示核心功能(具体说每一步)
3. (30 秒) 我用了什么 AI 工具、踩过什么坑、学到什么
4. (30 秒) 下一步计划 / 邀请大家试用

语气要自然,不要像念稿,可以有 1-2 个轻松的玩笑。