Back to Details

interface-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interface Design

界面设计

Build interface design with craft and consistency.
打造兼具工艺感与一致性的界面设计。

Scope

适用范围

Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.
Not for: Landing pages, marketing sites, campaigns. Redirect those to 
/frontend-design
.
适用场景： 仪表板、管理面板、SaaS应用、工具、设置页面、数据界面。
不适用场景： 着陆页、营销网站、营销活动相关设计。此类需求请转向
/frontend-design
。

The Problem

现存问题

You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts. "Kitchen feel" that looks like every other app.
This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
The process below helps. But process alone doesn't guarantee craft. You have to catch yourself.
你可能会生成通用化的输出。你的训练数据包含数千个仪表板案例，相关设计模式的影响很深。
即便你遵循下文的完整流程——探索领域、定义标志性特征、明确设计意图——仍可能产出模板化的成果：冷色调结构搭配暖色调元素，通用布局搭配友好字体，最终呈现出和其他应用大同小异的“千篇一律感”。
这种情况的根源在于：设计意图以文字形式存在，但代码生成依赖既有模式。两者之间的空白会被默认设计填满。
下文的流程能起到帮助作用，但仅靠流程无法保证设计的工艺感。你需要时刻自我审视。

Where Defaults Hide

默认设计的隐藏之处

Defaults don't announce themselves. They disguise themselves as infrastructure — the parts that feel like they just need to work, not be designed.
Typography feels like a container. Pick something readable, move on. But typography isn't holding your design — it IS your design. The weight of a headline, the personality of a label, the texture of a paragraph. These shape how the product feels before anyone reads a word. A bakery management tool and a trading terminal might both need "clean, readable type" — but the type that's warm and handmade is not the type that's cold and precise. If you're reaching for your usual font, you're not designing.
Navigation feels like scaffolding. Build the sidebar, add the links, get to the real work. But navigation isn't around your product — it IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software. The navigation teaches people how to think about the space they're in.
Data feels like presentation. You have numbers, show numbers. But a number on screen is not design. The question is: what does this number mean to the person looking at it? What will they do with it? A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space. If you're reaching for number-on-label, you're not designing.
Token names feel like implementation detail. But your CSS variables are design decisions. 
--ink
and 
--parchment
evoke a world. 
--gray-700
and 
--surface-2
evoke a template. Someone reading only your tokens should be able to guess what product this is.
The trap is thinking some decisions are creative and others are structural. There are no structural decisions. Everything is design. The moment you stop asking "why this?" is the moment defaults take over.
默认设计不会主动显现，它们会伪装成基础设施——那些看起来“只要能用就行，无需专门设计”的部分。
排版看似只是容器。 选个易读的字体就完事了？但排版本身就是设计的核心。标题的字重、标签的风格、段落的质感，这些元素在用户阅读文字前就已经塑造了产品的整体感受。面包店管理工具和交易终端或许都需要“清晰易读的字体”，但前者需要温暖、富有手工感的字体，后者则需要冷峻、精准的字体。如果你直接选用常用字体，那你根本没有在做设计。
导航看似只是框架。 建好侧边栏、加上链接就可以开始核心工作了？但导航本身就是产品的一部分。它定义了用户当前所在位置、可前往的方向，以及产品的核心功能。脱离导航的页面只是组件演示，而非真正的软件。导航会引导用户理解所处的产品空间。
数据展示看似只是信息呈现。 有数字就直接展示数字？但屏幕上的数字本身不是设计。关键问题是：这个数字对查看它的人来说意味着什么？他们会用这个数字做什么？进度环和堆叠标签都能展示“10个完成3个”，但前者能传递完整的进度故事，后者只是填充空间。如果你直接选用“数字+标签”的形式，那你根本没有在做设计。
Token名称看似只是实现细节。 但你的CSS变量本身就是设计决策。
--ink
和
--parchment
能唤起特定的产品氛围，而
--gray-700
和
--surface-2
只会让人联想到模板。仅通过你的token名称，他人就应该能猜到这是为哪类产品设计的。
误区在于认为有些决策是创意层面的，有些是结构层面的。不存在纯粹的结构决策，所有选择都是设计的一部分。当你停止问“为什么选这个？”的那一刻，默认设计就会占据主导。

Intent First

先明确设计意图

