工具集

Vercel 官方成本与性能优化技能：先采集线上指标、用量与项目配置，只排查指标指向的路由和文件，输出带文档依据的优化建议排序；支持 Next.js、SvelteKit 与 Nuxt。需要 Vercel CLI v53+ 登录并关联项目。

用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。

先通过提问了解设计范围、痛点、参考产品、品牌调性与约束，再从项目现有的 Tailwind 配置、CSS 变量或组件库主题中提取视觉语言，在临时路由里生成 5 个不同的界面方案并附带交互式反馈浮层，按反馈迭代后输出实现计划，结束或取消时清理所有临时文件。面向 Next.js、Vite 等 React 项目。

Vercel 官方插件：内置 Vercel 生态知识图谱、数十个技能、部署与性能等专家子代理，以及部署、环境变量、项目状态命令，覆盖 Next.js、AI SDK、存储与 CI/CD。需 Node.js 18+ 与 Bun，默认开启遥测（可关闭）。

在 Next.js App Router 项目中，agent 只改动单个 CSS 值或 Tailwind 类时，页面上会出现浮动调节条，用户用方向键微调数值、切换相关属性，回车复制修改提示、Esc 还原。需在 app/layout.tsx 引入 budge.design 托管的运行时脚本。

把 Paper 设计稿（经 Paper MCP、Viewfinder 或导出的 JSX）实现为 React/Next.js 代码前先梳理层级、识别可复用组件；每个图标单独成组件，任意值收进 globals.css 令牌，优先复用 shadcn 组件，移植真实字体，图表按数据建模。