1. 这套组合到底在折腾什么

定价卡片这个东西，做过前端或者产品页的人都不陌生。三列布局、中间那列高亮、顶部挂个“推荐”角标、底下罗列功能清单、最下面放个行动按钮——这套模板在SaaS落地页、会员订阅页、工具类产品的付费墙里被用了几百万遍。问题是，越常见的组件越容易做得平庸。你打开十个产品页，八个定价卡长得一模一样，剩下两个只是换了个主色调。

我这次想聊的，是我自己用Cursor配合StageWise这套分阶段提示流程，再加上一点“主动提示词”的思路，去重做一张定价卡片的全过程。标题里说“花里胡哨”不是贬义，而是指视觉层次、动效节奏、信息密度都上了一个台阶，超出了我原本对“AI改UI”的预期。核心关键词就三个：Cursor 编辑器、StageWise 分阶段提示法、主动提示词。适合谁看？适合已经会用AI写代码、但总觉得生成结果“能用但不好看”的前端同学，也适合做独立产品、需要快速迭代落地页的开发者。

先说清楚这三个东西各自是什么定位。Cursor 是一个深度集成AI能力的代码编辑器，它的强项不是单次生成多惊艳，而是能在你已有的代码上下文里做精准修改。StageWise 不是某个具体软件，而是一种把复杂需求拆成多个阶段、每个阶段只让AI聚焦一件事的提示策略。主动提示词则是我自己的叫法，指的是不被动等AI给方案，而是主动把设计意图、约束条件、甚至“我想要什么感觉”提前喂进去，逼着AI在框架内发挥。

这三者叠在一起，解决的是一个很具体的痛点：单次提示词让AI改UI，结果往往要么太保守（就换个颜色），要么太放飞（布局全乱、代码跑不起来）。而分阶段加主动约束，能把“改得好看”这件事变得可控、可复现。下面我按实际操作的顺序，把整个思路、细节、踩过的坑全部拆开讲。

2. 为什么不能一把梭：单次提示的翻车现场

2.1 我试过的三种失败姿势

最开始我不信邪，觉得不就是改个定价卡片吗，直接给Cursor一句话不就完了。结果连续翻车三次，每次翻得还不一样。

第一次，我选中整个卡片组件，输入“帮我把这个定价卡片改得更好看”。AI很听话，把圆角从8px改成16px，阴影加重了一点，按钮从蓝色改成渐变蓝。改完我一看，确实“好看”了一点点，但整体还是那个平庸的模板，没有任何记忆点。这就是典型的保守型翻车——AI不敢动结构，只在表面参数上做微调。

第二次，我换了个说法：“重新设计这个定价卡片，要有科技感和高级感”。这次AI放开了，直接把三列改成两列，中间推荐款用了一个巨大的发光边框，还加了一堆我看不懂的CSS变量。代码跑起来一看，布局在中等屏幕下直接错位，发光边框在浅色模式下刺眼得不行。这是放飞型翻车——AI理解不了“高级感”这种模糊词，只能堆视觉元素。

第三次，我学乖了，给了详细描述：“保持三列布局，中间列放大1.1倍，顶部加推荐标签，按钮用主色，背景用浅灰”。这次结构没乱，但出来的东西像一份需求文档直接翻译成代码，工整但死板，毫无设计感可言。这是执行型翻车——约束太死，AI没有发挥空间。

2.2 问题的根子在哪

三次翻车之后我复盘了一下，发现单次提示词的根本矛盾在于：UI设计是一个多维度决策问题，而单次提示只能传递一个模糊的总体意图。维度包括布局结构、视觉层级、色彩系统、间距节奏、动效反馈、响应式行为、可访问性等等。你一句话丢过去，AI只能猜你最在意哪个维度，猜对了就还行，猜错了就全盘皆输。

更麻烦的是，Cursor虽然能读取你的项目上下文，但它默认不知道你的设计系统。你的主色是什么、圆角规范是多少、间距用4的倍数还是8的倍数、字体阶梯怎么定的——这些它都得从现有代码里反推。如果现有代码本身就乱，那AI反推出来的东西只会更乱。

所以我的结论很明确：要让AI改出真正好看的UI，必须把“设计决策”和“代码实现”拆开，分阶段喂给AI，并且在每个阶段主动注入约束。这就是StageWise和主动提示词要解决的问题。

