Frontend Design Direction¶

当工作不仅是让 UI 正常运作，更是让其富有目的性、精致且贴合产品领域时，请使用本技能。

来源：从过时的社区 PR #1659（由 linus707 提交）中抢救出来。

注意：ECC 有意不重新打包 Anthropic 官方的 frontend-design 技能。如需官方上游技能，请从 anthropics/skills 安装。本技能是 ECC 特有的设计方向提炼版，保留了 #1659 中有用的本地指南。

使用时机¶

• 用户要求构建网页、应用、仪表盘、artifact、组件或 UI。
• 用户要求让界面更精致、独特、美观或减少通用感。
• 实现需要视觉层级、排版、色彩、动效、布局和交互选择。
• 当前 UI 可用，但显得扁平、通用、模板化，或与受众不匹配。

设计方向¶

编码前，先选定一个明确的方向：

1. 目的：该界面的职责是什么？
2. 受众：谁在重复执行这个工作流，他们首先需要浏览什么？
3. 基调：实用、编辑式、趣味、工业、精致、技术、繁复、极简、密集、沉稳，或其他明确的方向。
4. 记忆点：一个让结果显得用心的设计想法。
5. 约束：框架、无障碍性、性能、响应式，以及现有设计系统。

将方向与领域相匹配。SaaS 运维工具通常应密集、安静、易于扫读。作品集、发布页、游戏或编辑类内容可以更具表现力。不要把落地页的构图强加到需要每日反复使用的工具上。

实施指南¶

• 除非用户明确要求营销文案，否则第一屏应直接呈现真实可用的体验。
• 在引入新视觉系统之前，优先使用项目现有的组件、设计令牌、图标库和路由模式。
• 当界面依赖图片、产品、地点、人物、游戏玩法、图表或可检视的媒体时，使用真实或生成的视觉素材。
• 偏好语境化的排版与间距，而不是通用的超大 hero 文本。
• 保持配色多维：避免 UI 被单一色系主导。
• 使用 CSS 变量或现有设计令牌，确保方向在各状态下保持一致。
• 明确设计响应式约束：网格、宽高比、最小/最大尺寸、稳定的工具栏和固定格式控件，不应在标签或悬停状态出现时发生位移。
• 克制但有意识地使用动效。优先选择能澄清状态的高信号过渡，而非装饰性动画。
• 验证文本在移动端和桌面端的适配。长标签必须干净地换行或缩放，而不是溢出。

反模式¶

• 不要默认使用常见的生成式模式：紫色渐变、装饰性色块、超大卡片、含糊的 hero 文案，或类似库存图的氛围媒体。
• 不要在卡片内再嵌套 UI 卡片。
• 当领域需要克制时，不要到处使用同一种装饰风格。
• 不要把核心产品、工具、对象或工作流隐藏在通用营销板块之后。
• 不要为了一个装饰性效果而引入新的依赖，除非它明显物有所值。
• 当控件本身就能说明一切时，不要在 UI 内部描述 UI 的功能特性。

审查清单¶

• 首屏立即传达出产品、工作流或对象。
• 视觉层级支持扫读和反复使用。
• 排版适配容器，且不重叠相邻内容。
• 色彩选择具有对比度，且不会退化为单一色调的调色板。
• 在可用的地方，为熟悉的工具操作使用图标。
• 响应式布局为看板、网格、工具栏、控件、磁贴和计数器提供稳定的尺寸。
• 素材渲染出来并承载主题内容，而不是充当填充物。
• 动效改善方向感，而不是掩盖卡顿。
• 结果应与仓库现有的前端约定保持一致，除非有明确的理由偏离。