| name | frontend-design-direction |
| description | 为生产 UI 工作设定 ECC 特定的前端设计方向。在构建或改进网站、仪表板、应用、组件、落地页、可视化工具或任何需要更强产品特定设计判断的 Web UI 时使用。 |
| origin | community |
前端设计方向
当工作不仅仅是让 UI 功能运转，而是让它感觉有目的、精致且适合产品领域时使用此技能。
来源：从 linus707 的过期社区 PR #1659 中挽救。
注意：ECC 有意不重新打包规范的 Anthropic frontend-design 技能。当你想要官方上游技能时从 anthropics/skills 安装。此技能是从 #1659 中有用的本地指导的 ECC 特定设计方向挽救版本。
何时使用
- 用户要求构建网页、应用、仪表板、产物、组件或 UI。
- 用户要求让界面更精致、独特、美观或不那么通用。
- 实现需要视觉层次、排版、色彩、动效、布局和交互选择。
- 当前 UI 可以工作但感觉平淡、通用、模板化或与受众不匹配。
设计方向
在编码之前，选择一个特定方向：
- 目的：这个界面做什么工作？
- 受众：谁重复这个工作流，他们需要先扫描什么？
- 基调：实用的、编辑的、有趣的、工业的、精致的、技术的、极繁的、极简的、密集的、平静的或其他明确方向。
- 令人难忘的细节：一个让结果感觉有意为之的设计想法。
- 约束：框架、无障碍、性能、响应性和现有设计系统。
将方向匹配到领域。SaaS 运维工具通常应该是密集的、安静的、可扫描的。作品集、发布页、游戏或编辑作品可以更具表现力。不要将落地页布局强加到需要每日重复使用的工具上。
实现指导
- 首先构建实际可用的体验作为第一个屏幕，除非用户明确要求营销文案。
- 在引入新的视觉系统之前使用现有项目组件、令牌、图标库和路由模式。
- 当界面依赖图像、产品、地点、人物、游戏画面、图表或可检查媒体时使用真实或生成的视觉资产。
- 优先使用上下文排版和间距而非通用超大英雄文本。
- 保持调色板多维度：避免以单一色调家族为主导的 UI。
- 使用 CSS 变量或现有设计令牌，使方向在不同状态间保持连贯。
- 明确设计响应式约束：网格、宽高比、最小/最大尺寸、稳定工具栏和固定格式控件在标签或悬停状态出现时不应移位。
- 节制但有意地使用动效。优先使用澄清状态的高信号过渡而非装饰性动画。
- 验证移动端和桌面端的文本适配。长标签必须干净地换行或调整大小而非溢出。
反模式
- 不要默认使用常见的生成模式：紫色渐变、装饰性斑点、超大卡片、模糊的英雄文案或类似素材的氛围媒体。
- 不要在卡片内再添加 UI 卡片。
- 当领域需要克制时不要在各处使用单一装饰风格。
- 不要将主要产品、工具、对象或工作流隐藏在通用营销部分之后。
- 不要为设计装饰添加新依赖，除非它明显物有所值。
- 当控件本身可以说明问题时，不要在 UI 内部描述 UI 的功能。
审查检查清单
- 第一个视口立即传达产品、工作流或对象。
- 视觉层次支持扫描和重复使用。
- 排版适合容器且不与相邻内容重叠。
- 色彩选择有对比度且不会坍缩为单调的调色板。
- 图标用于熟悉的工具操作（在可用时）。
- 响应式布局对面板、网格、工具栏、控件、磁贴和计数器有稳定的尺寸。
- 资产渲染并承载主题内容而非充当填充物。
- 动效改善方向感而非掩盖迟缓。
- 结果匹配仓库现有的前端约定，除非有明确的偏离理由。
