Design System Stack：AI代理的前端设计系统技能套件

一套面向Claude Design等AI编码代理的四技能组合包，涵盖设计令牌提取、设计模式库、优秀案例参考和动画落地页工作流，帮助AI代理输出专业级前端代码。

Design System Stack 的核心目标是提升AI生成前端代码的设计质量。它不是教AI写代码的基础语法，而是传递设计系统的思维方式——如何从设计令牌（Design Tokens）出发，构建一致的视觉语言，最终输出符合Awwwards水准的动画落地页。

这套技能包包含四个互补的技能模块：

1. extract-design-system：从现有网站提取设计令牌
2. design-system-patterns：常见UI模式的设计系统实现
3. awesome-design-systems：优秀设计系统的参考案例库
4. animated-landing-workflow：动画落地页的完整工作流

在重构或迁移项目时，一个常见需求是："让新网站保持和旧网站一致的视觉风格"。传统做法是手动测量、记录颜色值、字体大小、间距等，耗时且容易遗漏。

extract-design-system 技能让AI代理能够自动从任意网站提取完整的设计令牌体系：

• 颜色系统：主色、辅助色、中性色、语义色（成功、警告、错误）
• 字体排版：字体家族、字号层级、行高、字重
• 间距系统：基础单位、间距比例、断点规则
• 阴影与效果：阴影层级、模糊半径、过渡曲线
• 圆角与边框：组件级别的圆角规范
• 网格系统：容器宽度、列数、间距

提取的设计令牌以结构化格式输出（如JSON、YAML或CSS自定义属性），可直接导入设计工具（Figma、Sketch）或代码库（Tailwind配置、CSS变量）。

• 品牌一致性检查：审计现有网站的设计系统一致性
• 竞品分析：快速了解竞争对手的视觉设计体系
• 设计迁移：将旧项目的设计规范迁移到新项目
• 设计令牌标准化：为没有明确设计系统的项目建立规范

资深前端工程师的宝贵经验往往不在于知道如何使用CSS，而在于知道"什么时候用什么模式"。design-system-patterns 将这些经验编码为AI可复用的知识。

布局模式：

• 响应式网格系统
• 弹性布局策略
• 容器查询模式
• 粘性定位与滚动行为

组件模式：

• 按钮层级与状态管理
• 表单输入与验证反馈
• 卡片布局变体
• 导航模式（桌面与移动端）
• 模态框与遮罩层

视觉模式：

• 颜色对比度与可访问性
• 字体层级建立视觉层次
• 间距节奏与呼吸感
• 阴影与深度暗示

交互模式：

• 悬停状态与焦点管理
• 加载状态与骨架屏
• 错误边界与降级展示
• 动画缓动曲线选择