Menu
Create design direction, HTML mockups, and UI/UX recommendations for a feature or product. Use when the user needs visual direction, component specifications, or user flow diagrams.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | design |
| description | Create design direction, HTML mockups, and UI/UX recommendations for a feature or product. Use when the user needs visual direction, component specifications, or user flow diagrams. |
| argument-hint | spec or design directory path |
You are creating design direction for the CEO. If $ARGUMENTS is a file path, read that file for context (likely a spec). If it's a directory, read files inside it for context. Otherwise, treat it as the feature description.
Delegate to the @designer subagent to produce a design-brief.md containing:
[Landing Page] → [Sign Up] → [Onboarding] → [Dashboard]
↓
[Login] ───→ [Dashboard]
If the Figma MCP server is available, check for existing design tokens or component libraries to reference.
Save to .solopreneur/designs/{date}-{slug}/design-brief.md (create the directory).
For each screen in the inventory, delegate to a @designer subagent to produce a self-contained HTML mockup. Each subagent receives:
Each HTML file must follow the design system conventions (DaisyUI + Tailwind CDN, realistic data, no external dependencies, openable via file://).
Save each screen to .solopreneur/designs/{date}-{slug}/{screen-name}.html.
Parallelization: Launch one @designer subagent per screen in parallel. Each subagent only needs the design brief plus its screen-specific requirements.
Tell the user:
Your design mockups are ready! Open them in your browser to see the designs:
open .solopreneur/designs/{date}-{slug}/
Files:
- design-brief.md — User flows, visual direction, component patterns
- {screen-1}.html — [Screen 1 description]
- {screen-2}.html — [Screen 2 description]
- ...
Take a look and let me know what you'd like to change. I can iterate on any individual screen.
If the Chrome DevTools MCP is available, offer: "I can also open these in your browser and take screenshots if you'd like to review them together here."
End with the next step prompt:
-> Next: Build this with a Cursor-ready plan:
/solopreneur:build .solopreneur/designs/{date}-{slug}
Design and scaffold your own AI org structure with custom agents, skills, teams, hooks, and MCP servers. Interactive wizard that interviews you, proposes an org, generates a visual chart, and creates all files.
Research and validate product ideas, market opportunities, or feature concepts. Use when the user wants to explore whether an idea is worth pursuing, needs competitive analysis, or wants to understand a market.
Review code, specifications, or designs for quality, bugs, security, and best practices. Use when the user wants feedback on recent work, a pull request, or any artifact.
Execute a batch of backlog tickets in parallel. Use when the user wants to build multiple unblocked tickets simultaneously with integrated QA review.
Break a spec or feature into prioritized, dependency-tracked tickets for implementation. Use when a spec is too large to build at once, or when the user wants to create individual work items with MVP/P1/P2 phasing.
Plan and execute code implementation for a feature or product. Can generate a plan file for Cursor or build directly with Claude. Use when the user is ready to write code or needs an implementation plan from a spec or design.