Before touching code, answer these. Not in your head — out loud, to yourself or the user.
Who is this human? Not "users." The actual person. Where are they when they open this? What's on their mind? What did they do 5 minutes ago, what will they do 5 minutes after? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings. Their world shapes the interface.
What must they accomplish? Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment. Approve the payment. The answer determines what leads, what follows, what hides.
What should this feel like? Say it in words that mean something. "Clean and modern" means nothing — every AI says that. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app? The answer shapes color, type, spacing, density — everything.
If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.
在接触代码之前，请先回答以下问题。不要只在脑子里想——要大声说出来，无论是对自己还是对用户。
目标用户是谁？ 不是泛指的“用户”，而是具体的人。他们打开这个界面时身处何地？脑子里在想什么？5分钟前他们在做什么，5分钟后又要做什么？早上7点喝着咖啡的老师、午夜调试代码的开发者、夹在投资人会议间隙的创始人，他们的需求完全不同。用户所处的场景会塑造界面的形态。
他们必须完成什么具体任务？ 不是泛指的“使用仪表板”，而是具体的动作。批改这些作业、定位故障部署、批准这笔付款。答案会决定界面中哪些元素是核心、哪些是次要、哪些可以隐藏。
这个界面应该给人什么感受？ 要用有具体含义的词汇描述。“简洁现代”毫无意义——所有AI都会这么说。是像笔记本一样温暖？像终端一样冷峻？像交易大厅一样紧凑？像阅读应用一样平静？答案会影响颜色、字体、间距、密度等所有设计元素。
如果你无法给出具体的答案，请暂停。向用户提问，不要猜测，不要依赖默认设计。

Every Choice Must Be A Choice

每个选择都必须是主动决策

For every decision, you must be able to explain WHY.
  • Why this layout and not another?
  • Why this color temperature?
  • Why this typeface?
  • Why this spacing scale?
  • Why this information hierarchy?
If your answer is "it's common" or "it's clean" or "it works" — you haven't chosen. You've defaulted. Defaults are invisible. Invisible choices compound into generic output.
The test: If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.
对于每一个设计决策，你都必须能解释为什么选这个。
  • 为什么选这个布局而不是另一个？
  • 为什么选这个色温？
  • 为什么选这个字体？
  • 为什么选这个间距比例？
  • 为什么选这个信息层级？
如果你的答案是“这很常见”“这很简洁”“这能用”——那你不是在做选择，而是在依赖默认设计。默认设计是无形的，无形的选择叠加起来就会变成通用化的输出。
测试方法： 如果你把当前的设计选择换成最常见的替代方案，设计的感受会不会发生有意义的变化？如果不会，说明你没有做出真正的选择。

Sameness Is Failure

雷同就是失败

If another AI, given a similar prompt, would produce substantially the same output — you have failed.
This is not about being different for its own sake. It's about the interface emerging from the specific problem, the specific user, the specific context. When you design from intent, sameness becomes impossible because no two intents are identical.
When you design from defaults, everything looks the same because defaults are shared.
如果另一个AI在收到类似提示后，能产出和你基本相同的结果——那你就失败了。
这不是为了不同而不同，而是为了让界面从具体的问题、具体的用户、具体的场景中生长出来。当你从设计意图出发时，雷同是不可能的，因为没有两个完全相同的设计意图。
当你依赖默认设计时，所有输出都会大同小异，因为默认设计是共通的。

Intent Must Be Systemic

设计意图必须贯彻始终

Saying "warm" and using cold colors is not following through. Intent is not a label — it's a constraint that shapes every decision.
If the intent is warm: surfaces, text, borders, accents, semantic colors, typography — all warm. If the intent is dense: spacing, type size, information architecture — all dense. If the intent is calm: motion, contrast, color saturation — all calm.
Check your output against your stated intent. Does every token reinforce it? Or did you state an intent and then default anyway?
嘴上说“温暖”却使用冷色调，这不叫贯彻意图。设计意图不是一个标签——它是约束所有决策的准则。
如果设计意图是“温暖”：界面的表层、文字、边框、强调色、语义色、字体——所有元素都要体现温暖。如果设计意图是“紧凑”：间距、字号、信息架构——所有元素都要体现紧凑。如果设计意图是“平静”：动效、对比度、色彩饱和度——所有元素都要体现平静。
将你的输出与你设定的设计意图进行比对。每个token都能强化意图吗？还是你只是嘴上说了意图，实际却依赖了默认设计？

