AI 数据通道：JSON·Markdown

2026 前端技术选型一站式指南：从 Vue/React 到 AI Native

本文所有数据截至 2026 年 8 月，来源包括 State of JS 2025 官方调查、GitHub 仓库实时数据（抓取自 2026-08-06）、React/Vue/Tailwind/Vercel/CopilotKit/Anthropic 官方发布，以及 Ryan Carniato、Addy Osmani 等一线作者的高端分析帖。文末附完整来源表。

2026 年选前端技术栈，和 2020 年选技术栈，本质上是两件完全不同的事。

2020 年的问题是”哪个框架好”。2026 年的问题是：你的 UI 资产，要如何被一个人类和一个 AI 共同维护——AI 负责生成大部分代码，人类负责知道”什么是好的”。这个转变是结构性的，它改变了选型的每一个环节：框架、组件库、交互范式、视觉风格，乃至产品本身的形态。

这篇文章不是”XX 框架天下第一”的宣言，而是一份面向复杂业务场景、以 2026 年最新数据为地基的选型方法论。读完它，你应该能回答三个问题：选什么、为什么、以及一个人（或一个人加一堆 Agent）如何把优秀的前端做出来。

第一层 元认知：选型面对的根本矛盾 #

先建立认知地基。2026 年前端选型，被三个结构性事实主导。

事实一：框架格局进入稳态，选型焦虑是过时的 #

State of JS 2025 调查（约 1.2 万名开发者）给出了一个反直觉的结论：前端的”框架内战”结束了。过去一年使用率排名没有任何变化——React 第一、Vue 第二、Angular 第三，唯一变动是 Alpine.js 和 HTMX 互换了个位。开发者的平均从业生涯只用过 2.6 个前端框架，”每月换框架”的刻板印象被数据否定。

更耐人寻味的是满意度数据：被 AI 和主流舆论冷落的 Solid 已经连续五年满意度第一（使用率仅 10%）。这说明”用得最多”和”用着最爽”从来不是一回事，也说明在这个稳态市场里，任何新选型的边际收益都远低于 2015-2020 年。

对应地，开发者幸福感稳定在 3.7/5（满分 5），而痛点榜第一是 “React issues”（601 票）——注意，是”React 的问题”而不是”框架不够多”。第二位是”过度复杂”（435 票），第五位是”选择过载”（215 票）。换句话说：最大的痛不是没得选，而是选太多、太复杂。

事实二：AI 已经是开发主流程，不是插件 #

同一个调查里，AI 工具采用率已经高得惊人：ChatGPT 60%、GitHub Copilot 51%、Claude 45%、Gemini 28%、Cursor 26%，连”设计生成器”v0 都有约 8% 的稳定采用率。State of JS 2025 结论页（Nuxt 核心维护者 Daniel Roe 撰写）给出了最尖锐的观察：

到 2025 年底，将近 30% 的代码是 AI 生成的。……对开发者来说，”知道什么是好的”将比以往任何时候都重要，无论我们用什么工具。知道该建立在哪些库之上，比从零”vibe coding”一切更重要。

这句话是整篇文章的纲领。2026 年选型，本质上是在选”AI 最容易把它生成好”的抽象层。

事实三：UI 从”人写的组件”变成”人审的组件” #

Ryan Carniato（Solid 作者，State of JS 2025 官方高亮人物）在 2026 年 1 月的年度分析《JavaScript Frameworks - Heading into 2026》里给了最狠的一刀：

AI 通过它的无能解决了我们的复杂性问题。它像不懂系统的开发者一样做事：往下一层走，只用自己熟悉的东西。而那个负责拼接的人，多半也会顺着它走。

“React is the Last Framework”（React 是最后一个框架）这个流行说法，被他拆穿为 AI 的回音室效应——LLM 训练数据里 React 最多，所以 AI 只会生成 React，于是更多人用 React，形成自我强化。但这不等于”React 最好”，它只是”AI 最熟”。

Carniato 还观察到一个对全文都成立的趋势：2025 年框架的核心演进已经从”性能竞赛”转向异步优先（Async-First）——React 的 useOptimistic + Actions 把每次用户交互包进 Transition，Svelte 5 也用编译器把异步更新分组保证屏幕上的一致性，两家殊途同归。性能（Signals）已经退居二线，战略思考（AI 时代的架构）才是主战场。

