★ FEATURED ARTICLE 1. Vibe Coding 实战场景10 小时从零写出 Vue 3 TypeScript 开源 UI 库Vibe Coding 是最近前端圈子里被反复提到的一个词说白了就是「你负责表达意图AI 负责把代码敲出来」。它和传统「让 AI 补全一行代码」完全不是一个量级——你要做的是把需求、约束、目录结构、命名规范、验收标准一次性讲清楚然后让 AI 在一个可运行的工程里持续产出。这次我拿一个真实目标练手用 Vue 3 TypeScript 从零搭一个多端适配的开源 UI 组件库包含按钮、输入框、弹窗、标签页、倒计时、滑动操作等 21 个组件每个组件都要有类型定义、Storybook 文档和 Playground 演示。适合谁看如果你已经会写 Vue 3 的script setup但对「怎么让 AI 稳定产出符合规范的组件」还没头绪这篇就是给你准备的。10 小时不是噱头它指的是从pnpm create到pnpm build能跑通、能发 npm 的完整链路中间还包括反复修 AI 写歪的 CSS 和类型。真正拖时间的从来不是写代码而是多模型切换、Key 管理、上下文丢失这些协作摩擦。所以我会把 TaoToken 统一 Key 这条线也串进来让多模型调用不再靠复制粘贴 API Key 过日子。先说结论AI 写逻辑很强写 UI 很瞎。它能把props、emits、slots的类型推导写得比我还规范但默认生成的按钮间距、圆角、阴影经常惨不忍睹。这不是模型笨而是它没有眼睛训练数据里视觉空间关系本来就比语法结构更难学。所以 Vibe Coding 的正确姿势不是「许愿」而是「设计系统驱动的提示词工程」——把「好看」翻译成「高度 40px、圆角 8px、背景 $primary-color、间距 24rpx」这种可量化、可引用的规则。下面按真实操作顺序走先解决多模型统一调用再初始化工程然后给可复制的配置和提示词模板接着验证请求最后把踩过的报错一个个拆开。2. TaoToken 前置统一 Key 管理多模型调用告别 API Key 复制粘贴做 Vibe Coding 最烦的一件事是你在 Claude、GPT、Gemini 之间来回切。每个模型一个 Key每个 Key 一套计费写组件时想让 A 模型出逻辑、B 模型审 CSS结果光切 Key 就切到心态爆炸。TaoToken 解决的就是这个一个 Key、一个 Base URL背后挂多个模型OpenAI 兼容协议改base_url和model就能换模型代码几乎不用动。它的定位是「统一 API 通道管理」不是让你绕过什么而是把多模型调用的账号、额度、日志收敛到一个控制台里。对个人开发者来说最直接的好处是你的.env里只有一个TAOTOKEN_API_KEYCI 里也只配一个 secret不用再维护一堆环境变量。接入前你需要准备三样东西我把它叫「三件套」后面所有配置都围绕它项目值说明Base URLhttps://taotoken.net/apiOpenAI 兼容端点不加 UTMAPI Key控制台生成形如sk-...只显示一次Model ID如claude-sonnet-4-5/gpt-4o按控制台可用列表填获取路径很直接先到 TaoToken 控制台 注册登录然后在 API Keys 页面 创建一个 Key。创建时建议按项目命名比如you-web-ui-dev方便后面看用量。Key 只在创建时完整显示复制后存到密码管理器或本地.env别提交到 Git。如果你用的是 Claude Code 这类命令行工具TaoToken 也提供了对应的接入方式具体参数在 接入文档 里有说明。核心还是那三件套Base URL 填https://taotoken.net/apiKey 填你生成的Model ID 按需选。Claude Code 场景下通常走 Anthropic 兼容格式文档里有专门的 ClaudeCodeAnthropic 说明照着填就行。这里要提醒一句不要把生产数据库的直连信息塞进任何 AI 工具的配置里也不要用它去连内部敏感服务。TaoToken 是模型调用通道不是数据库代理边界要清楚。配好之后你可以在 模型对话 里先发一条消息验证 Key 是否可用确认没问题再进工程配置。这一步花两分钟能省掉后面半小时的 401 排查。3. 可复制配置Vue 3 TypeScript 工程初始化与多模型 settings 片段工程初始化我用 pnpmVite 做构建Storybook 做文档。先建目录pnpm create vite you-web-ui --template vue-ts cd you-web-ui pnpm install pnpm add -D storybook storybook/vue3-vite storybook/addon-essentials pnpm add -D unocss unocss/preset-attributify组件库的目录结构建议一开始就定死否则 AI 每次生成都会乱放文件。我用的是这套you-web-ui/ ├─ packages/ │ ├─ components/ # 组件源码 │ │ ├─ button/ │ │ │ ├─ src/button.vue │ │ │ ├─ index.ts │ │ │ └─ style/index.scss │ │ └─ index.ts # 统一导出 │ └─ theme/ # CSS 变量 │ └─ var.scss ├─ playground/ # 本地预览 ├─ docs/ # Storybook 文档 └─ .env.local.env.local里只放一个 Key多模型靠model字段区分TAOTOKEN_API_KEYsk-你的Key TAOTOKEN_BASE_URLhttps://taotoken.net/api如果你用 Cline 或类似的 VS Code 插件做 AI 辅助编码它的 MCP / 模型配置通常是一个 JSON。以 Cline 为例settings.json里可以这样写{ cline.apiProvider: openai, cline.openAiBaseUrl: https://taotoken.net/api, cline.openAiApiKey: sk-你的Key, cline.openAiModelId: claude-sonnet-4-5, cline.customInstructions: 所有 Vue 组件必须使用 script setup lang\ts\props 用 defineProps 泛型声明样式使用 BEM 命名颜色只允许引用 var(--y-color-*)。 }Codex 用户如果走auth.json结构类似把base_url指向https://taotoken.net/apiapi_key填你的 Keymodel填 Model ID。三件套缺一不可少一个就会在请求时被拒。组件库的package.json关键字段{ name: you-web-ui, version: 0.1.0, type: module, main: ./dist/index.umd.cjs, module: ./dist/index.js, types: ./dist/index.d.ts, exports: { .: { types: ./dist/index.d.ts, import: ./dist/index.js, require: ./dist/index.umd.cjs }, ./style.css: ./dist/style.css }, files: [dist], scripts: { dev: vite, build: vue-tsc --noEmit vite build, storybook: storybook dev -p 6006 } }CSS 变量集中在packages/theme/var.scss这是让 AI 产出统一 UI 的关键。你不给它变量表它就会自己编颜色:root { --y-color-primary: #3b82f6; --y-color-success: #22c55e; --y-color-danger: #ef4444; --y-radius-base: 8px; --y-space-base: 16px; --y-font-size-base: 14px; --y-button-height: 40px; }有了这套变量提示词里就能写「按钮高度用var(--y-button-height)圆角用var(--y-radius-base)」AI 不再自由发挥。这一步做完后面 21 个组件的 UI 一致性会好很多。4. 验证请求与组件验收从 curl 到 Storybook 跑通配置写完先别急着让 AI 生成组件先用 curl 验证通道是否通。这一步能排除 90% 的环境问题curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet-4-5, messages: [ {role: user, content: 用一句话说明 Vue 3 defineProps 泛型写法} ] }返回里能看到choices[0].message.content就说明通道正常。如果返回 401先检查 Key 有没有多余空格如果返回model not found去控制台确认 Model ID 拼写。通道通了之后把提示词模板固定下来。我实测最有效的是「三段式」角色 约束 验收。以 YButton 为例你是 Vue 3 TypeScript 组件库作者。请生成 YButton 组件。 约束 1. 使用 script setup langtsprops 用 defineProps 泛型声明。 2. props 包含 typeprimary/success/danger/default、sizesmall/medium/large、disabled、loading。 3. 样式使用 BEM 命名颜色只引用 var(--y-color-*)高度引用 var(--y-button-height)。 4. 必须导出 YButtonProps 类型。 5. 不引入任何第三方 UI 库。 验收 - vue-tsc --noEmit 无报错。 - Storybook 能渲染出 primary/success/danger 三种状态。 - 点击事件通过 defineEmits 声明类型为 (e: click, ev: MouseEvent) void。生成后立刻跑pnpm build让vue-tsc做类型验收。AI 写的类型十有八九会有小问题比如props里type和原生type冲突或者emits没声明。这些报错直接贴回给 AI让它改比你自己动手快。组件验收清单我固定成这几条每个组件过一遍检查项通过标准类型vue-tsc --noEmit零报错导出packages/components/index.ts有导出样式颜色/间距全部走 CSS 变量文档Storybook 有对应.stories.ts预览playground 里能交互命名组件名 Y 开头文件 kebab-case21 个组件按这个流程走10 小时是够的。基础组件YButton、YIcon各 20 分钟表单组件YInput、YTextarea、YCascadeSelection、YRadio每个 30 分钟展示组件YCell、YList、YTag、YFooter、YSteps、YTabs、YCountdown、YSwipeAction每个 25 分钟反馈组件YLoading、YTips、YDrawer、YModal、YToast每个 30 分钟。中间留 1 小时修 AI 写歪的 CSS 和类型。Storybook 跑起来后每个组件至少看三个状态默认、禁用、加载。AI 经常忘记disabled状态的样式或者loading时没禁用点击。这些在 Storybook 里一眼就能看出来比在代码里找快得多。5. 本篇常见错排查401、local proxy failed、reading choices、OAuthVibe Coding 过程中报错集中在几个地方我按真实遇到的顺序列出来。401 Unauthorized最常见。原因通常是 Key 没读到、Key 过期、或者 Base URL 写成了带/v1的完整路径导致拼接重复。检查.env.local是否被 Vite 加载变量名要以VITE_开头才能在客户端读到服务端脚本则不需要。如果是在 Cline 里报 401检查settings.json里openAiApiKey有没有引号包裹错误。local proxy failed这个报错通常出现在你本地起了代理工具或者环境变量里残留了HTTP_PROXY。AI 工具请求https://taotoken.net/api时走了本地代理代理又没配好就报这个。解决方式是清掉HTTP_PROXY/HTTPS_PROXY或者确认你的网络能直连。注意这里说的是清理环境变量不是让你去配什么特殊通道。reading choices这个报错说明请求返回的结构不是预期的 OpenAI 格式代码里response.choices[0]读不到。原因可能是 Base URL 填错返回了 HTML 错误页也可能是 Model ID 不存在服务端返回了错误对象。先 curl 一遍确认返回结构再检查代码里的解析逻辑。OAuth 相关报错如果你用 Claude Code 或 Codex 的 OAuth 登录方式又同时配了 TaoToken 的 Key可能会出现认证方式冲突。解决方式是二选一要么走 OAuth要么走 Key不要同时配。走 Key 的话把 OAuth 的 token 缓存清掉配置文件里只留 Base URL Key Model ID 三件套。类型报错Type X is not assignable to type YAI 生成的 props 类型经常和defineEmits对不上。把完整报错贴回给 AI加上一句「只改类型声明不要改组件逻辑」通常一轮就能修好。CSS 变量不生效检查var.scss有没有在入口main.ts里 import。Vite 项目里 SCSS 变量文件需要在vite.config.ts的css.preprocessorOptions.scss.additionalData里注入否则组件里直接用var(--y-color-primary)会拿到空值。Storybook 渲染空白多半是组件没在index.ts里导出或者 stories 文件路径没被 Storybook 扫描到。检查.storybook/main.ts里的stories配置确保包含packages/components/**/*.stories.ts。这些报错我基本都踩过一遍共同点是先确认通道curl再确认配置三件套最后才怀疑代码。顺序反了就会在代码里瞎找。6. 语义一致 CTA把统一 Key 用在长期编码与 Agent 协作上10 小时写出 21 个组件只是起点真正让 Vibe Coding 顺起来的是「协作摩擦」被消掉。以前我在 Claude、GPT 之间切光改 Key 和 Base URL 就够烦现在一个TAOTOKEN_API_KEY走天下.env里干干净净。写组件时用 Claude 出逻辑审 CSS 时切 GPT改文档时换 Gemini代码里只改model字段其他不动。如果你也想把这套流程跑起来建议按这个顺序先去 API Keys 生成 Key然后对着 接入文档 把三件套填进你的工具配置。想先试试模型效果可以直接在 模型对话 里发几条组件需求看看哪个模型写 Vue 3 类型更顺手。如果你打算长期做组件库、写 Agent、跑自动化编码Coding Plan 会更划算额度集中管理不用每个模型单独充值。我现在的做法是日常调试用按量长期跑 Agent 任务用 Coding Plan控制台里能看清每个项目的消耗。最后说个实用技巧把「三件套」写进项目的README或.env.example新同学 clone 下来照着填就能跑不用再问「Key 从哪来」。组件库开源出去之后贡献者也能用同一套配置接入 AI 辅助协作成本直接降一档。Vibe Coding 的自由不在于 AI 替你写多少行而在于你把省下来的时间拿去打磨真正重要的东西——比如那 21 个组件的交互细节比如你下一个想做的开源项目。
阅读完成 · 觉得有帮助？
