susam-projects/vibe-coding – AI 美学实验 Web 应用集合 Vibe 项目

## 项目简介 susam-projects/vibe-coding 是一个探索 AI 辅助编程美学的实验性 Web

AI编程开发

访问项目 ↗

susam-projects/vibe-coding 是一个探索 AI 辅助编程美学的实验性 Web 应用合集，由开发者 Susam 发起并完全通过 AI 辅助方式构建。该项目致力于在功能实现与情感设计之间寻找交叉点，所有应用不仅追求可用性，更追求审美表达与交互的情感共鸣。

项目采用 Nx monorepo 架构，汇集了多个风格迥异的 Web 实验：毛玻璃风格计算器、Windows 桌面模拟器、金属工业风笔记、冰川笔记等。每个应用都附有独立的在线演示页，用户可以直接在 Netlify 上体验成品。

毛玻璃百分比计算器（Glass Percents）：提供五种计算模式的百分比计算器，采用毛玻璃（Glassmorphism）设计语言，配备霜化玻璃效果、动态渐变动画和流畅的交互反馈，支持复制到剪贴板和响应式网格布局。

Windows 桌面模拟器（Windows Desktop）：基于 Web 的 Windows 操作系统环境模拟，支持可拖拽窗口、任务栏、开始菜单及内置应用程序（文件资源管理器、记事本），采用自定义 Hook 架构设计。

金属工业风笔记（Bare Metal Notes）：笔记应用采用工业金属美学，笔记以拉丝金属板形式渲染，用螺丝固定，配备真实纹理和锈蚀效果。支持两种纹理变体（CSS/SVG），响应式布局适配多端。

冰川笔记（Glacial / Icy Notes）：极简主义笔记应用探索保存美学——新鲜笔记清澈透明，随时间推移逐渐产生霜花纹样，久远的笔记则呈现重度结晶形态。支持悬停融化效果和 localStorage 本地持久化。

现代公寓租赁落地页（LuxeHomes）：响应式公寓租赁公司落地页，具备流畅动画效果和现代设计语言，包含英雄区、功能展示区、用户评价区和联系表单模块。

本项目是完全通过 Vibe Coding（AI 辅助编程）方法构建的实战案例，体现了 AI 在审美导向项目中的协作能力。项目技术栈如下：

前端框架：React 19 + TypeScript 5.9+ + Vite 7，React 最新版本带来了显著的性能提升，TypeScript 提供企业级类型安全保障。

Monorepo 管理：采用 Nx 21 进行多应用管理，实现智能构建缓存、任务分发、依赖图可视化和受影响构建（affected build）等功能，显著提升开发效率。

包管理：使用 pnpm 作为包管理器，相比 npm 具有更快的安装速度和更高效的磁盘空间利用。

测试：使用 Vitest 3 进行单元测试，确保各应用质量稳定。

部署：所有应用均部署在 Netlify 上，提供免费托管和全球 CDN 加速，每个应用都有独立的在线演示地址。

整个项目展示了 AI 辅助编程在美学探索型项目中的独特价值：开发者可以用自然语言描述设计愿景，AI 帮助实现从布局到交互动画的完整代码，而开发者则专注于迭代审美方向和用户体验的微调。

环境准备：确保本地安装 Node.js 18+ 和 pnpm（推荐使用 pnpm）
克隆项目：执行 git clone git@github.com:susam-projects/vibe-coding.git 克隆仓库到本地
安装依赖：进入项目目录后运行 pnpm install 安装所有依赖包
启动开发服务器：使用 pnpm nx serve 启动指定应用，例如：
- pnpm nx serve glass-percents（毛玻璃计算器）
- pnpm nx serve windows-desktop（Windows 模拟器）
- pnpm nx serve icy-notes（冰川笔记）
构建生产版本：运行 pnpm nx build 可构建对应应用的优化生产版本
运行测试：执行 pnpm nx test 对所有应用运行 Vitest 单元测试