正在加载陈远的个人网站

Claude Design 搭配 Mobbin MCP 的 UI 重设计提示词

Staltz 分享截图重设计提示词，用 Mobbin MCP 对标顶级案例做对抗式评审，称 UI 设计八成已被解决。

提示词UI 重设计设计评审极简设计MCP 工具AI 应用

原始内容

André Staltz@andrestaltz

This works SOOO well. Prompt: "Here a screenshot of my app's current UI. I need you to redesign it for the highest possible quality design. /design:design-critique Compare your designs adversarially against top examples on Mobbin (use MCP) Aim for AAA minimalist, elegant, sharp, simple, beautiful, perfect"

I think UI design is 80% solved with: Claude Design plus Mobbin MCP ("compare your design against top examples found on Mobbin") plus a bit of good taste and aggressive deletes.

— @andrestaltz（André Staltz）的引用原文

中文译文

机器翻译，保留原文供核对。

效果真是太太太好了。 提示词：“这是我应用当前 UI 的截图。我需要你把它重设计成尽可能最高质量的设计。/design:design-critique 把你的设计与 Mobbin 上的顶尖范例进行对抗式比较（使用 MCP） 目标是 AAA 级极简、优雅、锐利、简洁、美观、完美”

我认为 UI 设计已经解决了 80%：Claude Design 加上 Mobbin MCP（“把你的设计与 Mobbin 上找到的顶尖范例作比较”），再加一点好品味和激进的删减。

引用内容译文

深度解析

是什么：Staltz 分享的一条实战提示词与工作流：把应用当前 UI 截图交给 Claude Design，要求按最高质量重设计，并通过 Mobbin MCP 拉取顶级设计案例做对抗式评审，目标锁定「AAA 级极简、优雅、锐利、简单、完美」。他据此断言 UI 设计已被解决八成。

核心方法：这条提示词的巧思在于引入外部基准——不是让模型自由发挥，而是强制其与 Mobbin 上的头部案例对抗比较，用人类策展的真实优质设计作为评审锚点，矫正模型自身审美的漂移；「aggressive deletes」则指向减法原则，靠删除冗余换取质感。

关键洞察：AI 设计的瓶颈往往不在生成能力，而在评判标准。把标杆案例库接成 MCP 工具，等于给模型装上「品味参照系」，形成生成—对标—修订的闭环；再加少量人类判断，即可逼近专业水准。这也是「提示词 + MCP + 好品味」这类组合式工作流的典型样本。

边界与风险：「80% 解决」是个人体感而非严格评估；流程明显偏向极简审美，大规模套用易导致界面同质化；效果依赖截图质量、Mobbin 覆盖度与 MCP 可用性；本次无实际产出图佐证，落地前需自行验证。

精选追评与案例

  1. André Staltz@andrestaltz · 查看追评

    原作者补充前提条件，避免读者照抄提示词后无法复现。

    This won't work as is, you'll need the Design plugin and Mobbin MCP, and a Mobbin account.

    中文译文 · 机器翻译

    这样直接照做是不行的，你需要 Design 插件和 Mobbin MCP，还需要一个 Mobbin 账号。

  2. Gian Maurice@gianmauric · 查看追评

    补充落地约束，让重设计结果可实际实现。

    @andrestaltz Worth giving it your design constraints too. Tell it your real components, fonts and what SwiftUI can do natively, or you get a redesign that looks great but takes forever to rebuild.

    中文译文 · 机器翻译

    值得把你的设计约束也告诉它。告诉它你真实使用的组件、字体，以及 SwiftUI 原生能做到什么，否则你得到的设计很好看，但重建起来要花很久。

  3. Sheraz@shazrts · 查看追评

    指出整站重设计的边界：缺少用户与问题上下文。

    @andrestaltz This works well for specific components or well-defined flows. But redesigning an entire UI needs context around users and their problems. You could end up with a beautiful UI, but knowing what to prioritize, emphasize, simplify or remove is where the real design work lies.

    中文译文 · 机器翻译

    这对具体组件或定义清晰的流程效果不错。但重设计整个 UI 需要关于用户及其问题的上下文。你可能得到一个漂亮的 UI，但知道该优先什么、强调什么、简化或删除什么，才是真正设计工作所在。

  4. E_genius@yevloop · 查看追评

    提醒同质化风险，是该方法的重要反面检验。

    @andrestaltz ok but did it keep ur actual brand or did everything turn into the same clean gray saas look. thats my problem with every AI redesign

    中文译文 · 机器翻译

    行吧，但它保留了你真实的品牌，还是全都变成了同一种干净的灰色 SaaS 风？这是我用 AI 做重设计时最大的问题。

  5. Hexabl0b@hexablob · 查看追评

    可复用的提示词补充，补上无障碍与键盘可用性。

    @andrestaltz I'd add "complete the form using only the keyboard" to that prompt, because "perfect" is doing a lot of work if you still need a mouse to submit it.

    中文译文 · 机器翻译

    我会在这个提示词里加上“只用键盘完成表单填写”，因为如果提交还需要鼠标，“完美”这个词就承担了太多含义了。