
关于
为生产 UI 工作设定 ECC 特定的前端设计方向。适用于构建或改进网站、仪表板、应用、组件、落地页、可视化工具或任何需要更强产品设计判断力的 Web UI
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 的功能。
审查清单
- 第一视口立即传达产品、工作流或对象。
- 视觉层次支持扫描和重复使用。
- 排版适合容器且不与相邻内容重叠。
- 色彩选择有对比度且不会坍缩为单调调色板。
- 在有可用的熟悉工具操作时使用图标。
- 响应式布局对面板、网格、工具栏、控件、磁贴和计数器有稳定尺寸。
- 资源能渲染并承载主题内容,而非充当填充物。
- 动效改善方向感且不掩盖迟钝。
- 结果匹配仓库现有的前端规范,除非有明确的偏离理由。
兼容工具
Claude CodeCursor
标签
前端开发
