审美之神(centerfront.myzhai.cn)产品系统Vibe Coding

立项原因
市面上成熟 UI 库偏向标准化业务组件，封装度高、底层实现黑盒化，很难用来做交互细节、视觉风格、CSS 方案的试错实验。同时个人零散的前端学习笔记、组件 Demo 分散在文档、代码片段中，缺少统一载体，复盘和复用成本高。
我希望搭建一个兼顾知识沉淀 + UI 实验的自有前端库：一边记录前端原理、踩坑心得、最佳实践，形成可查阅的技术知识库；一边作为自由试验田，落地自己偏好的 UI 风格、动效、布局方案，在不受业务组件约束的前提下，自主打磨样式架构、响应式策略、交互细节，把设计想法直接转为可运行、可预览的线上 Demo，持续锻炼 CSS 工程化、组件抽象、视觉落地能力。
行业场景：对应企业定制 UI、设计系统前期探索场景。业务需要差异化品牌界面时，前端需要独立验证视觉方案、沉淀基础组件规范。本项目模拟设计探索、Demo 试错、技术资产沉淀的研发流程，锻炼从 UI 创意到可运行页面的完整落地能力。

功能介绍 站点分为两大核心模块：前端学习知识库、UI 试验平台。
1. 学习笔记模块：结构化整理前端学习心得、原理理解、踩坑复盘、代码片段与最佳实践，支持在线查阅、分类检索，把碎片化的学习内容沉淀为可长期复用的技术文档，方便自我复盘与快速查阅。
2. UI 试验模块：作为独立的组件试验田，提供可视化预览能力。支持快速搭建、调试原创 UI 组件、版式布局、色彩体系、交互动效与主题方案；不受第三方组件库约束，自由验证设计想法，实时预览效果，迭代打磨视觉细节。
3. 组件资产管理：将验证通过的 UI 方案封装为可复用组件，统一维护样式规范、响应式适配逻辑，形成个人组件资产库。
4. Demo 演示能力：每个试验案例独立展示，附带源码查看入口，直观呈现从设计构思到代码实现的完整结果。 核心特色：区别于单纯的文档站或组件库，文档与 Demo 联动，学习输入和 UI 实践输出在同一个平台闭环

项目实现（
一、技术栈
核心框架：VitePress（静态站点生成器）+ Vibecoding（AI 辅助编程）
开发语言：HTML5、CSS3、JavaScript / ES6+
样式方案：自定义 CSS 变量、主题定制、响应式布局、CSS 动画
工程化与协作：Markdown 扩展、Vue 组件化封装、AI 代码生成与迭代、Git 版本控制
构建与部署：Vite 构建、静态站点自动化部署
二、个人负责 / 具体任务
项目架构与 Vibecoding 工作流设计
独立规划 VitePress 项目目录结构，划分「学习笔记模块」与「UI 试验模块」，搭建清晰的导航与路由体系；
采用 Vibecoding 开发模式，以「自然语言定义需求 + AI 生成基础代码 + 人工审核优化」的闭环，高效推进项目落地 —— 通过精准描述 UI 风格、组件功能、交互逻辑，让 AI 快速生成初始代码草案，再聚焦架构合理性、视觉细节、性能优化进行人工打磨，平衡开发效率与代码质量。
基于 Vibecoding 的主题定制与 UI 实现
借助 Vibecoding 快速验证视觉方案：通过自然语言描述色彩体系、排版规则、动效逻辑（如「设计一套低饱和度莫兰迪配色的响应式导航栏，hover 时有 0.3s 渐变过渡」），让 AI 生成基础样式代码，再自主调整细节参数、优化兼容性，实现完全自定义的站点主题，脱离 VitePress 默认样式约束；
利用 Vibecoding 加速 UI 组件试验：针对按钮、卡片、表单等组件，先通过 AI 生成多版。