核心用法
web-design 是一套面向生产环境的 CSS 实现模式集，专注于代码层面的网页设计落地。它从 Layout Principles、Typography、Color、Spacing、Visual Hierarchy、Responsive Design、Accessibility、Component Design 到 Interaction Patterns，构建了完整的现代网页设计技术栈。
布局原则：明确区分 CSS Grid（二维复杂布局）与 Flexbox（一维流式布局）的使用场景。推荐使用 grid-template-areas 进行页面级结构编排，利用 auto-fill/auto-fit 实现无媒体查询的响应式卡片网格，以及 place-items: center 作为最可靠居中方案。特别强调用 Grid 层叠（grid-area: 1/1）替代 position: absolute 处理重叠元素，避免定位带来的维护复杂性。
排版系统：主张字体承载 90% 的设计性格，提供五种典型场景的字体搭配方案（Editorial、SaaS Dashboard、Creative Portfolio、E-commerce Luxury、Developer Tooling）。推荐 1.25 比例（Major Third）的类型刻度，16px 基准字号，行高 1.5（正文）/ 1.1-1.2（标题），行长限制 60-75ch。
色彩架构：定义五种功能角色（Primary、Neutral、Accent、Semantic、Surface），推荐使用 HSL/OKLCH 实现感知均匀的色彩操作，通过表面层级（surface layering）而非单纯阴影创造深度，并强制要求 WCAG AA 对比度合规。
设计令牌三层架构：Primitive → Semantic → Component-specific 的分层设计，支持主题切换时仅重映射第二层即可，无需改动组件代码。
响应式策略：四级断点（Mobile <640px、Tablet 640-1024px、Desktop 1024-1440px、Wide >1440px），优先使用流体技术（clamp()、min()、auto-fit）减少硬编码媒体查询，并引入容器查询（@container）处理组件级响应。
可访问性内置：从色彩对比、键盘导航、焦点指示器、语义化 HTML、动态安全（prefers-reduced-motion）到触摸目标尺寸，提供完整的 WCAG 2.1 AA 合规指导与代码示例。
显著优点
1. 工程化成熟度：设计令牌三层架构、语义化命名约定、无硬编码值的 spacing/typography 系统，使其天然适配设计系统规模化建设
2. 现代 CSS 特性深度运用：Grid、Flexbox、容器查询、clamp() 流体排版、animation-timeline 滚动驱动动画等前沿技术的生产级实践
3. 可访问性优先：不是事后检查清单，而是嵌入每个章节的设计约束（如色彩章节强制要求对比度，交互章节强制要求焦点样式）
4. 决策框架清晰：大量对比表格（Grid vs Flexbox 场景、字体搭配方案、状态视觉处理、动画时长规范）帮助开发者快速做出符合最佳实践的选择
5. 性能意识：GPU 加速属性优先、字体子集化、图片优化等性能考量被明确列入最终检查清单
潜在局限
1. 前置知识门槛：需要使用者具备 CSS Grid、Flexbox、CSS 变量、clamp() 等现代特性的基础理解，对初学者可能信息密度过高
2. 框架绑定暗示：示例代码使用类似 Tailwind 的命名风格（text-xs、gap-*），虽为通用 CSS 但可能让非 Tailwind 用户需要额外心智转换
3. 设计理论深度有限：明确说明本 skill 聚焦代码，设计决策与理论基础需参考 ui-design，单独使用可能在"为何如此设计"层面支撑不足
4. 浏览器兼容性假设：容器查询、animation-timeline 等特性需要 @supports 回退，老旧浏览器环境需额外适配成本
适合人群
- 前端开发者：需要系统提升 CSS 架构能力，从"能写样式"进阶到"能建设计系统"
- 全栈工程师：希望掌握专业级界面实现，无需依赖设计团队即可产出高质量 UI
- 设计系统工程师：正在构建或维护组件库，需要可扩展的设计令牌与组件状态规范
- UI 设计师转开发：已有设计理论基础，需要代码层面的实现映射
常规风险
1. 过度工程化风险：三层令牌架构对小规模项目可能引入不必要复杂度，需根据项目规模裁剪
2. 可访问性合规幻觉：虽提供 WCAG 指导，但实际项目仍需专业测试工具验证，不能仅依赖文档自查
3. 动画性能陷阱：transform 和 opacity 虽为 GPU 友好，但不当的 will-change 滥用或过多同时进行动画的元素仍可能导致卡顿
4. 设计同质化风险：严格遵循类型刻度与 spacing 令牌可能削弱品牌个性，文档虽提醒"Personality"检查，但实践中易被忽视