From saurun
Use when user wants to explore, compare, or A/B test multiple design styles, visual directions, or mockups for a web page before implementation begins. Triggers on "show me design options", "style exploration", "design comparison", "visual options".
npx claudepluginhub fiatkongen/saurun-marketplace --plugin saurunThis skill is limited to using the following tools:
Generate multiple distinct design styles for a web page in parallel worktrees, letting the user compare and refine before committing to a direction. Core principle: **explore divergently, then converge on the best option.**
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Generate multiple distinct design styles for a web page in parallel worktrees, letting the user compare and refine before committing to a direction. Core principle: explore divergently, then converge on the best option.
Do NOT use when:
saurun:react-tailwind-v4-components or frontend-design directlyAll skills below must be installed. If any are missing, stop and inform the user.
| Skill | Used In | Purpose |
|---|---|---|
ui-ux-pro-max | Phase 2 | Design system generation |
superpowers:using-git-worktrees | Phase 6 | Parallel worktree setup |
frontend-design | Phase 6 | Production-grade implementation |
vercel-react-best-practices | Phase 6 | React optimization |
copywriting | Phase 6 | Copy refinement |
nano-banana-pro | Phase 6 | Image generation — install: npx skills add intellectronica/agent-skills@nano-banana-pro -g -y |
digraph design_wizard {
"User request" [shape=doublecircle];
"Discovery" [shape=box];
"Style Generation" [shape=box];
"User satisfied?" [shape=diamond];
"Refinement" [shape=box];
"Graphics Preference" [shape=box];
"Project Setup" [shape=box];
"Parallel Implementation" [shape=box];
"Parallel Verification" [shape=box];
"Complete" [shape=doublecircle];
"User request" -> "Discovery";
"Discovery" -> "Style Generation";
"Style Generation" -> "User satisfied?";
"User satisfied?" -> "Refinement" [label="no"];
"Refinement" -> "User satisfied?";
"User satisfied?" -> "Graphics Preference" [label="yes"];
"Graphics Preference" -> "Project Setup";
"Project Setup" -> "Parallel Implementation";
"Parallel Implementation" -> "Parallel Verification";
"Parallel Verification" -> "Complete";
}
Use AskUserQuestion to gather context. Batch questions — use up to 4 questions per call. Infer obvious answers from context (e.g., a coffee shop is consumer-facing, probably warm mood).
Gather:
Skip questions where the answer is obvious from the user's request.
Generate design styles using ui-ux-pro-max:
Default: 4 styles (user can request different count).
For each style:
Craft diverse keywords from discovery responses. Combine: page type + audience + mood + unique aesthetic. Ensure variety across all styles.
Generate design system: Invoke ui-ux-pro-max via the Skill tool with arguments:
"[keywords]" --design-system --persist -p "[ProjectName]" --page "[style-name]"
Saves to: design-system/pages/[style-name].md in current working directory.
Present to user with: style name, key colors, typography, mood adjectives, and best use case.
Track generated styles to avoid duplicate keywords in refinement rounds.
| User Says | Action |
|---|---|
| "Give me N completely different styles" | Generate N NEW styles with different keywords |
| "Give me N more options" | Generate N NEW (avoid previous keywords) |
| "I like X and Y, give me more like X" | Keep X & Y, generate variations of X |
| "Combine styles X and Y" | Generate 1 new blending those aesthetics |
| "Implement X, Y, Z" or "Implement all" | Move to Phase 4 with selections |
Before implementation, ask about graphics for all selected styles at once:
Use AskUserQuestion with options:
Only ask per-style if user picks the last option.
Suggested: designs/[project-name]/ in current working directory.
Ask user to confirm or override.
mkdir -p [location]concept.md — see concept-template.md for template. Populate from discovery responses. Only fill fields you have data for — omit sections with no info.git init — use the existing repo. Commit project docs to the current branch.git add designs/[project-name]/concept.md
git commit -m "docs: initialize [project-name] design exploration"
[repo-root]/
├── designs/[project-name]/
│ └── concept.md
├── design-system/pages/
│ ├── [style-1].md
│ └── [style-2].md
└── .worktrees/
├── [style-1-branch]/ # React + Vite + TypeScript project
└── [style-2-branch]/
CRITICAL: Spawn ALL implementation agents in a SINGLE message with multiple Task tool calls.
For each selected style, spawn one sub-agent. See implementation-prompt.md for the full prompt template. Replace [absolute-path-to-repo-root] with the actual repo root path so sub-agents can resolve cross-worktree references.
Key points for each sub-agent:
superpowers:using-git-worktrees to create worktree at .worktrees/[style-name]/npm create vite@latest . -- --template react-tsdesign-system/pages/[style-name].mdSkill tool to invoke: frontend-design, vercel-react-best-practices, copywriting, nano-banana-pronpm run build to verifyWait for ALL agents to complete before Phase 7.
CRITICAL: Spawn ALL verification agents in a SINGLE message with multiple Task tool calls.
For each implementation, spawn one verification sub-agent. See verification-prompt.md for the full prompt template. Assign ports sequentially (5173, 5174, 5175, ...) and replace [absolute-path-to-repo-root] with the actual path.
Verification checks:
After all complete, show comparison summary:
Style 1: [Name] — ✅ All passed — Design: 8.5/10
Style 2: [Name] — ⚠️ 2 broken URLs — Design: 9.0/10
Style 3: [Name] — ❌ Build failed — See report
Recommend best-performing style based on results.
| Phase | Action | Key Tool |
|---|---|---|
| 1. Discovery | Gather context via AskUserQuestion (batch up to 4) | AskUserQuestion |
| 2. Style Generation | Generate 4 design systems via ui-ux-pro-max | Skill |
| 3. Refinement | Iterate until user selects styles | AskUserQuestion |
| 4. Graphics | Ask graphics preference for selected styles | AskUserQuestion |
| 5. Project Setup | Create concept.md, commit scaffolding | Write, Bash |
| 6. Implementation | Spawn parallel sub-agents per style | Task |
| 7. Verification | Spawn parallel verification agents, show comparison | Task |
git add . in worktrees — stage specific paths only to avoid committing node_modules, .env, or OS files.| Error | Recovery |
|---|---|
ui-ux-pro-max script fails | Retry with simpler keywords. If persistent, create design system manually from the style keywords. |
| All styles rejected | Ask user for specific direction: "What did you dislike? Colors? Layout? Overall feel?" |
| Sub-agent skill not found | The agent should use Skill tool to invoke. If skill genuinely missing, skip that enhancement step and note it. |
| Implementation build fails | Fix in worktree, re-run build. Report issue if unfixable. |