决策坐标系 #

把三个事实压成一个可用的决策模型。选型 = 三个维度的权衡：

维度取值对选型的影响
团队形态一人公司（OPC）/ 小团队 / 大组织决定你要不要”护城河”组件库、要不要企业级支持
业务复杂度内容站 / 中后台 / 高交互复杂业务决定框架重与轻、要不要元框架
AI 介入深度纯辅助 / AI 生成大部分 UI / AI Native 产品决定组件库风格、是否直接上 AI UI 协议栈

下文第二层到第四层按”搭积木”顺序把每一块讲透，第五层给出完整的组合答案。

第二层 搭积木：从框架到像素 #

2.1 框架层：React 与 Vue 的 2026 年版本 #

先看实时数据（GitHub stars，2026-08-06 抓取）：

框架Stars最新状态一句话定位
React247k19.2 + Compiler 1.0生态最大、AI 训练数据最足
Angular101kv20（signals 全面化）大组织的完整框架
Svelte88k5.x（runes）编译期魔法、最接近原生
Vue54k3.5（2024.9 后稳态）渐进式、易学易用
Solid36k2.0 筹备中细粒度响应、满意度 5 连冠

React 的 2026 年：React 19.2（2025 年 10 月）带来了 Activity（把后台任务和 UI 更新解耦）、React Performance Tracks、useEffectEvent。同月 React Compiler v1.0 正式发布——自动记忆化，意味着”useMemo 人肉优化”成为历史。更深远的是治理变化：2025 年 10 月宣布、2026 年 2 月正式落地 Linux 基金会的 React Foundation——React 从 Meta 的”内部开源”变成了行业共治的中立项目，这对依赖它的企业是个重大利好信号（不再受单一公司路线绑架）。

Vue 的 2026 年：Vue 3.5（2024 年 9 月）之后官方博客安静下来——这是”稳态”的体现，而不是停滞。Vue 的护城河从来不在框架本身，而在 Vite + Pinia + Nuxt + VueUse 的生态整体，以及它”模板即 HTML”的平缓学习曲线。对中小团队和快速交付场景，Vue 仍然是上手成本最低的选项。

复杂业务场景怎么选（这是大多数读者的真实场景）：

场景推荐理由
高交互、长生命周期、要最大生态React 19 + Next.js组件/人才/AI 训练数据三重最厚
中后台、快速交付、国内团队Vue 3.5 + Element Plus中文生态、模板心智、招聘容易
极致性能、低端设备Svelte 5 或 Solid编译期优化，运行时几乎为零
被 AI 大量代写优先 React/VueAI 训练数据决定生成质量（回音室现实）

Carniato 的 Async-First 视角值得单独说一句：2026 年选择框架，核心不再是响应式机制（信号 vs VDOM），而是它怎么处理”异步 UI”——乐观更新、流式渲染、后台任务。React 的 useOptimistic 与 Svelte 5 的异步分组更新正在趋同，这说明无论选哪家，你都会获得类似的交互能力，差异在生态厚度而非理念高度。

2.2 构建层：Vite 时代与元框架 #

Daniel Roe 在 State of JS 2025 结论里宣布了两件事：Vite 的下载量已经超过 webpack；2026 年将是 Rolldown（Vite 的 Rust 内核）稳定版之年——构建工具全面提速。Vite 82k stars，且已从”开发服务器”进化成完整工具链（Vitest 测试 + VitePress 文档）。

元框架层面：Next.js（141.6k stars）和 Nuxt（60.7k）是两座山头。Carniato 的 “Isomorphic-First” 概念值得记下：2025 年 TanStack Start、SvelteKit、SolidStart 都引入了 Out-of-Order 流式渲染、Server Functions、细粒度乐观 UI——不再强迫你为了”服务端渲染”重构整个架构，而是在 SPA 基础上逐步加服务端能力。翻译成选型语言：2026 年你不需要在”SPA 还是 SSR”之间二选一了，主流框架都给你渐进路径。

2.3 UI 层：两条路线之争 #

