---
name: image2-prompt-pack
description: |
  This skill should be used when the user asks to convert a PRD,
  OpenSpec change, or product idea into a structured GPT Image 2 UI
  prompt pack for generating high-fidelity flat UI reference images.
  It produces prompt materials, UI type decisions, variants, negative
  prompts, and reference selection checklists, not frontend code.

argument-hint: "[prd-file-or-change-name]"
---

Version: 2.0.0

# image2-prompt-pack

Create a structured GPT Image 2 prompt pack from PRD or OpenSpec inputs.

This skill prepares materials for generating a UI reference image. It does not implement UI, extract visual specs from screenshots, or build the final design system.

## Trigger Conditions

Use this skill when the user asks to:

- generate GPT Image 2 prompts from a PRD
- create UI image prompt materials
- convert OpenSpec change into reference image prompts
- prepare prompt pack for UI screenshot generation
- generate variants for a UI reference image
- standardize image generation inputs before visual-to-spec

## Required Input

```text
prd.md
```

## Optional Inputs

```text
openspec/changes/<change>/proposal.md
openspec/changes/<change>/specs/**/spec.md
openspec/changes/<change>/design.md
openspec/changes/<change>/tasks.md
brand.md
visual-preferences.md
technical-constraints.md
ui-ux-pro-max output
frontend-design output
```

## Source of Truth

1. PRD / OpenSpec spec — product goal and user-visible behavior
2. User visual preference — explicit direction from the user
3. Technical constraints — frontend feasibility and platform constraints
4. ui-ux-pro-max — weak design/UX reference only
5. frontend-design — anti-generic reference only
6. Skill inference — fallback, must be labeled

## Main Workflow

1. Read PRD and optional OpenSpec files.
2. Extract product context.
3. Extract page objective.
4. Decide UI Type and Layout Paradigm.
5. Identify required business modules.
6. Generate visual direction.
7. Generate layout requirements.
8. Generate component requirements.
9. Generate style token seed.
10. Generate main GPT Image 2 prompt.
11. Generate negative prompt.
12. Generate 3-4 variant briefs.
13. Generate reference selection checklist.
14. Generate prompt pack summary.

## Hard Rules

- Do not write frontend code.
- Do not generate final `tokens.json`.
- Do not replace visual-to-spec.
- Do not default every product to dashboard.
- Always create `ui-type-decision.md`.
- Always create `reference-selection-checklist.md`.
- Always create `image2-negative-prompt.md`.
- Always make the UI image frontend-implementable.
- Always specify `flat UI screenshot` unless the chosen UI type explicitly requires scene-led image generation.
- Do not produce marketing poster prompts unless the PRD is truly for a landing/marketing page.
- Do not produce 3D device mockups.
- Do not allow ui-ux-pro-max to override PRD or user constraints.
- If UI type is uncertain, mark it `review-required`.

## Output

Write to:

```text
openspec/changes/<change>/ui/01_prompt_pack/
```

or:

```text
ui_workflow/01_prompt_pack/
```

with:

```text
product-context.md
page-objective.md
ui-type-decision.md
visual-direction.md
layout-requirements.md
component-requirements.md
style-tokens-seed.md
image2-prompt.md
image2-negative-prompt.md
variant-briefs.md
reference-selection-checklist.md
prompt-pack-summary.md
```

## Supporting Files

Read these references directly:

- `references/prompt-pack-workflow.md`
- `references/ui-type-decision-rules.md`
- `references/output-files.md`
- `references/prompt-writing-rules.md`
- `references/negative-prompt-rules.md`
- `references/variant-rules.md`
- `references/external-skill-usage.md`
- `references/source-strictness-rules.md`

Examples:

- `examples/product-context.example.md`
- `examples/ui-type-decision.example.md`
- `examples/image2-prompt.example.md`
- `examples/image2-negative-prompt.example.md`
- `examples/variant-briefs.example.md`
- `examples/reference-selection-checklist.example.md`