Back to Details

frontend-design-direction

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Direction

前端设计方向

Use this skill when the work is not just making UI function, but making it feel purposeful, polished, and appropriate to the product domain.
Source: salvaged from stale community PR #1659 by 
linus707
.
Note: ECC intentionally does not rebundle the canonical Anthropic 
frontend-design
skill. Install that from 
anthropics/skills
when you want the official upstream skill. This skill is the ECC-specific design-direction salvage of the useful local guidance from #1659.
当工作不仅是让UI实现功能，还要使其具备明确目的性、精致感，且契合产品领域特性时，可使用此技能。
来源：由
linus707
从陈旧的社区PR #1659中整理而来。
注意：ECC不会重新打包Anthropic官方的
frontend-design
技能。若需要官方上游技能，请从
anthropics/skills
安装。本技能是从PR #1659中提炼出的、针对ECC的专属设计方向指导内容。

When to Use

使用场景

  • The user asks to build a web page, app, dashboard, artifact, component, or UI.
  • The user asks to make an interface more polished, distinctive, beautiful, or less generic.
  • The implementation needs visual hierarchy, typography, color, motion, layout, and interaction choices.
  • The current UI works but reads as flat, generic, templated, or mismatched to the audience.
  • 用户要求构建网页、应用、仪表盘、制品、组件或UI。
  • 用户要求让界面更精致、独特、美观，或减少通用感。
  • 实现过程需要涉及视觉层级、排版、色彩、动效、布局和交互选择。
  • 当前UI功能正常，但显得平淡、通用、模板化，或与目标受众不匹配。

Design Direction

设计方向

Before coding, choose a specific direction:
  1. Purpose: what job does the interface do?
  2. Audience: who repeats this workflow, and what do they need to scan first?
  3. Tone: utilitarian, editorial, playful, industrial, refined, technical, maximal, minimal, dense, calm, or another explicit direction.
  4. Memorable detail: one design idea that makes the result feel intentional.
  5. Constraints: framework, accessibility, performance, responsiveness, and existing design system.
Match the direction to the domain. A SaaS operations tool should usually be dense, quiet, and scannable. A portfolio, launch page, game, or editorial piece can be more expressive. Do not force a landing-page composition onto a tool that needs repeated daily use.
编码前，先确定具体方向：
  1. 用途：该界面要完成什么任务？
  2. 受众：谁会重复使用此工作流，他们需要优先浏览哪些内容？
  3. 风格基调：实用主义、编辑风格、趣味化、工业风、精致感、技术感、繁复风、极简风、密集型、沉稳感，或其他明确方向。
  4. 记忆点：一个能让成果显得具有设计感的创意点。
  5. 约束条件：框架、无障碍要求、性能、响应式设计，以及现有设计系统。
让设计方向契合产品领域。SaaS运维工具通常应设计得密集、简洁、便于快速浏览。作品集、启动页、游戏或编辑类内容则可以更具表现力。不要将落地页的布局强制应用于需要日常重复使用的工具。

Implementation Guidance

实施指导

  • Build the actual usable experience as the first screen unless the user explicitly asks for marketing copy.
  • Use existing project components, tokens, icon libraries, and routing patterns before introducing a new visual system.
  • Use real or generated visual assets when the interface depends on images, products, places, people, gameplay, charts, or inspectable media.
  • Prefer contextual typography and spacing over generic oversized hero text.
  • Keep palettes multi-dimensional: avoid a UI dominated by one hue family.
  • Use CSS variables or existing design tokens so the direction remains coherent across states.
  • Design responsive constraints explicitly: grids, aspect ratios, min/max sizes, stable toolbars, and fixed-format controls should not shift when labels or hover states appear.
  • Use motion sparingly but deliberately. Prefer high-signal transitions that clarify state over decorative animation.
  • Verify text fit on mobile and desktop. Long labels must wrap or resize cleanly rather than overflowing.
  • 除非用户明确要求营销文案，否则首屏应构建实际可用的体验。
  • 在引入新视觉系统前，优先使用项目现有组件、设计令牌、图标库和路由模式。
  • 当界面依赖图片、产品、地点、人物、游戏画面、图表或可检查媒体时，使用真实或生成的视觉资产。
  • 优先选择符合上下文的排版和间距，而非通用的超大标题文本。
  • 采用多维调色板：避免UI被单一色调主导。
  • 使用CSS变量或现有设计令牌，确保不同状态下的设计方向保持一致。
  • 明确设计响应式约束：网格、宽高比、最小/最大尺寸、稳定工具栏和固定格式控件不应因标签或悬停状态出现而移位。
  • 动效要少而精。优先选择能明确状态的高信号过渡效果，而非装饰性动画。
  • 验证文本在移动端和桌面端的适配情况。长标签应清晰换行或调整大小，而非溢出。

Anti-Patterns

反模式

  • Do not default to common generated patterns: purple gradients, decorative blobs, oversized cards, vague hero copy, or stock-like atmospheric media.
  • Do not add UI cards inside other cards.
  • Do not use a single decorative style everywhere when the domain calls for restraint.
  • Do not hide the primary product, tool, object, or workflow behind generic marketing sections.
  • Do not add a new dependency for a design flourish unless it clearly pays for itself.
  • Do not describe the UI's features inside the UI when the controls can speak for themselves.
  • 不要默认使用常见的生成式设计模式：紫色渐变、装饰性 blob、超大卡片、模糊的标题文案，或类似库存素材的氛围媒体。
  • 不要在卡片内部嵌套UI卡片。
  • 当产品领域需要克制时，不要在所有地方使用单一装饰风格。
  • 不要将核心产品、工具、对象或工作流隐藏在通用营销板块之后。
  • 不要为了一个设计亮点引入新依赖，除非其价值明确大于成本。
  • 当控件本身能说明功能时，不要在UI内描述其特性。

Review Checklist

审查清单

  • The first viewport immediately communicates the product, workflow, or object.
  • The visual hierarchy supports scanning and repeated use.
  • Typography fits the container and does not overlap adjacent content.
  • Color choices have contrast and do not collapse into a one-note palette.
  • Icons are used for familiar tool actions where available.
  • Responsive layout has stable dimensions for boards, grids, toolbars, controls, tiles, and counters.
  • Assets render and carry the subject matter instead of acting as filler.
  • Motion improves orientation and does not mask sluggishness.
  • The result matches the repo's existing frontend conventions unless there is a clear reason to depart.
  • 首屏视窗能立即传达产品、工作流或对象的核心信息。
  • 视觉层级支持快速浏览和重复使用。
  • 排版适配容器，不会与相邻内容重叠。
  • 色彩选择具备对比度，不会沦为单一色调。
  • 在可用情况下，图标用于常见工具操作。
  • 响应式布局中，看板、网格、工具栏、控件、磁贴和计数器的尺寸保持稳定。
  • 资产能正常渲染并承载主题内容，而非作为填充素材。
  • 动效提升方向感，而非掩盖卡顿问题。
  • 成果符合仓库现有的前端规范，除非有明确理由偏离。