前端设计方向 是做什么的？
当工作不仅仅是让 UI 运作，而是要让它感觉有目的性、精致且与产品领域相称时，使用此技能。
来源：从社区废弃 PR #1659 中恢复，贡献者为 linus707。
注意：ECC 有意不重新打包规范的 Anthropic frontend-design 技能。若需要官方上游技能，请从 anthropics/skills 安装。此技能是 ECC 特定设计方向的恢复版本，包含了来自 #1659 的有用本地指导。
何时使用
- 用户要求构建一个网页、应用、仪表盘、制品、组件或 UI。
- 用户要求让界面更精致、更具特色、更美观或减少通用感。
- 实现时需要在视觉层次、排版、色彩、动效、布局和交互方面做出选择。
- 当前 UI 能工作，但显得平淡、通用、模板化或与受众不匹配。
设计方向
在编写代码之前，选择一个具体的方向：
- 目的：这个界面完成什么工作？
- 受众：谁重复执行这个工作流，他们需要首先扫描什么？
- 基调：实用主义、编辑风格、趣味性、工业风、精致、技术性、最大化、极简、密集、宁静，或其他明确方向。
- 令人印象深刻的细节：一个能让结果看起来刻意为之的设计思路。
- 约束条件：框架、无障碍性、性能、响应性以及现有的设计系统。
使方向与领域相匹配。SaaS 运营工具通常应该保持密集、安静且易于扫描。作品集、上线页、游戏或编辑性页面可以更具表现力。不要将落地页的构图强加于需要日常重复使用的工具。
实施指导
- 除非用户明确要求营销文案，否则优先构建实际可用的体验作为首屏。
- 在引入新的视觉系统之前，使用现有项目组件、令牌、图标库和路由模式。
- 当界面依赖图片、产品、地点、人物、游戏画面、图表或可检查的媒体时，使用真实或生成的视觉资源。
- 优先使用与上下文相关的排版和间距，而不是通用的超大英雄文本。
- 保持调色板多维化：避免 UI 由一种色系主导。
- 使用 CSS 变量或现有设计令牌，以确保方向在各状态下保持连贯。
- 明确设计响应式约束：网格、宽高比、最小/最大尺寸、稳定的工具栏以及固定格式的控件不应因标签或悬停状态的出现而移位。
- 谨慎而有目的地使用动效。优先使用能阐明状态的高信息量过渡，而非装饰性动画。
- 在移动端和桌面端验证文本适应性。长标签必须能优雅地换行或调整大小，而不是溢出。
反模式
- 不要默认使用常见的生成模式：紫色渐变、装饰性斑点、超大卡片、模糊的 hero 文案或类似库存图片的氛围媒体。
- 不要在卡片内部再添加 UI 卡片。
- 当领域要求克制时，不要在整个界面中使用单一的装饰风格。
- 不要将主要产品、工具、对象或工作流隐藏在通用的营销部分后面。
- 不要仅为某个设计点缀添加新的依赖项，除非它能明确地为自身带来价值。
- 不要在 UI 中描述 UI 的功能，控件本身就能表达。
审查清单
- 第一个视口立即传达出产品、工作流或对象。
- 视觉层次支持扫描和重复使用。
- 排版适合容器，且不与邻近内容重叠。
- 色彩选择有对比度，且不会坍缩为单一色调的调色板。
- 在可能的情况下，为熟悉的工具操作使用图标。
- 响应式布局对于看板、网格、工具栏、控件、磁贴和计数器具有稳定的尺寸。
- 资源能渲染并承载主题内容，而非充当填充物。
- 动效改善方向感，且不掩盖卡顿。
- 除非有明确的理由偏离，结果应与仓库现有的前端约定保持一致。