这不是踩坑实录，这是被技术决策连环精准打击的血泪史。
如果你领导也沉迷“造轮子 + 强推个人工具链 + 不懂Design Token硬上”，建议直接收藏，以后总能用上。
序：五一前，我们接了一个很美的需求
设计师出图了。
Figma上一套炫酷到爆的UI：玻璃态磨砂背景、流动渐变、自定义交互动效、非对称布局……业务逻辑很轻，本质是一个品牌展示型的管理面板，视觉冲击力是第一位的。
设计师还很贴心，直接用Figma to React插件生成了干净、现代化的组件代码——Tailwind + CSS变量，清爽得像是夏天的风。
万事俱备，只差上线。
然后，我们的领导出手了。
第一刀：Figma生成的React代码，硬转Vue
领导看了一眼，眉头一皱：
“我们团队不是主攻Vue吗？统一技术栈才可维护。”
我们解释：这是生成好的React组件，直接用就能上线，需求时间紧。
领导大手一挥：
“统一是长期战略，短期痛是为了长期爽。”
于是，我们花了3天，把一套完美的React组件手撕成了Vue 3。
Figma生成的那份干净代码，被逐行翻译。三天后，Vue版跑起来了，但已经没时间写动效了。
这时，距离五一还有5天。
第二刀：Vue刚转完，他拉了一坨更大的
我们以为噩梦结束了。
结果领导兴冲冲地跑来：
“我给你们开发了一套AI工作流，以后生成效率翻倍！”
我们打开一看：
- AI生成的代码必须通过 MCP（Model Context Protocol） 去调用他二次封装的Ant Design组件库
- 就是那个Ant Design 4.x + 领导魔改 + 不支持CSS变量的“毒瘤UI库”
- AI prompt是他自己调的，模板里写死了调用他的组件
也就是说：
你刚花3天把React转成Vue，他又让你用AI + MCP + 垃圾组件库，把Vue代码再生成一遍。
而且，这套AI工作流有一个致命问题：它根本不支持Figma设计的炫酷样式。
因为MCP调用的组件是Ant Design——一套专门为粗糙后台管理系统设计的、一板一眼的组件库。
我们的需求是什么？
玻璃态、动效、自定义布局、品牌流动渐变。
Ant Design 4.x 有什么？
白底卡片、经典边框、淡入淡出、灰色阴影。
两者有任何一个像素对得上吗？
一个都没有。
第三刀：UI为主的炫酷需求，被Ant Design彻底扼杀
来，我们直观对比一下：
| Figma 需求 | 领导强推的毒瘤库产物 |
|---|---|
| 玻璃态磨砂背景 | 纯白 Card，带1px灰色边框 |
| 自定义交互动效 | Ant Design 的淡入淡出 |
| 非对称网格布局 | 24栏栅格系统，整整齐齐 |
| 品牌色流动渐变 | 主色 #1677ff，一动不动 |
| 现代化无边框组件 | 经典边框+阴影，2019风 |
领导对此的回应是：
“Ant Design 也可以自定义样式嘛，你们写覆盖就行了。”
又要写 !important？
又要全局搜 .ant-btn 猜优先级？
又要写几百行样式去“覆盖”一个本应长成那样的组件？
我们问：为什么不用Figma生成的原生Tailwind组件？
领导说：
“那不可维护。我的AI工作流+MCP才是未来。”
最恶心的部分（没有之一）：他根本没搞懂Design Token，却硬塞给我们一个“半成品”
你以为前面这些就够恶心了？
不。最恶心的是他所谓的Design Token体系。
他为了显得“工程化”，二次封装那个Ant Design 4.x时，号称实现了Design Token。
结果一用——好家伙，这是个精神分裂的Token系统。
具体表现如下：
- 有的组件，改token有用。他心情好的时候，给按钮圆角写了
--button-radius变量，你改它，圆角确实会变。 - 有的组件，改token完全没用。因为那些组件的样式在Less编译时就写死了，运行时根本拿不到变量。你必须写
.ant-select-dropdown然后加!important硬盖。 - 没有一个文档，告诉你哪些token生效，哪些不生效。你得自己去读他那团乱麻的源码，去猜，去试。
- 更绝的是：同一个组件，在不同页面表现不一样。因为有的页面用了他的“半成品token”，有的页面又直接用Tailwind覆盖了，优先级层级乱成麻花。
有一次，我调一个Select下拉框的背景色：
--select-bg变量存在，但改了没用- Tailwind的
bg-white盖不过去 - 我花了40分钟，最后在全局样式里写：
.ant-select-dropdown { background: #1f1f1f !important; }
然后领导跑过来看代码，说：
“你怎么又写
!important？我们不是有Design Token吗？”
我当时真的想把键盘塞他嘴里。
你问我为什么不用变量？你的变量根本没生效啊！
你问我为什么要覆盖？因为你的“半成品”只做了一半啊！
一个真正的Design Token体系应该是：所有样式都从token派生，改一处，全局统一。
而我们的“半成品”是：
改token → 部分组件响应 → 部分组件沉默 → 剩下的靠猜 → 猜不出来就
!important→ 全局样式污染 → 下一个页面继续轮回。
这不叫Design Token，这叫Design俄罗斯轮盘赌——每个组件都是一发子弹，你不知道哪一颗会炸。
更讽刺的是，他为了这套“半成品”，还专门开了个全员分享会，PPT标题是：
《前端工程化的未来：Design Token 落地实践》
落地？落的是我们的脚，踩进屎坑的脚。
五一前最后一刻，我提交的代码是这样的
<template>
<!-- 领导要求用MCP调他的毒瘤组件库 -->
<AntButton
:class="[
'glassmorphism-button', // 覆盖样式
'custom-gradient', // 覆盖样式
'hover-scale' // 覆盖样式
]"
@click="handleClick"
>
炫酷按钮
</AntButton>
</template>
<style scoped>
/* 写了60行覆盖样式，才把Ant Design盖成设计稿的样子 */
.glassmorphism-button {
background: rgba(255,255,255,0.1) !important;
backdrop-filter: blur(10px) !important;
border-radius: 2rem !important;
/* 后面还有50行 */
}
</style>
而Figma生成的原始React代码长这样：
<button className="glassmorphism-button hover:scale-105 transition-all">
炫酷按钮
</button>
// 样式全在tailwind.config.js里，一行多余代码都没有
3天转Vue + 2天适配毒瘤库 + 1天和半成品Token搏斗 = 6天换来了比原始方案更差的产物。
而我们原本只需要1天。
隐藏的最终刀：他到底在图什么？
复盘完整件事，我冷静分析了一下，发现这一连串反智操作的背后，根本不是技术决策，而是个人资产的强推：
- 二次封装的Ant Design：他的“技术成果”，需要在项目里证明价值
- AI工作流 + MCP：他的“创新”，需要落地场景来写OKR
- 统一Vue技术栈：他的“管理决策”，需要显得有大局观
- 半成品Design Token：他的“工程化能力”，需要show给上面看
至于Figma生成的代码多干净、需求多炫酷、团队多痛苦、我们需要加多少晚班——这些不在他的优先级里。
他甚至可能根本没仔细看过Figma设计稿。
因为他的脑子里只有一条主线：
这套AI工作流 + MCP组件库 + 我的Token体系，如果能强行跑通，年底晋升的材料就稳了。
而我们，只是他晋升路上的耗材。
写在最后：这不是技术债，这是人的问题
ai只是技术的加速器，好比你开着一辆破车在颠簸的下坡路上，它不会帮你踩刹车，只会帮你踩油门！
这个五一，我是在改!important和猜token哪句生效中度过的。
希望你，我的朋友，不需要。
评论区欢迎分享：你遇到过哪些领导强推的“反智工具链”？
