frontend-design-direction

Frontend Design Direction

当工作不仅是实现 UI 功能，而是要让界面更有目的感、精致度且符合特定产品领域调性时，使用此 Skill。

来源：挽救自 linus707 提交的过期社区 PR #1659。

注意：ECC 特意没有重新打包含有 Anthropic 官方的标准 frontend-design Skill。如果你需要官方上游 Skill，请从 anthropics/skills 安装。本 Skill 是针对 ECC 特化、从 #1659 中抢救并提炼出的实用本地设计指导。

When to Use

• 用户要求构建网页、应用、仪表盘、Artifact、组件或 UI。
• 用户要求让界面更精致、更有辨识度、更美观或摒弃平庸感。
• 实现过程需要在视觉层级、字体排印、配色、动态效果、布局及交互上有明确选择。
• 现有 UI 虽能正常工作，但看起来平淡、同质化、套版感严重，或与目标受众不匹配。

Design Direction

在动手写代码前，先确定一个具体方向：

1. 目的（Purpose）：界面承担的核心任务是什么？
2. 受众（Audience）：谁会高频使用此工作流？他们第一眼最需要扫读什么内容？
3. 调性（Tone）：实用主义、编辑风、趣味活泼、硬核工业、精致优雅、技术极客、大满贯极繁、极简主义、高密度、克制沉稳，或是其他明确的视觉调性。
4. 记忆点（Memorable detail）：一个能让整体设计显得用心且独特的点子。
5. 约束条件（Constraints）：框架、无障碍（accessibility）、性能、响应式支持以及现有的设计系统（design system）。

设计方向必须与产品领域相契合。例如 SaaS 运维工具通常应当高密度、克制且易于扫读；而个人作品集、发布会落地页、游戏或编辑类文章则可以更有张力。切勿把落地页式的视觉构图强行塞进需要每天高频使用的工具界面中。

Implementation Guidance

• 除非用户明确要求编写营销文案，否则第一屏就要直接呈现真实可用的核心体验。
• 优先复用项目既有的组件、Token、图标库和路由模式，不要随意引入新的视觉体系。
• 当界面依赖图片、产品、地点、人物、游戏画面、图表或可交互媒体时，使用真实或生成的视觉素材。
• 巧用契合场景的字体排印与间距，避免泛滥使用巨型 Hero 标题文字。
• 保持调色板的多维丰富：避免让界面被单一色系彻底笼罩。
• 使用 CSS 变量或现有的设计 Token，确保视觉方向在不同状态间保持一致。
• 显式设计响应式约束：网格、宽高比、最小/最大尺寸、稳定的工具栏及固定规格的控件，不应在文本变动或 Hover 触发状态切换时发生跳变。
• 克制而精准地使用动效。优先使用能明确传达状态变化的高信号过渡，而非纯装饰性的动画。
• 验证移动端和桌面端的文本适配。长标签文本必须能够平滑换行或自适应缩放，决不能溢出容器。

Anti-Patterns

• 不要直接使用常见的生成式套路：紫色渐变、装饰性流体斑块（blob）、超大卡片、虚空无物的 Hero 文案，或缺乏真实感的图库级氛围素材。
• 切忌“卡片套卡片”（不要在卡片内部再嵌套 UI 卡片）。
• 当领域需要克制时，不要在所有地方全盘铺设单一的装饰性风格。
• 不要把核心产品、工具、对象或工作流藏在泛泛而谈的营销区块之后。
• 除非能带来显著收益，否则不要为了视觉花哨而随意引入新的依赖库。
• 当控件本身已足够直观时，不要在 UI 内部用文字解释 UI 的功能。

Review Checklist

• 首屏能否瞬间传达产品核心、工作流或主体对象。
• 视觉层级是否便于高效扫读与反复使用。
• 字体排印是否契合容器大小，且未与相邻内容重叠。
• 色彩搭配是否具备足够的对比度，且没有塌陷成毫无层次的单色调。
• 是否在可用之处为常用工具操作配置了直观的图标。
• 响应式布局对看板、网格、工具栏、控件、方块和计数器是否有稳定的尺寸控制。
• 图像/媒体素材是否能准确承载主题内容，而非充当毫无意义的填充物。
• 动效是否提升了方位感/状态感知，而非遮掩加载的迟钝感。
• 除非有充分理由偏离，最终呈现是否符合仓库现有的前端规范。