by 运行时依赖
安装命令
点击复制技能文档
Anthropic 前端设计 本技能指导创建独特的、生产级别的前端界面，避免通用的“AI乱码”美学。它将结构化的设计智能（无障碍、UX规则、堆栈指南）与大胆、故意的美学哲学相结合。
核心哲学：反AI乱码 Claude（和所有AI代理）能够完成非凡的创作工作，但往往默认为安全、通用的模式。本技能要求打破这些模式。 避免：Inter、Roboto、Arial、系统字体、紫色在白色渐变、标准SaaS布局、将表情符号用作图标。 要求：独特的字体、特定上下文的色彩方案、故意的动画、意外的空间组合和生产级别的功能代码。
设计思维过程 在编码之前，了解上下文并致力于大胆的美学方向： 目的：解决什么问题？是为谁？ 语气：选择一个极端的方向——极简、混乱、复古未来主义、有机、豪华、趣味、编辑、等。 智能（参考）：使用内部设计工具收集数据（见下文）。 区分：是什么让它难忘？
设计智能工具 使用内部搜索工具收集调色板、字体对和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 <堆栈名称>
实施标准
- 专业UI规则
- 动画和动画
- 空间组合
交付前检查清单 在交付代码之前，验证每个项目： 视觉质量 没有使用表情符号作为图标（仅SVG）。 字体具有特征，不是“AI标准”。 颜色方案是特定于上下文的（没有通用的渐变）。 悬停状态提供清晰、稳定的视觉反馈。 UX和无障碍性 所有交互元素都具有光标指针。 表单输入具有标签；图像具有alt文本。 文本对比度满足4.5:1的最低要求（测试浅色/深色模式）。 在所有断点处响应（375px、768px、1024px、1440px）。 移动设备上没有水平滚动。
美学方向（参考） 极简主义：单色、极端的空白、稀疏的字体。 混乱主义：重叠的元素、密集的信息、图案混合。 复古未来主义：铬效果、霓虹灯饰、80年代风格。 豪华/精致：金色/深色饰边、衬线字体、宽裕的间距。 趣味/玩具：圆角、鲜艳的柔和色、弹跳动画。 编辑/杂志：基于网格、粗体标题、清晰的层次。 粗犷/原始：等宽字体、强烈的对比、工业风。 装饰艺术：锐角、金属饰边、华丽的边框。 致力于一个方向并完全执行它——不允许半途而废。