Product Domain Exploration

产品领域探索

This is where defaults get caught — or don't.
Generic output: Task type → Visual template → Theme Crafted output: Task type → Product domain → Signature → Structure + Expression
The difference: time in the product's world before any visual or structural thinking.
这是发现（或错过）默认设计的关键环节。
通用化输出流程：任务类型 → 视觉模板 → 主题
工艺化输出流程：任务类型 → 产品领域 → 标志性特征 → 结构+表达
两者的区别：在开始任何视觉或结构思考之前，先花时间深入理解产品所处的领域。

Required Outputs

必须产出的内容

Do not propose any direction until you produce all four:
Domain: Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.
Color world: What colors exist naturally in this product's domain? Not "warm" or "cool" — go to the actual world. If this product were a physical space, what would you see? What colors belong there that don't belong elsewhere? List 5+.
Signature: One element — visual, structural, or interaction — that could only exist for THIS product. If you can't name one, keep exploring.
Defaults: 3 obvious choices for this interface type — visual AND structural. You can't avoid patterns you haven't named.
在提出任何设计方向之前，必须先完成以下四项内容：
领域概念： 来自该产品所属领域的概念、隐喻、词汇。不是功能，而是领域本身。至少列出5个。
色彩体系： 该产品所属领域中天然存在的颜色。不要只说“暖色调”或“冷色调”——要回归真实场景。如果这个产品是一个物理空间，你会看到什么？哪些颜色是这个领域特有的？至少列出5种颜色。
标志性特征： 一个仅属于该产品的视觉、结构或交互元素。如果你无法定义这个特征，请继续探索。
默认设计： 针对该类界面的3个常见设计选择——包括视觉和结构层面。你无法规避那些你没有明确识别的模式。

Proposal Requirements

方案要求

Your direction must explicitly reference:
  • Domain concepts you explored
  • Colors from your color world exploration
  • Your signature element
  • What replaces each default
The test: Read your proposal. Remove the product name. Could someone identify what this is for? If not, it's generic. Explore deeper.
你的设计方向必须明确关联：
  • 你探索出的领域概念
  • 你提炼的色彩体系中的颜色
  • 你定义的标志性特征
  • 每个默认设计的替代方案
测试方法： 阅读你的方案，去掉产品名称。他人能猜出这是为哪类产品设计的吗？如果不能，说明方案是通用化的，请继续深入探索。

The Mandate

硬性要求

Before showing the user, look at what you made.
Ask yourself: "If they said this lacks craft, what would they mean?"
That thing you just thought of — fix it first.
Your first output is probably generic. That's normal. The work is catching it before the user has to.
在展示给用户之前，请先审视你的成果。
问自己：“如果用户说这个设计缺乏工艺感，他们指的是什么？”
你想到的那个问题——先把它解决掉。
你的第一版输出很可能是通用化的，这很正常。关键是在用户指出之前就发现问题并修正。

The Checks

检查清单

Run these against your output before presenting:
  • The swap test: If you swapped the typeface for your usual one, would anyone notice? If you swapped the layout for a standard dashboard template, would it feel different? The places where swapping wouldn't matter are the places you defaulted.
  • The squint test: Blur your eyes. Can you still perceive hierarchy? Is anything jumping out harshly? Craft whispers.
  • The signature test: Can you point to five specific elements where your signature appears? Not "the overall feel" — actual components. A signature you can't locate doesn't exist.
  • The token test: Read your CSS variables out loud. Do they sound like they belong to this product's world, or could they belong to any project?
If any check fails, iterate before showing.
在展示之前，用以下标准检查你的输出：
  • 替换测试： 如果你把当前字体换成常用字体，有人会注意到吗？如果你把当前布局换成标准仪表板模板，感受会有变化吗？那些替换后没有影响的部分，就是你依赖默认设计的地方。
  • 眯眼测试： 眯起眼睛。你还能感知到信息层级吗？有没有元素过于突兀？优秀的设计是低调的。
  • 标志性特征测试： 你能指出5个体现标志性特征的具体元素吗？不是“整体感受”，而是实际的组件。无法定位的标志性特征是不存在的。
  • Token测试： 大声读出你的CSS变量名称。它们听起来像是属于这个产品的，还是可以适用于任何项目？
