前端风格收集
平时看到、做过、想复用的成品前端美学收进这里 —— 每种风格一个自包含单页 demo，讲清楚色彩令牌、面板结构、字体链、悬停/状态怎么处理，直接抄走套到自己的项目。
跟 Dashboard 后台 的区别：dashboard 讲功能形状（表单、表格、看板 …… 骨架逻辑），这里讲皮肤气质（终端风、赛博朋克、极简白 …… 视觉语言）。同一个"表格"形状，套上不同风格就是不同的观感。
- PIP-BOY 琥珀终端 —— 单色琥珀 + 深黑底 + 等宽微发光的复古 CRT 面板，Fallout Pip-Boy 灵感
- Celestia 主题收藏卡 —— 数据自带主题色板的玻璃拟态收藏画廊，衬线大字 + 宽字距小标签的杂志气质
- Verdant Glass 苔光用量台 —— 浅灰绿底 + 白玻璃卡 + 翡翠绿点缀的 LLM 网关用量看板，悬浮胶囊侧栏 + 热力图 + 面积图
- Syzygy 克莱因蓝星穹 —— 一 div 巨行星 + 大气层渐变落地纸白正文的深空官网首屏，data-brand-theme 令牌一键换肤
- NEXUS 2030 酸绿深空首屏 —— 近黑墨绿深空底 + 酸性荧光绿点缀的科幻发布页 hero，SVG 笔画描边大标题 + 行星轨道核心 + 纯 CSS 伪影片模态
- ATELIER 纸白动力学 —— 暖纸白 + 墨黑巨字 + 单一朱砂红的实验排版作品页，一个弹簧积分器驱动全页：巨字被指针推开、卡片甩出去弹回来、滚动横推作品轨；页内附「对标 Awwwards」那段审美基调提示词原文与它的适用边界
- PLATTER 平面音乐档案 —— 完整唱片架、详情轮播、搜索、队列和音频播放器
- PARALLAX 三态作品档案 —— 同一批卡片在 Layered / Orbit / Archive 三种视角间切换
- LINE//SYSTEM 线性工业图形 —— 海报实验室、设计拆解、组件图谱与提示词库
- WORLD FILES 档案袋叙事 —— 横向档案架与解绳、铺纸、显字的连续转场
- PIXEL BLOOM 网格揭示 —— Canvas 沿指针轨迹逐格揭开三个同坐标隐藏世界
- TINTORY 视觉考古编辑部 —— 六页视觉研究工作室与真实民族服饰素材
- NEAT ANNOTATIONS 手绘标注标本 —— 八方向、内置颜色与组合效果的完整 CSS 标本页
- One Hub 翡翠管理台 —— Berry 骨架 × Minimals 色语言的 MUI 后台皮肤：墨色主按钮、双层卡片阴影、灰底表头 + 虚线行分隔；活例是纯 CSS 缩微，正文附可直接抄进 MUI 项目的 createTheme 三件套配方
- Vercel Lanyard 可拖拽 3D 工牌 —— Rapier 物理绳链 + meshline 绳带 + 反投影拖拽的挂绳工牌，复现自 Vercel Ship 2024；全站首个免构建 React 3D demo：htm + import map + esbuild external 化的
/vendor/ESM 运行时 - Open Design 官网拆解 —— open-design.ai 首页 11 个动效逐个复刻：磁性 Dock、物理掉落、点阵地球、逐词模糊入场 …… 纸白 + 荧光绿的零 React runtime 渐进增强流派
- HAOQI 3D 开屏拆解 —— 一个完整开屏展示：手写 Banana TubeGeometry、Pointer 视差、玻璃折射与 GPU Fluid Push；后续独立特效按第二、第三篇追加
- ORYZO 官网拆解 —— Lusion 的高斯泼溅玩梗营销站，按叙事顺序复现精彩场面：蓝图开场、泼溅渲染系统、翻滚转台场景切换、巨型标题景深换焦、照片滑轨、RGB 呼吸光边
收录格式
每篇风格文章按同一个模子写：iframe 活例 → 一两句气质定义 → prompt 式要点清单 → 完整实现入口。单页实验可以把源码直接放进一个 HTML；从完整项目收录时则保留原构建、素材和可读源码目录，不能为了满足单文件格式重写或删减交互。
- 要点清单一行一条，每条是可直接喂给 AI 的指令（如「用 SVG
<text>+paint-order:stroke实现大标题按字体笔画描边」），不写「小标题：多行解释」的格式 - demo 必须能随 wiki 独立运行：轻量单页的运行时走全站共享
/vendor/；完整项目保留自己的已构建运行时并改成相对资源路径，不依赖原工作区开发服务器。规矩见写作规范·嵌入交互单页 - 删原稿的 CDN 字体前，先确认字体是不是视觉效果本身的一部分（nexus-2030 的笔画描边依赖 Noto Sans SC 保留笔画重叠轮廓，换系统字体效果即失）；是的话用
fonts.googleapis.com/css2?family=...&text=<那几个字>拿几 KB 的子集 woff2 vendor 进文章assets/，@font-face+unicode-range钉死那几个码位