frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

本技能指导打造独具特色的生产级前端界面，输出真实可用的代码，且对美学细节有极高的把控度。

Example prompts

示例提示

"Build the hero section from the brief"
"Create a card component in a Scandinavian style"
"I want this to feel like a Japanese magazine. Build the layout."
"Build the settings page. Use whatever style fits."

"根据需求说明搭建首屏英雄区"
"创建斯堪的纳维亚风格的卡片组件"
"我想要日式杂志的质感，搭建对应的布局"
"搭建设置页面，风格自行适配即可"

Before You Write Any Code

编写代码前的准备

Explore the existing codebase first. Scan specifically for:
- Component directories:
```
components/
```
  ,
```
ui/
```
  ,
```
shared/
```
  and list every component by name and its props/API
- CSS variables / tokens: files named
```
tokens.css
```
  ,
```
variables.css
```
  ,
```
theme.css
```
  , or
```
:root
```
  declarations with custom properties
- Tailwind config:
```
tailwind.config.js
```
  or
```
tailwind.config.ts
```
  , check
```
theme.extend
```
  for custom values
- UI framework themes: Material UI
```
createTheme
```
  , Chakra
```
extendTheme
```
  , shadcn
```
globals.css
```
  and
```
components.json
```
- Storybook:
```
.storybook/
```
  directory or
```
*.stories.*
```
  files indicating documented components
- Font loading: Google Fonts links,
```
@font-face
```
  declarations, font imports
- Layout patterns: how existing pages handle grid, containers, breakpoints, and spacing
- Package.json UI dependencies: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
- If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates.
Understand the context:
- What problem does this interface solve? Who uses it?
- What is the intended emotional tone?
- What are the hard constraints (framework, devices, performance, accessibility)?
Commit to an aesthetic direction. Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code.

首先梳理现有代码库，重点排查以下内容：
- 组件目录：
```
components/
```
  、
```
ui/
```
  、
```
shared/
```
  ，列出所有组件的名称及其props/API
- CSS变量/设计令牌：名为
```
tokens.css
```
  、
```
variables.css
```
  、
```
theme.css
```
  的文件，或包含自定义属性的
```
:root
```
  声明
- Tailwind配置：
```
tailwind.config.js
```
  或
```
tailwind.config.ts
```
  ，检查
```
theme.extend
```
  中的自定义值
- UI框架主题：Material UI
```
createTheme
```
  、Chakra
```
extendTheme
```
  、shadcn
```
globals.css
```
  与
```
components.json
```
- Storybook：
```
.storybook/
```
  目录或
```
*.stories.*
```
  文件，对应已文档化的组件
- 字体加载：Google Fonts链接、
```
@font-face
```
  声明、字体引入语句
- 布局模式：现有页面如何处理网格、容器、断点和间距
- Package.json中的UI依赖：tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion等
- 如果已有完全或部分匹配需求的组件，请扩展或组合使用它们，不要重复创建。
理解上下文背景：
- 这个界面要解决什么问题？面向什么用户？
- 预期的情感调性是什么？
- 硬性约束有哪些（框架、适配设备、性能、无障碍要求）？
确定美学方向：要么采用用户指定的风格（参考下方的设计理念），要么自行选择适配上下文的风格，在编写代码前说明你的选择及理由。

Aesthetic Philosophies

美学设计理念

When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment.

当用户指定了设计理念或描述了风格感受时，以下内容可作为具体的实现指导，每种理念都定义了排版、配色、布局、间距、动效和细节处理规则。

Dieter Rams (Functionalist)

Dieter Rams（功能主义）

Less but better. Every element earns its place. Nothing decorative without function.

Typography: Clean sans-serif (Helvetica Neue, Suisse Intl, Akkurat). Tight letterspacing on headings. Generous line height on body. One size scale, used strictly.
Color: Restrained. Monochromatic with a single functional accent. White or light grey backgrounds. Color is information, not decoration.
Layout: Strict grid. Clear functional hierarchy. Components aligned to a spatial system. No asymmetry for its own sake.
Spacing: Consistent, mathematical scale (4px/8px base). Generous padding. Breathing room between elements.
Motion: Minimal. Purposeful transitions only (state changes, reveals). No decorative animation.
Details: Subtle borders and dividers over shadows. Precise alignment. Rounded corners used sparingly and consistently.

