藏经阁·参考资源Resources

复制即用、可深度定制的 React 组件集合，本站组件体系的基础。

何时选它：组件代码复制进项目、归你所有，要深度定制或跟本站学习就选它

对 AI 说：用 shadcn 的 Dialog 组件做一个删除确认弹窗。

相关：筑基·组件法器·全部组件

企业级组件库，术语与组件命名对照的权威参考。

何时选它：企业中后台首选，表格与表单的交互规范最成熟

对 AI 说：用 Ant Design 的 Table 渲染这份数据，要带排序和列筛选。

成熟的 Material Design 实现，组件覆盖度极高。

何时选它：要组件覆盖面最全、Material 视觉可接受时选它

对 AI 说：用 MUI 实现一个带步进器的分步表单页面。

字节出品的企业级组件库，设计语言偏简洁。

何时选它：偏好字节系简洁设计语言、中文文档友好时选它

对 AI 说：用 Arco Design 的布局组件搭一个后台管理框架。

Vue 生态组件库，跨框架对照时很有用。

何时选它：Vue 项目选它，也可跨框架对照组件术语

对 AI 说：用 Element Plus 写一个 Vue 的系统设置表单页。

MUI 团队的下一代无样式原语，本项目采用。

何时选它：最新一代无样式原语，新项目直接从这里起

对 AI 说：用 Base UI 的 Select 原语实现自定义下拉，样式用 Tailwind 控制。

相关：筑基·组件

原子化 CSS 框架，shadcn 的样式基础。

何时选它：AI 生成原子类最顺，改样式不用在文件间跳

对 AI 说：用 Tailwind 把这个组件改成响应式：移动端单列、桌面端三列。

相关：筑基·HTML/CSS/JS筑基·响应式

shadcn 早期依赖的无样式、可访问性原语。

何时选它：老项目仍在用；其无障碍文档仍常被引用

对 AI 说：用 Radix 的 Tabs 原语封装一个自定义选项卡。

相关：筑基·组件

Adobe 的无障碍交互原语，复杂组件参考。

何时选它：复杂交互的无障碍处理拿不准时查它

对 AI 说：用 React Aria 的 useFocusRing 处理这个自定义按钮的键盘焦点样式。

相关：筑基·组件

本站使用的开源图标库（lucide-react），线形风格统一简洁。

何时选它：线形风格统一、开箱即用，跟本站就选它

对 AI 说：用 lucide-react 在这个按钮里加一个设置图标。

六种粗细一脉相承（thin 到 fill），@phosphor-icons/react 开箱即用。

何时选它：要同一套图标的多档粗细变化时选它

对 AI 说：用 @phosphor-icons/react 替换项目里的图标，统一 thin 风格。

四千余套描边图标，风格圆润，免费档即可覆盖常用品类。

何时选它：要量大且风格圆润，免费档即可覆盖常用品类

对 AI 说：从 HugeIcons 挑一组社交图标用在页脚。

聚合 200+ 图标集的统一 API，中途换库不用改代码。

何时选它：怕中途换图标库，用聚合层兜底

对 AI 说：用 Iconify 在 Vue 项目里引入 logos 集合的 GitHub 图标。

React 动画库，本站后续动效的基础设施。

何时选它：动画基础设施，入场/手势/布局动画一肩挑

对 AI 说：用 Framer Motion 给这个卡片加入场动画：淡入并上移 12px。

相关：玉简·过渡玉简·微交互

在 shadcn 基础上加入动效的组件集合。

何时选它：shadcn 体系内要现成动效区块时选它

对 AI 说：用 Magic UI 的 Animated Grid Pattern 给页面背景加纹理。

特效向组件库，适合做有视觉冲击的区块。

何时选它：要视觉冲击力强的特效区块时选它

对 AI 说：用 Aceternity 的 Spotlight 组件做 Hero 区的聚光效果。

终端里的对话式写码智能体，配合 CLAUDE.md 约定工程规范。

何时选它：终端里的主力智能体，适合大重构与多文件改动

对 AI 说：（在 Claude Code 里）按 CLAUDE.md 的约定，为这个页面补上单元测试。

相关：真言·提示词指南

AI 优先的代码编辑器，擅长按项目既有风格续写代码。

何时选它：喜欢在编辑器里对话、按既有风格续写时选它

对 AI 说：（在 Cursor 里）参照 components/ 目录的既有风格，新增同类的设置页。

相关：真言·提示词指南

用自然语言生成 shadcn 组件与页面，适合快速出原型。

何时选它：几分钟出 shadcn 页面原型再回来微调