这是 2026 年最值得花时间的选择。两条路线泾渭分明：

路线 A：全功能企业库

  • Ant Design（99k stars）：官方定位已是”AI friendly design system”，CSS-in-JS 动态主题、可插拔主题算法，新增 Splitter（面板分割）、Masonry（瀑布流）等组件。它的价值是”开箱即全”——表格、表单、级联、权限都内置。
  • Element Plus（27.7k stars）：Vue 3 的国民级选择，稳定、中文文档、后台管理生态（vue-element-admin 等）成熟。

路线 B：无头 + 复制粘贴（copy-paste）

  • shadcn/ui（120.6k stars，2026 年 8 月）：Vercel 旗下，模式是”组件代码直接拷进你的仓库”，配合 registry（组件注册表）和 /create（AI 生成界面）。口号是 “Open Source. Open Code.”——你拥有全部代码，没有 npm 依赖黑盒。
  • Tailwind CSS v4（97k stars）：2025 年 1 月的大版本重写。CSS-first 配置（@theme 直接写在 CSS 里）、OKLCH 色彩、5 倍全量构建 / 100 倍增量构建、P3 广色域调色板。
  • Base UI（10.6k stars）：Radix/Floating UI/Material UI 原班人马，7 人全职团队维护的无样式可访问性组件，遵循 WCAG 2.2，不预设任何视觉。

怎么选？看你的”审美自由度”和”交付速度”的优先级：

你的情况选 A（企业库）选 B（无头/copy-paste）
交付速度第一，审美随大流✅ AntD/Element Plus
品牌差异化、定制设计系统✅ shadcn/ui + Tailwind v4
可访问性要求严苛✅ Base UI / Radix
桌面端中后台密集表单✅
AI Native 产品✅（代码在仓库里，AI 好改）

一个 2026 年的新视角：AI 生态正在倒向路线 B。shadcn 的组件代码是”拷进你仓库的源码”，LLM 可以直接基于它微调；AntD 则是一层黑盒 npm 包，AI 只能按 API 拼装。CopilotKit 这类 AI UI 框架的官方示例全是 shadcn 风格。如果你预计 AI 会深度参与 UI 迭代，路线 B 的”代码所有权”优势会持续放大。

2.4 组件交互设计：流式、乐观与过渡 #

2026 年复杂业务前端的交互设计，三件套：

  1. 流式渲染（Streaming）：AI 输出、长列表、大数据集不再等全部就绪，边来边渲染。骨架屏（skeleton）从”可选”变成”标配”，因为流式意味着状态天然是”进行中”。
  2. 乐观更新（Optimistic UI）：用户点击 → 立即显示结果 → 后台同步 → 失败回滚。React 19 的 useOptimistic 把它变成一等公民，Carniato 认为这是 2026 年最重要的交互演进，配合 Actions 的 Transition 包裹，”每一次交互都保证屏幕一致性”。
  3. 视图过渡（View Transitions）：React 19.2 的 Activity 把”后台更新”与”前台 UI”分离，配合浏览器原生 View Transitions API 做页面切换动画——该 API 已进入 Baseline，可以放心用。

复杂业务（表单、审批流、数据密集表格）的选型含义：优先选择把这些交互模式内置的框架/库，而不是自己拼。AntD 的表单校验+事务流程、TanStack Query 的请求缓存、Zod（State of JS 2025 使用率第一且年度增长最大的库）的表单校验，都是”别人踩过的坑”。

2.5 页面风格：先认清 AI 的模板面孔 #

Anthropic 官方 frontend-design skill（2026 年 1 月起随 Claude 提供，是 AI 前端设计的顶级方法论）直言不讳地指出了 AI 生成界面的三大模板面孔：

  1. 暖奶油底 + 高对比衬线 + 赤陶色强调（近 #F4F1EA 配 terracotta）
  2. 近黑底 + 单一酸性绿/朱红强调
  3. 报纸风排版：发丝线、零圆角、密集分栏

它给 AI 的指令是：”客户已经拒绝了模板化的提案”，要求”每个项目都要有无法被误认的视觉身份”。这本身就是给人类读者的镜子：如果你 2026 年还在用这三大面孔做页面，你的产品在用户眼里就是”AI 生成的”——这在商业上可能是致命的同质化。

