前面我们聊了 AI IDE、agent 宪法和 skill。从这一小节开始，我们进入开发认知技术篇。
这里不是要教你马上从零手写代码，而是先帮你建立一些基本技术认知。因为 Vibe Coding 的核心不是你亲自写每一行代码，而是你要知道自己在让 AI 写什么、改什么、验收什么。这一小节，我们先聊前端。
一、什么是前端？
很多人一听到前端，第一反应就是网页。这不算错，但不完整。
更准确地说，所有用户能看到、能点击、能操作的部分，都可以理解成前端。网站里的页面、按钮、表单、弹窗是前端；App 里的首页、列表、个人中心、支付页面也是前端；小程序里的页面、组件和交互，同样属于前端。
甚至一些硬件设备上的屏幕界面，比如智能手表、车机屏幕、收银机界面、工业设备触控屏，只要它是给用户看的图形界面，也可以理解成前端。
所以，前端不是网页的代名词。前端本质上是用户和系统之间的交互层：它负责把系统能力展示给用户，也负责把用户的操作传递给系统。
二、为什么 Vibe Coding 要先理解前端？
对大多数普通项目来说，前端是你最容易感知到的部分。页面好不好看，按钮能不能点，流程顺不顺，信息清不清楚，用户第一眼就能看出来。
这也是很多小白用 AI 做项目时，最容易先下手的地方：让 AI 做个页面，优化一下 UI，改一下布局，或者做个后台管理界面。这些都属于前端相关任务。
但在我看来，如果你要完全靠 Vibe Coding 做一个项目，前期最应该先做的，也恰恰是前端。原因很简单：前端会决定这个项目长什么样，也会倒逼你想清楚这个项目到底有什么数据、有哪些页面、有哪些操作流程。
一个后台系统，你先把页面做出来，就会马上看到需要哪些列表、表单、详情页、按钮、筛选条件和状态字段。这些东西一旦画出来，项目的数据形式其实就慢慢清楚了。用户是什么结构，订单是什么结构，任务是什么结构，内容是什么结构，权限是什么结构，很多时候不是你空想出来的，而是在做页面和流程的时候被逼出来的。
这对 AI 也非常重要，因为 AI 很怕需求模糊。你只说“我要做一个管理系统”，AI 其实很难真正理解你要什么。但你先让它做出页面、流程和交互，它就能更直观地理解这个项目：有哪些角色，用户会怎么操作，数据会怎么流动，哪些功能是核心，哪些只是辅助。
换句话说，前端不仅是展示层。在 Vibe Coding 里，前端还经常是项目理解层。它能帮助你和 AI 一起把一个模糊想法，变成看得见、能讨论、能修改的东西。
所以，前端不是后面随便美化一下的东西。它往往是 Vibe Coding 里最适合先落地的部分。
但问题是，如果你只会说“帮我做得好看一点”“帮我优化一下页面”“帮我做得高级一点”，AI 就只能自由发挥。有时候它确实能做得不错，但更多时候，它会堆一堆渐变、卡片、阴影和动画，看起来热闹，却不一定真的好用。
所以，对 Vibe Coding 来说，理解前端最重要的不是马上学会写 HTML、CSS、JavaScript，而是学会怎么描述前端，也就是学会前端里的常用术语。
三、前端最重要的是表达清楚
在 Vibe Coding 里，你不一定要会写前端代码，但你最好知道一些基本词汇。
UI 是用户界面，指的是用户能看到的按钮、表单、列表、弹窗、导航和页面结构。UX 是用户体验，关注的是用户用起来顺不顺，流程清不清楚，操作会不会迷路，反馈是不是及时。
风格是整个界面给人的视觉感受。它可以偏简洁、商务、科技感、可爱、工具型、内容型，也可以偏后台系统、消费 App 或官网展示。布局是页面内容的组织方式，包括内容放在哪里，主次怎么安排，左侧要不要菜单，右侧要不要详情，列表和表单怎么组合。
组件是页面里可以复用的小模块，比如按钮、输入框、卡片、表格、弹窗、导航栏和标签页。交互是用户操作之后发生什么，比如按钮点击后的反馈、提交失败后的提示、加载中的状态、删除之前的确认。响应式则是页面在不同屏幕尺寸下都能正常显示，电脑上好看，手机上不能乱，平板上也不能挤成一团。
这些词后面我们会专门开一篇来讲。这里你先知道一点就够了：在 Vibe Coding 里，前端术语就是你和 AI 沟通页面效果的语言。你越能说清楚，AI 越不容易瞎猜。
四、常见的前端场景
前端按照运行场景，大概可以分成几类：网页前端、App 前端、小程序前端，以及硬件 GUI。
网页前端，就是我们平时用浏览器打开的网站、后台系统、官网和 Web App。管理后台、SaaS 平台、数据看板、个人博客、工具网站，都属于网页前端。
App 前端，就是手机 App 里的界面。它可以是原生 App，也可以是跨平台 App。用户在 iOS、Android 上看到和操作的界面，就是 App 前端。
小程序前端，则运行在平台提供的小程序环境里，比如微信小程序、支付宝小程序、抖音小程序。它不完全等同于网页，也不完全等同于 App。
硬件 GUI 指的是图形用户界面，比如设备屏幕上的按钮、菜单、状态显示、设置页面。它常见于智能硬件、工业设备、车机、仪器仪表等场景。
所以，你以后跟 AI 说“做一个前端”时，最好不要只说前端，而是要告诉它：这是网页前端、App 前端、小程序前端，还是硬件 GUI。不同场景，对应的技术栈、设计规范和交互规范都不一样。
网页后台有网页后台的布局习惯，移动 App 有移动 App 的操作习惯，小程序有小程序的平台限制，硬件 GUI 也有硬件 GUI 的屏幕尺寸和操作限制。如果你不清楚当前场景应该遵守什么规范，可以直接问 AI：这个前端场景常见的设计规范是什么？这个平台有哪些交互习惯？这个页面应该按网页、App、小程序，还是硬件 GUI 的方式设计？
让 AI 先帮你把场景规范讲清楚，再开始写页面，会比直接让它自由发挥靠谱得多。
五、不同前端对应不同技术栈
前端不是一种技术，而是一类开发场景。如果按技术栈来看，可以粗略分成两层：早期或者底层技术栈，以及现代前端工程化技术栈。
先说网页前端。网页前端最底层的技术，一直是 HTML、CSS 和 JavaScript。HTML 负责页面结构，CSS 负责样式和布局，JavaScript 负责交互和逻辑。早期做网页，很多时候就是直接写这三样。
但现代前端项目通常不会只靠手写这三件套。现在更常见的是用 React、Vue、Svelte 这类前端框架，用 TypeScript 提升代码可靠性，用 Vite、Next.js、Nuxt 这类工具和框架管理项目结构、构建、路由、渲染和工程化。
不过你要理解一点：现代网页前端不是脱离了 HTML、CSS、JavaScript。恰恰相反，大多数现代 Web 技术栈，最终还是会编译、打包成浏览器能运行的 HTML、CSS 和 JavaScript。
所以，HTML、CSS、JavaScript 是底层能力；React、Vue、TypeScript、Next.js 这些，是现代工程化能力。前者决定浏览器最终能看懂什么，后者决定大型项目怎么更好开发、更好维护、更好协作。
App 前端就不完全一样。原生 iOS 常见语言是 Swift，原生 Android 常见语言是 Kotlin 或 Java。如果想一套代码同时做 iOS 和 Android，常见方案有 Flutter、React Native 这类跨平台框架。其中有些跨平台方案会借鉴网页前端的开发思路，比如组件化、状态管理、热更新、声明式 UI，但它们不一定最终编译成 HTML、CSS、JavaScript。
小程序前端也有自己的体系。微信小程序常见的是 WXML、WXSS 和 JavaScript，也有人使用 Taro、uni-app 这类框架做跨端开发。你可以把它理解成：小程序也有自己的“结构、样式、逻辑”三件套，只是名字和运行环境不完全等同于网页。
硬件 GUI 则是另一套东西。有些设备会用 C、C++ 做界面，有些会用 Qt，有些嵌入式设备会用 LVGL 这类轻量级 GUI 框架。它和网页前端不是一个世界，也不能简单套用“最终编译成 HTML、CSS、JavaScript”这套理解。
你不需要一开始全学会，但你必须知道：现代前端框架不是魔法；网页前端再现代，底层也离不开 HTML、CSS、JavaScript；不同前端场景，对应不同运行环境和技术栈。
否则你让 AI 做 App，它可能给你写网页；你让 AI 做小程序，它可能按普通 Web 项目设计；你让 AI 做硬件界面，它可能还在给你写 React 页面。方向错了，后面越写越麻烦。
六、前端在项目里负责什么？
简单来说，前端负责用户看得见、摸得着的部分。它通常不负责真正的数据存储，也不负责核心业务规则。
一个登录功能，前端负责展示登录页面、收集账号密码、调用接口、显示登录结果。但账号密码是否正确、用户权限是什么、登录状态怎么保存，这些通常属于后端。
一个订单系统，前端负责展示订单列表、筛选条件、详情页面和操作按钮。但订单数据从哪里来，订单状态怎么计算，支付结果怎么处理，这些通常属于后端。
所以，前端和后端不是谁更重要的问题，而是分工不同。前端更靠近用户，后端更靠近数据和业务规则。
你用 AI 做项目时，如果能分清楚这一点，就不会把所有问题都丢给“页面优化”。有些问题是前端问题，有些问题其实是后端接口问题，还有些问题是产品设计问题。分清楚层级，项目才不会越修越乱。
七、最后
这一小节，你先记住一句话：所有用户能看到、能操作的界面，都可以理解成前端。但前端不等于网页，它可以是网页前端、App 前端、小程序前端，也可以是硬件 GUI。
对 Vibe Coding 来说，前端最重要的不是你马上会写代码，而是你要知道自己在做哪一种前端，以及怎么用正确的术语和 AI 沟通。
更重要的是，如果你完全靠 Vibe Coding 做项目，前端往往应该优先落地。因为前端能帮你确认页面、流程、交互和数据形式，也能帮助 AI 更快理解项目到底是什么。
不要只会说“做得好看一点”。你要慢慢学会说 UI、UX、风格、布局、组件、交互、响应式、视觉层级、设计系统这些词。这些词不需要一下子全懂，但你要先知道它们存在，因为它们会决定 AI 到底是在认真帮你做前端，还是在凭感觉瞎美化。
