先把想法说清楚
认识页面、组件、交互和用户路径，把“我想要一个网站”变成可以执行的说明。
从零开始的精选指南
把脑海里的点子，做成真的。
用大白话认识网页、AI、设计、数据与上线。你不必先背会代码，先学会看懂一件产品是怎样被做出来的。
—个原创词条—个学习主题0基础门槛
三张卡片，先看懂全局。
像翻一本产品杂志：先从感兴趣的主题进入，再顺着词条把知识连起来。
再看懂怎么运转
前端负责呈现，后端处理规则，数据在接口之间流动。
最后发布与迭代
从测试、性能到部署，把第一版真正交到用户手里。
全部词条
从任何一个陌生词开始，都算开始
还没有找到这条黑话换个更短的关键词试试，比如“数据”或“页面”。
我的收藏
留住这次想多看几遍的词。
收藏只在本次打开期间有效；刷新或关闭页面后会清空。
这里还没有收藏回到术语页，点词条卡片右上角的星星，就会收进这里。
练习
看懂了，再试着认出来。
每轮从站内 — 个词条随机抽取 10 题。选答案、看解释，做完就知道自己记住了多少。
第 1 / 10 题答对 0 题
准备题目中…
课程
从会提需求，到能把作品上线。
六条学习路径不按工具品牌划分，而是按“你下一步要完成什么”来组织。每门课都能回到词典补概念。
学习路径
建议从 01 开始；有经验的人也可以直接选一条短板补齐。
先把一个网页说清楚
认识结构、样式与交互，学会把模糊想法拆成页面。
网页HTMLCSS组件用户路径需求
让页面在各种屏幕都好用
从排版、状态到现代前端工具，理解界面如何稳定运行。
响应式FlexboxGrid状态管理TypeScript构建工具
把 AI 当搭档，不当许愿池
给足上下文、写清约束，并用验收标准把结果拉回现实。
PromptContext约束迭代验收标准代码审查
看懂页面背后的来回传递
弄清前后端如何说话，数据怎样存、查、改与保护。
APIJSON数据库CRUDHTTP鉴权
先验证方向，再雕琢细节
用原型与测试发现问题，避免把“做完页面”误当成“解决问题”。
MVP用户故事线框图可用性测试微文案反馈循环
让别人真正打开你的作品
完成测试、部署、性能与安全检查，把本地项目交到用户手里。
Bug回归测试部署DNSHTTPS备份
防止 AI 味儿
删掉套话，留下真正的信息。
AI 味儿通常不是“像机器”，而是内容太平、结论太满、设计太熟。下面这些替换法，能让表达更具体。
常见表达
不是禁词表。关键是：每句话有没有提供读者能使用的新信息。
空泛开场“在当今快速发展的数字时代……”
→声势很大，却没有交代问题发生在哪里。
换成事实“页面内容一多，手机端最先出现的是导航拥挤。”
直接说场景、对象和可观察的问题。
虚弱承诺“旨在为用户提供无缝、高效的体验。”
→“无缝”和“高效”无法被具体检查。
换成动作“输入关键词后，列表会立即缩小，并保留当前分类。”
写清用户做什么、界面怎么回应。
万能总结“综上所述，这将带来前所未有的价值。”
→重复态度，没有补充取舍与边界。
换成判断“这套做法适合内容固定的页面；需要登录和同步时，应换成带后端的方案。”
说明适用范围，也说明什么时候不适用。
整齐过头“首先、其次、最后”每段都一样长
→形式规整，但重点不分轻重。
换成信息层级把最关键的结论放前面，证据紧跟，例外单独说。
让结构服从内容，而不是为了凑三点。
常见设计套路
不是所有渐变和卡片都不能用；问题是它们有没有承担信息任务。
页面会像组件仓库，读者看不出哪一块更重要。
替换：用标题、间距和分隔线先建立层级，只给需要独立操作的内容加容器。“更快、更智能、更强大”没有口径，也无法帮人做决定。
替换：只展示能解释来源、范围和时间的数字；否则用一句具体结论。重复节奏让长页面像同一段内容循环播放。
替换：流程用编号步骤，对比用成组行，叙事用长短交替的版面。入场动画不能替代“按钮已按下”“请求正在处理”。
替换：先给交互状态做即时反馈，再用克制动效解释内容变化。更新
每次变化，都说清楚。
这里记录内容规模、学习方式与界面结构的真实变化。不是提交编号，而是你能直接感受到的更新。
更新日志
当前版本持续围绕“看得懂、找得到、练得会”推进。
官网实战、细场景与分享体验
- 新增官网区块实战，覆盖 Hero、顶部导航、CTA、评价、定价、FAQ、Logo 墙、案例与页脚等高频区块。
- 继续细分表单、提示与内容展示场景，并加入可直接复制给 AI 的完整说法。
- 完善搜索与分享信息，搜索栏滚动后自动收窄；关于页新增 AI 工具交流群二维码。
补齐 AI 协作方法与排错急救
- 新增 16 条 AI 协作方法论：从四段式提示词、任务上限、上下文清单，到纠错闭环与验收清单。
- 新增 16 条排错急救：白屏、样式失效、按钮失灵、手机横向滚动等场景都给出“先查三处”。
- 新词条已加入分类筛选、搜索、随机练习和实时数量统计；本次不加入 7 天新手计划。
每个词条都能直接拿来问 AI
- 逐条改写“跟 AI 说”，概念题直接问概念，实战题直接描述要做的界面。
- 完整保留原有 265 条，再追加 28 条表单、提示、内容、导航、布局、外观和动画实战词条。
- 搜索现在同时匹配术语、场景、解释与可复制说法。
导航成为真正的入口
- 顶部七个入口全部可点击，选中胶囊会跟随当前页面。
- 新增随机练习、学习路径、去 AI 味指南、Skill 清单与关于本站。
- 补齐手机端布局与键盘焦点反馈。
分类筛选与内容继续扩充
- 顶部分类栏改为可点击筛选器，支持再次点击恢复全部。
- 新增 AI 协作、设计、开发工具、部署上线词条，现共 — 条。
- 分类数字直接按词条数据实时统计，不再手动填写。
视觉改为杂志式浏览
- 使用大幅专题区、错落卡片与彩色重点内容。
- 支持浅色与深色模式，手机端自动改为单列。
Skill
会说、会看、会验，才算真的会做。
Vibe Coding 的技能不只是一句提示词。下面六项能力共同决定作品能不能从想法走到可用。
技能清单
每张卡片都给出输入、输出和练习重点，可以直接拿来检查自己的下一步。
把“想要什么”说成可执行说明
写清用户、场景、内容、动作与限制，不把“高级感”当验收标准。
输入一个模糊想法
输出页面清单、核心流程、约束
只给 AI 真正需要的材料
区分长期规则和本次任务，把关键文件、现状与不能改的地方交代清楚。
输入散乱的资料与要求
输出短而完整的任务上下文
从“看起来不错”走向可验证
检查内容是否真实、交互是否有反馈、手机是否能用、边界情况是否处理。
输入AI 生成的第一版
输出可复现的问题与验收结论
用证据描述问题，而不是只说“坏了”
保留报错原文、操作步骤、设备环境与期望结果，让定位从猜测变成排查。
输入异常现象
输出最小复现与修复验证
让视觉服务于内容
用层级、间距和对比组织信息，避免为了“有设计感”堆叠装饰套路。
输入内容与使用场景
输出清楚、可读、可操作的界面
把本地能跑，变成别人能用
理解部署、权限、性能、安全与备份，并在上线后继续收集真实反馈。
输入完成的本地作品
输出可访问、可维护的版本
关于本站
给第一次做产品的人，一本不吓人的词典。
vibe coding启蒙从真实开发场景里挑词，用问题开头，用普通话解释，再把相关能力串成练习与课程。
先理解，再动手；先验证，再相信。
这里不要求你先成为程序员，也不会把 AI 描述成万能按钮。你可以从一个陌生词开始，顺着课程补齐知识，再用练习确认自己是否真的理解。所有解释与学习内容均为本站原创编写。
加入交流群
AI 工具交流群
用微信扫描右侧二维码加入，一起交流 AI 工具、Vibe Coding 实战和作品迭代。
二维码有效期至10月2日，过期后会更新
本站原则
词要解释用途，设计要帮助阅读，功能要有真实反馈。
先说你会在什么情境遇到它，再解释这个词负责什么。
入门词帮你建立地图，进阶词提醒你哪里还需要实践和验证。