Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design

前端设计

Use this when the task is not just "make it work" but "make it look designed."
This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI.
当任务不只是「让它能用」，而是「让它看起来经过精心设计」时使用本技能。
本技能适用于产品页面、仪表盘、应用外壳、组件或视觉系统，这类产出需要清晰的设计思路，而不是千篇一律的AI生成风格UI。

When To Use

适用场景

  • building a landing page, dashboard, or app surface from scratch
  • upgrading a bland interface into something intentional and memorable
  • translating a product concept into a concrete visual direction
  • implementing a frontend where typography, composition, and motion matter
  • 从零构建落地页、仪表盘或应用界面
  • 将平淡无味的界面升级为有设计感、令人印象深刻的版本
  • 将产品概念转化为具体的视觉方向
  • 实现对排版、构图、动效有要求的前端页面

Core Principle

核心原则

Pick a direction and commit to it.
Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.
选定一个方向并贯彻执行。
稳妥平庸的UI通常远不如带有几个大胆设计选择的强一致性美学效果好。

Design Workflow

设计工作流

1. Frame the interface first

1. 先明确界面定位

Before coding, settle:
  • purpose
  • audience
  • emotional tone
  • visual direction
  • one thing the user should remember
Possible directions:
  • brutally minimal
  • editorial
  • industrial
  • luxury
  • playful
  • geometric
  • retro-futurist
  • soft and organic
  • maximalist
Do not mix directions casually. Choose one and execute it cleanly.
在编码前，先确定以下内容：
  • 用途
  • 目标受众
  • 情感基调
  • 视觉方向
  • 用户应当记住的一个核心点
可选的设计方向：
  • 极致极简风
  • 编辑出版风
  • 工业风
  • 奢华风
  • 轻松趣味风
  • 几何风
  • 复古未来主义风
  • 柔和有机风
  • 极繁风
不要随意混合设计方向，选定一个方向后清晰贯彻落地。

2. Build the visual system

2. 搭建视觉系统

Define:
  • type hierarchy
  • color variables
  • spacing rhythm
  • layout logic
  • motion rules
  • surface / border / shadow treatment
Use CSS variables or the project's token system so the interface stays coherent as it grows.
定义以下规则：
  • 字体层级
  • 颜色变量
  • 间距韵律
  • 布局逻辑
  • 动效规则
  • 表面/边框/阴影处理方式
使用CSS variables或项目的token系统，保证界面在迭代过程中保持一致性。

3. Compose with intention

3. 有意识地进行布局

Prefer:
  • asymmetry when it sharpens hierarchy
  • overlap when it creates depth
  • strong whitespace when it clarifies focus
  • dense layouts only when the product benefits from density
Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.
优先选择：
  • 能强化层级的不对称布局
  • 能创造深度的元素重叠
  • 能明确焦点的充足留白
  • 仅当产品确实受益于高密度时才使用密集布局
除非明确适用，否则不要默认使用对称卡片网格布局。

4. Make motion meaningful

4. 让动效有实际意义

Use animation to:
  • reveal hierarchy
  • stage information
  • reinforce user action
  • create one or two memorable moments
Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects.
使用动画来实现以下目的：
  • 展现层级关系
  • 分阶段呈现信息
  • 响应用户操作
  • 创造一两个令人印象深刻的记忆点
不要到处随意添加通用微交互。一个精心设计的加载序列通常比20个随机的hover效果效果更好。

Strong Defaults

优质默认规范

Typography

排版

  • pick fonts with character
  • pair a distinctive display face with a readable body face when appropriate
  • avoid generic defaults when the page is design-led
  • 选择有特色的字体
  • 合适的情况下将有辨识度的展示字体与易读的正文字体搭配使用
  • 如果页面以设计为导向，避免使用通用默认字体

Color

颜色

  • commit to a clear palette
  • one dominant field with selective accents usually works better than evenly weighted rainbow palettes
  • avoid cliché purple-gradient-on-white unless the product genuinely calls for it
  • 确定清晰的配色方案
  • 一个主色调加少量点缀色通常比权重均等的彩虹配色效果更好
  • 除非产品确实需要，否则避免使用陈词滥调的白色背景加紫色渐变

Background

背景

Use atmosphere:
  • gradients
  • meshes
  • textures
  • subtle noise
  • patterns
  • layered transparency
Flat empty backgrounds are rarely the best answer for a product-facing page.
使用氛围感元素：
  • 渐变
  • 网格
  • 纹理
  • 细微噪点
  • 图案
  • 分层透明度
对于面向产品的页面来说，平坦空白的背景很少是最优选择。

Layout

布局

  • break the grid when the composition benefits from it
  • use diagonals, offsets, and grouping intentionally
  • keep reading flow obvious even when the layout is unconventional
  • 当构图需要时可以打破网格
  • 有意识地使用斜线、偏移和分组
  • 即使布局是非传统的，也要保证阅读流清晰易懂

Anti-Patterns

反模式

Never default to:
  • interchangeable SaaS hero sections
  • generic card piles with no hierarchy
  • random accent colors without a system
  • placeholder-feeling typography
  • motion that exists only because animation was easy to add
永远不要默认使用：
  • 千篇一律的SaaS首屏区块
  • 没有层级的通用卡片堆
  • 不成体系的随机强调色
  • 像占位符一样的排版
  • 仅仅因为容易添加就插入的动效

Execution Rules

执行规则

  • preserve the established design system when working inside an existing product
  • match technical complexity to the visual idea
  • keep accessibility and responsiveness intact
  • frontends should feel deliberate on desktop and mobile
  • 在现有产品中工作时，遵守已有的设计系统
  • 技术复杂度要与视觉创意匹配
  • 保证可访问性和响应式能力完好
  • 前端在桌面端和移动端都应当呈现出经过设计的效果

Quality Gate

质量门槛

Before delivering:
  • the interface has a clear visual point of view
  • typography and spacing feel intentional
  • color and motion support the product instead of decorating it randomly
  • the result does not read like generic AI UI
  • the implementation is production-grade, not just visually interesting
交付前检查：
  • 界面有清晰的视觉设计思路
  • 排版和间距看起来是经过精心设计的
  • 颜色和动效是为产品服务的，而不是随意的装饰
  • 最终产出不是千篇一律的AI生成风格UI
  • 实现是生产级别的，而不只是视觉上好看