Back to Details

polish

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
First: Use the frontend-design skill for design principles and anti-patterns.
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
第一步：运用frontend-design技能掌握设计原则与反模式。
进行细致的最终检查，找出所有区分普通成果与卓越成果的细微细节，也就是完成态与精修态的差距。

Pre-Polish Assessment

打磨前评估

Understand the current state and goals:
  1. Review completeness:
    • Is it functionally complete?
    • Are there known issues to preserve (mark with TODOs)?
    • What's the quality bar? (MVP vs flagship feature?)
    • When does it ship? (How much time for polish?)
  2. Identify polish areas:
    • Visual inconsistencies
    • Spacing and alignment issues
    • Interaction state gaps
    • Copy inconsistencies
    • Edge cases and error states
    • Loading and transition smoothness
CRITICAL: Polish is the last step, not the first. Don't polish work that's not functionally complete.
明确当前状态与目标：
  1. 检查完整性：
    • 功能是否完整？
    • 是否有需要保留的已知问题（用TODO标记）？
    • 质量标准是什么？（MVP还是旗舰功能？）
    • 上线时间是什么时候？（有多少时间用于打磨？）
  2. 确定打磨方向：
    • 视觉不一致问题
    • 间距与对齐问题
    • 交互状态缺失
    • 文案不一致
    • 边缘情况与错误状态
    • 加载与过渡流畅度
关键提示：打磨是最后一步，而非第一步。不要对功能未完成的成果进行打磨。

Polish Systematically

系统化打磨

Work through these dimensions methodically:
按以下维度有序开展工作：

Visual Alignment & Spacing

视觉对齐与间距

  • Pixel-perfect alignment: Everything lines up to grid
  • Consistent spacing: All gaps use spacing scale (no random 13px gaps)
  • Optical alignment: Adjust for visual weight (icons may need offset for optical centering)
  • Responsive consistency: Spacing and alignment work at all breakpoints
  • Grid adherence: Elements snap to baseline grid
Check:
  • Enable grid overlay and verify alignment
  • Check spacing with browser inspector
  • Test at multiple viewport sizes
  • Look for elements that "feel" off
  • 像素级完美对齐：所有元素对齐网格
  • 间距一致性：所有间隙使用统一的间距规范（避免随机的13px间隙）
  • 视觉对齐调整：根据视觉重量进行调整（图标可能需要偏移以实现视觉居中）
  • 响应式一致性：间距与对齐在所有断点下均保持一致
  • 遵循网格规范：元素贴合基线网格
检查项：
  • 启用网格覆盖层并验证对齐情况
  • 使用浏览器检查工具核对间距
  • 在多种视口尺寸下测试
  • 留意视觉上“不协调”的元素

Typography Refinement

排版优化

  • Hierarchy consistency: Same elements use same sizes/weights throughout
  • Line length: 45-75 characters for body text
  • Line height: Appropriate for font size and context
  • Widows & orphans: No single words on last line
  • Hyphenation: Appropriate for language and column width
  • Kerning: Adjust letter spacing where needed (especially headlines)
  • Font loading: No FOUT/FOIT flashes
  • 层级一致性：相同元素在全局使用统一的尺寸/字重
  • 行长度：正文文本保持45-75字符
  • 行高：与字体大小和使用场景相匹配
  • 孤行控制：避免最后一行仅单个单词
  • 连字符使用：根据语言与列宽合理使用
  • 字距调整：必要时调整字母间距（尤其是标题）
  • 字体加载：避免FOUT/FOIT闪烁问题

Color & Contrast

色彩与对比度

  • Contrast ratios: All text meets WCAG standards
  • Consistent token usage: No hard-coded colors, all use design tokens
  • Theme consistency: Works in all theme variants
  • Color meaning: Same colors mean same things throughout
  • Accessible focus: Focus indicators visible with sufficient contrast
  • Tinted neutrals: No pure gray or pure black—add subtle color tint (0.01 chroma)
  • Gray on color: Never put gray text on colored backgrounds—use a shade of that color or transparency
  • 对比度比例：所有文本符合WCAG标准
  • 颜色令牌一致性：不使用硬编码颜色，全部采用设计令牌
  • 主题一致性：在所有主题变体中均能正常显示
  • 颜色语义一致性：相同颜色在全局表达相同含义
  • 可访问的焦点状态：焦点指示器可见且对比度充足
  • 中性色微调：不使用纯灰色或纯黑色——添加细微色彩色调（0.01 chroma）
  • 彩色背景文本规则：切勿在彩色背景上使用灰色文本——使用背景色的衍生色或透明度调整

Interaction States

交互状态