3. StageWise分阶段提示法：把一坨需求切成四刀

3.1 阶段划分的逻辑

StageWise的核心思想很简单：一个阶段只解决一类问题，上一个阶段的输出作为下一个阶段的输入。我针对定价卡片这个场景，把整个过程切成了四个阶段。

这个划分不是拍脑袋来的。第一阶段解决“往哪个方向走”，第二阶段解决“骨架怎么搭”，第三阶段解决“皮肉怎么长”，第四阶段解决“气质怎么提”。每个阶段的输出都是具体可检验的，不会出现“改完不知道对不对”的情况。

3.2 为什么第一阶段坚决不写代码

这一点我要特别强调。很多人用AI改UI，上来就让AI写代码，这是最大的误区。因为一旦进入代码层面，AI的注意力就被语法、选择器、属性值这些东西占满了，它没有余力去思考“这个卡片到底应该传达什么感觉”。

我第一阶段的做法是：把现有卡片代码贴给Cursor，然后给一段主动提示词，明确要求它只输出设计决策，不输出任何代码。提示词大概长这样：

你是一个资深UI设计师。下面是一个定价卡片的现有代码。我要重新设计它，但你先不要写任何代码。请先输出一份设计决策清单，包括：1）整体视觉风格定位（用三个形容词描述）；2）三列卡片的主次关系如何处理；3）推荐款如何在不刺眼的前提下突出；4）色彩系统建议（主色、辅助色、背景色、文字色）；5）圆角和阴影的使用策略；6）间距节奏建议。每个决策都要说明理由。

这段提示词的关键在于：用“资深UI设计师”设定角色，用“不要写代码”切断退路，用编号列出具体决策项逼它输出结构化内容。实测下来，Cursor在这个阶段给出的决策清单质量相当高，因为它不用分心去写CSS，全部算力都用在设计推理上。

3.3 阶段之间的衔接技巧

四个阶段不是孤立的，衔接得好不好直接决定最终效果。我的经验是：每个阶段结束时，让AI自己总结“本阶段确定了什么”，然后把这个总结作为下一阶段的输入前缀。

比如第一阶段结束后，AI总结出“视觉风格：克制、层次分明、微质感；推荐款处理：通过轻微放大加顶部标签，不用发光边框；色彩：主色用现有品牌蓝，背景用两级灰”。到了第二阶段，我就把这段总结贴在提示词最前面，然后说“基于以上设计决策，现在重构布局结构”。

这样做的好处是，AI在每个阶段都能看到完整的设计上下文，不会出现“第二阶段忘了第一阶段定了什么”的情况。而且总结本身也是对你自己的提醒，防止改着改着跑偏。

4. 主动提示词：把“我想要什么”说清楚

4.1 什么叫主动提示词

主动提示词是我自己总结的一个概念，对应的是“被动提示”。被动提示就是“帮我改好看点”，然后等AI给方案。主动提示则是你先把设计意图、约束条件、甚至审美偏好全部说清楚，让AI在你的框架内做选择题而不是填空题。

举个例子。被动提示：“推荐款要突出一点”。主动提示：“推荐款通过三个手段突出：垂直方向比两侧高8px、顶部加一个胶囊形标签、背景用比两侧深一级的灰色。不要用发光、不要用描边、不要用放大超过1.1倍。”

看出区别了吗？被动提示把“怎么突出”这个决策交给了AI，而AI的审美你是不确定的。主动提示则是我自己先想清楚“怎么突出”，然后让AI去执行。AI的价值不在于替你做审美决策，而在于帮你快速实现你已经想清楚的决策，并在实现过程中发现你没想到的细节问题。

4.2 主动提示词的三个要素

我总结下来，一条有效的主动提示词必须包含三个要素：意图、约束、反例。

意图是“我要什么”。比如“我要这张定价卡片在信息密度高的同时保持呼吸感”。约束是“我不能接受什么”。比如“不能改变现有的三列结构，不能引入新的颜色变量，不能使用超过两级阴影”。反例是“我不要什么”。比如“不要那种常见的中间列发光效果，不要用渐变按钮，不要加悬浮动画”。

这三个要素缺一不可。只有意图没有约束，AI会放飞；只有约束没有意图，AI会死板；没有反例，AI会默认选择它训练数据里最常见的方案，也就是最平庸的方案。