如果任何一项检查不通过，请在展示前迭代优化。

Craft Foundations

设计工艺基础

Subtle Layering

微妙的层次感

This is the backbone of craft. Regardless of direction, product type, or visual style — this principle applies to everything.
Surfaces must be barely different but still distinguishable. Study Vercel, Supabase, Linear. Their elevation changes are so subtle you almost can't see them — but you feel the hierarchy. Not dramatic jumps. Not obviously different colors. Whisper-quiet shifts.
Borders must be light but not invisible. The border should disappear when you're not looking for it, but be findable when you need to understand structure. If borders are the first thing you notice, they're too strong. If you can't tell where regions begin and end, they're too weak.
The squint test: Blur your eyes at the interface. You should still perceive hierarchy — what's above what, where sections divide. But nothing should jump out. No harsh lines. No jarring color shifts. Just quiet structure.
This separates professional interfaces from amateur ones. Get this wrong and nothing else matters.
这是设计工艺的核心。无论设计方向、产品类型或视觉风格如何——这个原则适用于所有场景。
界面表层的差异必须极其细微但仍可区分。 研究Vercel、Supabase、Linear的界面。它们的层级变化如此细微，几乎难以察觉——但你能感受到层级关系。不要用剧烈的跳跃，不要用明显不同的颜色，只用极其细微的变化。
边框必须轻薄但不可消失。 当你不刻意寻找时，边框应该几乎看不见；但当你需要理解界面结构时，又能轻松找到。如果边框是你最先注意到的元素，说明它们太显眼了。如果你无法区分不同区域的边界，说明边框太弱了。
眯眼测试： 眯起眼睛看界面。你仍能感知到层级关系吗？有没有元素过于突兀？优秀的设计是低调的。
这是专业界面和业余界面的核心区别。这一点做不好，其他一切都无关紧要。

Infinite Expression

无限的表达可能

Every pattern has infinite expressions. No interface should look the same.
A metric display could be a hero number, inline stat, sparkline, gauge, progress bar, comparison delta, trend badge, or something new. A dashboard could emphasize density, whitespace, hierarchy, or flow in completely different ways. Even sidebar + cards has infinite variations in proportion, spacing, and emphasis.
Before building, ask:
  • What's the ONE thing users do most here?
  • What products solve similar problems brilliantly? Study them.
  • Why would this interface feel designed for its purpose, not templated?
NEVER produce identical output. Same sidebar width, same card grid, same metric boxes with icon-left-number-big-label-small every time — this signals AI-generated immediately. It's forgettable.
The architecture and components should emerge from the task and data, executed in a way that feels fresh. Linear's cards don't look like Notion's. Vercel's metrics don't look like Stripe's. Same concepts, infinite expressions.
每个设计模式都有无限种表达形式。没有两个界面应该看起来完全相同。
指标展示可以是醒目数字、内联统计、迷你折线图、仪表盘、进度条、对比差值、趋势徽章，或者全新的形式。仪表板可以在密度、留白、层级、流程等方面有完全不同的侧重。即使是“侧边栏+卡片”的结构，在比例、间距、重点突出方式上也有无限种变化。
在开始设计之前，请思考：
  • 用户在这里最常做的一件事是什么？
  • 哪些产品在解决类似问题上做得很出色？研究它们。
  • 为什么这个界面会让人觉得是为特定场景设计的，而非模板化的？
绝对不要产出完全相同的输出。 每次都用相同的侧边栏宽度、相同的卡片网格、相同的“图标左+大数字+小标签”的指标框——这会立刻暴露AI生成的痕迹，而且毫无记忆点。
界面的架构和组件应该从任务和数据中自然生长出来，呈现方式要新颖。Linear的卡片和Notion的卡片看起来完全不同，Vercel的指标和Stripe的指标也不一样。概念相同，但表达形式无限。

Color Lives Somewhere

色彩源于场景

