@tencent/create-ai-page

一个通用的脚手架工具，用于 AI 初始化 Web 应用，支持多种模板选择。

特性

• 🚀 快速启动：一键创建现代化的 Web 应用项目
• 📦 多种模板：提供基础模板与互动学习模板
• 🎨 现代化技术栈：基于 React + Vite + Tailwind CSS + shadcn/ui
• 📱 响应式设计：开箱即用的移动端适配
• 🔧 TypeScript 支持：完整的类型检查
• 🎯 AI 友好：内置 JSX 源码定位功能，方便 AI 工具理解代码结构

安装

npm install -g @tencent/create-ai-page

或者使用 npx（推荐）：

npx @tencent/create-ai-page my-app

使用方法

基本用法

create-ai-page <项目名称>

指定模板

create-ai-page my-app --template basic

跳过依赖安装

create-ai-page my-app --no-install

查看帮助

create-ai-page --help

可用模板

basic（基础模板）

简洁的单页应用模板，适合快速原型开发。

特点：

• 无布局组件，页面结构简单
• 适合单页应用或简单的展示页面
• 包含基础的路由和错误处理

使用场景：

• 快速原型开发
• 单页应用
• 简单的展示页面

技术栈

• React 19 - UI 框架
• Vite 7 - 构建工具
• TypeScript - 类型系统
• Tailwind CSS 4 - 样式框架
• shadcn/ui - UI 组件库
• Wouter - 轻量级路由
• Framer Motion - 动画库

项目结构

创建的项目结构如下：

my-app/
├── src/
│   ├── components/      # 组件目录
│   │   ├── ui/          # shadcn/ui 组件
│   │   └── ...          # 其他组件
│   ├── contexts/        # Context 提供者
│   ├── hooks/           # 自定义 Hooks
│   ├── lib/             # 工具函数
│   ├── pages/           # 页面组件
│   ├── assets/         # 静态资源
│   ├── App.tsx          # 应用入口
│   ├── main.tsx         # 应用启动文件
│   └── index.css       # 全局样式
├── scripts/             # 构建脚本
├── index.html           # HTML 模板
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置
└── package.json         # 项目配置

开发

创建项目后，进入项目目录：

cd my-app

安装依赖（如果使用了 --no-install）：

pnpm install  # 或 npm install

启动开发服务器：

pnpm run dev

构建生产版本：

pnpm run build

预览生产版本：

pnpm run preview

模板差异

basic 模板

• 无 Layout 组件
• 简单的单页应用结构
• 适合快速原型

自定义

创建项目后，你可以：

1. 修改主题：编辑 src/index.css 中的 CSS 变量
2. 添加页面：在 src/pages/ 目录下创建新页面
3. 添加组件：在 src/components/ 目录下创建新组件
4. 配置路由：在 src/App.tsx 中添加路由
5. 互动学习模板：编辑 src/lib/data.ts 中的 category 与 defaultExamPaperData / defaultHandoutData，由 AI 根据 jsonSchema 写入

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT

相关链接

• React
• Vite
• Tailwind CSS
• shadcn/ui