design-prototype
Wires static screens into a clickable runnable prototype with routing, interaction states, and stubbed data, then verifies the whole happy path plus an error state in a browser.
Source: DKeken
At a glance
- Best for
- Connecting screens into an end-to-end clickable flow for feedback
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Adding hover/loading/empty/error states beyond the happy path
- Source
- DKeken/codex-skills-alternative
01 / Understand the skill
About design-prototype
Assemble a clickable, runnable prototype from screens/components — wiring navigation, state, and interactions so a team can actually click through it. Use when the user says "make it clickable", "build a prototype", "wire up the flow", "interactive prototype", "make the screens navigate", or has static screens that need to come alive. Part of the Product Design set. Verifies interactions with a browser tool.
Assemble a clickable, runnable prototype from screens/components — wiring navigation, state, and interactions so a team can actually click through it. Use when the user says "make it clickable", "build a prototype", "wire up the flow", "interactive prototype", "make the screens navigate", or has static screens that…
Read full description
Assemble a clickable, runnable prototype from screens/components — wiring navigation, state, and interactions so a team can actually click through it. Use when the user says "make it clickable", "build a prototype", "wire up the flow", "interactive prototype", "make the screens navigate", or has static screens that need to come alive. Part of the Product Design set. Verifies interactions with a browser tool.
02 / Confirm the fit
Use design-prototype when you need to
- Connecting screens into an end-to-end clickable flow for feedback
- Adding hover/loading/empty/error states beyond the happy path
- Validating a UX flow with stakeholders before backend work
03 / See the workflow
How design-prototype works
- 01Install: npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-prototype
- 02Try: Wire my onboarding screens into a clickable flow with an error state.
- 03Get: A one-command runnable prototype, browser-verified with no dead ends.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Connecting screens into an end-to-end clickable flow for feedback
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-prototype?
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-prototype
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.