把 CTO 才关心的版本号、像素间距、目录规范全部写进提示词，AI 就是你的「技术合伙人」。
一、为什么要"把规范写进提示词"？
B 端系统讲究模块清晰、交互严谨、样式统一。与其让 AI「自由发挥」，不如一次性把技术栈、目录结构、像素级 UI 规范、甚至模拟数据结构全部给定死。 好处：
- 输出即高保真原型，可直接给客户/投资人演示
- 代码即生产规范，后续工程师在此基础上继续开发即可
- 10 分钟完成从 0 到 1，成本≈0，极大压缩 MVP 验证周期
二、整体思路：像 CTO 一样写"技术任务书"
- 技术选型精确到 patch 版本 保证 AI 不会安装已废弃或 API 变更的库
- 目录结构先画好"文件夹地图" AI 按图施工，不会乱放文件
- UI 规范写到像素级别 间距、圆角、阴影、表格列宽、按钮尺寸全部定死，AI 只需要"抄作业"
- 页面需求拆成"用户故事" 登录、首页、用户/角色/权限管理，每个模块给字段、给交互、给验证规则
- 模拟数据 + 异步延迟 让原型具备"真实网络感"，演示更逼真
- 响应式与主题化 桌面端优先，同时兼顾横向滚动与 darkMode 类名切换
三、10 分钟实操流程（5 步法）
| 步骤 | 动作 | 耗时 |
|---|---|---|
| ① | 打开 Cursor/Trae/Claude Code | 30 s |
| ② | 新建工程目录，粘贴「工业级提示词」 | 1 min |
| ③ | AI 自动规划任务 → 安装依赖 → 生成代码 | 6 min（去泡咖啡） |
| ④ | npm run dev 一键启动 | 30 s |
| ⑤ | 浏览器验收 → 继续对话微调 | 2 min |
四、「工业级提示词」模板（直接可用）
以下内容为单一段落，复制即可投喂 AI：
核心指令：构建一个基于 React 的 B 端管理系统。技术栈：React 18.3.1 + TypeScript 5.8.3 + Vite 6.3.5，UI 库 Ant Design 5.26.7 + 图标 @ant-design/icons 6.0.0 + lucide-react 0.511.0，路由 React Router DOM 7.7.1，状态管理 Zustand 5.0.3，样式 Tailwind CSS 3.4.17，图表 echarts 5.5.1，工具 clsx + tailwind-merge + sonner。目录结构：src/components/ 放通用组件，src/hooks/ 放 useTheme 等，src/lib/ 放 utils.ts，src/pages/ 放页面（Home.tsx、Login.tsx、system/ 下 UserManagement.tsx、RoleManagement.tsx、PermissionManagement.tsx），src/assets/ 放静态资源，App.tsx 负责主布局 + 路由，main.tsx 入口。布局规范：左侧可折叠 Sider + 顶部 Header + 内容区 Content；Content 区域 background 透明，margin 16px，minHeight calc(100vh - 112px)；页面容器禁止设 padding；卡片白底 8px 圆角，阴影 0 1px 4px rgba(0,21,41,.08)，marginBottom 16px，同行等高 Flexbox。表格规范：表头内容居中对齐，操作列宽 200px，时间列 160px；用户信息用"图标 + 用户名 + Tag(ID)"，状态用 Tag 色值区分，操作按钮 type="link" size="small"；必须带排序、分页、scroll={{ x: 'max-content' }}。登录页全屏渐变背景，居中卡片 400px 宽，含用户名、密码、记住我、模拟登录 1s 延迟，默认账号 admin/123456。首页用卡片分四列展示关键数据 + 快捷操作 + 系统动态。用户管理：CRUD + 搜索，字段 id|userId|userName|email|role|status|createTime|lastLogin。角色管理：CRUD + 权限分配。权限管理：Tree 组件层级展示 + CRUD。所有页面用本地模拟数据并 200-600ms 随机延迟。vite.config.ts 用默认 react() 插件，postcss.config.js 用标准 module.exports 对象，tailwind.config.js darkMode 设为 'class'，src/index.css 引入 tailwind 指令并移除 body 的 flex 居中。响应式适配桌面端优先。严格按照以上版本和规范生成可运行源码。
五、AI 输出效果截图（文字描述）
- 登录页
- 渐变背景，卡片居中
- 表单校验失败时红色提示即时出现
- 点击登录 → 出现 Spin → 1s 后跳转首页
- 首页
- 四列统计卡片（用户总数、本周新增、本周活跃、审核驳回）
- 快捷操作按钮：「新建用户」「导出数据」「刷新缓存」
- 下方 Timeline 显示系统动态（AI 自动生成 5 条假数据）
- 用户管理
- 顶部搜索框 + 新建按钮
- 表格横向滚动，操作列固定 200px
- 状态 Tag 绿色/红色，点击可切换激活/禁用
- 底部分页自带 "共 102 条" 文字
- 角色 & 权限
- 角色列表支持「分配权限」抽屉，抽屉内为权限树
- 权限树支持半选状态，点击保存后模拟 200ms 延迟关闭抽屉
六、常见微调指令（复制即用）
| 需求 | 指令 | |||||
|---|---|---|---|---|---|---|
| 改成 TopMenu 布局 | 把 Sidebar 换成顶部导航，保留面包屑，重新生成 App.tsx | |||||
| 增加「商品管理」模块 | 在 pages/ 下新增 ProductManagement.tsx，字段 id | name | category | price | stock | status，沿用表格规范 |
| 接入真实后端 | 把 utils/request.ts 封装 axios，所有模拟请求改为 RESTful 接口，加 interceptors | |||||
| 深色模式切换 | 在 Header 添加 Switch，点击切换 html 的 dark 类名，Tailwind dark: 前缀已配置好 |
七、项目质量与可维护性
- TypeScript 严格模式
所有 props、接口、模拟数据都有类型定义，AI 已自动
as const或interface - ESLint + prettier 预配 保存即自动格式化，无 console 报错
- Zustand 按模块切片
useUserStore、useRoleStore分离，后续好维护 - 样式全部 token 化
阴影、圆角、主色都收拢在
src/styles/vars.ts，方便后期换肤 - 按需加载 路由懒加载 + AntD 组件按需引入，首屏 < 200 KB（gz）
八、背后的"人机协作"理念
- 人负责决策 → 业务需求、规范、审美、验收
- AI负责执行 → 搭框架、写组件、调样式、补数据
把 80% 重复性"搬砖"时间压缩到 10 分钟，人类只需聚焦 20% 核心创新。 这才是 AI 编程工具带来的真正范式革命。
九、一键下载 & 二次开发
AI 生成完毕后，直接 git init + 提交，就是一个标准 React 仓库。
后续任何工程师都能无缝接手：补单元测试、接 GraphQL、加 CI/CD、上 Docker，全程无坑。
十、结语
把这份「工业级提示词」收藏起来， 下次老板/客户/导师说 "先做个后台看看效果"-- 你只需 10 分钟，就能甩给他一个功能完整、像素级专业、可点击演示的原型。 剩下的时间，去喝杯咖啡，再思考真正的业务创新吧。
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
