趣味创意落地页风格设计

核心解决的落地痛点

趣味创意落地页最常见的问题是“风格能看，但没法落地”：按钮只有默认和 hover 两种状态、间距随手填 8px 或 12px、颜色直接写 #3B82F6 而不是语义化 token、键盘焦点不可见、长文案截断或空状态没有定义。结果页面看着活泼，却存在组件无法复用、无障碍不达标、迭代越改越乱的问题，工程师很难直接照着实现。

技能的工作方式

这个技能扮演设计系统指南作者角色，按固定工作流输出可执行约束：

1. 先一句话复述设计意图，确保所有规则对齐“趣味创意落地页”的目标
2. 定义设计 tokens：字号梯度（12/14/16/20/24/32）、字体（主字体 Bangers，等宽 IBM Plex Mono）、颜色 token（primary/secondary/success 等）、间距梯度（4/8/12/16/24/32）
3. 生成组件规则：明确解剖结构、变体、交互状态（default/hover/focus-visible/loading/error 等）、响应式行为和边缘情况处理
4. 附加无障碍验收标准：所有规则必须符合 WCAG 2.2 AA，且每一条都能在代码中测试验证
5. 列出反模式（如低对比度文本、模糊的标签文案）和现有 UI 迁移指南
6. 最后输出可直接用于代码审查的 QA 清单

适用边界与注意点

• 聚焦趣味创意落地页场景，不适用于后台管理、工具类产品等严肃风格
• 不自动安装依赖、修改系统权限或执行下载内容，所有规则仅作为设计指南输出
• 涉及发送、发布、部署等外部写入操作时，需先展示影响并取得用户确认
• 所有命令和代码默认作为参考，只有用户明确要求且目标清晰时才可执行