Anthropic 前端设计规范

本技能指导构建具备鲜明辨识度、达到生产级质量的前端界面，彻底规避千篇一律的“AI 套路化”（AI slop）视觉风格。它将结构化的设计智能（可访问性、UX 原则、技术栈规范）与大胆、有意识的美学哲学深度融合。

核心理念：反 AI 套路化（Anti-AI Slop）

Claude（及所有 AI 代理）虽具备卓越的创造性能力，却常默认采用保守、泛化的模式。本技能明确要求——必须打破这些惯性模式。

• 禁止使用：Inter、Roboto、Arial、系统字体；紫白渐变；模板化 SaaS 布局；用 Emoji（如 🎨 🚀 ⚙️）充当图标。
• 强制要求：独创性排版、上下文适配的配色方案、有意识的动效设计、出人意料的空间构成，以及符合生产环境标准的功能性代码。

设计思维流程

编码前，须深入理解使用场景，并坚定确立一种大胆的美学方向：

1. 目标（Purpose）：此界面解决什么问题？面向哪类用户？
2. 调性（Tone）：选择一种极致风格方向——例如：极简粗暴（brutally minimal）、极致繁复（maximalist chaos）、复古未来主义（retro-futuristic）、有机自然（organic）、奢华精致（luxury）、趣味童真（playful）、杂志编辑风（editorial）等。
3. 设计智能（Intelligence，参考项）：调用内部设计工具获取数据（详见下文）。
4. 差异化（Differentiation）：什么特质能让这个设计令人过目难忘（UNFORGETTABLE）？

设计智能工具

使用内部搜索工具获取配色方案、字体组合及 UX 规范。关键提示：所有结果必须经由「反 AI 套路化」视角严格过滤。若工具推荐 “Inter” 或 “Roboto”，你必须忽略该建议，并主动选择更具辨识度的替代方案。

# 生成完整设计系统
python scripts/search.py "  " --design-system

# 按特定领域搜索（style, typography, color, ux, chart, landing）
python scripts/search.py "" --domain 

# 获取技术栈专属指南（html-tailwind, react, nextjs, shadcn 等）
python scripts/search.py "" --stack 

实现标准

1. 专业 UI 规范

2. 动效与动画

• 优先采用纯 CSS 方案实现动效（尽可能避免 JS 驱动）。
• 聚焦高影响力时刻（例如页面加载时的错落式逐项呈现）。
• 微交互（micro-interactions）持续时间控制在 150–300ms 区间。

3. 空间构成

• 通过非对称布局、元素重叠或对角线流向，打破常规栅格限制。
• 在“大量留白”与“刻意密集”之间做出明确取舍，并保持整体平衡。

交付前检查清单

提交代码前，请逐项确认以下内容：

视觉质量

• 未使用 Emoji 作为图标（仅允许 SVG）。
• 排版富有个性，绝非“AI 标准款”（AI standard）。
• 配色方案契合具体上下文，无通用化渐变（no generic gradients）。
• 悬停态提供清晰、稳定的视觉反馈。

用户体验与可访问性

• 所有可交互元素均已添加 cursor-pointer。
• 表单控件均配有 ；图片均包含 alt 文本。
• 文字对比度满足 ≥ 4.5:1 的最低要求（需分别在浅色/深色模式下验证）。
• 在全部断点（375px、768px、1024px、1440px）下均响应良好。
• 移动端无水平滚动条。

美学风格方向（参考）

• 极简粗暴（Brutally Minimal）：单色系、极致留白、极简排版。
• 极致繁复（Maximalist Chaos）：元素重叠、信息密度高、多种图案混搭。
• 复古未来主义（Retro-Futuristic）：镀铬质感、霓虹点缀、80 年代灵感。
• 奢华/精致（Luxury/Refined）：金/深色点缀、衬线字体、宽松间距。
• 趣味童真（Playful/Toy-like）：圆角设计、明快粉彩色系、弹性弹跳动效。
• 杂志编辑风（Editorial/Magazine）：栅格化布局、醒目标题、清晰层级结构。
• 粗野主义/原始风（Brutalist/Raw）：等宽字体、强烈对比、工业感。
• 装饰艺术风（Art Deco）：锐利几何角度、金属质感点缀、繁复边框装饰。

请坚定选择其中唯一一种风格方向，并贯彻执行——拒绝折中，杜绝半途而废。