ui-ux-polish

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Polish — Iterative Enhancement Workflow

UI/UX打磨——迭代式优化工作流

When to Use: This is for when your site/app already works and looks decent and you want to improve it. There's a different approach when it looks bad and needs a complete overhaul.

Key Insight: Something about asking for agreement from the model ("don't you agree?") somehow motivates it to polish things up better. Also, instructing it to separately think through desktop vs mobile leads to much better outcomes.

适用场景： 当你的网站/应用已经可以正常运行且外观尚可，想要进一步优化时使用。如果外观糟糕需要彻底重构，则需采用不同的方法。

核心洞察： 向模型寻求认同的表述（比如“你不觉得吗？”）似乎能更好地激励它进行打磨工作。另外，指示它分别针对桌面端与移动端进行思考，能带来更优的结果。

The Workflow

工作流

Overview

概述

App already works and looks decent
Run the polish prompt
Agent makes incremental improvements
Repeat many times (10+ iterations)
Each pass adds small improvements that compound

应用已可正常运行且外观尚可
运行打磨提示词
Agent做出增量式改进
重复多次（10+轮迭代）
每一轮的小改进会不断累积

Why Multiple Passes Work

多轮迭代有效的原因

Each time, it tries to make some incremental improvement, even if it's minor
These really add up after 10 iterations!
Multiple agents can work on this simultaneously
Cumulative effect is dramatic

每一次迭代都会尝试做出一些增量式改进，哪怕只是微小的变化
经过10轮迭代后，这些改进会产生质的飞跃！
可以同时让多个Agent参与这项工作
累积效果十分显著

THE EXACT PROMPT — UI/UX Polish

具体UI/UX打磨提示词

This prompt is used so frequently it's worth putting on a Stream Deck button:

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

这个提示词的使用频率极高，值得设置在Stream Deck按钮上：

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

Why This Prompt Works

该提示词有效的原因

1. Asks for Agreement

1. 寻求认同

The phrase "don't you agree?" engages the model's reasoning about whether improvements are possible, rather than just executing instructions.

“你不觉得吗？”这句话会引导模型思考是否存在改进空间，而不只是单纯执行指令。

2. Separates Desktop and Mobile

2. 区分桌面端与移动端

"carefully consider desktop UI/UX and mobile UI/UX separately...
hyper-optimize for both separately to play to the specifics of each modality"

This prevents the model from making compromises that work "okay" on both but great on neither.

"carefully consider desktop UI/UX and mobile UI/UX separately...
hyper-optimize for both separately to play to the specifics of each modality"

这避免了模型做出在两端都“还行”但都不优秀的妥协。

3. Sets High Standards

3. 设定高标准

References:

"world class"
"best practices like those used by Stripe"
"makes people gasp at how stunning and perfect it is"

These anchors push the model toward higher quality than generic "make it better" instructions.

参考了：

“世界级”
“Stripe采用的最佳实践”
“让人们惊叹于它在各方面的惊艳与完美”

这些定位会推动模型产出比通用的“做得更好”指令更高质量的结果。

4. Uses Ultrathink

4. 使用ultrathink

Extended thinking allows the model to:

Analyze the current state thoroughly
Consider multiple improvement options
Choose the highest-impact changes
Think through edge cases

深度思考模式允许模型：

全面分析当前状态
考虑多种改进方案
选择影响最大的变更
思考边缘情况

Best Models for This Task

适用于该任务的最佳模型

Model	Effectiveness
Claude Code + Opus 4.5	Excellent
Codex + GPT 5.2 (High/Extra-High reasoning)	Excellent
Gemini CLI	Good

模型	效果
Claude Code + Opus 4.5	优秀
Codex + GPT 5.2 (高/超高推理能力)	优秀
Gemini CLI	良好

Tech Stack Compatibility

技术栈兼容性

This prompt works with:

Next.js 16 + React 19 + Tailwind 4
Any modern web framework
Applications using Framer Motion or similar animation libraries
Pretty much anything—it's generic enough to adapt

该提示词适用于：

Next.js 16 + React 19 + Tailwind 4
任何现代Web框架
使用Framer Motion或类似动画库的应用
几乎所有场景——它的通用性足以适配各类情况

Iteration Protocol

迭代协议

Single Agent

单Agent模式

undefined

undefined

First pass

第一轮迭代

[Run the UI/UX polish prompt]

[运行UI/UX打磨提示词]

Review changes

审核变更

[Agent makes improvements]

[Agent做出改进]

Second pass

第二轮迭代

[Run the same prompt again]

[再次运行相同的提示词]

Repeat 10+ times until changes become minimal

重复10+次，直到变更变得微乎其微

undefined

undefined

Multiple Agents

多Agent模式

You can have more than one agent working on UI/UX polish simultaneously:

They'll focus on different areas
Use file reservations to avoid conflicts
Compound improvements faster

你可以让多个Agent同时进行UI/UX打磨工作：

