Interaction Design Board
Generates several distinct, clickable HTML interaction prototypes for one product...
Install
npx skills add daymade/claude-code-skills --skill interaction-design-board -g -a claude-code -y- Repository
- daymade/claude-code-skills1.5k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,538 tokens
- Runs scripts
- Yes, review before use
What it does
Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation. Use for multiple UI versions, interaction alternatives, progressive-disclosure options, or when styling is fine but hierarchy/workflow/interaction feels off. Not for static visual-style calibration (use design-style-picker) or a settled CSS tweak.
Interaction Design Board
Turn interaction uncertainty into inspectable evidence. Keep the product's real facts and design language fixed; vary the interaction architecture enough that the user can experience the trade-offs before production code changes.
Route The Request
- Use this skill when the choice depends on behavior, state, workflow, hierarchy, or progressive disclosure.
- Use
design-style-pickerfor static visual-style calibration and image matrices. - Use gstack's
design-consultationfor a new product-wide design system and gstack'sdesign-shotgunfor static generated mockups. - Return to this skill after a visual direction is chosen if the user still needs to compare clickable interaction structures.
- Do not use it for a settled one-line CSS adjustment or when the user already supplied an approved interaction specification and asked only for implementation.
Non-Negotiable Outcome
Produce a decision, not a gallery:
- Several runnable HTML candidates keep the same business facts, product scope, design tokens, and available actions.
- Each candidate embodies a distinct interaction hypothesis rather than a skin.
- The Design Board lets the user operate every candidate, record concrete feedback, select one, or request a named remix.
- Production implementation does not start until the user approves the behavior.
Static screenshots are supporting evidence only. A screenshot cannot prove a collapse state, keyboard path, selection model, or task handoff.
Workflow
1. Freeze The Decision Contract
Before generating variants, write a compact contract in the session workspace:
