AI 编码浪潮，前端库的命运到底咋样？

说实话，我这老骨头在前端圈子里Yi经转了好几轮。

从 jQuery 到 Vue，再到 React，库换得比换衣服还快。

可现在 AI 把“写代码”这件事变成了“一键生成”。

哈哈，这时候我们手里那堆组件库，是不是该掂量掂量了？

写代码 + 写文档 + 写 Storybook + 写测试 =  份离散工作

必须保持同步——但现实中从来不同步。

Ru果 AI Yi经生成了代码，它就具备了生成文档和测试所需的所有信息，但没人让它Zuo。

那不是“把组件拆成几层”，而是重新定义组件库的交付物。

写得快 ≠ 写得好。写得快 = 写得烂的速度也快。

下拉菜单、弹窗、表格，每次dou绑一个框架。

AI 切换上下文时准确率急剧下降。

同一交互语义，三种实现，三套组件库。AI 要跨平台，先学三套 API。

它Neng从历史代码中自动推导出规范，从 PR review 中学习设计决策——那规范层也会消失。

桌面端卡片有 hover，触屏不需要。桌面端表格展示 10 列，移动端只Neng展示 4 列。

Element Plus v1 → v2: 改了多少 API？没人记得清。AI 的训练数据：混合了 v1 和 v2 的知识。你的项目：装了 v2。AI 写的代码：可Neng调的是 v1 的 API。

版本号把“规范的演进”和“实现的变geng”绑在一起，AI 无法区分。

传统组件库 ──→ 源码级组件库 ──→ 规范驱动生成 ──→ 组件库消失
│               │               │               │
│  npm install  │ 源码复制      │ Spec 驱动    │ 意图驱动
│               │               │               │
│   Element Plus   Shadcn/ui      这个架构        未来？

┌──────────────────────────────────────────────────────────────────┐
│                      🧠 规范层                           │
│              唯一需要人工维护和版本化的东西                       │
│                                                                  │
│  ┌─────────────┐  ┌──────────┐  ┌──────────┐  ┌─────────────┐   │
│  │ 行为规范     │  │ 样式规范  │  │ 无障碍    │  │ 平台/设备   │   │
│  │ 状态定义     │  │ Token映射 │  │ ARIA角色   │  │适配规则    │   │
│  └─────────────┘  └──────────┘  └──────────┘  └─────────────┘   │
└─────────────────────────┬───────────────────────────────────────┘
                          ▼
                      ⚙️ 生成引擎
...

答：

内容原创度不足——复制粘贴太多公开资料会被判低质量；

缺少结构化数据和合理的 标签；

站点没有备案或 robots.txt 把爬虫拦住；

geng新频率低，百度觉得不活跃，也就懒得收录。

# 那么我们怎么让 AI geng好地使用我们的规范呢？ #

// 文件位置：@specs/dropdown-menu.ts
export const dropdownMenuSpec = {
    id: 'dropdown-menu',
    version: '',
    // 行为规范 …
    states: { /* ... */ },
    transitions: ,
    // 样式规范 …
    styles: { /* ... */ },
    // 无障碍规范 …
    accessibility: { /* ... */ },
    // 平台适配规则 …
    platform: { /* ... */ },
    // AI 不可违反约束 …
    constraints: ,
};

export function DropdownMenu {
    const { state, actions } = useDropdownMenu;
    const ref = useRef;
    useClickOutside => state.isOpen && actions.close);
    return (
        

            
                {state.selectedValue ?? triggerLabel}
            
            {state.isOpen && (
                
{options.map=>(
                    
actions.select}
                        style={{
                            padding:`${tokens.spacing.sm} ${tokens.spacing.md}`,
                            ...(i===state.activeIndex && {
                                background: tokens.color.primary,
                                color:'white',
                            })
                        }}>
                        {opt.label}
                    
)
                )}
)}
        
);
}

A.I. 正在把代码边际成本逼到零。

# 那些曾经被视作“不可或缺”的 UI 库，现在可Neng只剩下 "规格文件"# 。

源码是一等公民，API 文档只是二手信息；

A.I. Neng直接读取 spec，然后输出对应框架的实现；

A.I. 不懂“我在手机上应该长什么样”，只Neng靠 spec 告诉它；

所以我们要把「外观」和「行为」dou写进 spec，让机器不猜了。

- 多给 spec 加点注释，别让 AI 猜错；

- 把无障碍信息也放进去，不要等上线后才补；

- 保持 token 化，别硬编码颜色，否则风格会漂移。

CIA Yi经不是“一段 JS”，而是一套 "意图+约束".