Every interactive element needs all states:
  • Default: Resting state
  • Hover: Subtle feedback (color, scale, shadow)
  • Focus: Keyboard focus indicator (never remove without replacement)
  • Active: Click/tap feedback
  • Disabled: Clearly non-interactive
  • Loading: Async action feedback
  • Error: Validation or error state
  • Success: Successful completion
Missing states create confusion and broken experiences.
所有交互元素需具备完整状态：
  • 默认态：初始静止状态
  • 悬停态：细微反馈（颜色、缩放、阴影变化）
  • 焦点态：键盘焦点指示器（切勿移除，除非有替代方案）
  • 激活态：点击/触摸反馈
  • 禁用态：清晰表明不可交互
  • 加载态：异步操作反馈
  • 错误态：验证或错误提示状态
  • 成功态：操作成功确认状态
重要提示：缺失状态会导致用户困惑与体验断裂。

Micro-interactions & Transitions

微交互与过渡效果

  • Smooth transitions: All state changes animated appropriately (150-300ms)
  • Consistent easing: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
  • No jank: 60fps animations, only animate transform and opacity
  • Appropriate motion: Motion serves purpose, not decoration
  • Reduced motion: Respects 
    prefers-reduced-motion
  • 流畅过渡：所有状态变化均有合适的动画（150-300ms）
  • 缓动一致性：使用ease-out-quart/quint/expo实现自然减速效果。切勿使用弹跳或弹性动画——这类效果已过时。
  • 无卡顿：保持60fps动画，仅对transform与opacity属性做动画
  • 合理动效：动效需服务于功能，而非单纯装饰
  • 适配减少动效偏好：尊重
    prefers-reduced-motion
    设置

Content & Copy

内容与文案

  • Consistent terminology: Same things called same names throughout
  • Consistent capitalization: Title Case vs Sentence case applied consistently
  • Grammar & spelling: No typos
  • Appropriate length: Not too wordy, not too terse
  • Punctuation consistency: Periods on sentences, not on labels (unless all labels have them)
  • 术语一致性：相同事物在全局使用统一命名
  • 大小写一致性：统一使用标题大小写或句首大小写规则
  • 语法与拼写：无错别字
  • 篇幅适中：不过于冗长也不过于简洁
  • 标点一致性：句子使用句号，标签无需添加（除非所有标签都加）

Icons & Images

图标与图片

  • Consistent style: All icons from same family or matching style
  • Appropriate sizing: Icons sized consistently for context
  • Proper alignment: Icons align with adjacent text optically
  • Alt text: All images have descriptive alt text
  • Loading states: Images don't cause layout shift, proper aspect ratios
  • Retina support: 2x assets for high-DPI screens
  • 风格一致性：所有图标来自同一库或风格匹配
  • 尺寸合理：图标尺寸与使用场景一致
  • 对齐正确：图标与相邻文本视觉对齐
  • 替代文本：所有图片均有描述性alt文本
  • 加载状态：图片加载时不导致布局偏移，保持正确宽高比
  • 视网膜屏支持：为高DPI屏幕提供2倍图资源

Forms & Inputs

