Back to Details

impeccable-style

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Impeccable Style

无可挑剔的视觉风格

Polish the details that separate good UI from great UI.
打磨区分普通UI与卓越UI的关键细节。

Core Principle

核心原则

Great design is invisible. Users notice when it's wrong, not when it's right.
This skill finds and fixes the small details that break the illusion.
优秀的设计是无形的。用户只会注意到设计中的问题，而非其优点。
本技能负责查找并修复那些破坏设计连贯性的微小细节。

When to Use

适用场景

  • Final polish pass before release
  • UI feels "off" but can't pinpoint why
  • Consistency audit across components
  • Elevating MVP to production quality
  • Reviewing designs for attention to detail
  • 发布前的最终细节打磨阶段
  • UI感觉“不对劲”但无法明确原因时
  • 跨组件的一致性审核
  • 将MVP升级至生产级质量
  • 评审设计时关注细节把控

The Polish Checklist

细节打磨检查清单

Spacing & Alignment

间距与对齐

css
/* BAD: Inconsistent spacing */
.card { padding: 12px; }
.modal { padding: 15px; }
.panel { padding: 10px; }

/* GOOD: Spacing scale */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
Audit Questions:
  • All spacing uses consistent scale (4px, 8px, 16px, etc.)?
  • Elements align to invisible grid?
  • Margins between sections are consistent?
  • Padding inside containers is consistent?
css
/* BAD: Inconsistent spacing */
.card { padding: 12px; }
.modal { padding: 15px; }
.panel { padding: 10px; }

/* GOOD: Spacing scale */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
审计问题：
  • 所有间距是否遵循统一的比例（4px、8px、16px等）？
  • 元素是否与隐形网格对齐？
  • 各区块间的边距是否一致？
  • 容器内的内边距是否一致？

Typography

排版

css
/* BAD: Random font sizes */
h1 { font-size: 28px; }
h2 { font-size: 19px; }
p { font-size: 15px; }

/* GOOD: Type scale */
--text-xs: 0.75rem;   /* 12px */
--text-sm: 0.875rem;  /* 14px */
--text-base: 1rem;    /* 16px */
--text-lg: 1.125rem;  /* 18px */
--text-xl: 1.25rem;   /* 20px */
--text-2xl: 1.5rem;   /* 24px */
Audit Questions:
  • Font sizes follow a scale?
  • Line heights are comfortable (1.4-1.6 for body)?
  • Headings have proper hierarchy?
  • Text is readable (contrast ratio ≥ 4.5:1)?
css
/* BAD: Random font sizes */
h1 { font-size: 28px; }
h2 { font-size: 19px; }
p { font-size: 15px; }

/* GOOD: Type scale */
--text-xs: 0.75rem;   /* 12px */
--text-sm: 0.875rem;  /* 14px */
--text-base: 1rem;    /* 16px */
--text-lg: 1.125rem;  /* 18px */
--text-xl: 1.25rem;   /* 20px */
--text-2xl: 1.5rem;   /* 24px */
审计问题：
  • 字体大小是否遵循统一比例？
  • 行高是否舒适（正文为1.4-1.6）？
  • 标题是否具备清晰的层级结构？
  • 文本是否可读（对比度≥4.5:1）？

Colors

色彩

Audit Questions:
  • Using defined color palette only?
  • Hover states are consistent (darker/lighter by same %)?
  • Disabled states are consistent (opacity or gray)?
  • Focus states are visible (not just color)?
  • Error/success/warning colors are consistent?
审计问题：
  • 是否仅使用已定义的调色板？
  • 悬停状态是否一致（按相同比例加深/变浅）？
  • 禁用状态是否一致（通过透明度或灰色调实现）？
  • 焦点状态是否可见（不只是颜色变化）？
  • 错误/成功/警告色彩是否一致？

Micro-interactions

微交互

css
/* BAD: No transition */
.button:hover { background: blue; }

/* GOOD: Smooth transition */
.button {
  transition: all 150ms ease-out;
}
.button:hover {
  background: blue;
  transform: translateY(-1px);
}
Audit Questions:
  • Buttons have hover/active states?
  • Transitions are 150-300ms (not jarring)?
  • Loading states exist for async actions?
  • Focus states work for keyboard navigation?