它们会专注于不同的领域
使用文件预留机制避免冲突
更快地累积改进效果

When to Use vs. When NOT to Use

适用与不适用场景

USE This Prompt When:

适用场景：

App works correctly
Basic styling is in place
You want to elevate from "decent" to "world-class"
Ready for iterative refinement
Want to optimize for both desktop and mobile

应用可正常运行
基础样式已到位
想要从“尚可”提升至“世界级”
准备好进行迭代式优化
想要同时优化桌面端与移动端

DON'T Use This Prompt When:

不适用场景：

App is broken or buggy (fix bugs first)
Styling is fundamentally wrong (need complete overhaul)
No basic design system in place
Starting from scratch

For complete overhauls, use a different approach focused on establishing a design system and component library first.

应用存在故障或漏洞（先修复漏洞）
样式存在根本性问题（需要彻底重构）
未建立基础设计系统
从零开始构建

对于彻底重构，应先采用专注于建立设计系统与组件库的方法。

What the Model Typically Improves

模型通常会优化的内容

Visual Polish

视觉打磨

Spacing and padding consistency
Typography hierarchy
Color contrast and accessibility
Shadow and depth effects
Border radius consistency
Hover/focus states

间距与内边距一致性
排版层级
色彩对比度与可访问性
阴影与深度效果
圆角一致性
悬停/聚焦状态

Interaction Design

交互设计

Button feedback
Loading states
Transitions and animations
Error state handling
Empty state design

按钮反馈
加载状态
过渡与动画
错误状态处理
空状态设计

Mobile Optimization

移动端优化

Touch target sizes
Responsive breakpoints
Mobile-specific navigation
Gesture support
Performance on mobile devices

触摸目标尺寸
响应式断点
移动端专属导航
手势支持
移动端设备性能

Desktop Optimization

桌面端优化

Keyboard navigation
Hover states
Multi-column layouts
Sidebar navigation
Power user shortcuts

键盘导航
悬停状态
多列布局
侧边栏导航
高级用户快捷方式

Tracking Progress

进度跟踪

After each iteration, you might notice:

Subtle shadow improvements
Better spacing rhythm
More consistent typography
Smoother animations
Better responsive behavior

These small changes compound. An app after 10 passes looks dramatically better than after 1 pass.

每轮迭代后，你可能会注意到：

阴影效果的细微改进
更协调的间距节奏
更一致的排版
更流畅的动画
更优的响应式表现

这些小变化会不断累积。经过10轮迭代后的应用，外观会比第一轮后有显著提升。

Integration with Beads

与Beads的集成

For systematic UI/UX work, create beads:

bash

bd create "Polish homepage UI/UX for desktop" -t enhancement -p 2
bd create "Polish homepage UI/UX for mobile" -t enhancement -p 2
bd create "Polish dashboard UI/UX for desktop" -t enhancement -p 2
bd create "Polish dashboard UI/UX for mobile" -t enhancement -p 2

This lets agents work on UI/UX polish as part of the normal bead workflow.

为了系统化地开展UI/UX工作，可创建beads：

bash

bd create "Polish homepage UI/UX for desktop" -t enhancement -p 2
bd create "Polish homepage UI/UX for mobile" -t enhancement -p 2
bd create "Polish dashboard UI/UX for desktop" -t enhancement -p 2
bd create "Polish dashboard UI/UX for mobile" -t enhancement -p 2

这让Agent可以在常规的beads工作流中开展UI/UX打磨工作。

Complete Prompt Reference

完整提示词参考

Main Polish Prompt

主打磨提示词

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

Alternative: General Scrutiny (from agent-swarm-workflow)

替代方案：全面审查（来自agent-swarm-workflow）

Great, now I want you to super carefully scrutinize every aspect of the application workflow and implementation and look for things that just seem sub-optimal or even wrong/mistaken to you, things that could very obviously be improved from a user-friendliness and intuitiveness standpoint, places where our UI/UX could be improved and polished to be slicker, more visually appealing, and more premium feeling and just ultra high quality, like Stripe-level apps.

Great, now I want you to super carefully scrutinize every aspect of the application workflow and implementation and look for things that just seem sub-optimal or even wrong/mistaken to you, things that could very obviously be improved from a user-friendliness and intuitiveness standpoint, places where our UI/UX could be improved and polished to be slicker, more visually appealing, and more premium feeling and just ultra high quality, like Stripe-level apps.

Tips

小贴士

Don't skip iterations — Even when changes seem small, keep going
Review changes — Make sure the model isn't breaking things
Test on real devices — Desktop browser != mobile experience
Consider accessibility — WCAG compliance matters
Keep performance in mind — Pretty but slow is bad UX

不要跳过迭代——即使变化看起来很小，也要坚持下去
审核变更——确保模型没有破坏现有功能
在真实设备上测试——桌面浏览器≠移动端体验
考虑可访问性——WCAG合规很重要
兼顾性能——美观但缓慢的体验是糟糕的UX