mcpField
U
ui-ux-polish

ui-ux-polish

github.com/dicklesworthstone设计与 UI73234 次安装8 周前更新
代码仓库

关于 ui-ux-polish

ui-ux-polish 为编码 Agent 提供迭代式提示词，用于改进已能运行且已有基本样式的应用。它强调分别检查桌面端和移动端，并通过多轮小幅调整逐步完善，而非全面重做。

主要功能

  1. 01用于渐进式 UI/UX 调整的提示词
  2. 02分别考虑桌面端与移动端
  3. 03可重复执行的多轮流程
  4. 04并行 Agent 协作指导
  5. 05说明不适用的情形

适用场景

  1. 01润色可运行应用的视觉设计
  2. 02改善桌面端和移动端的响应体验
  3. 03用 Beads 组织 UI/UX 任务

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations --skill ui-ux-polish

安装后在 Claude Code 中输入/ui-ux-polish确认已加载。

详细介绍

UI/UX 润色 — 迭代式增强工作流

适用场景： 适用于网站/应用已经能正常运行、外观也不错，而你希望进一步改进的情况。如果外观很糟糕，需要彻底改造，则应采用另一种方法。

关键见解： 询问模型是否认同（“你不觉得吗？”）似乎能激励它更好地完善设计。此外，分别要求它考虑桌面端和移动端，会带来好得多的结果。

工作流

概览
  1. 应用已经能正常运行，外观也不错
  2. 运行润色提示词
  3. Agent 逐步改进
  4. 多次重复（10 次以上）
  5. 每轮都进行小幅改进，效果逐渐累积
多轮迭代为何有效
  • 每次都会尝试进行一些渐进式改进，即使幅度很小
  • 迭代 10 轮后，效果真的会累积起来！
  • 多个 Agent 可以同时开展工作
  • 累积效果十分显著

完整提示词 — UI/UX 润色

这个提示词使用得非常频繁，值得设置成 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.

此提示词为何有效

1. 征求认同

“你不觉得吗？”这句话会让模型思考是否还有改进空间，而不只是照做。

2. 分别考虑桌面端和移动端
"carefully consider desktop UI/UX and mobile UI/UX separately...
hyper-optimize for both separately to play to the specifics of each modality"

这样可以避免模型为了让两端都“还行”而妥协，结果两端都不出色。

3. 设定高标准

参考标准：

  • “世界一流”
  • “Stripe 等公司采用的最佳实践”
  • “令人惊叹、完美得让人赞叹”

这些标杆会引导模型追求比笼统的“做得更好”更高的品质。

4. 使用 Ultrathink

扩展思考可以让模型：

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

执行此任务的最佳模型

模型效果
Claude Code + Opus 4.5优秀
Codex + GPT 5.2（高/超高推理）优秀
Gemini CLI良好

技术栈兼容性

此提示词适用于：

  • Next.js 16 + React 19 + Tailwind 4
  • 任何现代 Web 框架
  • 使用 Framer Motion 或类似动画库的应用
  • 几乎任何项目——它足够通用，可以灵活适配

迭代流程

单个 Agent
# First pass
[Run the UI/UX polish prompt]

# Review changes
[Agent makes improvements]

# Second pass
[Run the same prompt again]

# Repeat 10+ times until changes become minimal
多个 Agent

可以让多个 Agent 同时进行 UI/UX 润色：

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

适用与不适用场景

适用于以下情况：
  • 应用运行正常
  • 已具备基本样式
  • 希望从“还不错”提升到“世界一流”
  • 准备好进行迭代式优化
  • 希望同时优化桌面端和移动端
不适用于以下情况：
  • 应用已损坏或存在错误（先修复错误）
  • 样式从根本上不合理（需要彻底改造）
  • 尚未建立基本设计系统
  • 从零开始

如需彻底改造，请采用另一种方法，先建立设计系统和组件库。

模型通常会改进的方面

视觉润色
  • 间距和内边距的一致性
  • 排版层级
  • 色彩对比度和无障碍性
  • 阴影和纵深效果
  • 边框圆角的一致性
  • 悬停/焦点状态
交互设计
  • 按钮反馈
  • 加载状态
  • 过渡和动画
  • 错误状态处理
  • 空状态设计
移动端优化
  • 触控目标尺寸
  • 响应式断点
  • 移动端专用导航
  • 手势支持
  • 移动设备上的性能
桌面端优化
  • 键盘导航
  • 悬停状态
  • 多列布局
  • 侧边栏导航
  • 高级用户快捷键

跟踪进度

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

  • 阴影变得更细腻
  • 间距节奏更好
  • 排版更加统一
  • 动画更加流畅
  • 响应式表现更好

这些小改进会不断累积。经过 10 轮打磨的应用，效果会远胜于只打磨 1 轮的应用。

与 Beads 集成

如需系统地改进 UI/UX，请创建 beads：

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

这样，Agent 就能将 UI/UX 润色纳入常规的 bead 工作流。

完整提示词参考

主要润色提示词
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.
备选：常规审查（来自 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.

提示

  1. 不要跳过迭代 — 即使改动看起来很小，也要继续迭代
  2. 检查改动 — 确保模型没有破坏现有功能
  3. 在真实设备上测试 — 桌面浏览器 ≠ 移动端体验
  4. 考虑无障碍性 — WCAG 合规性很重要
  5. 牢记性能 — 好看但运行缓慢会导致糟糕的用户体验

评论

支持 Markdown