4.3 一个完整的主动提示词示例

我在第三阶段注入视觉细节时，用的提示词是这样的：

基于第二阶段确定的布局结构，现在注入视觉样式。设计意图：卡片整体要有“纸片叠放”的微质感，但不要拟物化。约束条件：所有颜色必须使用项目已有的CSS变量；圆角统一用12px；阴影只用两级，一级用于普通卡片，一级用于推荐卡片；间距必须是4的倍数。反例：不要用渐变背景，不要用发光效果，不要用超过两种字重，不要用纯黑文字。请输出完整的样式代码，并在关键属性旁用注释说明为什么选这个值。

这条提示词里，“纸片叠放的微质感”是意图，“CSS变量、12px圆角、两级阴影、4倍数间距”是约束，“不要渐变、不要发光、不要多字重、不要纯黑”是反例。三者叠加，AI的输出空间被精确限定在一个既不太窄也不太宽的范围内，出来的结果就非常可控。

5. 实操全流程：从原始卡片到最终效果

5.1 准备工作：把项目上下文喂给Cursor

在开始之前，有一件事必须做：确保Cursor能读到你的设计系统。如果你的项目里有tailwind.config.js、theme.ts、variables.css这类文件，把它们在Cursor里打开，让AI能索引到。如果没有设计系统文件，那就手动整理一份最小化的变量清单，贴在对话开头。

我当时的项目用的是CSS变量，主色、辅助色、背景色、文字色、圆角、阴影都定义在:root里。我把这段代码直接贴给Cursor，然后说“以下是我项目的设计系统变量，后续所有样式必须从这里取值”。这一步看起来多余，但实测下来能减少至少一半的“AI用了不存在的颜色变量”这类问题。

5.2 第一阶段实录：让AI先做设计决策

我把原始卡片代码贴进去，加上前面说的那段“只输出设计决策”的提示词。Cursor思考了大概十几秒，输出了一份清单。我摘录几个关键决策：

• 视觉风格定位：克制、层次分明、微质感
• 三列主次关系：中间列通过垂直偏移和背景色差来突出，不改变宽度
• 推荐款处理：顶部胶囊标签 + 背景深一级 + 按钮用实心主色，两侧用描边按钮
• 色彩系统：主色沿用品牌蓝，背景用两级灰（页面背景和卡片背景），文字用深灰而非纯黑
• 圆角策略：卡片12px，按钮8px，标签用全圆角
• 阴影策略：普通卡片用极浅阴影，推荐卡片用稍重阴影，但都不超过两级
• 间距节奏：卡片内边距24px，功能列表项间距12px，按钮上边距32px

这份清单我基本认可，只改了一处：把“推荐卡片用稍重阴影”改成“推荐卡片用稍重阴影加1px边框”，因为纯阴影在浅色背景下区分度不够。改完之后，第一阶段结束。

5.3 第二阶段实录：重构布局结构

第二阶段我把第一阶段的决策清单贴在提示词最前面，然后要求AI重构HTML结构。这里有个细节：我让AI保留原有的类名体系，只调整DOM结构。因为如果类名全换，后续样式代码就得全部重写，工作量翻倍。

AI输出的新结构大概是这样的：外层容器不变，三列从平级的div改成article元素，每列内部拆成header（包含名称和价格）、features（功能列表）、footer（按钮）三个区域。推荐列多了一个badge元素放在header上方。功能列表从ul改成dl，因为每一项都是“功能名+是否包含”的键值对，用dl语义更准确。

这个阶段AI还主动提了一个建议：把“是否包含”的图标从纯CSS伪元素改成内联SVG，理由是伪元素在屏幕阅读器里读不出来。这个建议我采纳了，属于AI在实现过程中发现的、我没想到的可访问性问题。

5.4 第三阶段实录：注入视觉样式

第三阶段是重头戏。我把第二阶段的结构代码和设计系统变量一起贴进去，加上前面那条包含意图、约束、反例的主动提示词。AI输出的样式代码大概有两百多行，我挑几个关键点说。

卡片背景色用的是var(--bg-card)，推荐卡片用var(--bg-card-elevated)，两者差一级灰度。阴影用了两个自定义属性，普通卡片是0 1px 3px rgba(0,0,0,0.06)，推荐卡片是0 4px 12px rgba(0,0,0,0.08)。注意这里的不透明度都很低，因为AI遵循了“不要刺眼”的约束。