表单与输入框

  • Label consistency: All inputs properly labeled
  • Required indicators: Clear and consistent
  • Error messages: Helpful and consistent
  • Tab order: Logical keyboard navigation
  • Auto-focus: Appropriate (don't overuse)
  • Validation timing: Consistent (on blur vs on submit)
  • 标签一致性：所有输入框均有正确标签
  • 必填项标识清晰且统一
  • 错误提示：提示信息有用且统一
  • Tab键顺序：符合逻辑的键盘导航顺序
  • 自动聚焦：合理使用（切勿滥用）
  • 验证时机：保持一致（失焦时验证还是提交时验证）

Edge Cases & Error States

边缘情况与错误状态

  • Loading states: All async actions have loading feedback
  • Empty states: Helpful empty states, not just blank space
  • Error states: Clear error messages with recovery paths
  • Success states: Confirmation of successful actions
  • Long content: Handles very long names, descriptions, etc.
  • No content: Handles missing data gracefully
  • Offline: Appropriate offline handling (if applicable)
  • 加载状态：所有异步操作均有加载反馈
  • 空状态：提供有用的空状态提示，而非仅空白区域
  • 错误状态：清晰的错误提示与恢复路径
  • 成功状态：操作成功的确认提示
  • 长内容处理：支持超长名称、描述等内容的展示
  • 无数据处理：优雅处理缺失数据的情况
  • 离线处理：合理的离线应对（如适用）

Responsiveness

响应式适配

  • All breakpoints: Test mobile, tablet, desktop
  • Touch targets: 44x44px minimum on touch devices
  • Readable text: No text smaller than 14px on mobile
  • No horizontal scroll: Content fits viewport
  • Appropriate reflow: Content adapts logically
  • 全断点覆盖：测试移动端、平板端、桌面端
  • 触摸目标：触摸设备上最小为44x44px
  • 文本可读性：移动端文本不小于14px
  • 无横向滚动：内容适配视口宽度
  • 合理重排：内容根据屏幕尺寸合理适配

Performance

性能优化

  • Fast initial load: Optimize critical path
  • No layout shift: Elements don't jump after load (CLS)
  • Smooth interactions: No lag or jank
  • Optimized images: Appropriate formats and sizes
  • Lazy loading: Off-screen content loads lazily
  • 首屏加载快：优化关键路径
  • 无布局偏移：加载完成后元素不跳动（CLS）
  • 交互流畅：无延迟或卡顿
  • 图片优化：使用合适的格式与尺寸
  • 懒加载：屏幕外内容延迟加载

Code Quality

代码质量

  • Remove console logs: No debug logging in production
  • Remove commented code: Clean up dead code
  • Remove unused imports: Clean up unused dependencies
  • Consistent naming: Variables and functions follow conventions
  • Type safety: No TypeScript 
    any
    or ignored errors
  • Accessibility: Proper ARIA labels and semantic HTML
  • 移除控制台日志：生产环境中无调试日志
  • 移除注释代码：清理无用代码
  • 移除未使用的导入：清理未使用的依赖
  • 命名一致性：变量与函数遵循命名规范
  • 类型安全：无TypeScript 
    any
    类型或忽略的错误
  • 可访问性：正确使用ARIA标签与语义化HTML

Polish Checklist

打磨检查清单

Go through systematically:
  • Visual alignment perfect at all breakpoints
  • Spacing uses design tokens consistently
  • Typography hierarchy consistent
  • All interactive states implemented
  • All transitions smooth (60fps)
  • Copy is consistent and polished
  • Icons are consistent and properly sized
  • All forms properly labeled and validated
  • Error states are helpful
  • Loading states are clear
  • Empty states are welcoming
  • Touch targets are 44x44px minimum
  • Contrast ratios meet WCAG AA
  • Keyboard navigation works
  • Focus indicators visible
  • No console errors or warnings
  • No layout shift on load
  • Works in all supported browsers
  • Respects reduced motion preference
  • Code is clean (no TODOs, console.logs, commented code)
IMPORTANT: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
NEVER:
  • Polish before it's functionally complete
  • Spend hours on polish if it ships in 30 minutes (triage)
  • Introduce bugs while polishing (test thoroughly)
  • Ignore systematic issues (if spacing is off everywhere, fix the system)
  • Perfect one thing while leaving others rough (consistent quality level)
按顺序逐一检查：
  • 所有断点下视觉对齐完美
  • 间距统一使用设计令牌
  • 排版层级一致
  • 所有交互状态均已实现
  • 所有过渡效果流畅（60fps）
  • 文案一致且精炼
  • 图标风格一致且尺寸合理
  • 所有表单均有正确标签与验证
  • 错误状态提示有用
  • 加载状态清晰
  • 空状态友好
  • 触摸目标最小为44x44px
  • 对比度符合WCAG AA标准
  • 键盘导航正常
  • 焦点指示器可见
  • 无控制台错误或警告
  • 加载时无布局偏移
  • 在所有支持的浏览器中正常运行
  • 尊重减少动效偏好设置
  • 代码整洁（无TODO、console.log、注释代码）
重要提示：打磨的核心在于细节。放大查看，眯眼观察，亲自使用。细节决定成败。
切勿：
  • 在功能未完成前进行打磨
  • 若30分钟后就要上线，却花费数小时打磨（需优先处理重点）
  • 打磨过程中引入bug（需充分测试）
  • 忽略系统性问题（若全局间距均有问题，应修复系统而非单个元素）
  • 过度优化某一处而忽略其他部分（保持统一的质量水平）

Final Verification

最终验证

Before marking as done:
  • Use it yourself: Actually interact with the feature
  • Test on real devices: Not just browser DevTools
  • Ask someone else to review: Fresh eyes catch things
  • Compare to design: Match intended design
  • Check all states: Don't just test happy path
Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
标记完成前需进行：
  • 亲自使用：实际与功能进行交互
  • 真实设备测试：不局限于浏览器开发者工具
  • 邀请他人评审：新鲜视角能发现问题
  • 与设计稿对比：匹配预期设计
  • 测试所有状态：切勿仅测试正常流程
记住：你具备无可挑剔的细节关注度与出色的审美能力。打磨至使用流畅、设计协调、功能完美。重视细节——它们至关重要。