对 AI 说：（在 v0 里）用 shadcn 生成一个带筛选和分页的用户表格页面。

相关：法器·前端组件

开源的 Agent 说明文件规范：一份 AGENTS.md 向所有主流编码工具声明项目结构、代码风格与禁忌。本站「约定先行」理念的官方落点，与 CLAUDE.md 内容互通、格式兼容。

何时选它：任何 AI 工具进场之前，先立好项目规矩

对 AI 说：参照 agents.md 规范，为这个项目写一份 AGENTS.md：包含目录结构、命名约定和「不要做」清单。

相关：真言·提示词指南

OpenAI 的终端编码智能体，与 Claude Code 同属「在仓库里干活」的路数，可对照两家对 AGENTS.md 的读取约定。

何时选它：OpenAI 系工作流，或想对照两家终端智能体差异

对 AI 说：（在 Codex CLI 里）按 AGENTS.md 的约定重构这个模块，保持对外行为不变，跑完测试再汇报。

相关：真言·提示词指南

GitHub 官方 AI 助手，编辑器内逐行补全与对话，适合保留手写习惯、让 AI 打辅助的工作流。

何时选它：保留手写习惯，让 AI 逐行打辅助

对 AI 说：（在 Copilot Chat 里）逐段解释这个正则的含义，并指出可能的回溯性能风险。

类型安全的 ORM，schema 即文档，迁移工作流成熟。

何时选它：重数据建模与迁移工作流，schema 即文档

对 AI 说：用 Prisma 定义 User 和 Post 模型（一对多），并生成迁移。

相关：筑基·数据库灵脉·仓廪数据库

轻量 SQL-like 的 ORM，写法贴近原生 SQL。

何时选它：熟悉 SQL、想要更轻的运行时选它

对 AI 说：用 Drizzle 写 User/Post 一对多关系，并展示等价的原生 SQL。

相关：筑基·数据库

Next.js 生态的登录方案（原 NextAuth），多登录方式插件化。

何时选它：Next.js 生态接第三方登录的标准答案

对 AI 说：用 Auth.js 给 Next.js 项目加 GitHub 第三方登录。

相关：玉简·登录灵脉·关防鉴权

Schema 校验库，前后端共用同一份入参规则。

何时选它：前后端共用同一份入参校验规则

对 AI 说：用 zod 定义这个注册表单的校验规则，前后端共用。

相关：玉简·表单校验灵脉·结界安全

开发者友好的邮件发送服务，支持 React 写邮件模板。

何时选它：用 React 组件写邮件模板，开发者体验好

对 AI 说：用 Resend 发一封注册欢迎邮件，模板用 React 组件写。

Serverless 友好的 Redis，按请求计费，适合缓存与限流。

何时选它：serverless 项目加缓存/限流，按请求计费

对 AI 说：用 Upstash Redis 给这个接口加 60 秒缓存。

相关：玉简·缓存灵脉·镜花缓存

Vercel 的对象存储，上传文件并返回公开访问链接。

何时选它：Vercel 项目里最省事的文件存储

对 AI 说：用 Vercel Blob 实现图片上传并返回公开访问链接。

相关：灵脉·玉匣文件存储

Next.js 的官方东家，Git 推上去即自动部署，预览环境、Serverless/边缘函数全套自带，Next 项目几乎零配置。

何时选它：Next.js 项目部署的默认答案，几乎零配置

对 AI 说：把这个 Next.js 项目部署到 Vercel：告诉我需要配哪些环境变量、哪些文件要改动。

相关：筑基·部署灵脉·布阵部署

跑在全球边缘节点的部署平台，免费额度慷慨，静态站与全栈（Next/OpenNext）都能放，适合追求访问速度与低成本的场景。

何时选它：要边缘网络速度与慷慨的免费额度

对 AI 说：把这个 Next.js 项目改为部署到 Cloudflare Pages（用 OpenNext 适配），列出兼容性风险。

相关：筑基·部署灵脉·布阵部署

老牌部署平台，除常规部署外自带表单接收、定时函数等附加能力，非 Next 项目也可以先看这里。

何时选它：非 Next 项目，或要表单/定时函数等附加能力

对 AI 说：把这个静态站点部署到 Netlify，并配置每夜构建的定时函数。

相关：筑基·部署灵脉·布阵部署

Serverless Postgres 托管：按用量计费、秒级扩缩，数据库分支可以像代码分支一样开，Prisma/Drizzle 官方均推荐。

何时选它：serverless Postgres，还能像代码一样开分支

对 AI 说：把项目接到 Neon 的 Postgres：给出连接串配置和 Prisma datasource 写法。

