just-vibeGeneral · apply by default
/design
Develop a visual direction and implement the requested interface
Use for a new visual direction and requested interface; polish improves an established direction and ui-system defines reusable tokens.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select design from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv design, /just-vibe design and /jv:design in Claude. See shortcut setup and context examples.
/just-vibe:design Build the account settings page using our existing typography and controls./just-vibe:design Design a dense settings page with long translations and destructive actions./just-vibe:design Propose a direction from supplied screenshots when a browser cannot render the app.What the agent does
- Inspect the current UI and infer hierarchy and states from real content and user actions.
- Choose a coherent composition that reuses project primitives, and implement it for the primary and failure states.
- Inspect the rendered result across relevant sizes.
Inputs
- audience, page/flow, content, references, and stack.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Requested visual direction and interface, using the existing design system where applicable.
- Writes
- Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.
- Mode
- Apply for a requested interface; plan for concept-only requests. Inputs include audience, page/flow, content, references, and stack.
- Prerequisites
- Resolve the user brief and inspect the relevant project or supplied evidence. External capabilities are optional unless the selected action actually needs them.
Expected output
- Implemented interface or requested concept, its visual decisions, the states and viewports inspected, and remaining visual gaps.
How the work is checked
- Primary action and content hierarchy are clear; narrow screens and error states remain usable.
When to stop or clarify
- Do not invent product claims or replace established branding without basis. Report unavailable visual verification.
Handling missing context
- Infer
- Resolve the named files, existing scripts, current task and earlier corrections from the conversation and repository.
- Assume
- Use the narrowest interpretation that completes a reversible local task; state a consequential assumption once.
- Ask
- Ask when competing targets or incompatible success conditions would change the result; continue independent inspection first.
Technical guidance
- Evidence
- Inspect audience, content hierarchy, existing design constraints, interaction states and target viewports.
- Method
- Choose a coherent visual direction tied to the product task, then implement representative states and interactions.
- Pitfall
- Attractive static composition can conceal inaccessible controls, content overflow or missing recovery states.
- Check
- Review real rendered output at relevant sizes and complete the main flow using keyboard and pointer.
Situational decisions
When references conflict with required content or accessibility: Explain the concrete conflict and preserve the usable content hierarchy.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.