前言

打开对话框，敲下一行字：“在弹窗底部加两个按钮，一个确认一个取消，好看一点。”

Agent 很快给了你代码。打开项目，刷新页面，看到两个一模一样的蓝色实心按钮并排站着，像一对双胞胎，谁主谁次完全分不清。你回去补了一句“取消那个别那么显眼”，它把取消按钮改成了灰色——但仍然是实心的，视觉重量只降了一档，两个按钮还在互相抢焦点。

问题不在于 Agent 不会写按钮。它太会写按钮了，问题在于，“好看一点”“显眼一点”“别那么重”这些词，对 Agent 来说不是可执行的指令，而是无法解析的形容词。它不知道你的页面里“显眼”的基准线在哪，也不知道“重”是相对于谁而言的。

你真正想说的是：“这个区域只能有一个实心按钮，另一个用描边，边框要可见但不要填色。”这句话 Agent 能 100% 执行。

而恰恰是这些“技术词”，才是人和 Agent 之间唯一稳定的沟通语言。（文章末尾有完整效果预览）

我用夸克网盘给你分享了「12种按钮样式可交互效果文件」，点击链接或复制整段内容，打开「夸克APP」即可获取。链接：https://pan.quark.cn/s/c4def269e342

正文

可直接独立发送的提示词

序号	效果名称	直接复制给 Agent 的完整指令
1	实心主按钮	“做一个实心主按钮。它是有填充背景色、文字为对比色的按钮，无边框。这个区域里只能有这一个实心按钮，其他按钮不要用同样的填充样式。”
2	描边次按钮	“做一个描边次按钮。它是透明背景、有可见边框的按钮，文字用中性色。它的视觉重量要明显低于实心主按钮，不要填充背景色。”
3	文字弱按钮	“做一个文字弱按钮。它是无背景、无边框、只有文字的按钮，悬停时最多给浅灰背景。不要加边框和填充色。”
4	链接按钮	“做一个链接按钮。它看起来像超链接，文字用主题色，悬停出现下划线。它负责跳转，不触发当前页动作。”
5	虚线添加按钮	“做一个虚线添加按钮。它是透明背景、虚线边框的按钮，文案带 + 号，比如‘+ 添加成员’。不要用实心按钮做添加。”
6	幽灵按钮	“做一个幽灵按钮，放在深色背景上。它是透明背景、文字和边框用与背景对比的颜色的按钮。不要放在浅色背景上。”
7	危险实心按钮	“做一个危险实心按钮，用于最终确认删除。它是红色填充背景、白色文字的按钮。只在最终确认步骤用，列表行里不要用。”
8	危险文字按钮	“做一个危险文字按钮，用于表格行内删除。它是无背景、无边框、红色文字的按钮。不要加红色背景。”
9	图标按钮	“做一个图标按钮。它是只有图标、没有文字的方形或圆形按钮。必须加 aria-label 说明含义，图标不直观时加 title 属性。”
10	加载中按钮	“做一个加载中按钮。点击后按钮内显示旋转图标、文字变为‘提交中…’，同时不可点击。加载结束后恢复文字和可点击状态。”
11	禁用按钮	“做一个禁用按钮。它降低不透明度、光标显示禁止符号、不可点击，但保留占位不要移除。”
12	按钮组	“做一组按钮组。多个按钮紧贴排列、共享边框。只把同性质的操作放一组，比如上一页/下一页，不要把‘保存’和‘删除’框在一起。”

效果图

下面我们来看一下根据以上提示词生成的效果叭~

本次使用workBuddy生成

小结

这篇文章对我来说更像一份学习笔记，不是什么设计权威指南。那 12 个效果名称是我自己用得顺手的叫法，那张对照表是我每次开新对话时直接复制粘贴的模板。它们不保证完美，但至少让我少改几轮。

如果你也在跟 Agent 来回扯“再调调”“还是不太对”的过程中，不妨从表里挑一两条试试。用顺了就留下，用不惯就改个名字——重要的是你手里有了一套能被 Agent 稳定执行的词，而不是每次都在赌它这次能不能猜中你的审美。