少即是精，每个元素都有其存在的必要性，无功能性的装饰一律不用。

排版：简洁的无衬线字体（Helvetica Neue、Suisse Intl、Akkurat），标题字母间距紧凑，正文行高充足，严格使用统一的字号体系。
配色：克制简约，单色系搭配一个功能性强调色，背景为白色或浅灰色，颜色仅用于传递信息而非装饰。
布局：严格的网格体系，清晰的功能层级，组件对齐空间系统，不为了不对称而刻意做不对称设计。
间距：统一的数学比例体系（基础单位为4px/8px），充足的内边距，元素之间保留呼吸空间。
动效：极简，仅保留有目的性的过渡（状态变化、内容展示），无装饰性动画。
细节：优先使用细边框和分隔线而非阴影，对齐精准，圆角仅少量且统一使用。

Swiss / International Typographic

Swiss / International Typographic（瑞士/国际排版风格）

Objectivity through structure. The grid is sacred. Content is king.

Typography: Strong sans-serifs (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatic scale contrast between headings and body. All-caps subheadings with generous letterspacing.
Color: High contrast. Black, white, and one primary color. Bold color blocks as compositional elements.
Layout: Rigid multi-column grid. Asymmetric balance. Text and image in dialogue. Alignment across elements is non-negotiable.
Spacing: Defined by the grid module. Gutters are part of the design, not afterthought.
Motion: Page transitions and scroll-triggered reveals that respect the grid. No playful bounce.
Details: Rules (horizontal lines) as structural elements. No gradients. No shadows. Flatness is the point.

通过结构实现客观性，网格是核心准则，内容优先。

排版：有力量感的无衬线字体（Neue Haas Grotesk、Univers、Aktiv Grotesk），标题和正文字号差异明显，副标题全大写且字母间距充足。
配色：高对比度，黑、白加一个主色，大色块作为构图元素。
布局：严谨的多列网格，不对称平衡，文字和图片形成呼应，元素对齐是硬性要求。
间距：由网格模块定义，留白是设计的一部分而非事后补充。
动效：页面过渡和滚动触发的展示效果需符合网格规则，无 playful 的弹跳效果。
细节：横线作为结构元素，无渐变、无阴影，扁平化是核心特点。

Japanese Minimalism (Ma)

Japanese Minimalism (Ma)（日式极简「间」）

Negative space is content. Restraint communicates sophistication. Quiet over loud.

Typography: Thin-weight sans-serifs or elegant serifs (Noto Sans, Cormorant). Generous line height (1.8-2.0). Small body size with large whitespace margins.
Color: Muted naturals (warm greys, stone, sage, washi). Subtle tonal shifts over hard contrasts. Near-monochrome.
Layout: Asymmetric but balanced. Off-center content. Large empty areas are intentional. Content floats in space.
Spacing: Extreme whitespace. Padding and margins 2-3x what feels "normal." Elements breathe.
Motion: Slow, gentle fades (400-600ms). No bounce, no overshoot. Opacity transitions over position shifts.
Details: Hairline borders. Subtle texture (paper grain, linen). No sharp shadows. Soft, diffused effects.

负空间也是内容，克制传递高级感，安静胜于张扬。

排版：细字重无衬线字体或优雅的衬线字体（Noto Sans、Cormorant），行高充足（1.8-2.0），正文字号小，搭配大留白边距。
配色：柔和的自然色系（暖灰、石色、鼠尾草绿、和纸色），柔和的色调变化而非强对比，接近单色系。
布局：不对称但平衡，内容不居中，大面积空白是刻意设计，内容仿佛悬浮在空间中。
间距：极致的留白，内边距和外边距是常规感知的2-3倍，元素有充足的呼吸空间。
动效：缓慢柔和的淡入淡出（400-600ms），无弹跳、无超调，优先使用透明度过渡而非位置变化。
细节：极细边框，柔和纹理（纸纹、亚麻纹理），无锐利阴影，使用柔和的扩散效果。

Brutalist / Raw

Brutalist / Raw（野蛮主义/原生风格）

Structure is visible. No polish. Anti-aesthetic is the aesthetic.

Typography: System fonts, monospace (JetBrains Mono, IBM Plex Mono, Courier), or aggressive display faces. Mixed sizes. Text as texture.
Color: Black and white primary. If color, it is raw and clashing (construction yellow, hazard orange, terminal green). No gradients.
Layout: Visible borders. Box model exposed. Stacked blocks. Deliberate roughness. Content first, beauty never.
Spacing: Tight or intentionally uneven. Padding that feels compressed.
Motion: None, or jarring (instant state changes, hard cuts). No easing.
Details: Visible outlines. Default browser form elements can be intentional. Text-only interfaces. No icons unless functional.

结构完全外露，无打磨，反审美本身就是审美。

排版：系统字体、等宽字体（JetBrains Mono、IBM Plex Mono、Courier）或有冲击力的展示字体，字号混合使用，文字作为纹理元素。
配色：主色为黑和白，如使用彩色则是原生撞色（施工黄、警示橙、终端绿），无渐变。
布局：边框外露，盒模型完全展示，块元素堆叠，刻意的粗糙感，内容优先，完全不考虑美观。
间距：紧凑或刻意不均匀，内边距有压缩感。
动效：无动效，或极其生硬（状态瞬间切换、硬切），无缓动效果。
细节：外框外露，可刻意使用浏览器默认表单元素，纯文字界面，无功能性的图标一律不用。

Scandinavian

Scandinavian（斯堪的纳维亚风格）

Warmth plus restraint. Functional beauty. Accessible by default.

Typography: Rounded, friendly sans-serifs (Nunito, Poppins, Circular, Cera Pro). Medium weights. Comfortable reading sizes.
Color: Natural palette. Warm whites, soft blues, muted greens, clay. Pastel accents. No pure black (use charcoal).
Layout: Clean and open. Card-based. Rounded corners (8-12px). Comfortable, generous layouts.
Spacing: Generous but not extreme. Everything feels approachable and uncluttered.
Motion: Gentle, natural easing. Subtle hover lifts. Content that settles into place.
Details: Soft shadows (large blur, low opacity). Rounded elements. Warm undertones in greys. Illustration-friendly.

温暖加克制，功能性美感，默认具备高可访问性。

排版：圆润友好的无衬线字体（Nunito、Poppins、Circular、Cera Pro），中等字重，阅读尺寸舒适。
配色：自然调色板，暖白色、柔和蓝色、 muted 绿色、陶土色， pastel 强调色，不使用纯黑（改用炭黑色）。
布局：简洁开阔，卡片式设计，圆角（8-12px），舒适宽松的布局。
间距：宽松但不过度，整体感觉友好无压迫感。
动效：柔和自然的缓动，微妙的悬浮抬起效果，内容自然落地。
细节：柔和阴影（高模糊、低透明度），圆角元素，灰色带暖调，适配插画风格。

Art Deco / Geometric

Art Deco / Geometric（装饰艺术/几何风格）

Bold symmetry. Decorative precision. Statement and luxury.

Typography: Geometric display faces (Futura, Poiret One, Josefin Sans). All-caps headlines with extreme letterspacing. Serif body text for contrast.
Color: Rich and deep. Gold/champagne, emerald, navy, burgundy, black. Metallic accents (gold gradients, shimmer effects).
Layout: Symmetrical and centered. Strong vertical axis. Decorative frames and borders. Layered depth.
Spacing: Structured and formal. Padding is architectural.
Motion: Elegant reveals. Staggered entrance animations. Parallax depth.
Details: Geometric patterns (chevrons, sunbursts, fan shapes). Ornamental borders. Texture (marble, brushed metal). Statement typography at hero scale.

大胆对称，装饰性精准，有高级感和表现力。

排版：几何展示字体（Futura、Poiret One、Josefin Sans），标题全大写且字母间距极大，正文使用衬线字体形成对比。
配色：浓郁深沉，金色/香槟色、祖母绿、海军蓝、酒红、黑色，金属质感强调（金色渐变、闪光效果）。
布局：对称居中，强垂直轴线，装饰性边框和外框，分层深度。
间距：结构化正式，内边距有建筑感。
动效：优雅的展示效果， staggered 入场动画，视差深度。
细节：几何图案（V形纹、太阳纹、扇形），装饰性边框，纹理（大理石、拉丝金属），首屏大尺寸表现力排版。

Neo-Memphis

Neo-Memphis（新孟菲斯风格）

Playful chaos. Anti-corporate. Shapes as characters.

Typography: Mix of weights and styles. Clashing fonts is intentional. Oversized headlines. Text at angles.
Color: Bold primaries and neons. Clashing combinations (pink and yellow, blue and orange). No muted tones. Flat color, no gradients.
Layout: Broken grid. Overlapping elements. Shapes (circles, triangles, squiggles) as compositional elements. Asymmetric on purpose.
Spacing: Dense in some areas, empty in others. Rhythm is irregular.
Motion: Bouncy, playful. Exaggerated hover effects. Elements that wiggle, rotate, or pop.
Details: Thick borders. Geometric shapes as decoration. Patterns (dots, dashes, zigzags). Drop shadows with hard edges and bright colors.

playful 的混乱感，反企业风格，形状本身就是角色。

排版：混合字重和风格，刻意使用撞色字体，超大号标题，文字倾斜排布。
配色：大胆的原色和霓虹色，撞色组合（粉配黄、蓝配橙），无柔和色调，纯色无渐变。
布局：打破网格，元素重叠，形状（圆形、三角形、曲线）作为构图元素，刻意不对称。
间距：部分区域密集，部分区域空白，节奏不规则。
动效：弹跳 playful 风格，夸张的悬浮效果，元素可晃动、旋转或弹出。
细节：粗边框，几何形状作为装饰，图案（圆点、虚线、锯齿线），硬边亮色调投影。

Editorial / Magazine

Editorial / Magazine（编辑/杂志风格）

Content-led design. Typography does the heavy lifting. Every page is a spread.

Typography: Display serif for headlines (Playfair Display, Fraunces, Instrument Serif). Clean sans for body (DM Sans, Source Sans). Dramatic scale (hero headlines at 72-120px). Pull quotes. Drop caps.
Color: Minimal. Black and white with one accent. Color used editorially (to highlight, not decorate).
Layout: Strong column grid (3-5 columns). Full-bleed images. Text wrapping. Mixed column widths. Vertical rhythm.
Spacing: Generous margins. Tight leading on headlines, open on body. Whitespace as a compositional tool.
Motion: Scroll-triggered reveals. Parallax on images. Smooth page transitions.
Details: Thin rules as dividers. Caption typography. Issue/date metadata. Print-inspired details (folio numbers, running headers).

内容主导的设计，排版承担核心表达作用，每个页面都像杂志跨页。

排版：标题用展示衬线字体（Playfair Display、Fraunces、Instrument Serif），正文用简洁无衬线字体（DM Sans、Source Sans），字号差异大（首屏标题72-120px），引用块、首字下沉设计。
配色：极简，黑白加一个强调色，颜色用于编辑表达（突出内容而非装饰）。
布局：强列网格（3-5列），全出血图片，文字绕排，混合列宽，垂直节奏。
间距：充足的边距，标题行高紧凑，正文行高宽松，留白作为构图工具。
动效：滚动触发的展示效果，图片视差，平滑页面过渡。
细节：细线作为分隔线，说明文字排版，期号/日期元数据，印刷风格细节（页码、页眉）。

Implementation Guidelines

实现指南

Typography: Choose distinctive fonts loaded via Google Fonts or CDN. Avoid generic defaults (Inter, Roboto, Arial, system fonts). Pair a display font with a body font.
Color: Use CSS variables for consistency. Dominant color with sharp accents outperforms safe, evenly-distributed palettes.
Motion: CSS transitions for HTML. Framer Motion / Motion library for React. Focus on high-impact moments (page load reveals, state changes) over scattered micro-interactions.
Spatial composition: Unexpected layouts earn attention. Asymmetry, overlap, diagonal flow, grid-breaking elements. Or, if the philosophy demands it, strict grids executed with precision.
Backgrounds and depth: Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, grain overlays. Match the chosen philosophy.

NEVER produce generic AI aesthetics: purple gradients on white, Inter font, predictable card grids, cookie-cutter component layouts. Every output should feel designed for its specific context.

Match implementation complexity to the aesthetic vision. A Dieter Rams interface is 50 lines of precise CSS. A Neo-Memphis interface is 300 lines of creative chaos. Both are correct.

排版：选择通过Google Fonts或CDN加载的特色字体，避免通用默认字体（Inter、Roboto、Arial、系统字体），搭配展示字体和正文字体。
配色：使用CSS变量保证一致性，主色搭配鲜明强调色的效果优于保守、均匀分布的调色板。
动效：HTML使用CSS过渡，React使用Framer Motion/Motion库，重点放在高影响力的节点（页面加载展示、状态变化）而非分散的微交互上。
空间构图：超出预期的布局更容易获得关注，可使用不对称、重叠、对角线流动、打破网格的元素；如果设计理念要求严格网格，则要精准执行。
背景和深度：营造氛围，可使用渐变网格、噪点纹理、几何图案、分层透明、颗粒叠加，匹配所选的设计理念。

绝对不要产出通用的AI美学风格：白背景加紫色渐变、Inter字体、 predictable 卡片网格、千篇一律的组件布局，所有产出都要适配特定的上下文场景。

实现复杂度要匹配美学愿景，Dieter Rams风格的界面是50行精准的CSS，新孟菲斯风格的界面是300行充满创意的代码，两者都是正确的。

Mobile-First

移动端优先（Mobile-First）

Build mobile layout first, then scale up. This is non-negotiable.

Start with a single-column layout at 375px width.
Add complexity at each breakpoint (
```
min-width
```
media queries, not
```
max-width
```
).
Touch targets must be at least 44x44px on mobile.
Body text must be at least 16px on mobile (prevents iOS zoom on input focus).
Navigation must have a mobile-specific pattern (hamburger, bottom tabs, or drawer). Do not rely on horizontal nav bars that overflow.
Test that line lengths stay comfortable (45-75 characters) at every breakpoint.

首先搭建移动端布局，再向上适配，这是硬性要求。

从375px宽度的单列布局开始。
在每个断点增加复杂度（使用
```
min-width
```
媒体查询，而非
```
max-width
```
）。
移动端可点击区域至少为44x44px。
移动端正文字号至少为16px（避免iOS输入框聚焦时自动缩放）。
导航必须有移动端专属模式（汉堡菜单、底部标签页或抽屉），不要依赖会溢出的水平导航栏。
在每个断点测试行长度，保证在45-75字符的舒适区间内。

Dark Mode

暗黑模式（Dark Mode）

If a design tokens file exists (from

/design-tokens

), use its dark mode palette. If not, generate dark mode support alongside the light theme.

Use CSS custom properties so switching themes means changing variable values, not rewriting components.
Support both
```
prefers-color-scheme
```
media query (system preference) and a
```
[data-theme="dark"]
```
attribute (manual toggle).
Do not simply invert colors. Dark backgrounds should be warm or cool to match the philosophy (warm charcoal for Scandinavian, cool slate for Swiss, near-black for Brutalist).
Reduce pure white text to off-white (e.g.,
```
#E5E5E5
```
or
```
rgba(255,255,255,0.87)
```
) to reduce eye strain.
Shadows in dark mode should be darker and more transparent, not the same values as light mode.
Accent colors may need lightness adjustments to maintain WCAG contrast ratios against dark backgrounds.
Include a
```
prefers-reduced-motion
```
media query for users who need it. Disable or simplify all animations and transitions within that query.

如果存在设计令牌文件（来自

/design-tokens

），使用其暗黑模式调色板；如果没有，在开发浅色主题的同时支持暗黑模式。

使用CSS自定义属性，切换主题仅需修改变量值，无需重写组件。
同时支持
```
prefers-color-scheme
```
媒体查询（系统偏好）和
```
[data-theme="dark"]
```
属性（手动切换）。
不要简单反转颜色，暗黑背景要适配设计理念选择暖调或冷调（斯堪的纳维亚风格用暖炭黑，瑞士风格用冷 slate，野蛮主义用近黑色）。
纯白色文字改为 off-white（例如
```
#E5E5E5
```
或
```
rgba(255,255,255,0.87)
```
），减少视觉疲劳。
暗黑模式下的阴影要更深、更透明，不要和浅色模式使用相同的阴影值。
强调色可能需要调整亮度，保证在暗黑背景下符合WCAG对比度要求。
为有需要的用户添加
```
prefers-reduced-motion
```
媒体查询，在该查询下禁用或简化所有动画和过渡效果。