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
实现是生产级别的，而不只是视觉上好看