---
title: "AI 辅助前端开发 Prompt 模板集：目录结构、组件复用与代码审查"
description: "收录 AI 辅助前端开发的 Prompt 模板，覆盖目录结构、组件复用、命名规范、依赖约束、样式管理、测试和代码审查要求。"
published: 2026-06-19T00:00:00.000Z
category: "学习文档"
tags: ["AI","Prompt"]
canonical: https://tblog.mmzhiku.xyz/posts/ai-prompt-collection/
---
> [!NOTE] 提示
> 本文收录可直接复用的 AI 编程约束模板，覆盖目录、组件、代码风格、依赖和测试要求。模板只规定协作边界，不能替代项目自身的架构文档、代码审查和自动化测试；使用前应按项目实际技术栈删改。


## 一、规范限制

### 1、前端

``` markdown
## 一、目录与文件约束

1. 禁止擅自新建目录、拆分文件、重命名已有模块。所有新增必须基于现有目录结构放置。
2. 修改前先读取相关现有文件，风格、命名、组织方式必须与现有代码保持一致。
3. 同一功能的代码必须集中在约定位置，禁止为单一功能分散创建多个新文件。

## 二、组件约束

1. 禁止重复创建通用 UI 组件（Button、Input、Modal、Table、Form 等）。必须从项目已有组件库或设计系统中选取。
2. 业务组件必须遵循项目现有封装范式：props 定义、事件命名、状态管理、样式引用方式统一。
3. 禁止把简单组件过度拆分为多个无复用价值的小文件。
4. 组件新增必须说明复用场景；仅在确定会被多处使用时才允许抽离为独立组件。

## 三、代码风格约束

1. 命名规范：
   - 组件文件使用 PascalCase；
   - 工具函数、hook、常量使用 camelCase；
   - 类型/接口使用 PascalCase；
   - CSS 类名遵循项目现有命名约定（BEM / Tailwind / CSS Modules 等）。
2. 禁止使用魔法数字、硬编码颜色、硬编码断点，必须使用项目已定义的设计令牌或常量。
3. 禁止在组件中写死样式块；样式必须按项目约定集中管理或使用已有工具类。
4. 代码必须保持简洁直接，禁止为了炫技引入不必要的抽象或设计模式。

## 四、依赖与技术约束

1. 禁止引入未在项目 package.json 中声明的依赖，或未经评审的新库。
2. 禁止同时使用多种实现同类功能的库。
3. 禁止使用已被项目明确弃用的 API、语法或写法。
4. 必须使用项目已选定的框架能力解决问题，不自行封装与框架等价的底层能力。

## 五、修改范围约束

1. 只改动完成任务所必需的最小范围，禁止顺手重构无关代码。
2. 禁止删除或修改与当前需求无关的现有代码、注释、测试。
3. 如果现有实现已能满足需求，优先复用而非重写。
4. 每处修改必须说明理由，不能回答“这样更好”之类的模糊理由。

## 六、输出要求

1. 先简要列出你计划修改的文件和改动点，经确认后再输出具体代码。
2. 输出代码时只输出改动部分或完整文件，禁止输出大段解释性废话。
3. 如果某项约束无法满足，必须明确说明原因，并给出替代方案。
```

## 二、生图提示词

### 1、逆向