2026 年值得关注的正向风格趋势：

  • shadcn 系的”精致仪表盘”审美：克制的中性色阶 + 一个品牌强调色、Bento 网格布局、清晰的层级留白，这是当前 SaaS 的标准答案；
  • Glass 玻璃拟态回归：Ant Design 6 的主题演示里也内置了 Glass 主题，用于 AI 产品和高感光场景；
  • 暗色模式成为基线能力：Tailwind v4 的 color-scheme 工具类和 @starting-style（无 JS 的进入/退出过渡）让暗色从”插件”变成”默认”。

2.6 图标：Lucide 时代的秩序 #

图标选型的答案在 2026 年已经收敛：Lucide（23.8k stars，ISC 许可，1600+ 图标）。它是 Feather 的社区分支，提供 React/Vue/Svelte/Solid/Preact/Angular/Astro 全框架官方包，且是 shadcn/ui 的默认图标源。拒绝品牌 logo、坚持设计一致性，让它在 AI 生成时代格外受欢迎——LLM 训练数据里 Lucide 的用法极其丰富，AI 生成的图标代码很少出错。备选：Iconify（100+ 图标集的统一接口，适合”什么都要”的场景）。

2.7 配色：OKLCH 与设计令牌 #

2026 年配色的技术基线：

  • OKLCH 色彩空间：Tailwind v4 把整个默认色板从 sRGB 迁到 OKLCH，色彩更鲜艳、插值更线性（渐变不再发灰）。P3 广色域让深色模式的”黑”和强调色真正拉开差距。
  • 设计令牌 = CSS 变量：Tailwind v4 的 @theme 把所有令牌暴露为原生 CSS 变量（--color-*），运行时改主题、暗色切换、AI 调色都变成”改变量”而不是”改代码”。
  • color-mix()：CSS 原生混色函数，透明度/变体色不再需要预先定义 50 个色阶。

一句话：把颜色当作数据（令牌）管理，而不是当作常量——这是 2026 年配色工程的核心，也是 AI 能帮你调色的前提。

2.8 图表与动效 #

State of JS 2025 图形动画榜：Chart.js 登顶第一（3,045 票，一年前还是自填项，火箭式增长），Three.js 第二、D3 第三、**Motion（ex-Framer Motion）**第四（1,812 票）、GSAP 第五。选型建议：数据可视化为重的业务用 Chart.js/Three.js 打底，交互动效用 Motion（API 现代、支持 CSS 变量驱动动画），重品牌动效用 GSAP。

第三层 案例即原理：AI Native 产品形态 #

第二层讲的是”静态选型”，第三层讲 2026 年真正的新战场：产品形态本身被 AI 改写。这不是给产品”加个聊天框”，而是 UI 架构的范式转移。

3.1 形态谱系：从气泡到 Agent #

CopilotKit（AG-UI 协议发起方，36.5k stars，2026 年 5 月完成 2700 万美元 A 轮）提出的 Generative UI 谱系是目前最清晰的框架，四阶递进：

形态交互模式代表UI 架构
L1 Copilot 气泡侧边助手，点到点辅助GitHub Copilot 风格传统 UI + 浮层
L2 Chat UI对话成为主界面ChatGPT、Perplexity消息流列表
L3 Generative UIAI 动态渲染结构化组件v0、AI Elements组件作为输出格式
L4 Agentic UIAI 调用你的前端代码、审批、状态双向同步CopilotKit Channels前端工具 + 共享状态

关键的分界线在 L3：AI 的”输出格式”从文本流变成组件树。AI 不再回答一段话，而是直接渲染一张退款状态卡、一个审批按钮组、一个图表——这些组件调用你自己的设计系统（useComponent 注册、render: YourComponent 渲染）。这就是”Generative UI”（生成式 UI）：LLM 生成的是结构化数据 + 组件引用，而不是 HTML 字符串。

3.2 协议层：2026 年的”HTTP 时刻” #

