总结之Vibe Coding前端骨架

Vibe Coding立项：前端骨架在开始让AI写前端之前，记得先做这些哦

概览部分

内容摘要

本文详细讲解了在使用AI进行前端开发前，如何建立统一的前端骨架（Frontend Skeleton）来确保项目的可维护性和一致性。文章从确定整体设计风格、技术方案和UI组件库，到目录结构、模块边界、组件复用规则、样式系统准备等关键步骤进行了全面解析，并强调了将这些内容写入实施计划的重要性。

核心观点

前端骨架是AI编写前端代码的前提条件
项目越大越需要统一的规范和标准
组件复用和样式系统是提升效率的关键
实施计划必须具体明确，才能指导AI有效工作
项目初期不建好骨架，后期容易出现混乱

1. 确定整体设计风格

1.1 设计风格的意义

设计风格不是某一个页面好不好看，而是整个UI呈现出来的统一视觉语言。比如产品是偏简洁、偏商务、偏科技、偏年轻、偏工具化，还是偏内容型。这种风格最终会体现在颜色、字体、字号层级、行高间距、圆角、卡片样式、按钮形态、页面布局和信息密度等细节上。

如果你不知道自己想要什么风格，可以找几个喜欢的网站，把链接发给AI。如果是App，就找几张参考截图发给AI，让AI分析这些界面的视觉风格、布局方式、组件特点，以及这种风格是否适合你的项目。

关键观点: 不要直接复制成熟产品的视觉节奏、留白方式、组件组织方式，而是为了确定方向，不是直接复制风格。

1.2 风格类型示例

常见风格包括：

风格类型	特点
苹果系统玻璃拟态	半透明、模糊背景
Google Material Design	层积清楚、组件规范完整
企业级管理台风格	信息密度高、表格多、操作效率优先
SaaS现代极简风格	卡片清晰、按钮克制、留白适中
AI科技感风格	深色背景、渐变发光元素、动效更多
内容社区信息流风格	重点是阅读舒服、内容层级清晰

关键观点: 所有风格最终都会落到具体细节上，因此在前期就要定义清楚。

2. 前端技术方案与UI组件库的选择

2.1 技术方案与组件库的区别

前端技术方案解决的是项目怎么组织、怎么运行的问题，例如页面怎么放、路由怎么写、目录怎么分、项目怎么启动、构建和部署怎么处理。常见的方案有React、Vue、Angular、Next.js、Taro、Uni-app等。

UI组件库则是解决界面元素怎么统一的问题，例如按钮、输入框、弹窗、表格、菜单、卡片、提示信息等怎么写。常见的组件库有Ant Design、Element Plus、Naive UI、MUI、Vant、ShadCN UI等。

关键观点: 前端框架管项目结构，UI组件库管界面统一。

2.2 如何选择

你可以直接告诉AI，这个项目必须遵守当前前端框架的官方规范，优先复用选定的UI组件库，不允许到处手写重复组件，也不允许绕开框架。

关键观点: 成熟框架通常有目录规范、开发规范和最佳实践；成熟组件库也已经把常用组件统一好了。

2.3 对比表格：常见组件库对比

组件库	特点
Ant Design	企业级组件库，功能强大
Element Plus	Vue生态中的组件库，适合后台系统
Naive UI	轻量且现代化，适合快速开发
MUI	Material Design风格，适合SaaS产品
ShadCN UI	基于Tailwind CSS的组件库，灵活度高
Tailwind UI	模板型组件库，适合快速搭建界面

关键观点: 不需要记住所有名字，关键是理解"前端框架管结构，组件库管界面"。

3. 目录与模块边界规划

3.1 目录结构规划

目录边界要清晰，页面放哪里、组件放哪里、请求接口放哪里、工具函数放哪里、样式文件放哪里，都要有规则。

关键观点: 目录结构是AI写代码的基础，没有清晰的目录结构，AI就会乱建文件夹。

3.2 模块边界划分

关键观点: 模块边界清晰，有助于后续维护和扩展。

3.3 流程图：目录与模块规划流程

