Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计技能

Design and implement memorable frontend interfaces with a clear, intentional aesthetic. The output must be real, working code — not just mood boards. This skill is about design thinking + execution: every visual choice should be rooted in purpose and context.
设计并实现具有清晰、明确美学风格的令人印象深刻的前端界面。输出必须是可实际运行的代码——而非仅为情绪板。本技能聚焦设计思维 + 落地执行：每一项视觉选择都应基于明确的目的和场景。

When to Use

何时使用

Use this skill when the user wants to:
  • Create a new web page, landing page, dashboard, or app UI
  • Design or redesign frontend components or screens
  • Improve typography, layout, color, motion, or overall visual polish
  • Convert a concept or brief into a high‑fidelity, coded interface
当用户有以下需求时，使用本技能：
  • 创建新的网页、着陆页、仪表盘或应用UI
  • 设计或重新设计前端组件或界面
  • 优化排版、布局、色彩、动效或整体视觉质感
  • 将概念或需求转化为高保真的可编码界面

Inputs to Gather (or Assume)

需要收集（或假设）的输入信息

Before coding, identify:
  • Purpose & audience: What problem does this UI solve? Who uses it?
  • Brand/voice: Any reference brands, tone, or visual inspiration?
  • Technical constraints: Framework, library, CSS strategy, accessibility, performance
  • Content constraints: Required copy, assets, data, features
If the user did not provide this, ask 2–4 targeted questions, or state reasonable assumptions in a short preface.
编码前，需明确：
  • 用途与受众：该UI要解决什么问题？使用者是谁？
  • 品牌/风格：是否有参考品牌、风格调性或视觉灵感？
  • 技术约束：框架、库、CSS策略、无障碍要求、性能要求
  • 内容约束：必备文案、资源、数据、功能
如果用户未提供上述信息，可提出2-4个针对性问题，或在开头简短说明合理的假设。

Design Thinking (Required)

设计思维（必备）

Commit to a single, bold aesthetic direction. Name it and execute it consistently. Examples:
  • Brutalist / raw / utilitarian
  • Editorial / magazine / typographic
  • Luxury / refined / minimal
  • Retro‑futuristic / cyber / neon
  • Art‑deco / geometric / ornamental
  • Handcrafted / organic / textured
Avoid generic AI aesthetics. No “default” fonts, color schemes, or stock layouts.
Before writing code, define the system:
  1. Visual direction — one sentence that describes the vibe
  2. Differentiator — what should be memorable about this UI?
  3. Typography system — display + body fonts, scale, weight, casing
  4. Color system — dominant, accent, neutral; define as CSS variables
  5. Layout strategy — grid rhythm, spacing scale, hierarchy plan
  6. Motion strategy — 1–2 meaningful interaction moments
If the user wants code only, skip the explanation but still follow this internally.
坚持单一、鲜明的美学导向。为其命名并始终如一地执行。例如：
  • 野兽派 / 原生 / 实用主义
  • 编辑风 / 杂志风 / 排版主导
  • 轻奢 / 精致 / 极简
  • 复古未来主义 / 赛博 / 霓虹
  • 装饰艺术 / 几何 / 装饰性
  • 手工感 / 有机 / 纹理化
避免通用AI美学风格。拒绝“默认”字体、配色方案或通用布局。
编写代码前，先定义设计体系：
  1. 视觉导向——用一句话描述整体氛围
  2. 差异化点——该UI最令人记忆深刻的地方是什么？
  3. 排版体系——标题+正文字体、字号层级、字重、大小写规则
  4. 色彩体系——主色、强调色、中性色；定义为CSS变量
  5. 布局策略——网格节奏、间距层级、层级规划
  6. 动效策略——1-2个有意义的交互瞬间
如果用户仅需要代码，可跳过上述说明，但仍需在内部遵循该体系。

Implementation Principles

