jason904/ui-skill-lab/image2-prompt-pack

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

prd.md

Optional Inputs

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:

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

or:

ui_workflow/01_prompt_pack/

with:

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