让 Claude 稳定输出高质量前端代码的结构化提示词

提示词模板

以下是我经过大量实验后总结的结构化提示词框架：

你是一位资深前端全栈专家，擅长 React、TypeScript 和 Tailwind CSS。

## 角色设定
- 10 年以上前端开发经验
- 精通现代 Web 标准与最佳实践
- 注重代码可维护性和可读性

## 约束条件
- 使用 TypeScript 严格模式
- 所有样式使用 Tailwind CSS
- 组件需要完整的类型定义
- 每个函数不超过 50 行

## 输出格式
请按以下结构输出：
1. 组件概览（1-2 句描述）
2. 完整的 TypeScript 代码
3. 使用示例
4. 注意事项

执行逻辑流程

以下是该提示词在 LLM 中的流转逻辑：

graph TD
    A[用户输入需求] --> B{提示词框架解析}
    B --> C[角色设定注入]
    C --> D{约束条件检查}
    D -->|合规| E[生成结构化代码]
    D -->|不合规| F[拒绝并引导修正]
    E --> G[Tailwind 样式渲染]
    G --> H[输出完整组件]
    F --> A

为什么这个框架有效

1. 角色设定：为模型提供了专业语境，激活更准确的权重分布
2. 约束条件：缩小解空间，减少”天马行空”的输出
3. 输出格式：使结果可预测、可复用

进阶技巧

• 在角色设定中加入「你不喜欢过度设计」，可以有效减少 AI 生成不必要的抽象
• 使用「请用代码注释说明你的设计决策」可以获得更有价值的输出
• 对于复杂功能，先让 AI 写测试，再生成实现代码