实现原则

  • Working code: HTML/CSS/JS or framework code that runs as‑is
  • Semantic & accessible: headings, labels, focus states, keyboard nav
  • Responsive: fluid layouts, breakpoints, responsive typography
  • Tokenized styling: CSS variables for colors, spacing, radii, shadows
  • Modern layout: prefer CSS Grid/Flex, avoid brittle positioning hacks
  • 可运行代码：可直接运行的HTML/CSS/JS或框架代码
  • 语义化与无障碍：合理使用标题、标签、焦点状态、键盘导航
  • 响应式：流式布局、断点适配、响应式排版
  • 令牌化样式：用CSS变量管理颜色、间距、圆角、阴影
  • 现代布局：优先使用CSS Grid/Flex，避免脆弱的定位技巧

Aesthetic Guidelines

美学指南

Typography

排版

  • Typography should define the voice of the design
  • Avoid default fonts (Inter, Roboto, Arial, system stacks)
  • Use a distinct display font + a refined body font
  • Implement a clear hierarchy (size, weight, spacing, casing)
  • 排版应定义设计的风格调性
  • 避免默认字体（Inter、Roboto、Arial、系统字体栈）
  • 使用独特的标题字体 + 精致的正文字体
  • 构建清晰的层级（字号、字重、间距、大小写）

Color & Theme

色彩与主题

  • Commit to a palette with a strong point‑of‑view
  • Avoid timid, overused gradients (e.g., purple‑to‑pink on white)
  • Use contrast intentionally and check legibility
  • 采用具有明确立场的配色方案
  • 避免保守、过度使用的渐变（如白底上的粉紫渐变）
  • 有意运用对比度并检查可读性

Composition & Layout

构图与布局

  • Encourage asymmetry, scale contrast, overlap, or grid breaks
  • Use negative space deliberately (or controlled density if maximalist)
  • Create visual rhythm and hierarchy through spacing and alignment
  • 鼓励不对称、尺寸对比、元素重叠或打破网格
  • 刻意运用留白（或在极繁风格中控制密度）
  • 通过间距和对齐创造视觉节奏与层级

Detail & Atmosphere

细节与氛围

  • Add texture or depth when appropriate (noise, grain, subtle patterns)
  • Use shadows/glows only when they serve the concept
  • Consider unique borders, masks, or clip‑paths for distinct shapes
  • 适当时添加纹理或深度（噪点、颗粒感、微妙图案）
  • 仅在服务于设计概念时使用阴影/发光效果
  • 考虑使用独特的边框、蒙版或裁剪路径打造特殊形状

Motion & Interaction

动效与交互

  • Use motion sparingly but meaningfully
  • Favor one standout interaction over many tiny ones
  • Honor 
    prefers-reduced-motion
  • 少而精地使用动效
  • 优先打造一个突出的交互效果，而非多个细碎动效
  • 遵循
    prefers-reduced-motion
    设置

Avoid

需避免的情况

  • Cookie‑cutter hero + 3 card layouts
  • Generic gradients and default font choices
  • Unmotivated decorative elements
  • Overly flat, characterless component libraries
  • 千篇一律的英雄区+3卡片布局
  • 通用渐变与默认字体选择
  • 无意义的装饰元素
  • 过于扁平化、缺乏特色的组件库

Deliverables

交付物

  • Provide full code with file names or component boundaries
  • Make customization easy with CSS variables or config objects
  • If assets are needed, provide inline SVGs or generative CSS patterns
  • 提供包含文件名或组件边界的完整代码
  • 通过CSS变量或配置对象简化定制流程
  • 若需要资源，提供内嵌SVG或生成式CSS图案

Quality Checklist (Self‑validate)

质量检查清单（自我验证）

  • Aesthetic direction is unmistakable
  • Typography feels intentional and expressive
  • Layout and spacing are consistent and purposeful
  • Color palette feels cohesive and legible
  • Interactions enhance the experience without clutter
  • Code runs as provided and is production‑ready
Remember: a design is only as strong as its commitment. Choose a direction and execute it relentlessly.
  • 美学导向清晰明确
  • 排版设计有意且富有表现力
  • 布局与间距一致且具有目的性
  • 配色方案协调且可读性强
  • 交互效果提升体验而非造成杂乱
  • 代码可直接运行且符合生产环境要求
谨记： 设计的力量在于坚持。选定一个方向并坚定地执行到底。