推荐卡片的垂直偏移用的是transform: translateY(-8px)，而不是margin，因为transform不触发重排，性能更好。这个细节是AI自己加的，还在注释里写了原因。按钮样式上，推荐款用实心主色背景加白色文字，两侧用透明背景加主色描边，hover时填充浅色背景。功能列表的图标用了两个SVG，一个对勾一个横线，颜色分别是主色和浅灰。

5.5 第四阶段实录：动效与响应式打磨

最后一个阶段，我给AI的提示词是：“为卡片添加进入动效和hover反馈。意图：动效要轻，不能干扰信息读取。约束：只使用transform和opacity，时长不超过200ms，缓动函数用ease-out。反例：不要用弹跳效果，不要用旋转，不要用超过两种动效类型。”

AI给出的方案是：卡片进入时从下方8px处淡入，三列依次延迟50ms，形成轻微的波浪感。hover时卡片上移2px，阴影加深一级。按钮hover时背景色变化，不改变尺寸。推荐卡片的标签有一个极轻微的脉冲动画，周期3秒，幅度只有0.02的透明度变化，几乎察觉不到但能吸引余光。

响应式方面，AI在768px断点处把三列改成单列堆叠，推荐卡片不再偏移，标签移到卡片内部顶部。这个处理很常规，但AI额外加了一条：在单列模式下，功能列表默认折叠，点击展开。这个我后来去掉了，因为定价卡片的信息量还没大到需要折叠的程度。

6. 踩过的坑和排查技巧

6.1 常见问题速查表

6.2 三个我踩得最深的坑

第一个坑是过度约束导致AI摆烂。有一次我在第三阶段把约束写得特别死，颜色、圆角、间距、阴影全部指定了具体值，结果AI输出的代码确实完全符合要求，但整个卡片看起来像上个时代的产物。后来我明白了，约束应该约束“边界”而不是“具体值”。比如“圆角在8到16px之间”比“圆角用12px”更好，给AI留一点选择空间。

第二个坑是阶段之间没有清空上下文。Cursor的对话是连续的，如果你在第二阶段还带着第一阶段的全部对话历史，AI可能会把设计决策和代码实现混在一起。我的做法是每个阶段开一个新对话，只把上一阶段的总结贴进去。这样AI的注意力更集中，输出质量明显更高。

第三个坑是忘了让AI写注释。前几次改完，代码是能跑，但过两天我自己都忘了某个阴影值为什么是0.06而不是0.08。后来我在每个阶段的提示词里都加一句“在关键属性旁用注释说明选择理由”，这样产出的代码自带文档，后续维护省心很多。

6.3 一个提升效果的小技巧

如果你想让AI的输出更有设计感，可以在第一阶段的设计决策提示词里加一句：“请参考线性、极简、日式这三种设计风格的交集来定位”。这三个词会给AI一个明确的审美锚点，比“高级感”“科技感”这种模糊词有效得多。我实测下来，加了这句话之后，AI给出的色彩和间距决策明显更克制、更有节奏感。

7. 最终效果与可复用的经验

改完之后的定价卡片，跟原始版本比有几个明显变化。视觉上，推荐款通过垂直偏移、背景色差和胶囊标签三重手段突出，但没有用任何发光或渐变，整体保持克制。信息层级上，价格用最大字重，功能列表用常规字重，按钮用主色实心，视线路径非常清晰。动效上，进入时的波浪淡入和hover时的微上移，让卡片有了“活着”的感觉，但完全不干扰阅读。

这套StageWise加主动提示词的方法，我后来复用到其他UI组件上，比如导航栏、表单、数据表格，效果同样稳定。核心经验就三条：第一，把设计决策和代码实现拆成不同阶段，不要让AI同时干两件事；第二，每个阶段都要主动注入意图、约束和反例，不要等AI猜；第三，阶段之间用总结衔接，保持上下文干净。

最后分享一个我最近才想明白的点。AI改UI的上限，其实不取决于AI有多强，而取决于你能把“你想要什么”描述得多清楚。那些觉得AI改出来东西不好看的人，大概率不是AI的问题，而是自己也没想清楚到底要什么。StageWise和主动提示词，本质上是一套逼自己想清楚的方法。想清楚了，AI只是帮你打字而已。