design-direction-generator

A Codex skill for turning design feedback and reference images into 5 comparable design directions using Gemini image generation.

It is useful when:

• a product needs a visual reset
• the current design feels wrong but the right answer is not obvious yet
• you want multiple product UI directions before rebuilding
• you want to choose a single direction or a hybrid like 1 + 4
• you want a tighter prompt and better review workflow before shipping changes

What It Does

The workflow is:

1. gather sharper inputs
2. build a structured brief and frame spec
3. feed that and the references into Gemini
4. generate 5 comparable UI directions
5. open the outputs locally for review
6. choose a direction, hybrid, fragment synthesis, or local compare next move
7. if needed, build 2 to 3 local compare variants from the real site
8. turn that choice into implementation rules

Files

• design-direction-generator/SKILL.md
• design-direction-generator/references/brief-template.md
• design-direction-generator/references/intake-questions.md
• design-direction-generator/references/frame-spec-template.md
• design-direction-generator/references/local-compare-variants.md
• design-direction-generator/references/narrowing-rubric.md
• design-direction-generator/references/product-types.md
• design-direction-generator/scripts/generate_directions.py
• design-direction-generator/scripts/prepare_direction_review.py

Requirements

• Codex skills support
• Python 3
• google-genai
• Pillow
• GEMINI_API_KEY set in the environment

Install

Copy the skill folder into your Codex skills directory:

mkdir -p ~/.codex/skills
cp -R design-direction-generator ~/.codex/skills/

Then restart Codex or open a new session.

Generate Directions

Create a short brief file, then run:

python3 design-direction-generator/scripts/generate_directions.py \
  --name my-design-refresh \
  --brief-file /absolute/path/to/brief.md \
  --frame-spec-file /absolute/path/to/frame-spec.md \
  --product-type hybrid \
  --same-structure \
  --single-screen-only \
  --open-preview \
  --ref /absolute/path/to/reference-1.jpg \
  --ref /absolute/path/to/reference-2.png

Outputs are written to:

tmp/design-directions/<slug>/

Notes

• The script defaults to 5 directions.
• It defaults to 16:9 and 1K output.
• It is meant for usable interface directions, not posters or campaign art.
• It saves per-direction prompt files and review metadata alongside the images.
• The default contract is one coherent screen per direction, not a collage board.
• The intended workflow can branch into local compare variants when Gemini is useful for fragments but not good enough to choose from directly.