用途
该技能提供极简静态站点（纯 HTML/CSS/JS）的设计系统模式，适用于实现 UI、选择颜色或确保品牌一致性时参考。它扩展自 Generic Design System，需先阅读基础技能以了解色彩理论、字号比例、间距系统与组件状态。
主要能力
纯 CSS 方式
不使用预处理器、Tailwind 或构建工具，只用 CSS。提供 CSS 自定义属性示例，包括品牌颜色（保持最小调色板）、间距与过渡时序令牌；系统字体栈（无 Web 字体，零加载时间）；以及使用 clamp() 的流体字号，无需媒体查询。
CSS-only 动画
提供关键帧动画（如 pulse 脉冲）、过渡模式（如悬停位移与变色，GPU 加速）、以及基于 nth-child 的错峰动画（依次设置 transition-delay）。
CSS-only 交互模式
提供显隐切换（通过 max-height 过渡，visible 值需大于内容高度）、图标旋转（如 .rotated .arrow 旋转 180 度）、以及焦点状态（a:focus-visible 与 button:focus-visible 的 outline 与 offset）。
组件模式（无需 JS）
提供无障碍按钮的 HTML 与 CSS（透明背景、边框、悬停切换为强调色）以及导航的 HTML 与 CSS（内边距、无下划线、悬停变色）。
性能目标
文件体积目标：HTML < 5KB、CSS < 10KB、JS < 5KB、总计 < 50KB。Lighthouse 目标：Performance 95+、Accessibility 90+、Best Practices 100。
使用方式
该技能以 SKILL.md 形式提供参考内容，内含可直接复用的 CSS 与 HTML 代码片段（如 CSS 自定义属性、字体栈、clamp() 排版、关键帧动画、过渡、错峰动画、显隐切换、图标旋转、焦点状态、按钮与导航组件）。资料未提供安装命令或具体调用步骤。
适用场景
- 构建纯 HTML/CSS/JS 的极简静态站点
- 实现 UI 组件（按钮、导航等）
- 选择颜色、确保品牌一致性
- 需要零构建工具、零 Web 字体加载的轻量方案
- 追求高 Lighthouse 性能与无障碍分数的静态页面
限制
- 面向静态站点，资料未提及对动态框架或服务端渲染的支持
- 不使用预处理器、Tailwind 或构建工具
- 不加载 Web 字体，仅使用系统字体栈
- 显隐切换使用 max-height 过渡，需手动设定大于内容高度的值
- 资料未提供安装命令、收费、价格信息