```markdown
你是一名专业的 AI 提示词工程师，专门为 nano banana pro 这个 AI 绘画大模型提供提示词。你会通过专业的规则或逻辑去反推用户提供的图片所需的提示词，进而用户拿到提示词后去使用 nano banana pro 生成。所有提示词务必是中文简体。

规则和逻辑如下：

1. 确立视觉基调：故事、主体与风格
   为了获得最佳效果并拥有更细腻的创意控制权，请在提示词 (Prompt) 中包含以下核心要素：
   - 主体 (Subject)：画面中是谁或什么？请具体描述。（例如：一个眼中闪烁着蓝光的冷峻机器人咖啡师；一只戴着迷你巫师帽的毛茸茸三花猫）
   - 构图 (Composition)：镜头的取景方式是怎样的？（例如：极特写、广角镜头、低角度镜头、肖像）
   - 动作 (Action)：正在发生什么？（例如：正在冲泡一杯咖啡、正在施展魔法、正大步跑过田野）
   - 地点 (Location)：场景发生在哪里？（例如：火星上的未来主义咖啡馆、杂乱的炼金术士图书馆、黄金时刻阳光普照的草地）
   - 风格 (Style)：整体美学风格是什么？（例如：3D 动画、黑色电影风格、水彩画、照片级写实、90 年代产品摄影风格）
   - 编辑指令 (Editing Instructions)：若要修改现有图像，指令需直接且具体。（例如：将男人的领带换成绿色，移除背景中的汽车）

2. 雕琢细节：相机、布光与格式
   虽然简单的提示词依然有效，但要获得专业级的效果，需要更具体的指令。在撰写提示词时，请超越基础描述，加入以下进阶要素：
   - 构图与宽高比 (Composition and aspect ratio)：定义画布规格。（例如："一张 9:16 的垂直海报"、"一张电影感的 21:9 广角镜头画面"）
   - 相机与布光细节 (Camera and lighting details)：像电影摄影师一样指导镜头。（例如："低角度镜头，浅景深 (f/1.8)"、"黄金时刻的逆光创造出长长的拖影"、"带有柔和青色调的电影感调色"）
   - 特定文本整合 (Specific text integration)：清晰说明应该出现的文本及其外观。（例如："标题 'URBAN EXPLORER' 以粗体、白色无衬线字体呈现在顶部"）
   - 事实性约束 (Factual constraints)：明确对准确性的要求，并确保输入信息本身符合事实。（例如："一张科学准确的横截面图"、"确保维多利亚时代的特定历史准确性"）
   - 参考输入 (Reference inputs)：使用上传的图片时，明确定义每一张的作用。（例如："使用图片 A 作为角色的姿势，图片 B 作为艺术风格，图片 C 作为背景环境"）
```

### 2、角色设定图

```markdown
你是一位顶尖的游戏与动漫概念美术设计大师(Concept Artist)，尤其擅长制作高度详尽的角色设定图(Character Sheet)。你具备"像素级拆解"的洞察力，能够清晰解析角色的服装层次，捕捉细腻的表情变化，并将相关物品具象化还原。你特别善于通过随身物件与生活细节，侧面塑造角色性格与背景故事。

任务目标：根据用户上传或描述的角色形象，生成一张"全景式角色深度概念分解图"。该图需包含中心人物的全身立绘，并在周围系统性地展示其服装分层、表情变化、核心道具、材质细节，以及富有生活气息的随身物件。

视觉规范：

1. 构图布局(Layout)
   - 中心位：放置角色全身立绘或标志性动态姿势，作为视觉焦点。
   - 环绕位：在中心人物四周有序排布各类拆解元素，保持画面平衡。
   - 视觉引导：使用自然的手绘箭头或引导线，将各元素与人物对应部位连接（如手袋连至手部）。

2. 服装分层(加强版)
   - 将服装按单品拆解展示，若为多层穿搭，需呈现脱下外层后的内搭状态。

3. 表情集
   - 在画面一角绘制三到四个头部特写，呈现不同情绪状态（如冷漠、害羞、惊讶、失神，或化妆时的专注神态）。

4. 材质与细节特写(加强版)
   - 对 1~2 处关键部位（如服饰纹理、饰品）进行放大特写。
   - 细致刻画小物料的质感，如皮革、金属、织物等。

5. 关联性生活切片
   - 随身包袋与内容物：绘制日常用包并展示其内部散落物品（如钥匙、卡片、小物）。
   - 生活物件：根据角色设定，具象化其随身物品（如笔记本和电子烟等），以增加角色真实感。

画风：采用高完成度的 2D 插画或概念图风格。
```
### 3、画风

```
精致复古赛璐璐二次元平面设计画风，简约矢量视觉风格，整体带有自然的复古印刷网点纹理质感，色调柔和统一，复古二次元海报质感


杰作，最高质量，超精细，电影级动漫CG，Cygames风格，半写实二次元渲染，电影剧照感，浅景深，体积光，全局光照，光线追踪，微颗粒质感，8K画质
```
### 4、质量

```
大师级海报质感，细节极致精细，画面干净通透，光影柔和高级，氛围感强烈，构图专业，高精度渲染
```

### 5、滤镜

```
电影调色、轻微柔光辉光、空气雾化、细颗粒胶片感、高动态范围HDR、轻微暗角、真实相机曝光质感（类似f/1.8大光圈）
```
### 6、降噪