#mermaid-svg-42C37oAuDe1Ln63w{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-42C37oAuDe1Ln63w .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-42C37oAuDe1Ln63w .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-42C37oAuDe1Ln63w .error-icon{fill:#552222;}#mermaid-svg-42C37oAuDe1Ln63w .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-42C37oAuDe1Ln63w .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-42C37oAuDe1Ln63w .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-42C37oAuDe1Ln63w .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-42C37oAuDe1Ln63w .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-42C37oAuDe1Ln63w .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-42C37oAuDe1Ln63w .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-42C37oAuDe1Ln63w .marker{fill:#333333;stroke:#333333;}#mermaid-svg-42C37oAuDe1Ln63w .marker.cross{stroke:#333333;}#mermaid-svg-42C37oAuDe1Ln63w svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-42C37oAuDe1Ln63w p{margin:0;}#mermaid-svg-42C37oAuDe1Ln63w .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-42C37oAuDe1Ln63w .cluster-label text{fill:#333;}#mermaid-svg-42C37oAuDe1Ln63w .cluster-label span{color:#333;}#mermaid-svg-42C37oAuDe1Ln63w .cluster-label span p{background-color:transparent;}#mermaid-svg-42C37oAuDe1Ln63w .label text,#mermaid-svg-42C37oAuDe1Ln63w span{fill:#333;color:#333;}#mermaid-svg-42C37oAuDe1Ln63w .node rect,#mermaid-svg-42C37oAuDe1Ln63w .node circle,#mermaid-svg-42C37oAuDe1Ln63w .node ellipse,#mermaid-svg-42C37oAuDe1Ln63w .node polygon,#mermaid-svg-42C37oAuDe1Ln63w .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-42C37oAuDe1Ln63w .rough-node .label text,#mermaid-svg-42C37oAuDe1Ln63w .node .label text,#mermaid-svg-42C37oAuDe1Ln63w .image-shape .label,#mermaid-svg-42C37oAuDe1Ln63w .icon-shape .label{text-anchor:middle;}#mermaid-svg-42C37oAuDe1Ln63w .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-42C37oAuDe1Ln63w .rough-node .label,#mermaid-svg-42C37oAuDe1Ln63w .node .label,#mermaid-svg-42C37oAuDe1Ln63w .image-shape .label,#mermaid-svg-42C37oAuDe1Ln63w .icon-shape .label{text-align:center;}#mermaid-svg-42C37oAuDe1Ln63w .node.clickable{cursor:pointer;}#mermaid-svg-42C37oAuDe1Ln63w .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-42C37oAuDe1Ln63w .arrowheadPath{fill:#333333;}#mermaid-svg-42C37oAuDe1Ln63w .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-42C37oAuDe1Ln63w .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-42C37oAuDe1Ln63w .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-42C37oAuDe1Ln63w .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-42C37oAuDe1Ln63w .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-42C37oAuDe1Ln63w .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-42C37oAuDe1Ln63w .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-42C37oAuDe1Ln63w .cluster text{fill:#333;}#mermaid-svg-42C37oAuDe1Ln63w .cluster span{color:#333;}#mermaid-svg-42C37oAuDe1Ln63w div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-42C37oAuDe1Ln63w .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-42C37oAuDe1Ln63w rect.text{fill:none;stroke-width:0;}#mermaid-svg-42C37oAuDe1Ln63w .icon-shape,#mermaid-svg-42C37oAuDe1Ln63w .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-42C37oAuDe1Ln63w .icon-shape p,#mermaid-svg-42C37oAuDe1Ln63w .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-42C37oAuDe1Ln63w .icon-shape .label rect,#mermaid-svg-42C37oAuDe1Ln63w .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-42C37oAuDe1Ln63w .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-42C37oAuDe1Ln63w .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-42C37oAuDe1Ln63w :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
确定功能模块
模块划分
按功能分类
重新划分
创建目录结构
配置路由
接入组件库

关键观点: 这一步是前端骨架的核心，决定了AI写代码的方向。

4. 组件复用规则制定

4.1 组件复用的重要性

按钮、输入框、卡片、表格、弹窗、提示框、导航栏等这些元素会反复出现，能用UI组件库就优先用组件库，组件库不够用的话再基于组件库封装项目自己的业务组件。

关键观点: 如果没有复用规则，AI就会到处重复写按钮、弹窗、表格。

