Back to Details

design-rules

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Rules

设计规则

Not negotiable. These are the hard rules of UI craft for THIS product, and they hold every time you create or edit any frontend / user-facing surface -- page, feature, component, element, color, button, navigation, micro-interaction. Build to them while you write the UI, not as a cleanup pass afterward. The only things out of scope are pure backend with no UI (the database and the API / server routes).
This rulebook is the single source of truth. It is verified, not enforced by a build-time hook: 
landing-audit
grades a landing page against these rules, and 
shipit
checks the touched UI files against them after tests and before commit (the same way it scopes tests to the diff's blast radius). Keep the rules here; both of those skills point back to this file rather than restating it.
We are not generalists. The UI is specific to THIS product, and it earns "premium" by being minimal, tight, calm, and practically relevant to the user at all times -- not by adding more. Public-facing pages get the most scrutiny. We will make mistakes; we fix them by updating these rules, not by abandoning them.
This is about craft and feel, not marketing.
不容妥协。这些是本产品UI设计的硬性规则，每当你创建或编辑任何前端/面向用户的界面——页面、功能、组件、元素、颜色、按钮、导航、微交互时，都必须遵守。在编写UI代码时就要遵循这些规则，而不是事后再做清理。唯一不适用的是纯后端无UI的部分（数据库和API/服务器路由）。
本规则手册是唯一的权威依据。它会被验证，但不会通过构建时钩子强制执行：
landing-audit
会根据这些规则对落地页进行评分，
shipit
会在测试完成后、提交前检查修改过的UI文件（就像它根据代码差异范围限定测试范围一样）。请将规则保存在此处；上述两个工具都会指向本文件，而非重复规则内容。
我们不是通用型团队。本产品的UI具有独特性，它通过极简、紧凑、沉稳且始终贴合用户实际需求来打造「高端感」——而非通过添加更多元素。面向公众的页面会受到最严格的审查。我们可能会犯错；解决方式是更新这些规则，而非放弃它们。
这关乎设计工艺与质感，而非营销。

Broken hierarchically

层级混乱修复方案

Fix with:
  • Size
  • Contrast
  • Spacing
Make the most important thing the biggest, give it room.
修复方法：
  • 尺寸
  • 对比度
  • 间距
让最重要的元素最大，并给它足够的空间。

Fonts

字体

Rules:
  • 3 fonts max
    • Body
    • Content
    • Accents - this is an exception, try to keep it to 2
Readability bests personality. Header font to express character. Body font should almost be invisible.
规则：
  • 最多使用3种字体
    • Body（正文）
    • Content（内容）
    • Accents（强调）——此为例外情况，尽量控制在2种以内
可读性优先于个性。 标题字体用于传递风格。 正文字体应近乎「隐形」（不干扰阅读）。

Color

颜色

3 colors max:
  • primary brand color
  • 1 neutral
  • 1 accent cta, etc
60/30/10:
  • 60 background/neutral
  • 30 secondary
  • 10 accent
3-5 intentional colors and stick with them only for all pages.
最多使用3种颜色：
  • 主品牌色
  • 1种中性色
  • 1种强调色（如CTA等）
60/30/10比例：
  • 60%：背景/中性色
  • 30%：次要颜色
  • 10%：强调色
仅使用3-5种经过精心挑选的颜色，并在所有页面中保持一致。

Contrast

对比度

  • Should be enough that screenreaders can pick it up.
  • Cornerstone of accessibility.
  • 对比度需足够高，以便屏幕阅读器识别。
  • 是无障碍设计的核心。

What makes your page look expensive

如何让页面看起来高端

  • Real photography
  • Custom illustrations
  • Branded graphics
Fine:
  • Free stock images
The images can show how your product works or maybe the flow of how things work in your process.
Try to tell a story with the pictures about what your product offers without using words.
  • 真实摄影图
  • 定制插画
  • 品牌化图形
可接受：
  • 免费图库图片
图片可以展示产品的工作方式，或流程中的操作步骤。
尝试用图片讲述产品价值，无需文字说明。

Calm

沉稳感

  • Give the content room to breathe.
  • Try to be aggressively minimal.
  • White space is your friend.
What makes people stay: it's clarity. Answer their one question: Is this for me?
  • 给内容足够的呼吸空间。
  • 尽可能极致简约。
  • 留白是你的朋友。
留住用户的关键：清晰明了。回答他们的核心问题：这适合我吗？

Hero (THE MOST IMPORTANT SECTION BY FAR!)

Hero区域（目前最重要的板块！）

Hero needs to nail 3 things:
  1. Headline tells a stranger exactly what you do, and why it matters to them, not cute or clever just clear.
  2. Cta tells them what to do next.
  3. A visual that reinforces the message instead of distracting from it.
Make sure to demonstrate the USP.
Hero区域必须做好3件事：
  1. 标题清晰告知陌生人你的业务内容，以及对他们的价值——无需花哨，清晰即可。
  2. CTA明确告知他们下一步该做什么。
  3. 视觉元素强化信息，而非分散注意力。
务必展示独特卖点（USP）。

Social proof

社交证明

Formats that actually shift behavior are ones that tell a complete story:
  • Before and after transformations
  • Specific numbers attached to specific outcomes
  • A video with a real person talks about the change they experienced
Placement matters as much as format. Proof at the bottom never gets seen. Weave it in throughout.
Can use ugc instead to see the product in action.
The higher you can get the social proof the better.
Every claim put social proof to demonstrate it works if possible.
Logo bar at the top?
真正能改变用户行为的格式是那些能讲述完整故事的内容：
  • 前后对比案例
  • 带有具体结果的精确数据
  • 真实用户讲述自身改变的视频
位置与格式同样重要。放在底部的证明几乎无人问津。要将其融入整个页面。
也可以使用用户生成内容（UGC）来展示产品的实际使用场景。
社交证明的位置越高越好。
如有可能，每个主张都需搭配社交证明来验证其有效性。
顶部放置品牌Logo栏？可以考虑。

Every major section should be doing a job

每个主要板块都要有明确作用

  • Addressing a specific fear
  • Answering a specific objection
  • Building confidence to take the next step
  • 解决特定顾虑
  • 回答特定异议
  • 增强用户采取下一步行动的信心

CTA

CTA

Primary action button should be the single most visually prominent element on the page.
If 2 put main on left with more accent.
Each call to action should support and be relevant to the section in which it's placed instead of just using stock words like "Get Started" or "Buy Now" or whatever.
Structure sections so that clicking the CTA feels like the most natural next step. It's not about forcing them into clicking the CTA. It's about removing all the friction.
主行动按钮应是页面上视觉最突出的元素。
如果有2个按钮，将主按钮放在左侧，并使用更显眼的强调样式。
每个CTA都应与其所在板块相关并提供支持，而非使用「开始使用」「立即购买」等通用话术。
合理组织板块结构，让点击CTA成为最自然的下一步。这不是强迫用户点击，而是消除所有操作阻力。

Animation

动画

Does the animation serve the experience or is it the experience - micro interactions are better.
Showing off is worse.
动画是服务于体验，还是本身就是体验？微交互更佳。
炫技式的动画效果不可取。

Mobile

移动端适配

  • No side by side layout
  • No hover
  • Navigation needs to collapse for a thumb
  • Touch targets need to be large enough for average sized thumbs
  • 不要使用并排布局
  • 不要依赖悬停效果
  • 导航需折叠为适合拇指操作的形式
  • 触摸目标需足够大，以适配普通尺寸的拇指

The key thing

核心原则

Don't ask what do I want it to look like, ask what do I need it to do.
Answer the 3 objections visitors have before they buy.
Any design decision should start with a question. Does this help the right person take the right action? That's the key thing.
Every element needs to have a job and every element needs to do that job well. That's the key thing for design.
When the build is done, verify with the 
landing-audit
skill.
不要问「我想要它看起来是什么样」，而要问「它需要实现什么功能」。
在用户购买前，先回答他们的3个异议。
任何设计决策都应始于一个问题：这是否有助于目标用户采取正确行动？这是核心原则。
每个元素都要有明确的职责，且必须出色完成该职责。这是设计的核心原则。
构建完成后，请使用
landing-audit
工具进行验证。