AI Native 前端的协议层正在标准化，三个名字值得记住：

  • AG-UI（Agent-User Interaction）：CopilotKit 发起、Google/Microsoft/Amazon/LangChain 等背书的前后端协议——代理端（agent）和用户端（app）之间的双向通信标准，把”组件渲染请求、用户输入回传、审批事件”定义成协议。
  • A2UI（Agent-to-UI）：更偏底层渲染协议，2026 年与 AG-UI 合并谈判进行中。
  • MCP Apps：MCP（Model Context Protocol）的应用层扩展，让 AI 把”渲染一个界面”当作工具调用。

再加上 Anthropic 的 Agent Skills（anthropics/skills 仓库 166.6k stars）定义的标准技能格式（SKILL.md + frontmatter），2026 年的 AI 前端协议栈已经齐全：Skills 教 AI 怎么做（方法论），AG-UI/A2UI 规定 AI 和 UI 怎么通信（协议），MCP 决定 AI 怎么调用世界（工具）。

3.3 工具层案例：四条路线 #

  • Vercel AI SDK（26k stars，20.3M 周下载）：AI 应用开发的”TypeScript 通用层”，AI SDK UI 提供 useChat/useCompletion 等框架无关 hooks，AI Elements 是官方 AI-Native 组件库。官方引用了 opencode（AI 编码终端）创始人的话：”OpenCode uses AI SDK”——连 AI 工具自己都用它。
  • Bolt.new（16.5k stars）：StackBlitz 的浏览器全栈 AI 开发环境（WebContainers 在浏览器跑 Node），AI 拥有文件系统、终端、服务器、控制台的完整控制权——“提示 → 运行 → 编辑 → 部署”闭环。
  • v0（Vercel）：设计稿/文字 → shadcn 风格代码的生成器，State of JS 2025 约 8% 采用率，是”AI 生成 UI 审美基准线”的塑造者。
  • CopilotKit：唯一把”Agent 接入现有业务系统”做全的产品——HITL（人在环）审批（useHumanInTheLoop）、前端工具（agent 调用你的应用函数打开订单）、跨端会话（Web/Slack/Teams/WhatsApp/iOS 同一线程，STATE_DELTA 同步）。Fortune 500 客户列表（Cisco、Apple、Docusign 等）是它企业级的背书。

3.4 为什么”结构化组件 > 文本流”是终局 #

从原理上讲，这是必然：文本流把”决策”和”执行”混在一起，组件树把它们分开。AI 生成一张退款卡片（结构化数据 + 组件引用），你的设计系统负责渲染——样式、交互、无障碍、品牌一致性全部由你控制，AI 只负责”内容与意图”。反之，AI 生成 HTML 字符串，等于让它同时做产品经理、设计师和前端——输出必然漂移、必然模板化、必然不可维护。

对复杂业务这意味着一件事：你的组件库不是”给人类看的 UI 零件”，而是”给 AI 用的渲染协议”。这就是为什么第二层的”代码所有权”（shadcn 路线）如此重要——AI 要能读懂并微调你的组件，它们必须是你的源代码。

第四层 缺陷与批判：诚实面对 2026 #

选型指南最容易被省略的部分，恰恰是决定成败的部分。

4.1 React Server Components：新范式的安全代价 #

2025 年 12 月，React 官方连续披露两批 RSC（React Server Components）安全漏洞：12 月 3 日的关键漏洞是未认证的远程代码执行（RCE），一周后研究者又发现两个同类漏洞。补丁以紧急节奏发布在 19.0.1、19.1.2、19.2.1 三个版本。

这件事的教训远超”记得升级”：RSC 把”服务端代码”和”客户端代码”揉进一个序列化协议，安全边界变得模糊，而任何把 server 能力暴露给网络的新范式，都会先付一笔安全学费。对选型者的含义：如果你的团队没有专门的后端安全能力，慎重引入全栈 RSC 架构（Next.js App Router 默认就是）；OPC 尤其如此——你一个人扛不起 CVE 应急。

Carniato 对 React 2025 年的总结与此呼应：”React 在崩溃和安全漏洞方面度过了艰难的一年”。

4.2 复杂度危机：数据不说谎 #

State of JS 2025 痛点榜前五是：React 问题（601）、过度复杂（435）、性能（239）、状态管理（217）、选择过载（215）。这是全球前端的集体供词：现代前端最大的敌人是自己叠加的复杂度。

