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