Back to Details

simplify

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
从设计中去除不必要的复杂性，通过极致简化来凸显核心元素，打造清晰的设计效果。

MANDATORY PREPARATION

必备准备工作

Context Gathering (Do This First)

收集背景信息（优先完成）

You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), and understanding what's truly essential vs nice-to-have for this product.
Attempt to gather these from the current thread or codebase.
  1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Simplifying the wrong things destroys usability.
如果没有必要的背景信息，你无法出色完成任务，比如目标受众（至关重要）、预期使用场景（至关重要），以及明确产品的核心需求与锦上添花的功能之间的区别。
尝试从当前对话线程或代码库中收集这些信息。
  1. 如果你没有找到确切的信息，必须从现有设计和功能中推断，那么你必须停止并{{ask_instruction}}确认你的推断是否正确。
  2. 否则，如果你无法完全推断，或者你的置信度为中等或更低，你必须先{{ask_instruction}}提出澄清问题，以完善你的背景信息。
在得到答案之前，请勿继续。简化错误的内容会破坏可用性。

Use frontend-design skill

运用frontend-design技能

Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
运用frontend-design技能来遵循设计原则和避免反模式。在该技能执行完毕并明确所有注意事项之前，请勿继续。

Assess Current State

评估当前状态

Analyze what makes the design feel complex or cluttered:
  1. Identify complexity sources:
    • Too many elements: Competing buttons, redundant information, visual clutter
    • Excessive variation: Too many colors, fonts, sizes, styles without purpose
    • Information overload: Everything visible at once, no progressive disclosure
    • Visual noise: Unnecessary borders, shadows, backgrounds, decorations
    • Confusing hierarchy: Unclear what matters most
    • Feature creep: Too many options, actions, or paths forward
  2. Find the essence:
    • What's the primary user goal? (There should be ONE)
    • What's actually necessary vs nice-to-have?
    • What can be removed, hidden, or combined?
    • What's the 20% that delivers 80% of value?
If any of these are unclear from the codebase, {{ask_instruction}}
CRITICAL: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
分析导致设计显得复杂或杂乱的原因：
  1. 识别复杂性来源:
    • 元素过多：相互竞争的按钮、冗余信息、视觉杂乱
    • 过度变化：过多无意义的颜色、字体、尺寸、样式
    • 信息过载：所有内容同时可见，没有渐进式展示
    • 视觉噪音：不必要的边框、阴影、背景、装饰
    • 层级混乱：无法明确区分重要性
    • 功能冗余：过多的选项、操作或流程路径
  2. 提炼核心本质:
    • 用户的主要目标是什么？（应该只有一个）
    • 哪些是真正必要的，哪些是锦上添花的？
    • 哪些内容可以移除、隐藏或合并？
    • 哪20%的内容能带来80%的价值？
如果从代码库中无法明确这些问题，请{{ask_instruction}}
关键提示：简洁性并非指移除功能——而是指移除用户与目标之间的障碍。每个元素都必须证明自己存在的合理性。

Plan Simplification

制定简化方案

Create a ruthless editing strategy:
  • Core purpose: What's the ONE thing this should accomplish?
  • Essential elements: What's truly necessary to achieve that purpose?
  • Progressive disclosure: What can be hidden until needed?
  • Consolidation opportunities: What can be combined or integrated?
IMPORTANT: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
制定一套极致精简的策略：
  • 核心目标：这个设计最应该实现的一件事是什么？
  • 核心元素：实现该目标真正必需的元素有哪些？
  • 渐进式展示：哪些内容可以在需要时再显示？
  • 整合机会：哪些内容可以合并或集成？
重要提示：简化工作难度很大。它需要拒绝好的想法，为出色的执行留出空间。请务必果断。

Simplify the Design

简化设计

Systematically remove complexity across these dimensions:
从以下维度系统性地去除复杂性：

Information Architecture

信息架构

  • Reduce scope: Remove secondary actions, optional features, redundant information
  • Progressive disclosure: Hide complexity behind clear entry points (accordions, modals, step-through flows)
  • Combine related actions: Merge similar buttons, consolidate forms, group related content
  • Clear hierarchy: ONE primary action, few secondary actions, everything else tertiary or hidden
  • Remove redundancy: If it's said elsewhere, don't repeat it here
  • 缩小范围：移除次要操作、可选功能、冗余信息
  • 渐进式展示：将复杂性隐藏在清晰的入口之后（如折叠面板、模态框、分步流程）
  • 合并相关操作：合并相似按钮、整合表单、分组相关内容
  • 清晰层级：一个主要操作，少量次要操作，其余均为三级操作或隐藏
  • 移除冗余：如果内容已在别处提及，请勿在此重复

Visual Simplification

视觉简化

  • Reduce color palette: Use 1-2 colors plus neutrals, not 5-7 colors
  • Limit typography: One font family, 3-4 sizes maximum, 2-3 weights
  • Remove decorations: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
  • Flatten structure: Reduce nesting, remove unnecessary containers—never nest cards inside cards
  • Remove unnecessary cards: Cards aren't needed for basic layout; use spacing and alignment instead
  • Consistent spacing: Use one spacing scale, remove arbitrary gaps
  • 精简调色板：使用1-2种颜色加上中性色，而非5-7种颜色
  • 限制排版：一种字体家族，最多3-4种字号，2-3种字重
  • 移除装饰：删除对层级或功能无帮助的边框、阴影、背景
  • 扁平化结构：减少嵌套，移除不必要的容器——切勿在卡片内嵌套卡片
  • 移除不必要的卡片：基础布局不需要卡片；改用间距和对齐方式
  • 统一间距：使用一套间距规范，移除随意的间隙