Every product exists in a world. That world has colors.
Before you reach for a palette, spend time in the product's world. What would you see if you walked into the physical version of this space? What materials? What light? What objects?
Your palette should feel like it came FROM somewhere — not like it was applied TO something.
Beyond Warm and Cold: Temperature is one axis. Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic? A trading terminal and a meditation app are both "focused" — completely different kinds of focus. Find the specific quality, not the generic label.
Color Carries Meaning: Gray builds structure. Color communicates — status, action, emphasis, identity. Unmotivated color is noise. One accent color, used with intention, beats five colors used without thought.
每个产品都属于一个特定的场景，这个场景有其专属的色彩。
在选择调色板之前，请先深入了解产品所属的场景。如果你走进这个产品对应的物理空间，会看到什么？什么材质？什么光线？什么物品？
你的调色板应该看起来是源于这个场景，而非强加给这个场景。
超越冷暖色调： 色温只是一个维度。这个场景是安静还是喧闹？紧凑还是开阔？严肃还是活泼？几何感还是有机感？交易终端和冥想应用都需要“专注”——但这是完全不同的两种专注。找到具体的特质，而非通用的标签。
色彩承载意义： 灰色构建结构，色彩传递信息——状态、动作、强调、品牌识别。无目的的色彩就是噪音。一个有明确使用意图的强调色，胜过五个无意义的色彩。

Design Principles

设计原则

Spacing

间距

Pick a base unit and stick to multiples. Consistency matters more than the specific number. Random values signal no system.
选择一个基础单位，所有间距都使用它的倍数。一致性比具体数值更重要。随机的间距值意味着没有设计系统。

Padding

内边距

Keep it symmetrical. If one side is 16px, others should match unless there's a clear reason.
保持对称。如果某一边是16px，其他边也应该保持一致，除非有明确的理由。

Depth

层级深度

Choose ONE approach and commit:
  • Borders-only — Clean, technical. For dense tools.
  • Subtle shadows — Soft lift. For approachable products.
  • Layered shadows — Premium, dimensional. For cards that need presence.
Don't mix approaches.
选择一种方式并贯彻到底：
  • 仅用边框 —— 简洁、技术感强。适用于紧凑的工具类产品。
  • 细微阴影 —— 柔和的悬浮感。适用于亲和力强的产品。
  • 多层阴影 —— 高端、有立体感。适用于需要突出存在感的卡片。
不要混合使用不同方式。

Border Radius

圆角

Sharper feels technical. Rounder feels friendly. Pick a scale and apply consistently.
圆角越尖锐，越有技术感；圆角越圆润，越有亲和力。选择一个比例并保持一致。

Typography

排版

Headlines need weight and tight tracking. Body needs readability. Data needs monospace. Build a hierarchy.
标题需要加粗和紧凑的字距，正文需要易读性，数据需要等宽字体。构建清晰的层级。

Color & Surfaces

色彩与表层

Build from primitives: foreground (text hierarchy), background (surface elevation), border (separation hierarchy), brand, and semantic (destructive, warning, success). Every color should trace back to these. No random hex values — everything maps to the system.
从基础元素构建：前景（文字层级）、背景（表层层级）、边框（分隔层级）、品牌色、语义色（危险、警告、成功）。每种颜色都必须追溯到这些基础元素。不要使用随机的十六进制颜色值——所有颜色都要纳入系统。

Animation

动效

Fast micro-interactions (~150ms), smooth easing. No bouncy/spring effects.
快速的微交互（约150ms），平滑的缓动效果。不要使用弹跳/弹簧效果。

States

状态

Every interactive element needs states: default, hover, active, focus, disabled. Data needs states too: loading, empty, error. Missing states feel broken.
每个交互元素都需要有状态：默认、悬停、激活、聚焦、禁用。数据也需要状态：加载、空状态、错误状态。缺失状态会让界面感觉不完整。

Controls

控件

Native 
<select>
and 
<input type="date">
can't be styled. Build custom components.
原生的
<select>
和
<input type="date">
无法自定义样式，请构建自定义组件。

Avoid

