design-ideate
Generates 2-4 structurally distinct UI directions for a screen or flow, each with layout logic, component choices, and explicit optimizes/sacrifices mapped to the success criteria.
Source: DKeken
At a glance
- Best for
- Exploring genuinely different layout approaches before building
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Surfacing tradeoffs so the choice is reasoned, not default
- Source
- DKeken/codex-skills-alternative
01 / Understand the skill
About design-ideate
Generate several distinct UI directions for a screen or flow before committing to one. Produces 2-4 named interface directions with layout logic, component choices, and tradeoffs, optionally with generated mockup images. Use when the user says "ideate the UI", "give me layout options", "design directions for this screen", "explore the interface", or after context/research and before prototyping. Part of the Product Design set.
Generate several distinct UI directions for a screen or flow before committing to one. Produces 2-4 named interface directions with layout logic, component choices, and tradeoffs, optionally with generated mockup images.
Read full description
Generate several distinct UI directions for a screen or flow before committing to one. Produces 2-4 named interface directions with layout logic, component choices, and tradeoffs, optionally with generated mockup images. Use when the user says "ideate the UI", "give me layout options", "design directions for this screen", "explore the interface", or after context/research and before prototyping. Part of the Product Design set.
02 / Confirm the fit
Use design-ideate when you need to
- Exploring genuinely different layout approaches before building
- Surfacing tradeoffs so the choice is reasoned, not default
- Optionally generating a mockup image per direction
03 / See the workflow
How design-ideate works
- 01Install: npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-ideate
- 02Try: Give me a few layout directions for our onboarding flow.
- 03Get: 2-4 named directions with tradeoffs and a goal-driven recommendation.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Exploring genuinely different layout approaches before building
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by DKeken
Ready to add design-ideate?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-ideate
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Generates original p5.js generative art by first writing an algorithmic philosophy, then expressing it as a self-contained interactive HTML viewer with seeded randomness.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Creates museum-quality original poster and visual-art PDFs/PNGs by drafting a design philosophy first, then expressing it as a minimal, design-forward single-page canvas.