Layout Simplification

布局简化

  • Linear flow: Replace complex grids with simple vertical flow where possible
  • Remove sidebars: Move secondary content inline or hide it
  • Full-width: Use available space generously instead of complex multi-column layouts
  • Consistent alignment: Pick left or center, stick with it
  • Generous white space: Let content breathe, don't pack everything tight
  • 线性流程：尽可能用简单的垂直流替代复杂网格
  • 移除侧边栏：将次要内容移至行内或隐藏
  • 全屏宽度：充分利用可用空间，而非使用复杂的多列布局
  • 统一对齐：选择左对齐或居中对齐，并保持一致
  • 充足留白：让内容有呼吸空间，切勿过度拥挤

Interaction Simplification

交互简化

  • Reduce choices: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
  • Smart defaults: Make common choices automatic, only ask when necessary
  • Inline actions: Replace modal flows with inline editing where possible
  • Remove steps: Can signup be one step instead of three? Can checkout be simplified?
  • Clear CTAs: ONE obvious next step, not five competing actions
  • 减少选择：更少的按钮、更少的选项、更清晰的前进路径（选择悖论真实存在）
  • 智能默认值：自动设置常见选项，仅在必要时询问用户
  • 行内操作：尽可能用行内编辑替代模态框流程
  • 减少步骤：注册流程能否从三步简化为一步？结账流程能否简化？
  • 清晰的行动召唤（CTA）：一个明确的下一步操作，而非五个相互竞争的行动

Content Simplification

内容简化

  • Shorter copy: Cut every sentence in half, then do it again
  • Active voice: "Save changes" not "Changes will be saved"
  • Remove jargon: Plain language always wins
  • Scannable structure: Short paragraphs, bullet points, clear headings
  • Essential information only: Remove marketing fluff, legalese, hedging
  • Remove redundant copy: No headers restating intros, no repeated explanations, say it once
  • 精简文案：将每句话减半，然后再减半
  • 主动语态：用“保存更改”而非“更改将被保存”
  • 移除行话：通俗易懂的语言永远是首选
  • 可扫描结构：短段落、项目符号、清晰标题
  • 仅保留核心信息：移除营销话术、法律术语、模糊表述
  • 移除冗余文案：不要用标题重复引言内容，不要重复解释，只说一次

Code Simplification

代码简化

  • Remove unused code: Dead CSS, unused components, orphaned files
  • Flatten component trees: Reduce nesting depth
  • Consolidate styles: Merge similar styles, use utilities consistently
  • Reduce variants: Does that component need 12 variations, or can 3 cover 90% of cases?
NEVER:
  • Remove necessary functionality (simplicity ≠ feature-less)
  • Sacrifice accessibility for simplicity (clear labels and ARIA still required)
  • Make things so simple they're unclear (mystery ≠ minimalism)
  • Remove information users need to make decisions
  • Eliminate hierarchy completely (some things should stand out)
  • Oversimplify complex domains (match complexity to actual task complexity)
  • 移除未使用代码：无用的CSS、未使用的组件、孤立文件
  • 扁平化组件树：减少嵌套深度
  • 整合样式：合并相似样式，统一使用工具类
  • 减少变体：某个组件真的需要12种变体吗？3种能否覆盖90%的场景？
绝对禁止:
  • 移除必要功能（简洁 ≠ 无功能）
  • 为了简洁牺牲可访问性（仍需清晰的标签和ARIA属性）
  • 过度简化导致内容模糊（神秘 ≠ 极简）
  • 移除用户做决策所需的信息
  • 完全消除层级结构（部分内容理应突出显示）
  • 过度简化复杂领域（复杂度应与实际任务复杂度匹配）

Verify Simplification

验证简化效果

Ensure simplification improves usability:
  • Faster task completion: Can users accomplish goals more quickly?
  • Reduced cognitive load: Is it easier to understand what to do?
  • Still complete: Are all necessary features still accessible?
  • Clearer hierarchy: Is it obvious what matters most?
  • Better performance: Does simpler design load faster?
确保简化提升了可用性：
  • 任务完成速度更快：用户能否更快速地完成目标？
  • 认知负荷降低：用户是否更容易理解该做什么？
  • 功能完整性：所有必要功能是否仍可访问？
  • 层级更清晰：能否明确区分内容的重要性？
  • 性能提升：简化后的设计加载速度是否更快？

Document Removed Complexity

记录移除的复杂性

If you removed features or options:
  • Document why they were removed
  • Consider if they need alternative access points
  • Note any user feedback to monitor
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
如果你移除了功能或选项：
  • 记录移除的原因
  • 考虑是否需要提供替代访问途径
  • 记录需要监控的用户反馈
请记住：你拥有出色的品味和判断力。简化是一种自信的体现——知道该保留什么，并有勇气移除其余内容。正如安托万·德·圣埃克苏佩里所说：“完美不是无法再添加什么，而是无法再移除什么。”