介绍
# Anthropic Frontend Design
此技能旨在引导打造独具特色、可投入生产环境的前端界面，避免通用的“AI 式平庸”美学。它将结构化的设计智能（无障碍、UX 规则、技术栈指南）与大胆、有意识的美学哲学融为一体。
## 核心理念：反 AI 式平庸
Claude（以及所有 AI 智能体）具备非凡的创意能力，但往往默认采用安全、通用的模式。此技能要求打破这些模式。
- **避免**：Inter、Roboto、Arial、系统字体、紫白渐变、千篇一律的 SaaS 布局、将表情符号作为图标。 - **必须**：独特的排版、特定情境的配色方案、有意的动效、意想不到的空间构图以及可投入生产的实用代码。
---
## 设计思维过程
在编码之前，请理解语境并致力于一个大胆的美学方向：
1. **目的**：这解决了什么问题？是为谁设计的？ 2. **基调**：选择一个极端的方向——极度极简、极繁主义混乱、复古未来主义、有机、奢华、俏皮、杂志风等。 3. **智能（参考）**：使用内部设计工具收集数据（见下文）。 4. **差异化**：是什么让这令人难忘？
---
## 设计智能工具
使用内部搜索工具收集配色方案、字体搭配和 UX 指南。**关键：你必须通过“反 AI 式平庸”的视角来过滤结果。** 如果工具建议使用“Inter”或“Roboto”，你必须忽略它并选择一个独特的替代方案。
```bash # Generate a complete design system python scripts/search.py "<product_type> <industry> <keywords>" --design-system
# Search specific domains (style, typography, color, ux, chart, landing) python scripts/search.py "<keyword>" --domain <domain>
# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.) python scripts/search.py "<keyword>" --stack <stack_name> ```
---
## 实施标准
### 1. 专业 UI 规则
| 规则 | 应该做 | 不应该做 | |------|----|-----| | **图标** | 使用 SVG（Heroicons, Lucide, Simple Icons） | 将 🎨 🚀 ⚙️ 等表情符号作为 UI 图标使用 | | **排版** | 美观、独特的 Google/自定义字体 | Inter、Roboto、Arial、系统字体 | | **悬停** | 稳定的过渡（颜色/不透明度/阴影） | 改变布局的缩放变换 | | **光标** | 为所有交互元素添加 `cursor-pointer` | 在按钮/卡片上保留默认光标 | | **对比度** | 无障碍最低要求 4.5:1 | 低对比度的“氛围”导致无法阅读 |
### 2. 动效与动画 - 尽可能优先使用仅 CSS 的解决方案。 - 聚焦于高影响力的时刻（页面加载时的交错揭示）。 - 微交互使用 150-300ms 的持续时间。
### 3. 空间构图 - 使用不对称、重叠或对角线布局来打破标准网格。 - 平衡充裕的留白 或有意识的密度。
---
## 交付前检查清单
在交付代码之前，请核实每一项：
### 视觉质量 - [ ] 未将表情符号作为图标使用（仅限 SVG）。 - [ ] 排版具有特色，绝非“AI 标准化”。 - [ ] 配色方案针对特定情境（无通用渐变）。 - [ ] 悬停状态提供清晰、稳定的视觉反馈。
### UX 与无障碍 - [ ] 所有交互元素均具有 `cursor-pointer`。 - [ ] 表单输入带有标签；图片带有 alt 文本。 - [ ] 文本对比度满足最低 4.5:1（测试浅色/深色模式）。 - [ ] 在所有断点（375px, 768px, 1024px, 1440px）下均响应式适配。 - [ ] 移动端无横向滚动条。
---
## 美学方向（参考）
- **极度极简**：单色、极致留白、稀疏的排版。 - **极繁主义混乱**：重叠元素、密集信息、混合图案。 - **复古未来主义**：镀铬效果、霓虹点缀、80 年代灵感。 - **奢华/精致**：金/暗色调点缀、衬线字体、充裕的间距。 - **俏皮/玩具风**：圆角、明亮粉彩、弹性动画。 - **杂志/编辑风**：基于网格、醒目标题、清晰层级。 - **粗野主义/原始**：等宽字体、强烈对比、工业感。 - **装饰艺术**：锐角、金属点缀、华丽边框。
*致力于一个方向并彻底执行——绝不妥协。*