AI 学习指南

Vite + React 管理后台

使用明确的数据边界和交互状态构建生产级 React 管理后台页面。

编程开发Claude CodeCodexCursor

提示词

请为 {{business}} 实现生产级管理后台,模块包括:{{modules}}。

技术架构固定为 Vite + React + TypeScript + React Router + TanStack Query + Tailwind CSS + shadcn/ui。若项目已有路由或请求库,保留现状并说明差异,不并行引入第二套方案。

视觉风格为“{{designStyle}}”:优先信息层级、扫描效率和稳定布局。表格、筛选、批量操作、状态标签和危险操作必须清晰,不用装饰性大卡片稀释信息。

数据契约:{{dataContract}}。

约束:

- 先检查仓库和依赖;未知接口不得杜撰,建立类型化 adapter,并使用明确标注的 seed 数据演示。
- 若可用,读取 shadcn-best-practices、react-best-practices、webapp-testing;加载失败时不得假装成功。
- 所有请求都要有 Loading、Empty、Error、Retry 和权限不足状态。
- 表单包含客户端校验、提交中状态、服务端错误映射和防重复提交。
- 删除、停用等破坏性操作需要确认,且不能用仅靠颜色表达状态。
- 支持键盘操作、窄屏降级、长文本、超大数据量和慢请求场景。
- 输出前运行现有 lint、typecheck、test、build,并报告真实结果。

先给出页面结构和数据流,再实现代码;最后列出文件、命令、测试覆盖及尚未接入的真实接口。

646 字符

使用场景

适用于需要快速理解、整理或生成 编程开发 内容的任务。请先提供必要上下文,再根据输出结果继续追问和验证。

推荐搭配的 Skills

这些是从公开来源核对的外部 Skill。仅在当前 Agent 支持且能够读取时使用;无法加载时,不应声称已经调用。

变量说明

变量名类型必填说明示例
business文本后台业务与使用角色SaaS 订阅和客户管理后台
modules列表必须实现的模块概览、客户列表、订单详情、设置
dataContractJSON 或文本已知接口、类型或示例数据Customer 与 Subscription 类型定义
designStyle文本后台视觉与密度要求高密度、克制、偏专业工具

使用方法

1

复制提示词

2

替换变量

3

发送给 AI

4

检查结果

示例输入

请解释一个递归实现的 Fibonacci 函数,并指出复杂度问题。

示例输出

  1. 说明递归函数的执行过程。
  2. 分析重复计算导致的指数复杂度。
  3. 给出记忆化与迭代优化方案。

优化建议

提供更多上下文

分段解释复杂内容

结合测试与运行结果

指定关注点