ideate — Codex skill: what it does, how to install
This skill turns a Product Design brief into three visual directions. Use it to explore interface variants, remixes, and new product concepts.
npx skills add openai/plugins --skill ideate -a codexWhat ideate does
ideate reads a Product Design brief and prepares visual directions for a component, screen, workflow, or broader product idea. Before image generation, it gathers available context such as screenshots, Figma files, Storybook references, design tokens, brand assets, and codebase paths. Images are created with the built-in Image Gen tool.
The skill selects dimensions for the request, preserves hard constraints, and produces three independent results. For an existing surface, it checks nearby visual references before changing structure or style; for a broad concept, it explores distinct product directions. Generation stops after the results are shown so the user can choose one. Check access to files, connectors, and the local project first, because permission or authentication gaps block the next step.
What it helps with
- turn a design brief into visual directions
- compare alternate layouts for a screen or component
- inspect an existing product surface before generation
- prepare Image Gen prompts with dimensions and context
- ground a new concept in screenshots and design tokens
Example prompts for the agent
- Create three distinct directions for this onboarding screen from the Product Design brief, using the available screenshots as context.
- Inspect the Storybook and design tokens before exploring variants for this component, then generate the images with Image Gen.
- Gather the project context, choose suitable dimensions, and create three visual directions for this workflow.
How to install ideate
1Skills CLI (Vercel)
npx skills add openai/plugins --skill ideate -a codex2Manually: put the files in place
.agents/skills/ideate/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill ideate -a claude-code2Manually: put the files in place
~/.claude/skills/ideate/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ideate/
Manually: put the files in place
.cursor/skills/ideate/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins ideate2Manually: put the files in place
.github/skills/ideate/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/ideateManually: put the files in place
.devin/skills/ideate/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set201
The whole set →Similar
Questions about ideate
How do I install ideate in Codex?
Run npx skills add openai/plugins --skill ideate, then run npx skills add openai/plugins --skill ideate -a codex. The skill file is placed at .agents/skills/ideate/SKILL.md.
What does ideate do?
It turns a Product Design brief into three independent visual directions. The skill uses available files, links, images, and local design context before calling Image Gen.
What access does ideate need before generating images?
It needs access to the referenced files, connectors, and local project state. A permission or authentication problem stops the workflow until that access issue is addressed.