如何通过结构化 Prompt 引导 LLM 生成高质量的 React 组件代码

我最近在尝试一套结构化 Prompt 模版，强制让 LLM 在写代码前先进行「架构推演」，而不是直接出代码。核心在于把 Prompt 分成 Context（上下文）、Constraint（约束） 和 Output Schema（输出模式） 三个部分。

比如我想写一个复杂的 Data Table 组件，如果只说“写个带分页的表格”，它可能会给你写个 500 行的巨型文件。我的做法是定义一套严格的输出协议：

# Role: Senior React Architect
# Context: 
- Project: Next.js 14 (App Router)
- UI Library: Tailwind CSS + Shadcn UI
- State Management: Zustand

# Constraints:
- 必须遵循单一职责原则，将逻辑抽离到自定义 Hook 中。
- 严禁在组件内直接定义大型配置对象，需通过 Props 注入。
- 必须包含 TypeScript 类型定义，严禁使用 any。
- 样式必须使用 Tailwind 原子类，禁止写 CSS-in-JS。

# Output Schema:
1. [Logic]: 定义 hooks/useDataTable.ts 负责处理分页和过滤逻辑。
2. [Types]: 定义 types/table.ts 负责接口定义。
3. [UI]: 定义 components/DataTable.tsx 仅负责视图渲染。

这样引导后，AI 生成的代码结构会从一个 index.tsx 变成一个清晰的文件夹结构。

踩过的一个大坑：
在使用 Cursor 的 Composer 模式时，如果 Prompt 太笼统，它经常会自作聪明地删掉你原有的某些边缘 case 处理逻辑。为了解决这个问题，我在 Prompt 中加入了一条：Before modifying, analyze existing edge case handlers and ensure they are preserved or explicitly improved.（在修改前，分析现有的边缘情况处理逻辑，确保它们被保留或明确优化）。

效率提升的实操技巧：
如果你在用 Claude Code 或 Cursor，建议建立一个 .cursorrules 文件，把上述的约束条件直接写进去。这样你不需要每次发 Prompt 都重复一遍“用 Tailwind”、“不要 any”，直接下指令 create a user profile card，它就会自动按照你预设的结构化标准出代码。

对比之前，这种方式最大的提升是：生成的组件几乎不需要二次拆分，直接 copy 到项目中就能通过 Lint 检查，且逻辑层和视图层完全解耦，后续维护只需要改 Hook 而不需要在几百行 HTML 标签里找逻辑。