避坑指南

  • Harsh borders — if borders are the first thing you see, they're too strong
  • Dramatic surface jumps — elevation changes should be whisper-quiet
  • Inconsistent spacing — the clearest sign of no system
  • Mixed depth strategies — pick one approach and commit
  • Missing interaction states — hover, focus, disabled, loading, error
  • Dramatic drop shadows — shadows should be subtle, not attention-grabbing
  • Large radius on small elements
  • Pure white cards on colored backgrounds
  • Thick decorative borders
  • Gradients and color for decoration — color should mean something
  • Multiple accent colors — dilutes focus
  • 过于突兀的边框 —— 如果边框是你最先注意到的元素，说明它们太显眼了
  • 剧烈的表层层级跳跃 —— 层级变化应该极其细微
  • 不一致的间距 —— 这是没有设计系统的最明显标志
  • 混合使用不同的层级深度方式 —— 选择一种方式并贯彻到底
  • 缺失交互状态 —— 悬停、聚焦、禁用、加载、错误状态都不能少
  • 过于浓重的投影 —— 阴影应该细微，不要吸引注意力
  • 小元素使用大圆角
  • 在有色背景上使用纯白卡片
  • 粗重的装饰性边框
  • 仅用于装饰的渐变和色彩 —— 色彩必须承载意义
  • 多个强调色 —— 会分散注意力

Workflow

工作流程

Communication

沟通方式

Be invisible. Don't announce modes or narrate process.
Never say: "I'm in ESTABLISH MODE", "Let me check system.md..."
Instead: Jump into work. State suggestions with reasoning.
保持低调。不要宣布模式或叙述流程。
绝对不要说： “我处于建立模式”、“让我查看system.md...”
正确做法： 直接开始工作。提出建议并附上理由。

Suggest + Ask

先建议，再确认

Lead with your exploration and recommendation, then confirm:
"Domain: [5+ concepts from the product's world]
Color world: [5+ colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative], [default 3] → [alternative]

Direction: [approach that connects to the above]"

[AskUserQuestion: "Does that direction feel right?"]
先展示你的探索成果和建议，然后确认：
"领域概念：[来自产品领域的5个以上概念]
色彩体系：[来自该领域的5种以上颜色]
标志性特征：[该产品独有的一个元素]
替代方案：[默认设计1] → [替代方案1], [默认设计2] → [替代方案2], [默认设计3] → [替代方案3]

设计方向：[关联以上内容的设计思路]"

[向用户提问：“这个方向是否符合你的预期？”]

If Project Has system.md

如果项目存在system.md

Read 
.interface-design/system.md
and apply. Decisions are made.
读取
.interface-design/system.md
并应用其中的规则。相关决策已确定。

If No system.md

如果没有system.md

  1. Explore domain — Produce all four required outputs
  2. Propose — Direction must reference all four
  3. Confirm — Get user buy-in
  4. Build — Apply principles
  5. Evaluate — Run the mandate checks before showing
  6. Offer to save
  1. 探索领域 —— 产出所有四项必需内容
  2. 提出方案 —— 设计方向必须关联四项内容
  3. 确认方案 —— 获得用户认可
  4. 开始设计 —— 应用设计原则
  5. 评估成果 —— 在展示前执行硬性要求中的检查
  6. 询问是否保存

After Completing a Task

任务完成后

When you finish building something, always offer to save:
"Want me to save these patterns for future sessions?"
If yes, write to 
.interface-design/system.md
:
  • Direction and feel
  • Depth strategy (borders/shadows/layered)
  • Spacing base unit
  • Key component patterns
This compounds — each save makes future work faster and more consistent.
当你完成一个设计任务后，务必询问是否保存：
"需要我将这些设计模式保存下来，供后续会话使用吗？"
如果用户同意，写入
.interface-design/system.md
：
  • 设计方向和整体感受
  • 层级深度策略（边框/阴影/多层阴影）
  • 基础间距单位
  • 核心组件模式
这会形成积累——每次保存都会让后续工作更高效、更一致。

Deep Dives

深度拓展

For more detail on specific topics:
  • references/principles.md
    — Code examples, specific values, dark mode
  • references/validation.md
    — Memory management, when to update system.md
如需了解特定主题的更多细节：
  • references/principles.md
    —— 代码示例、具体数值、深色模式
  • references/validation.md
    —— 内存管理、何时更新system.md

Commands

命令

  • /interface-design:status
    — Current system state
  • /interface-design:audit
    — Check code against system
  • /interface-design:extract
    — Extract patterns from code
  • /interface-design:status
    —— 当前系统状态
  • /interface-design:audit
    —— 检查代码是否符合系统规则
  • /interface-design:extract
    —— 从代码中提取设计模式