Vibe GuideBETA

这里帮助理解这类项目需要哪些能力,把符合自身目标的功能带回项目描述,不必照搬所有功能。

WEB DEVELOPMENT

把想法变成一个网址。

不需要安装。别人用手机或电脑打开网址,就能看到和使用作品。第一次尝试 Vibe Coding,可以从这里开始。

通过网址使用
the-idea.site
个人作品展示站
从这里开始 →
界面示意

先判断是否适合,再开始制作

01哪些项目适合做成这种形式?

作品展示、内容资料站、报名表、计算器、预约和团队管理工具;主要操作能在浏览器中完成,重视链接分享与跨设备访问。

02什么条件下,你适合开始制作?

想先验证需求、用户同时使用手机和电脑、希望降低安装门槛的人;愿意测试不同屏幕,并维护实际需要的托管和数据服务。零基础可从一条小流程开始。

03哪些项目不适合直接选这种形式?

核心功能必须深度控制系统、长期后台运行或直接批量操作本机文件,且浏览器能力无法满足的项目。离线、相机或桌面图标本身不代表必须做 App,先测试 PWA 和目标浏览器的实际支持。

04哪些条件没准备好时,应该先停下来?

核心诉求是操作系统能力,却不愿先验证浏览器限制的人;希望多人共享资料,但完全不准备数据服务、访问规则和后续维护的人。

还拿不准:先做一个最小验证

先用目标手机和电脑打开同一预览,完成最重要的一次操作;若关键能力失败,先验证替代方案再决定是否换类别。

如果核心工作是电脑上的文件批处理,优先比较桌面 App。

比较另一种形式 →

MDN · Web / PWA 能力 ↗

这里帮助选择项目形式,下面的分类说明不是另一条必走路线。确定后回主线“整理项目描述”更新项目描述;技术选择仍在“确认界面与技术方案”。

从一个足够小的版本开始

01 / START
比如 · 帮助理解的项目示例

个人作品展示站

介绍自己,展示三件作品,留下一个联系入口。先把这一件事做好。

准备这三件事

  • 一个想解决的问题
  • 一台能使用 AI 工具的电脑
  • 第一版要展示的文字和图片

一步一步,把它做出来

02 / BUILD

每次完成一小步,亲手检查后再继续。点击步骤查看完成标准。

01讲清用途

告诉 AI:给谁用,帮助对方完成什么。

完成后应该看到:一句清楚的项目目标。
02缩小第一版

分清现在必须做的事,以及以后再做的事。

完成后应该看到:一份足够小的功能清单。
03选择制作方式

说明预算、设备和保存需求,让 AI 解释方案。

完成后应该看到:知道要用什么,以及有哪些限制。
04安排页面

确定标题、内容和主要按钮放在哪里。

完成后应该看到:可以看懂的页面草图。
05先走通一个操作

先完成“打开主页 → 查看作品 → 联系作者”。

完成后应该看到:一个能打开、能操作的小版本。
06补内容,请人试

放入真实内容,在手机和电脑上分别试用。

完成后应该看到:具体的问题和修改记录。
07分享网址,持续照看

从正式网址再试一次,记下费用和更新办法。

完成后应该看到:别人能使用,也知道如何维护。

让 AI 核对这类项目是否适合

03 / PROMPT

只判断形式,不开始开发

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

选好形式后:更新项目描述,再按主线制作 →

卡住时先检查什么

按钮看起来能点,却没结果

点击后是否出现加载、成功或失败信息?记录实际页面和点击步骤。

  • 有失败信息 → 把原文和发生时间交给 AI,要求先复现再修复。
  • 完全无反馈 → 要求 AI 检查按钮是否接上真实操作;不要用成功提示替代真实保存。
手机上内容挤在一起

缩窄页面后是否有横向滚动或按钮被遮挡?

  • 提供设备宽度和截图,让 AI 只修正排列;复查长标题和输入框。
  • 没有溢出但难操作 → 实际用手指点击,记录间距或字重问题再调整。

验收记录至少包含:版本、设备、测试材料、操作步骤、预期、实际结果和未通过项。AI 执行记录与本人实际试用分开填写。

打开实际试用与发布确认模板 →

顺便认识这几个词

04 / UNDERSTAND
域名 · Domain
网址里方便别人记住的名字。
响应式 · Responsive
让同一个页面在手机和电脑上调整排列。
最小可用产品 · MVP
先能完成最重要一件事的第一版。

寻找起点

板块快捷入口

大家在做什么 · AI收益调研 · 50个方向 · GitHub项目完整路线图 · 从想法到上线先记下自己的想法只有“想做一个网站”,不知道写什么整理成可以交给 AI 的项目描述不知道第一版的流程怎么写打开一个能制作文件的 AI 工具无法安装、登录,或界面不一样给项目建一个自己的文件夹侧栏没有“文稿”或找不到文件夹让 AI 打开刚才的文件夹AI 说的是另一个项目建立 Git 仓库,写好项目说明和规则提交失败或要求填写姓名邮箱亲手核对 AI 创建的文件找不到上一步的文件一次回答一个问题AI 问的技术词看不懂确认这版只做哪几件事删减以后只剩外观把约定留成看得懂的说明说明太长,不知道该确认哪句把用户怎样使用写清楚AI 只列功能名,没有使用过程先看关键页面,再决定怎么开发原型看起来能用,但不清楚哪些是假数据把实际条件交给 AI 选做法我不知道“本机”和“共享”怎么选让 AI 列出下一小步第一项只有“完成前端”检查运行环境,启动最小项目安装或启动失败,不知道停在哪里打开第一张属于自己的页面地址打不开或一直加载只调整眼前这一页改外观后其他功能也变了让“保存”真正留下内容保存不了,或刷新后记录不见了从开始到结束走通一次按钮能点,但没有结果试试空白和连续点击出现空记录或重复记录关掉以后,还能重新打开第二天地址打不开对照最初想法,确认真的能用AI 说全部完成,但我仍不会用把试用结果记录成反馈问题偶尔出现,不能稳定重现先确定怎么修、怎样算修好AI 没给计划就开始修改按计划修复,再交给本人复测AI 说修好了,同样的操作仍失败先决定:自己用,还是分享发给别人后打不开检查是否具备交付条件评估说可上线,却没有证据准备交付物,并实际试运行安装包打不开或部署后启动失败确认交付,再检查实际入口自己的电脑能开,其他人打不开可选:把简单网页放到 GitHub Pages正式网址显示 404下次继续时,不用从头讲换对话后 AI 要重新做选择工具 · Codex Claude Cursor Qoder TRAE Kimi 价格首页项目分类和 Agent 沟通 · 提示词与排查技术栈选择前端与 UI · 组件词典术语库 · AI与项目开发 · 生活例子与图解打开工具,确认能操作项目把项目、版本记录和 AI 规则准备好把想要的界面风格说清楚只修改一个地方,让 AI 找准目标后端:保存资料与访问规则测试:亲手检查是否能用部署上线:交付一个真实入口运维:让产品继续可用Web 网站与应用 · 把想法变成一个网址。小程序 · 在用户熟悉的地方,做一个小工具。手机 App · 让一个好想法,成为日常习惯。桌面 App · 把重复的电脑工作,交给自己的工具。

一个面向零基础的实践指南

这是面向零基础的双语实践指南,按 6 个阶段、18 个节点、31 个动作组织。页面中的应用画面是示意图;项目完成情况由使用者核对。