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:
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?)
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.
明确当前状态和目标：
完整性检查：
功能是否已经全部完成？
是否有需要保留的已知问题（用TODO标记）？
质量标准是什么？（MVP 还是旗舰功能？）
上线时间是什么时候？（有多少时间可以用于打磨？）
明确打磨范围：
视觉不一致问题
间距和对齐问题
交互状态缺失
文案不一致
边界 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
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.