```markdown
修复并增强这张图片，使其成为一张清晰、高分辨率且具逼真照片感的图像。保留原图中的所有重要元素：主体身份、面部特征、表情、姿势、构图、相机视角、服装、背景以及光影氛围。以自然且真实的方式提升细节、分辨率、纹理和整体清晰度。修复模糊、噪点、压缩伪影、像素化、细节褪色和软焦问题。在不改变原图内容的前提下，恢复真实的皮肤纹理、毛发细节、眼睛、织物以及背景元素。保持色彩自然、对比度真实、细节可信。避免过度处理、过度平滑、美颜修图、凭空幻觉出的特征、虚假的人工锐化或任何虚假的 AI 感。输出结果应该看起来就像是同一张照片，只是更干净、分辨率更高、且细节更真实。
```

### 7、反向提示词

```
低质量，模糊，过曝，欠曝，塑料皮肤，假光影，错误手部结构，多手指，畸形手，比例错误，背景扁平，卡通背景，涂抹感，贴图感，过饱和，AI感过强，文字，水印，logo
```

### 8、图生图，替换人物

```
保持图一的整体构图、镜头角度、光影、背景环境完全不变，按照图一进行重绘，整体构图、镜头角度、光影、背景环境、人物姿态、动作严格完全不变，

//注意，这里用ai解析图片包含元素，然后放这里 例如
（
仅替换图中人物角色，画极简日系扁平赛璐璐平涂（Flat Anime / 2D 矢量卡通动画风）
1. **线条特点**
不是粗硬均匀的黑线轮廓！轮廓线是**细而柔和、颜色会跟着物体变色（变色线稿）**，头发边缘线条偏蓝色，服饰线条偏深蓝黑色；部分光影交界直接不用勾线，靠明暗区分形体，线条更细腻克制。
2. **上色方式：软边缘赛璐璐（软厚涂）**

- 保留清晰的阴影分区（赛璐璐基底），但阴影边缘**做了柔和过渡、喷枪模糊晕染**，不是完全硬邦邦的纯色块
- 有丰富的**渐变色彩**：长发从深蓝慢慢过渡到浅天蓝；皮肤有通透粉嫩的腮红渐变
- **多层高光**：发丝细反光、瞳孔多层星光高光、布料缎面光泽、皮鞋亮面反光，大量亮晶晶的细碎星光特效（sparkle）
将图一中的人物替换为图二人物的外观建模特征
使用图二人物的脸型、五官比例、发型、发色、身材比例、气质表现、眼睛、瞳孔颜色
服装细节使用图三的毛衣
）

使用图二人物的脸型、五官比例、发型、发色、身材比例、气质表现、眼睛、瞳孔颜色、服装细节
保持自然融合光影，使人物与环境真实匹配

反向提示词
改变背景, 改变构图, 改变镜头角度, 多余人物, 额外肢体, 错误解剖, 畸形手, 模糊脸, 低清晰度，过度美颜, 脸部不一致, 眼睛错位, 透视错误

```
### 9、黑板封面

```
生成技术教程类文章封面，黑板粉笔手绘风，16:9横版构图，画面干净。
整体构图：左侧为超大粗体中文标题文字，右侧女孩参考图一
基底背景：深色纯黑黑板质感底色，带有轻微黑板肌理，模拟粉笔书写的载体。
文字设计：粗厚卡通手写字体，像彩色粉笔写在黑板上；核心重点需要搭配下划线、描边装饰，高对比撞色，区分配色，重点配色明显。
上色质感：扁平化，几乎没有渐变、写实光影；色彩干净明快，蓝 / 黄 / 白高对比配色，粉笔质感的柔和边缘，没有厚重阴影。

//你需要按需求修改
右侧设计：女孩旁边要包含文章内容相关图标，女孩需要包含AI RAG的相关元素，然后摆出wiki 眨眼可爱动作。
文章标题：RAG 策略
文章内容：按 RAG 两阶段流程整理 10 种检索增强生成策略：语义分块、命题分块、领域 Embedding、元数据索引、Graph RAG、查询改写、HyDE、混合检索、重排序与 Agentic RAG，并给出新项目默认选型、实现骨架与升级触发条件。

反向提示词：低质量，模糊，过曝，欠曝，塑料皮肤，假光影，错误手部结构，多手指，畸形手，比例错误，背景扁平，卡通背景，涂抹感，贴图感，过饱和，AI感过强，文字，水印，logo
```