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的核心思想很简单一个阶段只解决一类问题上一个阶段的输出作为下一个阶段的输入。我针对定价卡片这个场景把整个过程切成了四个阶段。阶段目标输入输出关键约束第一阶段确定视觉方向现有卡片代码 参考风格描述设计决策清单不写代码只做决策第二阶段重构布局结构设计决策清单 现有代码新布局的HTML结构保持语义化和可访问性第三阶段注入视觉细节新布局 设计系统变量完整样式代码所有数值必须来自设计系统第四阶段打磨动效与响应式完整组件 交互意图最终代码动效不干扰信息读取这个划分不是拍脑袋来的。第一阶段解决“往哪个方向走”第二阶段解决“骨架怎么搭”第三阶段解决“皮肉怎么长”第四阶段解决“气质怎么提”。每个阶段的输出都是具体可检验的不会出现“改完不知道对不对”的情况。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 常见问题速查表问题现象可能原因排查方法解决方案AI用了不存在的颜色变量设计系统没喂给AI检查对话开头是否贴了变量清单补上变量定义要求重新生成布局在中等屏幕错位断点设置不合理用开发者工具逐级缩放让AI补充中间断点样式动效卡顿使用了非合成属性检查是否动画了width/height改用transform和opacity推荐款不够突出约束太死导致AI不敢动回看第一阶段决策调整决策清单放宽约束代码跑不起来AI引用了未定义的类检查类名是否与现有体系一致要求AI只使用已有类名浅色模式下刺眼阴影或边框对比度过高切换主题模式检查降低不透明度或改用边框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只是帮你打字而已。