Back to Details

design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design — Anti-Slop UI/UX

设计 — 反劣质UI/UX

You have taste. Generic AI design is the enemy — purple gradients, stock-photo heroes, rounded-everything, glassmorphism-for-no-reason. Build interfaces that look like a human designer made them.
你有自己的审美。通用AI设计是大敌——比如紫色渐变、库存图片首屏、全圆角设计、无意义的毛玻璃效果。要打造出看起来像人类设计师出品的界面。

The Anti-Slop Checklist

反劣质设计检查表

Before shipping any design, verify NONE of these are present:
AI Slop SignalFix
Purple/blue gradient backgroundsUse brand colors or neutral tones with purpose
Generic hero with "Welcome to [Product]"Lead with the user's first action or key metric
Rounded cards with drop shadows everywherePick one elevation system and be consistent
Stock illustration style (Humaaans, unDraw)Use real screenshots, data, or nothing
Glassmorphism / aurora effectsOnly if your brand demands it — otherwise, stop
47 different font sizesMax 4 sizes per page. Type scale or nothing.
Rainbow of accent colors1 primary, 1 secondary, 1 destructive. Done.
Decorative icons on every featureIcons should aid comprehension, not fill space
"Powered by AI" badges everywhereUsers don't care how it works, they care that it works
在发布任何设计之前，请确认以下问题均不存在：
AI劣质设计特征修复方案
紫色/蓝色渐变背景使用品牌色或有明确用途的中性色调
带有“欢迎来到[产品]”的通用首屏以用户的首个操作或关键指标作为核心
到处都是带阴影的圆角卡片选择一套统一的层级体系并保持一致
库存插画风格（如Humaaans、unDraw）使用真实截图、数据，或干脆不使用
毛玻璃/极光效果仅当品牌风格要求时使用——否则，请停止
47种不同的字体大小每页最多4种字号。要么使用规范的字体层级，要么不设置
彩虹般的强调色1种主色、1种辅助色、1种警示色。足够了。
每个功能都加装饰性图标图标应辅助理解，而非填充空白
到处都是“由AI驱动”的标识用户不关心它的工作原理，只关心它能否正常工作

Design Principles

设计原则

  1. Clarity over decoration. Every element earns its pixels. If it doesn't help the user, remove it.
  2. Hierarchy is everything. One primary action per screen. One thing the eye hits first.
  3. Density where it matters. Dashboards should be dense. Onboarding should breathe. Know the difference.
  4. Consistency beats novelty. Reuse patterns. Surprise is a bug in UI.
  5. Design for real data. Names are 3-40 chars. Tables have 200 rows. Empty states exist.
  1. 清晰优先于装饰。每个元素都要有存在的价值。如果对用户没有帮助，就移除它。
  2. 层级是核心。每个屏幕只有一个主要操作。要有一个第一眼就能注意到的核心元素。
  3. 密度要分场景。仪表盘应信息密集，引导页应简洁透气。要区分不同场景。
  4. 一致性胜过新颖性。复用设计模式。意外的设计在UI中是BUG。
  5. 为真实数据设计。名称长度在3-40字符之间。表格可能有200行。要考虑空状态。

Color

色彩规范

Background:   neutral-50 or white (light) / neutral-900+ (dark)
Surface:      neutral-100 / neutral-800
Border:       neutral-200 / neutral-700
Text primary: neutral-900 / neutral-50
Text secondary: neutral-500 / neutral-400
Primary:      ONE saturated color from your brand
Destructive:  red-600
Success:      green-600
Warning:      amber-500
Rules:
  • Never use color as the only indicator — add icons or text for accessibility
  • Test contrast ratios: 4.5:1 minimum for text (WCAG AA)
  • Dark mode is not "invert everything" — it's a separate intentional palette
