Back to Details

i-polish

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

MANDATORY PREPARATION

强制准备工作

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship).
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
调用 /impeccable —— 它包含设计原则、反模式以及上下文收集协议。在继续操作前请遵循该协议——如果还没有设计上下文，你必须先运行 /impeccable teach。此外还要收集：质量标准（MVP vs 旗舰级）。
执行细致的最终检查，找出所有能拉开良好与优秀作品差距、区分“可上线”和“打磨完成”的小细节。

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. 明确打磨范围：
    • 视觉不一致问题
    • 间距和对齐问题
    • 交互状态缺失
    • 文案不一致
    • 边界 case 和错误状态
    • 加载和过渡流畅度
重要提醒：打磨是最后一步，不是第一步。不要打磨功能还没完成的作品。

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色度）
  • 彩色背景上的文字：永远不要在彩色背景上放灰色文字——使用该颜色的同色系深浅变体或透明度调整

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.
每个可交互元素都需要包含所有状态：
  • 默认态：静止状态
  • 悬浮态： subtle 的反馈（颜色、缩放、阴影）
  • 焦点态：键盘焦点指示器（永远不要不做替代就移除焦点态）
  • 激活态：点击/触摸反馈
  • 禁用态：清晰表明不可交互
  • 加载态：异步操作的反馈
  • 错误态：校验或错误状态
  • 成功态：操作成功完成提示
缺失状态会造成用户困惑和体验破碎。

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

边界 case 与错误状态

  • 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
  • 移除console日志：生产环境不要有调试日志
  • 移除注释代码：清理废弃代码
  • 移除未使用的导入：清理未使用的依赖
  • 命名统一：变量和函数遵循命名规范
  • 类型安全：没有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标准
  • 键盘导航正常
  • 焦点指示器可见
  • 没有console错误或警告
  • 加载时无布局偏移
  • 在所有支持的浏览器中正常运行
  • 尊重低动效偏好设置
  • 代码整洁（没有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.
标记为完成前：
  • 亲自使用：真实和功能交互测试
  • 在真实设备上测试：不要只用浏览器DevTools
  • 找其他人review：新鲜的眼睛能发现你忽略的问题
  • 和设计稿对比：符合预期设计
  • 检查所有状态：不要只测试 happy path
记住：你有极致的细节敏感度和出色的审美。打磨到用起来毫无负担、看起来处处用心、运行起来毫无问题为止。在细节上下功夫——它们至关重要。