相关：筑基·数据库灵脉·仓廪数据库

开源的 Firebase 替代：Postgres 托管打底，鉴权、文件存储、实时订阅一并提供，想一个平台解决多件事时选它。

何时选它：想一个平台同时拿到数据库+鉴权+存储

对 AI 说：用 Supabase 给项目加数据表和邮箱登录，前端用它的客户端 SDK 直连。

相关：筑基·数据库灵脉·仓廪数据库灵脉·关防鉴权

基于 SQLite 的边缘数据库，读副本铺到全球节点，延迟极低；Drizzle 对 SQLite 语法友好，两者常一起出现。

何时选它：边缘 SQLite，读多写少场景延迟极低

对 AI 说：用 Drizzle + Turso 搭一个文章表的最小示例，含建表与查询。

相关：筑基·数据库灵脉·仓廪数据库

本站框架的官方文档，App Router、渲染与部署讲得最透；配套 Learn 免费课程（nextjs.org/learn）。

何时选它：App Router 的一切以此为准

对 AI 说：按 App Router 官方文档，把这个页面改成服务端数据获取。

相关：筑基·路由筑基·部署

React 概念、Hooks 与最佳实践的权威来源。

何时选它：Hooks 与渲染行为的最终解释权在这

对 AI 说：按官方文档确认 useEffect 依赖数组的行为，再解释这段代码。

相关：筑基·组件

组件用法、主题与安装说明的官方来源。

何时选它：组件安装与主题定制照着做

对 AI 说：按官方文档的 CLI 方式把 Tabs 组件装进项目。

相关：法器·前端组件

原子类与配置的官方参考。

何时选它：原子类与配置查这里

对 AI 说：查一下 Tailwind 自定义 boxShadow 的配置写法，给卡片加一层柔和投影。

官方区块级布局，可直接拼装成完整页面。

何时选它：页面级布局直接抄官方成品

对 AI 说：参考官方 Blocks 里的 dashboard 布局，改造成我的项目首页。

相关：图卷·页面画廊

Web 标准（HTML/CSS/JS/DOM）的权威参考，也是 MDN 这个名字的出处。AI 给出的 API 行为先来这里核实，别信口相传。

何时选它：Web 标准 API 行为的原产地

对 AI 说：查一下 MDN 上 Array.prototype.sort 的文档，确认这个排序写法是否稳定，再决定要不要改。

相关：筑基·HTML/CSS/JS

TypeScript 官方手册，类型系统概念（泛型、联合类型、收窄）的标准说法。本站全部代码用 TS 写成，类型报错先对照这里的术语。

何时选它：类型概念的标准说法

对 AI 说：按官方 Handbook 里 narrowing 一节的说法，解释这个函数为什么报类型错误，并给两种改法。

浏览器兼容性查询的权威站，决定一个新 CSS/JS 特性「现在能不能用」之前先查这里。

何时选它：新特性上线前先查浏览器兼容性

对 AI 说：查一下 CSS 容器查询在各浏览器的支持情况，判断这个项目现在能不能放心用。

Google 的 Web 最佳实践站，Core Web Vitals（性能三指标）的官方出处，做性能优化时的对照标准。

何时选它：性能优化对照 Core Web Vitals

对 AI 说：按 web.dev 的 Core Web Vitals 建议，分析这个页面 LCP 偏慢的原因并给出优化清单。

源码与社区讨论，遇到问题可查 issue。

何时选它：搜 issue、提 bug 的第一现场

对 AI 说：去 issue 区搜 Dialog 在 SSR 下的已知问题，总结 workaround。

Figma 官方社区，可找到 shadcn 设计套件，便于设计稿对齐。

何时选它：对设计稿时找官方 shadcn 套件

对 AI 说：按这份 Figma 设计稿还原页面，组件尽量用 shadcn。

全球最大的程序员问答社区，英文提问与检索；冷门报错在这里的命中率通常最高。

何时选它：英文报错关键词搜索命中率高

对 AI 说：把这段报错翻译成英文关键词，拟一个 Stack Overflow 搜索式，并列出最可能的三种原因。

中文前端技术社区，实战文章与踩坑记录密度高，适合补中文语境的实践经验。

何时选它：中文实战文章与踩坑记录最密

对 AI 说：在掘金搜这个库的实践文章，总结前人普遍踩过的坑，对照检查我的实现。

中文开发者社区，按节点划分讨论区，工具选型、工作流类话题的讨论氛围好。

何时选它：中文工具选型与工作流讨论氛围好

对 AI 说：汇总 V2EX 上关于这个工具的讨论帖，归纳大家反映的优点与槽点。