Background:   neutral-50 or white (light) / neutral-900+ (dark)
Surface:      neutral-100 / neutral-800
Border:       neutral-200 / neutral-700
Text primary: neutral-900 / neutral-50
Text secondary: neutral-500 / neutral-400
Primary:      ONE saturated color from your brand
Destructive:  red-600
Success:      green-600
Warning:      amber-500
规则：
  • 绝不能仅用颜色作为唯一标识——要添加图标或文字以确保无障碍性
  • 测试对比度：文本的最小对比度需达到4.5:1（符合WCAG AA标准）
  • 深色模式不是“反转所有颜色”——它是一套独立的、经过设计的配色方案

Typography

排版规范

RoleSizeWeight
Page title24-30px600-700
Section heading18-20px600
Body14-16px400
Caption / helper12-13px400
  • One typeface for UI (Inter, system-ui, or your brand font)
  • Second typeface only for marketing pages, if at all
  • Line height: 1.5 for body, 1.2 for headings
角色字号字重
页面标题24-30px600-700
章节标题18-20px600
正文14-16px400
说明/辅助文字12-13px400
  • UI使用一种字体（如Inter、system-ui或品牌字体）
  • 仅在营销页面可考虑使用第二种字体（如有必要）
  • 行高：正文为1.5，标题为1.2

Layout

布局规范

  • Max content width: 1280px for apps, 720px for text-heavy pages
  • Spacing scale: 4px base (4, 8, 12, 16, 24, 32, 48, 64)
  • Grid: 12-column for dashboards, single-column for forms
  • Mobile-first: Design the constrained version first, then expand
  • 最大内容宽度：应用类为1280px，文本密集型页面为720px
  • 间距基准：4px为基础单位（4、8、12、16、24、32、48、64）
  • 网格：仪表盘使用12列网格，表单使用单列网格
  • 移动端优先：先设计受限的移动端版本，再扩展到桌面端

Component Patterns

组件模式

Every component needs:

每个组件都需要包含以下状态：

  1. Default state — normal appearance
  2. Hover/focus — interactive feedback
  3. Loading — skeleton or spinner
  4. Empty — helpful message + action
  5. Error — what went wrong + how to fix
  6. Disabled — visually muted, cursor not-allowed
  1. 默认状态——正常外观
  2. 悬停/聚焦状态——交互反馈
  3. 加载状态——骨架屏或加载动画
  4. 空状态——有帮助的提示信息+操作选项
  5. 错误状态——说明问题所在+修复方法
  6. 禁用状态——视觉上弱化，光标显示为不可用

Navigation

导航

  • Top nav for < 5 items
  • Sidebar for 5+ items or deep hierarchy
  • Never both simultaneously (pick one)
  • 少于5个导航项时使用顶部导航
  • 5个及以上导航项或层级较深时使用侧边栏导航
  • 绝不同时使用两者（二选一）

Forms

表单

  • Labels above inputs (not inside as placeholder)
  • Inline validation on blur, not on every keystroke
  • Error messages next to the field, not in a toast
  • Primary action on the right (or full-width on mobile)
  • 标签位于输入框上方（而非作为占位符放在输入框内）
  • 输入框失焦时进行内联验证，而非每输入一个字符就验证
  • 错误信息放在字段旁边，而非用提示框展示
  • 主要操作按钮在右侧（移动端为全屏宽度）

Review Checklist

审查清单

When reviewing any UI:
  1. Squint test — Can you tell what's important with blurred vision?
  2. 5-second test — Can a new user identify the primary action in 5 seconds?
  3. Real data test — Does it work with long names, empty states, 500 items?
  4. Accessibility — Keyboard navigable? Screen reader labels? Contrast ratios?
  5. Slop check — Would this look at home in a generic AI template gallery? If yes, redesign.
审查任何UI时，请检查：
  1. 眯眼测试——模糊视线后，你还能分辨出核心内容吗？
  2. 5秒测试——新用户能在5秒内识别出主要操作吗？
  3. 真实数据测试——它能适配长名称、空状态、500条数据的情况吗？
  4. 无障碍性——支持键盘导航吗？有屏幕阅读器标签吗？对比度达标吗？
  5. 劣质设计检查——它看起来像是通用AI模板库里的作品吗？如果是，请重新设计。