Anthropic 前端设计

此技能旨在指导创建独特、生产级别的前端界面，避免千篇一律的"AI流水线"美学。它将结构化设计智能（可访问性、用户体验规则、技术栈指南）与大胆、有意的美学理念相结合。

核心理念：反AI流水线

Claude（以及所有AI智能体）能够进行非凡的创造性工作，却常常默认采用安全、通用的模式。此技能强制要求打破这些模式。

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

设计思维流程

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

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

设计智能工具

使用内部搜索工具来收集调色板、字体配对和用户体验指南。关键：你必须通过"反AI垃圾"的视角来筛选结果。如果工具建议使用"Inter"或"Roboto"字体，你必须忽略它，并选择一种独特的替代方案。

# 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. 专业用户界面规则

2. 动效与动画

• 优先采用纯CSS解决方案
• 聚焦高光时刻（页面加载时的错落呈现）
• 微交互时长控制在150-300毫秒

3. 空间构成

• 运用不对称、重叠或对角线流打破标准网格
• 平衡留白艺术与紧凑布局

交付前检查清单

提交代码前逐项核验：

视觉品质

• 禁止使用表情符号替代图标（仅限SVG）
• 字体设计需独具特色，杜绝"AI标准款"
• 配色方案根据具体情境定制（不使用通用渐变）。
• 悬停状态能提供清晰、稳定的视觉反馈。

用户体验与无障碍设计

• 所有交互元素均具备光标指针。
• 表单输入框带有标签；图片包含替代文本。
• 文本对比度达到4.5:1最低标准（已测试浅色/深色模式）。
• 适配所有断点尺寸（375px、768px、1024px、1440px）。
• 移动端无横向滚动。

美学方向（参考）

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

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