为什么？Carniato 的”AI 无能论”给了结构性解释：AI 倾向绕开框架的高级抽象（RSC、Islands、元框架的约定），往底层拼装它熟悉的原语。于是”精心设计的框架层”被 AI 架空，代码退回”看起来像 React 的普通 JS”。你选的框架越复杂、约定越多，AI 越会绕开它——这是 2026 年选型必须考虑的反直觉因素。选择：要么用约定极少的栈（React + Vite 裸用），要么接受 AI 会生产”弗兰肯斯坦代码”并在架构审查上投入。

4.3 copy-paste 组件库的维护债务 #

shadcn 模式的代价是隐性的：组件代码属于你之后，升级就是你的责任。上游改 bug、改交互、修 a11y，你不会自动获得——需要手动 diff 上游变更。对团队是每周成本，对 OPC 是债务累积。缓解：把 shadcn 组件视为”起点而非终点”，只定制真正需要差异化的部分；或对”全功能企业库”场景（表格、表单密集）直接选 AntD，让上游替你维护。

4.4 AI 生成 UI：一致性漂移与模板化审美 #

  • 一致性漂移：AI 每次生成都是”统计采样”，同一产品的两个页面可能风格不一。治理手段只有一个：设计令牌 + 组件库约束，把 AI 的发挥空间限制在令牌和组件之内（这正是 AG-UI 结构化输出的意义）。
  • 模板化审美：三大面孔（奶油衬线、近黑酸性绿、报纸风）在 2026 年已经泛滥到”一眼 AI”。Anthropic frontend-design skill 的对抗策略值得抄：每次生成前先做”这个设计是否读起来像通用模板”的自检。
  • 可访问性风险：AI 生成的 UI 对键盘导航、屏幕阅读器、对比度的遵守率远低于人类专业作品。Base UI 存在的理由就在这里——用无样式 a11y 组件把”可访问性”做成不可绕过的地基，而不是指望 AI 自觉。

4.5 Comprehension Debt：AI 代码的隐性成本 #

Addy Osmani（Google 前端工程负责人）2026 年 3 月提出 Comprehension Debt（理解债）：AI 生成的代码你”能跑但看不懂”，每次修改都要花时间重新理解——这是新的技术债形态。他的后续文章《Earning taste and judgment》（2026 年 7 月）给出了解法：品味和判断力必须由人获得，无法外包给 AI。对选型的含义：选择结构简单、约定少、可读性优先的栈，就是在降低理解债——这是”少即是多”在 AI 时代的重新定价。

4.6 Tailwind 类名噪音与调试成本 #

Tailwind 的痛点公认且真实：长类名串可读性差、组件化不足时样式散落、动态类名（拼接）无法被编译器捕获。2026 年缓解手段已成熟：v4 的 @apply + 组件封装约定（shadcn 的 cn() + cva 变体），以及”类名只允许出现在组件层”的团队纪律。它在 AI 时代的优势同样真实：类名是纯字符串序列，LLM 生成准确率远高于手写 CSS 选择器——但请记住，这只是”AI 更擅长产生垃圾的格式”的另一面。

第五层 总结事物本身，以及 OPC 的落地路径 #

5.1 选型的本质 #

把五层收束成一个判断：前端选型不是选框架，是选”谁陪你走完业务的生命周期”——你的代码资产未来大部分由 AI 书写、由你审查，所以：

  1. 选 AI 训练数据最厚的抽象（React/Vue 优先），但别被”最后一个框架”的叙事绑架；
  2. 选代码所有权清晰的 UI 路线（shadcn/Tailwind/Base UI），因为组件库正在变成”AI 的渲染协议”；
  3. 选异步优先、渐进式的架构（Isomorphic-First），因为复杂业务的未来是流式、乐观与跨端；
  4. 别忽略安全与理解债这两笔隐形账——它们在你一个人扛的时候会被放大十倍。

5.2 OPC（One Person Company）：如何完成优秀的前端 #

一人公司做前端，2026 年第一次有了结构性可能。这不是口号：30% 的代码已由 AI 生成、Anthropic 官方发布 frontend-design skill、v0/Bolt 把”从提示到界面”压缩到分钟级。但 OPC 的答案不是”全交给 AI”，而是一套四层杠杆 + 三条纪律。

