主题文章
功能组件与展示组件
功能组件解决“能不能用”——表单、弹窗、菜单；展示组件解决“好不好看”——3D、动效、视觉风格。两类组件的选法完全不同。
- 最后审阅
让 AI 写界面时，最常见的浪费是让它从零写一个下拉菜单或日期选择器。这类组件看起来简单，真正难的是键盘操作、焦点管理、屏幕阅读器支持——AI 很容易写出“能点但不能用”的版本。
所以我们把组件分成两类，分别对待。
功能组件：用现成的，不要自己写
按钮、表单、对话框、下拉菜单、标签页、提示框……它们的交互规范早就定好了（WAI-ARIA），可访问性细节多而琐碎。
- 首选 shadcn/ui。 它把组件源码直接放进你的仓库，底层用经过可访问性验证的无样式原语，外观用 Tailwind 定制。AI 能直接读、直接改。
- 给 AI 的规矩： 需要交互组件时，先用 shadcn/ui 添加，不要手写。
展示组件：按表现力选工具
3D 场景、滚动动画、页面切换、品牌感强的视觉——这些决定了网站“好不好看”，也最容易拖慢页面。
- 动效用 Motion。 声明式地写进入、退出、布局变化和手势动画。
- 3D 用 three.js。 在 React 里配合 React Three Fiber 使用。
- 视觉风格去风格博物馆挑。 选一种风格，把它的 AI Prompt 或 CSS 变量带回项目，让 AI 统一按这个风格写。
两条底线
- 展示组件必须尊重“减少动态效果”的系统设置。 有人会因为动画头晕。
- 展示组件不能挡住功能。 3D 和动画加载失败时，页面仍然要能用。