4.2 复用标准

有一个简单判断标准：只要UI相似度比较高，并且在项目里出现超过两次，就应该考虑封装成组件，不要每个页面重新写一遍按钮、弹窗、表格。

关键观点: 同类UI结构出现超过两次时，必须优先抽象为可复用组件，不允许复制、粘贴、重复实现。

4.3 引用块：组件复用原则

关键观点: 通过制定组件复用规则，可以避免大量重复代码，提高开发效率。

5. 样式系统准备

5.1 设计Token

设计Token不是AI的Token，而是设计变量，比如颜色、字号、行高、间距、圆角、阴影、边框等。这些必须在写页面前定好，否则AI今天写16px，明天写18px，后天又写15px，最后项目里到处都是重复，CSS代码不干净，设计也不统一。

关键观点: 所有颜色、字号、间距、圆角、阴影都必须从统一设计Token里取，不允许硬编码样式。

5.2 多语言规范

如果项目未来可能支持中文、英文等多语言，就不要到处硬编码按钮、文字、页面标题、提示信息、错误信息。因为中文两个字能放下，英文可能变成一整句。如果不提前考虑，后面切语言时很容易出现按钮错位、标题换行、布局错位。

关键观点: 多语言规范是国际化项目的基础。

5.3 主题规则

主题不是为了炫技，而是为了让颜色体系可控。比如先确定一个默认主色调，再预留主题扩展方式。主题色不能散落在每个页面里手写，否则后面想换主色调就要全项目到处改。

关键观点: 主题规则是为了控制颜色体系，避免后期频繁修改。

6. 实施计划制定

6.1 实施计划的重要性

前面这些确定之后，一定要落实到详细的实施计划里，不要只是口头聊完，就直接让AI开始写代码。实施计划至少要写清楚以下内容：

整体设计风格是什么？
前端技术方案是什么？
UI组件库用什么？
目录结构怎么组织？
模块边界怎么划分？
哪些组件先封装？
设计Token怎么定义？
多语言和主题规则怎么预留？
第一阶段只做哪些内容？
验收标准是什么？

关键观点: 实施计划是AI工作的指南针，没有它，AI就无法高效工作。

6.2 示例实施计划

任务	说明
设计风格	确定统一视觉语言
技术方案	选择React + Next.js
组件库	使用Ant Design
目录结构	按功能模块划分
模块边界	登录、用户、订单等独立模块
组件封装	按照复用规则封装组件
样式系统	定义设计Token和主题规则
验收标准	项目能启动、首页能打开、目录规范正确

关键观点: 实施计划必须具体明确，才能指导AI有效工作。

7. 总结与行动建议

7.1 全文总结

本文详细讲解了在使用AI进行前端开发前，如何建立统一的前端骨架来确保项目的可维护性和一致性。从确定整体设计风格、技术方案和UI组件库，到目录结构、模块边界、组件复用规则、样式系统准备等关键步骤，每一步都需要提前规划并写入实施计划。

关键观点: 前端骨架是AI编写前端代码的前提条件，项目越大越需要统一的规范和标准。

7.2 核心收获

前端骨架是AI编写前端代码的前提条件
项目越大越需要统一的规范和标准
组件复用和样式系统是提升效率的关键
实施计划必须具体明确，才能指导AI有效工作
项目初期不建好骨架，后期容易出现混乱

7.3 行动建议

在使用AI写前端前，务必先做好前端骨架
明确整体设计风格、技术方案和组件库
规划目录结构和模块边界
制定组件复用规则
准备样式系统（设计Token、多语言、主题）
将所有内容写入实施计划

7.4 延伸思考

如何根据项目类型（官网、后台系统、SaaS工具、App页面或小程序）调整前端骨架？
如何评估不同组件库的适用性？
如何持续优化前端骨架以适应项目发展？

附录

术语表

前端骨架：指前端项目的基础结构和规范，包括目录、模块、组件、样式等。
设计Token：用于定义颜色、字体、间距等样式的变量集合。
组件复用：将常用界面元素（如按钮、弹窗）封装成可重复使用的组件。
实施计划：详细列出项目目标、技术方案、时间安排等内容的文档。