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.
Distillation should happen before complexity hardens into the product. The best simplification move is often to avoid overbuilding in the first place.
从设计中移除不必要的复杂性，显露本质要素，并通过彻底简化创造清晰感。
提炼应在复杂性沉淀为产品之前进行。最好的简化举措往往是从一开始就避免过度构建。

MANDATORY PREPARATION

强制准备

Users start this workflow with 
/distill
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
Consult the cognitive load when simplification depends on reducing visible choices, memory burden, or premature complexity. Consult the hierarchy checklist when clutter is really flattening priority, section restraint, or label/value clarity. Consult the action hierarchy when simplifying means deciding which controls should lead, recede, combine, or disappear.
用户以 
/distill
开始此工作流。此 skill 激活后，加载 $frontend-design——它包含设计原则、反模式以及 Context Gathering Protocol。继续之前须遵循该协议——如果尚无设计上下文，则必须先加载 $setup。
当简化需要减少可见选择、降低记忆负担或防止复杂性过早增长时，请参阅 认知负荷。 当杂乱确实掩盖了优先级、削弱了版面克制或损害了标签/取值清晰度时，请参阅 层级检查清单。 当简化意味着决定哪些控件应主导、退居次要、合并或消失时，请参阅 操作层级。

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?
    • What's the smallest useful version users could benefit from right now?
    • Which parts are essential, decorative, or aspirational?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
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% 的价值？
    • 用户现在就能从中受益的最小有用版本是什么？
    • 哪些部分是必要的、装饰性的或仅代表未来愿景的？
如果无法从代码库中判断上述任何问题，就直接向用户询问你无法推断的内容。
关键：简单化不是删减功能，而是消除用户与目标之间的障碍。每个元素都应证明其存在的必要性。

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?
制定一套严格的删减策略：
  • 核心目标：它应该完成的那一件事是什么？（只能有一件）
  • 必要元素：实现该目标真正需要什么？
  • 渐进式披露：哪些内容可以隐藏到需要时再显示？
  • 整合机会：哪些内容可以合并或整合？

Tesler's Law (Who Owns the Complexity?)

Tesler 定律（复杂性由谁承担？）

Some complexity is inherent to the domain. The real design decision is whether the system absorbs it or forces the user to manage it manually.
Prefer shifting unnecessary complexity into the product through:
  • smart defaults
  • prefilled data and remembered preferences
  • inline guidance at the moment of need
  • suggested paths and recommended settings
  • automation for repetitive setup and formatting work
Keep advanced power available, but do not make every user confront the full complexity before they can do the basic job.
有些复杂性是领域固有的。真正的设计决策在于，是让系统吸收这些复杂性，还是迫使用户手动管理。
优先通过以下方式将不必要的复杂性吸收到产品中：
  • 智能默认值
  • 预填数据和记忆偏好
  • 在需要时提供内联引导
  • 推荐路径与建议设置
  • 自动化重复的设置和格式化工作
保留高级能力的同时，不要要求每位用户在完成基本任务前都面对全部复杂性。

Minimum Shippable Scope

最小可交付范围

  • Define the smallest version that delivers real user value
  • Separate the shippable core from nice-to-haves and future ambitions
  • Do not let optional features block the useful version from shipping
  • 定义能够交付真实用户价值的最小版本
  • 将可交付核心与锦上添花的功能及未来愿景分开
  • 不要让可选功能阻碍有用版本的发布

Cycle Rule

循环规则

  • Design lightly
  • Build early
  • Refine after real use exposes problems
  • Avoid solving every edge case in the abstract before the feature exists
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

信息架构

  • Start with the feature, not the shell: Simplify the actual task flow before redesigning navigation or chrome
  • 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
  • Absorb system complexity: Prefer inference, remembered state, and sensible automation over making users learn hidden rules
  • 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)
  • Simplify after overbuilding if you could have shipped the smaller useful version first
  • Let nice-to-have features block the shippable core
  • Design every theoretical edge case before you've built and used the basic flow
  • Offload avoidable configuration and rule-tracking onto users when the product could handle it instead
  • 删除未使用的代码：废弃的 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?
确保简化提升了可用性：
  • 更快完成任务：用户能否更快实现目标？
  • 降低认知负荷：是否更容易理解该做什么？
  • 功能仍然完整：所有必要功能是否仍可访问？
  • 层级更清晰：是否 obvious 什么最重要？
  • 性能更好：更简单的设计加载是否更快？

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."
如果你移除了功能或选项：
  • 记录移除原因
  • 考虑是否需要替代访问入口
  • 注明需要持续关注的用户反馈
请记住：你拥有出色的审美和判断力。简化是一种自信的表现——知道该保留什么，并有勇气移除其余一切。正如安托万·德·圣埃克苏佩里所说：“完美不是无可增添，而是无可删减。”