Back to Details

distill

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
  • 缩小范围：移除次要操作、可选功能、冗余信息
  • 渐进式披露：通过清晰的入口（折叠面板、模态框、分步流程）隐藏复杂性
  • 合并相关操作：合并相似按钮、整合表单、分组相关内容
  • 清晰层级：一个主要操作，少量次要操作，其余均为 tertiary 或隐藏内容
  • 移除冗余：若内容已在其他位置呈现，请勿在此重复

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."
如果你移除了功能或选项：
  • 记录移除原因
  • 考虑是否需要提供替代访问入口
  • 记录需要监测的用户反馈
请记住：你拥有出色的品味与判断力。简化是一种自信的体现——知道该保留什么，并有勇气移除其余内容。正如安托万·德·圣埃克苏佩里所说：“完美不是无法再添加什么，而是无法再移除什么。”