css
/* BAD: No transition */
.button:hover { background: blue; }

/* GOOD: Smooth transition */
.button {
  transition: all 150ms ease-out;
}
.button:hover {
  background: blue;
  transform: translateY(-1px);
}
审计问题：
  • 按钮是否具备悬停/激活状态？
  • 过渡时长是否为150-300ms（不会显得突兀）？
  • 异步操作是否有加载状态？
  • 焦点状态是否支持键盘导航？

Icons & Images

图标与图片

Audit Questions:
  • Icons are same style (outlined vs filled)?
  • Icons are same size in similar contexts?
  • Images have proper aspect ratios?
  • Placeholder/loading states for images?
  • Alt text for accessibility?
审计问题：
  • 图标风格是否统一（轮廓线/填充）？
  • 相似场景下的图标尺寸是否一致？
  • 图片是否具备合适的宽高比？
  • 图片是否有占位/加载状态？
  • 是否添加了用于无障碍访问的替代文本？

Border Radius

圆角

css
/* BAD: Inconsistent */
.button { border-radius: 4px; }
.card { border-radius: 8px; }
.input { border-radius: 6px; }

/* GOOD: Radius scale */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
css
/* BAD: Inconsistent */
.button { border-radius: 4px; }
.card { border-radius: 8px; }
.input { border-radius: 6px; }

/* GOOD: Radius scale */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;

Shadows

阴影

css
/* GOOD: Shadow scale for elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
css
/* GOOD: Shadow scale for elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);

Common Polish Issues

常见细节问题

IssueFix
Buttons different heightsStandardize to 32/40/48px
Text touches edgesAdd padding (min 16px)
Modal too wideMax-width: 500px for forms
Icons misalignedVertical-align or flexbox
Truncated texttext-overflow: ellipsis
Flash of unstyled contentProper loading states
问题修复方案
按钮高度不一致统一为32/40/48px
文本紧贴边缘添加内边距（最小16px）
弹窗过宽表单类弹窗最大宽度设为500px
图标对齐错位使用垂直对齐或Flexbox
文本被截断使用text-overflow: ellipsis
未样式内容闪现设置合适的加载状态

Visual Audit Process

视觉审计流程

  1. Squint Test: Blur vision - do elements have clear hierarchy?
  2. Grid Check: Does everything align to an invisible grid?
  3. Color Count: Are you using <5 colors consistently?
  4. Spacing Scan: Is spacing predictable and rhythmic?
  5. Interactive Check: Do all interactive elements feel responsive?
  1. 眯眼测试：模糊视线——元素是否具备清晰的层级？
  2. 网格检查：所有元素是否与隐形网格对齐？
  3. 色彩统计：是否仅使用≤5种色彩且保持一致？
  4. 间距扫描：间距是否可预测且富有节奏感？
  5. 交互检查：所有交互元素是否具备响应感？

Before/After Examples

前后对比示例

Spacing

间距

Before: [Logo]    [Nav]        [Button]
After:  [Logo] [Nav] [Button]  (consistent gaps)
Before: [Logo]    [Nav]        [Button]
After:  [Logo] [Nav] [Button]  (consistent gaps)

Alignment

对齐

Before: Text starts at random x positions
After:  All text aligns to same left edge
Before: Text starts at random x positions
After:  All text aligns to same left edge

Transitions

过渡

Before: Instant color change on hover
After:  150ms ease-out transition
Before: Instant color change on hover
After:  150ms ease-out transition

Polish Priority Order

细节打磨优先级

  1. Spacing - Most common issue, biggest impact
  2. Typography - Readable text is non-negotiable
  3. Colors - Consistency builds trust
  4. Interactions - Makes UI feel responsive
  5. Details - Border radius, shadows, icons
  1. 间距——最常见问题，影响最大
  2. 排版——可读文本是硬性要求
  3. 色彩——一致性建立信任
  4. 交互——让UI具备响应感
  5. 细节——圆角、阴影、图标