name: anthropic-frontend-design
description: 创建独特、生产级的前端界面，避免千篇一律的“AI 俗套”美学。融合 UI/UX Pro Max 的设计智慧与 Anthropic 的反俗套理念。用于构建 UI 组件、页面、应用或界面，注重极致细节和大胆的创意选择。

Anthropic 前端设计

本指南旨在引导创建独特、生产级的前端界面，规避千篇一律的“AI 俗套”美学。它将结构化设计智慧（可访问性、UX 规则、技术栈指南）与大胆、有意识的美学理念相结合。

核心理念：反 AI 俗套

Claude（以及所有 AI 代理）能够进行非凡的创意工作，但常常默认采用安全、通用的模式。本指南强制要求打破这些模式。

• 避免：Inter、Roboto、Arial 等系统字体，白底紫色渐变，千篇一律的 SaaS 布局，用表情符号作为图标。
• 强制要求：独特的字体排版，符合上下文情境的配色方案，有意的动效，出人意料的空间构图，以及生产级的功能代码。

设计思维流程

在编码之前，理解上下文并承诺一个大胆的美学方向：

1. 目的：解决什么问题？为谁而设计？
2. 基调：选择一个极致的风格方向——极致简约、混乱的极繁主义、复古未来主义、有机、奢华、趣味、杂志风等。
3. 智能（参考）：使用内部设计工具收集数据（见下文）。
4. 差异化：什么让这个设计令人难忘？

设计智能工具

使用内部搜索工具来收集调色板、字体搭配和 UX 指南。关键：你必须通过“反 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-300 毫秒。

3. 空间构图

• 使用不对称、重叠或对角线流来打破标准网格。
• 平衡充裕的负空间或有意的密集感。

交付前检查清单

交付代码前，请逐项核对：

视觉质量

• [ ] 未使用表情符号作为图标（仅使用 SVG）。
• [ ] 字体排版具有特色，非“AI 标准”字体。
• [ ] 配色方案符合上下文，具有独特性（无通用渐变）。
• [ ] 悬停状态提供清晰、稳定的视觉反馈。

UX 与可访问性

• [ ] 所有交互元素都有 cursor-pointer。
• [ ] 表单输入有标签；图片有替代文本。
• [ ] 文本对比度满足最低 4.5:1（测试浅色/深色模式）。
• [ ] 在所有断点（375px, 768px, 1024px, 1440px）下均响应良好。
• [ ] 移动端无水平滚动。

美学方向（参考）

• 极致简约：单色、极致的留白、稀疏的字体排版。
• 极繁混乱：元素重叠、信息密集、图案混搭。
• 复古未来主义：铬效果、霓虹灯点缀、80 年代风格。
• 奢华/精致：金色/深色点缀、衬线字体、充裕的间距。
• 趣味/玩具感：圆角、明亮的柔和色、弹性动画。
• 杂志/编辑风：基于网格、大胆的标题、清晰的层级。
• 粗野主义/原始感：等宽字体、强烈对比、工业感。
• 装饰艺术：锐角、金属点缀、华丽的边框。

选定一个方向并全力执行——切勿半途而废。