Anthropic 前端设计

此技能指导创建具有辨识度、生产级质量的前端界面，避免常见的“AI 模板化”审美。它将结构化的设计智能（可访问性、用户体验规则、技术栈规范）与大胆、有意识的美学理念相结合。

核心理念：反 AI 模板化

Claude（以及所有 AI 代理）具备卓越的创造力，但往往默认采用安全、通用的设计模式。本技能强制要求打破这些常规。

• 避免：Inter、Roboto、Arial、系统字体，紫色渐变背景，千篇一律的 SaaS 布局，用表情符号作为图标。
• 必须：独特的字体设计、情境相关的配色方案、有意图的动效、出人意料的空间布局，以及生产级别的功能性代码。

设计思维流程

在编码之前，需理解上下文并坚定地确立一个鲜明的美学方向：

1. 目标：这个界面解决什么问题？服务谁？
2. 基调：选择一个极端风格方向——极简主义、极致混乱、复古未来风、有机感、奢华感、趣味性、杂志风等。
3. 智能参考：使用内部设计工具获取数据（见下文）。
4. 差异化：它有何独特之处，让人难以忘怀？

设计智能工具

使用内部搜索工具收集配色方案、字体搭配和用户体验指南。关键提醒：必须用“反 AI 模板化”视角过滤结果。若工具建议使用“Inter”或“Roboto”，你必须主动忽略，并选择更具特色的替代方案。

# 生成完整的设计系统
python scripts/search.py "<产品类型> <行业> <关键词>" --design-system

# 搜索特定领域（风格、排版、色彩、UX、图表、落地页）
python scripts/search.py "<关键词>" --domain <领域>

# 获取特定技术栈的规范（html-tailwind、react、nextjs、shadcn 等）
python scripts/search.py "<关键词>" --stack <栈名称>

实施标准

1. 专业 UI 规则

2. 动效与动画

• 尽可能优先使用纯 CSS 解决方案。
• 聚焦高影响力时刻（页面加载时的错落揭示）。
• 微交互持续时间控制在 150–300ms。

3. 空间布局

• 采用非对称、重叠或斜向流动来打破标准网格。
• 在留白充足与刻意密集之间取得平衡。

上线前检查清单

交付代码前，请逐一核对以下项目：

视觉质量

• [ ] 未使用表情符号作为图标（仅允许 SVG）
• [ ] 排版富有个性，非“AI 标准”样式
• [ ] 配色方案符合具体场景，无通用渐变
• [ ] 悬停状态提供清晰且稳定的视觉反馈

用户体验与可访问性

• [ ] 所有交互元素均包含 cursor-pointer
• [ ] 表单输入项均有标签；图片均有 alt 文本
• [ ] 文字对比度不低于 4.5:1（需测试亮色/暗色模式）
• [ ] 在所有断点下响应式适配（375px、768px、1024px、1440px）
• [ ] 移动端无水平滚动

美学方向参考（参考）

• 极简主义：单色系，极致留白，极简排版
• 极致混乱：元素重叠，信息密集，图案混搭
• 复古未来风：金属光泽，霓虹点缀，80 年代风格
• 奢华精致：金色/深色点缀，衬线字体，宽松间距
• 趣味玩具风：圆角设计，明亮粉彩，弹跳动画
• 杂志编辑风：网格布局，醒目标题，清晰层级
• 粗野主义/原始风：等宽字体，强烈对比，工业感
• 装饰艺术风：锐利角度，金属装饰，繁复边框

*选定一种方向后，必须彻底贯彻执行——不得半途而废。*