Codex前端设计提示词工程：如何写出一次就生成高质量UI的提示词
# 响应式断点（使用项目标准）## 布局转换规则[描述不同断点下的布局变化]## 常见转换场景1. Grid列数: 1(mobile) → 2(tablet) → 3(desktop)2. 导航: 底部tab(mobile) → 侧边栏(tablet) → 顶部栏(desktop)3. 表单: 单列堆叠(mobile) → 双列(desktop)提示词要素最佳实践常见错误任务描述一句话明确模糊不清
·
一、提示词核心结构
1.1 完整提示词模板
## 任务描述
[一句话描述要实现什么]
## 具体要求
1. [设计系统复用要求]
2. [技术栈要求]
3. [响应式要求]
4. [特殊约束]
## 设计系统上下文
- 组件库: [路径]
- 设计变量: [路径]
- 路由规范: [说明]
- 状态管理: [说明]
## 验收标准
1. [视觉验收方式]
2. [交互验收方式]
3. [自动化验证方式]
## 参考材料
- 截图: [attach]
- 多状态截图: [attach]
- 草图: [attach]
1.2 模板变量说明
| 变量 | 说明 | 示例 |
|---|---|---|
| 任务描述 | 要实现的功能 | 实现一个产品列表页面 |
| 设计系统复用 | 组件和变量要求 | 复用src/components/下的现有组件 |
| 技术栈要求 | 项目使用的技术 | React + Tailwind + React Query |
| 响应式要求 | 断点定义 | mobile(375) tablet(768) desktop(1280) |
| 验收标准 | 怎么验证 | Playwright截图比对 |
| 参考材料 | 截图或草图 | 多状态截图 |
二、分层提示词策略
2.1 基础层提示词
## 基础要求（必须包含）
1. 复用现有组件库
2. 使用设计变量文件中的变量
3. 遵循项目路由和状态管理规范
4. 响应式适配所有断点
## 设计系统约束
- 颜色变量: src/styles/variables.css
- 间距变量: --spacing-* (4的倍数)
- 字体变量: --font-size-*, --font-weight-*
2.2 增强层提示词
## 视觉细节要求
1. 间距: [具体数值或参考截图]
2. 颜色: [使用变量名，如--color-primary]
3. 字体大小: [具体值]
4. 圆角: [具体值]
5. 阴影: [变量名或具体值]
## 交互细节要求
1. Hover效果: [描述]
2. 点击效果: [描述]
3. 过渡动画: [时长和缓动]
4. 加载状态: [描述]
5. 错误状态: [描述]
2.3 高级层提示词
## 特色风格要求
[如果需要独特的设计风格，在此描述]
例如：
- 玻璃拟态效果(backdrop-filter: blur)
- 极简风格，减少视觉元素
- 色彩渐变强调重要操作
## 性能要求
- 首屏加载 < 2s
- 动画使用transform/opacity
- 图片懒加载
- 无重大CLS
## 可访问性要求
- 颜色对比度符合WCAG 2.1 AA
- 键盘可导航
- ARIA标签完整
三、不同场景的提示词示例
3.1 简单组件：按钮
## 任务
实现一个PrimaryButton组件
## 要求
- 使用src/components/Button/Button.tsx的现有结构
- 颜色使用--color-primary变量
- 高度44px，圆角--radius-md
- Hover时背景变深10%
- Active时scale(0.98)
- 支持icon-left和icon-right插槽
## 验收
- Playwright验证：按钮在mobile(375px)和desktop(1280px)下外观一致
- 点击有ripple效果
3.2 中等复杂度：表单
## 任务
实现一个登录表单，包含：
- 用户名输入框
- 密码输入框（带显示/隐藏切换）
- 记住登录复选框
- 登录按钮
## 要求
- 使用src/components/Input/Input.tsx
- 使用src/components/Button/Button.tsx
- 输入框高度48px，圆角--radius-lg
- 标签在输入框上方
- 错误提示在输入框下方
- 支持回车提交
## 响应式
- mobile: 单列布局，按钮全宽
- desktop: 居中，最大宽度400px
## 状态
- Default: 正常状态
- Focus: 边框--color-primary
- Error: 边框红色，显示错误文案
- Loading: 按钮显示loading spinner
- Disabled: 按钮禁用灰色
3.3 高复杂度：数据表格
## 任务
实现一个产品列表表格，要求：
- 列：选择框、产品图、名称、价格、库存、操作
- 支持排序（点击列头）
- 支持多选
- 支持分页
- 支持行内编辑
## 要求
- 使用src/components/Table/Table.tsx
- 使用src/components/Pagination/Pagination.tsx
- 列宽可调整
- 单元格内容超出显示省略号，hover显示完整内容
- 选中行高亮--color-primary-light
## 响应式
- mobile: 表格横向滚动，列冻结
- tablet: 显示更多列
- desktop: 显示全部列
## 状态
- Default: 正常显示
- Loading: 表格区域显示skeleton
- Empty: 显示空状态插画
- Error: 显示错误提示
## 验收
- Playwright截图比对各状态
四、材料准备最佳实践
4.1 截图准备清单
| 截图类型 | 用途 | 必要性 |
|---|---|---|
| 桌面端完整页面 | 主参考 | 必须 |
| 移动端完整页面 | 响应式参考 | 必须 |
| Hover状态 | 交互细节 | 推荐 |
| 选中状态 | 选择交互 | 推荐 |
| 空状态 | 边界情况 | 推荐 |
| 加载状态 | 反馈设计 | 推荐 |
| 错误状态 | 错误处理 | 推荐 |
| 不同尺寸对比 | 响应式验证 | 可选 |
4.2 截图技巧
## 高质量截图要求
1. 使用真实浏览器截图，不是设计工具截图
2. 包含完整的首屏内容
3. 标注关键交互区域
4. 提供多种状态
5. 如果有特殊字体，标注字体名称
五、响应式提示词技巧
5.1 断点定义技巧
## 响应式断点（使用项目标准）
- Mobile: < 768px
- Tablet: 768px - 1023px
- Desktop: >= 1024px
## 布局转换规则
[描述不同断点下的布局变化]
## 常见转换场景
1. Grid列数: 1(mobile) → 2(tablet) → 3(desktop)
2. 导航: 底部tab(mobile) → 侧边栏(tablet) → 顶部栏(desktop)
3. 表单: 单列堆叠(mobile) → 双列(desktop)
5.2 响应式代码验证
## 验证策略
1. Mobile First: 先生成最小屏幕代码
2. 断点覆盖: 验证每个断点
3. 边界测试: 375px, 768px, 1024px等临界值
## Playwright验证代码
```typescript
test('响应式验证', async ({ page }) => {
const viewports = [
{ name: 'mobile', size: { width: 375, height: 667 } },
{ name: 'tablet', size: { width: 768, height: 1024 } },
{ name: 'desktop', size: { width: 1280, height: 720 } }
];
for (const vp of viewports) {
await page.setViewportSize(vp.size);
await page.goto('/page');
const screenshot = await page.screenshot();
expect(screenshot).toMatchSnapshot(`${vp.name}.png`);
}
});
## 六、设计系统复用提示词
### 6.1 组件库说明模板
```markdown
## 项目组件库
### 基础组件
- Button: src/components/Button/Button.tsx
- Input: src/components/Input/Input.tsx
- Card: src/components/Card/Card.tsx
- Modal: src/components/Modal/Modal.tsx
### 业务组件
- ProductCard: src/components/Product/ProductCard.tsx
- UserAvatar: src/components/User/UserAvatar.tsx
## 设计变量
### 颜色
- --color-primary: 主色
- --color-secondary: 次色
- --color-success/success/warning/error: 语义色
### 间距
- --spacing-1 ~ --spacing-8 (4px倍数)
### 字体
- --font-size-xs/sm/base/md/lg/xl/2xl
- --font-weight-regular/medium/semibold/bold
6.2 复用验证提示词
## 复用检查清单（Codex需遵守）
- [ ] 颜色必须使用变量，不能硬编码
- [ ] 间距必须使用--spacing-*变量
- [ ] 字体大小必须使用--font-size-*变量
- [ ] 圆角必须使用--radius-*变量
- [ ] 阴影必须使用--shadow-*变量
- [ ] 组件必须从src/components/导入
- [ ] 不能创建平行组件库
## 违规示例
❌ color: #1890ff // 硬编码
✅ color: var(--color-primary) // 使用变量
❌ padding: 12px // 硬编码
✅ padding: var(--spacing-3) // 使用变量
七、迭代优化提示词
7.1 差异驱动的修复提示词
## 第一轮反馈格式
差异区域: [具体位置]
差异描述: [如：间距比截图大8px]
期望: [如：间距应该是24px]
## Codex修复提示词模板
请修复以下差异：
1. [差异1的描述和期望]
2. [差异2的描述和期望]
修复后请用Playwright重新验证。
7.2 多轮迭代示例
## 迭代1
用户: 卡片之间的间距比截图大
Codex: 调整gap从32px到24px
验证: diff 3%
## 迭代2
用户: 移动端标题字体还是有点大，希望是18px
Codex: 调整@media (max-width: 767px)的h3字体为18px
验证: diff 1%
## 迭代3
用户: 差不多了，但hover时图片的scale效果好像没有
Codex: 检查代码，scale(1.05)已存在，可能是截图时没有hover
验证: 通过（确认代码正确）
八、高级技巧
8.1 风格引导技巧
## 通用结果（无风格引导）
"实现一个产品卡片"
→ 出来的是平平无奇的AI风卡片
## 特色结果（有风格引导）
"实现一个产品卡片，要求：
- 玻璃拟态背景(backdrop-filter: blur)
- 轻微的边框发光效果
- hover时整体上浮8px + 阴影加深
- 价格使用渐变文字
- 购买按钮有脉冲呼吸动画"
→ 出来的是有设计感的卡片
8.2 模糊细节处理
## 模糊描述
"实现一个导航栏"
## Codex处理方式
1. 选择最简单的实现
2. 在代码注释中说明选择依据
3. 询问用户确认
## 示例
```tsx
// 选择：使用flex布局而非grid
// 原因：导航栏项数量不固定，flex更适合动态调整
// 备选：如果后续需要更复杂的布局，可改为grid
## 九、企业级应用
### 9.1 提示词模板管理
```python
class PromptTemplateManager:
def __init__(self):
self.templates = {
'component': ComponentPromptTemplate(),
'page': PagePromptTemplate(),
'layout': LayoutPromptTemplate(),
'form': FormPromptTemplate()
}
def generate_prompt(self, template_type: str, context: dict) -> str:
"""生成提示词"""
template = self.templates.get(template_type)
return template.render(context)
def validate_prompt(self, prompt: str) -> ValidationResult:
"""验证提示词完整性"""
required_sections = ['任务描述', '要求', '验收标准']
missing = [s for s in required_sections if s not in prompt]
return ValidationResult(
is_valid=len(missing) == 0,
missing_sections=missing
)
9.2 API聚合平台集成
class EnterprisePromptPipeline:
"""通过API聚合平台（如weelinking等）执行Codex任务"""
def __init__(self):
self.client = OpenAI(
base_url="https://api.weelinking.com/v1",
api_key="YOUR_API_KEY"
)
async def execute_with_prompt(
self,
template_type: str,
context: dict,
project_id: str
) -> ExecutionResult:
"""企业级提示词执行"""
# 获取项目设计系统
design_system = await self.fetch_design_system(project_id)
# 生成提示词
prompt = self.prompt_manager.generate_prompt(
template_type,
{**context, 'design_system': design_system}
)
# 执行
response = await self.client.chat.completions.create(
model="codex-1",
messages=[{"role": "user", "content": prompt}],
extra_body={
"skills": ["playwright"],
"verification": "auto"
}
)
return ExecutionResult(
code=response.code,
prompt_used=prompt,
tokens_consumed=response.usage.total_tokens
)
十、总结
| 提示词要素 | 最佳实践 | 常见错误 |
|---|---|---|
| 任务描述 | 一句话明确 | 模糊不清 |
| 要求 | 分层描述 | 堆砌在一起 |
| 设计系统 | 明确变量路径 | 不提供上下文 |
| 验收标准 | Playwright自动验证 | 人工检查 |
| 材料 | 多状态截图 | 只有一张图 |
| 风格 | 具体描述期望 | 通用描述 |
核心原则：给Codex的材料越丰富、要求越具体、验收越自动化，结果就越接近预期。
#Codex #提示词工程 #前端自动化 #最佳实践
📖 推荐阅读
如果这篇对你有帮助，以下文章你也会喜欢：
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
5
0- 0
已为社区贡献9条内容
所有评论(0)