四层杠杆（按成本从低到高）

层工具干什么成本
L1 AI 生成v0 / Bolt.new / Claude + frontend-design skill从零产出界面初稿、探索视觉方向订阅费
L2 组件复用shadcn/ui + Tailwind v4 + Lucide拿到可维护的源码级组件，而非黑盒免费
L3 无头定制Base UI / Radix + Motion + Chart.js需要品牌差异化、严苛 a11y 时的地基免费
L4 Agent 工作流opencode / Cursor / Claude Code + Agent Skills批量重构、跨文件修改、自动化测试与部署订阅费

三条纪律

  1. 只搭一层，不搭体系。OPC 没有维护”自研设计系统”的资格。你的”设计系统”就是 shadcn + 设计令牌：@theme 定义 4-6 个色、2 个字族、一个签名元素（这正是 Anthropic skill 的 token 系统），其余全部复用。一次只把预算花在一个”签名元素”上——Chanel 的忠告：”出门前摘掉一件首饰”。
  2. AI 写代码，你写边界。用 AGENTS.md 类文档把项目约定固化（本站就在这么干），用 lint + 类型 + 测试把 AI 的输出约束在”能跑且可维护”范围内，用 code review（哪怕是 Agent review）保持理解债不失控。记住 Addy Osmani 的话：品味必须自己挣——AI 可以帮你执行审美，但”什么值得做”的判断力永远是你的。
  3. 不重复造 AI 的轮子。AI 能力栈（AI SDK / AG-UI / MCP）是 2026 年的”标准零件”，直接接入，不要自己写流式协议、工具调用解析、会话持久化。Carniato 的那句话是 OPC 的最佳注脚：“developing software as if in a team, even if there is only one developer involved”——像团队一样开发，即使只有一个人；在 2026 年，”团队”里多出来的成员就是你的 Agent。

预算与责任边界（诚实收尾）：OPC 用开源免费栈（shadcn/Tailwind/Base UI/Lucide/Motion）可以做到零软件成本；订阅大头是 AI 工具（v0/Bolt/Claude 类，约每月几十美元级）和部署（Vercel/Cloudflare 免费额度足够原型）。但你要为自己买三样东西：安全审计能力（RSC 漏洞的教训）、备份与监控（一个人挂机=全站宕机）、持续学习预算（框架稳态 ≠ 技术停滞，Rolldown、AG-UI、AI Elements 都在迭代）。开源前沿的馈赠是杠杆，不是保险。

最后，把这份指南压缩成一句可执行的话：

2026 年，用 React 或 Vue 打底，用 shadcn + Tailwind v4 拥有你的 UI 源码，用设计令牌守住品牌一致性，用 AG-UI/AI SDK 接入 AI Native 形态，然后用 Agent 工作流把一个人的产能放大成一个团队——同时永远记住，判断力不外包。

附：数据来源表 #

来源用途
State of JS 2025（2025.stateofjs.com）框架使用率/满意度/痛点榜、AI 工具榜、结论页
GitHub 仓库页（2026-08-06 抓取）各框架/库 stars
React 官方博客（react.dev/blog）React 19.2、Compiler 1.0、React Foundation、RSC 安全公告
Ryan Carniato《JavaScript Frameworks - Heading into 2026》（dev.to，2026-01-05）AI 回音室、Async-First、AI 无能论、OPC 团队观
Anthropic frontend-design SKILL.md（github.com/anthropics/skills）AI 模板三大面孔、token 系统、设计纪律
Addy Osmani《Comprehension Debt》《Earning taste and judgment》（addyosmani.com）理解债、品味不可外包
Tailwind CSS v4.0 发布文（tailwindcss.com）OKLCH/P3、CSS-first、构建性能
Vercel AI SDK 官网（ai-sdk.dev）周下载量、AI Elements、opencode 引用
CopilotKit 官网（copilotkit.ai）AG-UI、Generative UI 谱系、A 轮融资、企业客户
Ant Design / Base UI / Lucide / Element Plus / Bolt.new 官方仓库组件库定位与数据
State of CSS 2025:has()/aspect-ratio/级联层 Baseline