From wicked-garden
Digital mockup and wireframe generation. Outputs ASCII wireframes for quick ideation, HTML/CSS previews for interactive review, or component specs for developer handoff. Use when: "mockup", "wireframe", "prototype", "lo-fi design", "component spec", "design sketch", "UI layout", "layout draft", "design handoff"
npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-gardenThis skill uses the workspace's default tool permissions.
Generate wireframes and mockup designs in multiple fidelity levels — from quick
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
Generate wireframes and mockup designs in multiple fidelity levels — from quick ASCII sketches to HTML/CSS previews ready for developer handoff.
| Format | Fidelity | Best For |
|---|---|---|
| ASCII wireframe | Low | Quick ideation, flow discussion |
| Markdown spec | Medium | Annotated layouts, component inventory |
| HTML/CSS preview | High | Stakeholder review, dev handoff |
| Component spec | Medium-High | Design system documentation |
Fast, text-based layout sketches. Use for early ideation and flow discussion.
┌─────────────────────────────────────────┐
│ [Logo] [Nav Item] [Nav Item] │
│─────────────────────────────────────────│
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │
│ │ [Image] │ │ [Image] │ │
│ │ │ │ │ │
│ │ Card Title │ │ Card Title │ │
│ │ Description │ │ Description │ │
│ │ [Button] │ │ [Button] │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ─────── Section Heading ─────────── │
│ │
│ ████████████████████ [CTA Button] │
└─────────────────────────────────────────┘
┌─┬─┐ Box borders
│ │ │ Vertical dividers
└─┴─┘ Box bottoms
[...] Button or interactive element
{...} Input field
████ Image placeholder
~~~~ Text content placeholder
──── Horizontal rule / divider
For higher-fidelity mockups, generate minimal HTML with inline or embedded CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mockup: {component name}</title>
<style>
/* Design tokens */
:root {
--color-primary: #3b82f6;
--color-surface: #f9fafb;
--space-4: 1rem;
--space-6: 1.5rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--radius: 0.5rem;
}
/* Component styles */
.card {
background: var(--color-surface);
border-radius: var(--radius);
padding: var(--space-6);
}
</style>
</head>
<body>
<!-- mockup content -->
</body>
</html>
For developer handoff without visual preview:
## Component: {Name}
### Anatomy
- **Container**: {background, border, border-radius, padding}
- **Header**: {font-size, font-weight, color}
- **Body**: {font-size, line-height, color}
- **Action**: {button variant, size}
### States
| State | Visual Change |
|-------|--------------|
| Default | {description} |
| Hover | {description} |
| Active | {description} |
| Disabled | {opacity: 0.5, cursor: not-allowed} |
### Spacing
- Internal padding: {token}
- Gap between elements: {token}
- External margin: {token or "handled by parent"}
### Responsive Behavior
- Mobile (<768px): {layout change}
- Tablet (768–1024px): {layout change}
- Desktop (>1024px): {base layout}
### Accessibility Notes
- Role: {semantic element or ARIA role}
- Focus: {keyboard interaction}
- Labels: {aria-label or visible label}
When given a description, generate a wireframe in this sequence:
When handing off to developers:
## Handoff Notes for {component}
**Design tokens to use**: See `styles/tokens.css`
**Closest existing component**: {component name in codebase}
**New patterns required**: {list any novel patterns}
**Assets needed**: {icons, images, fonts}
**Animation**: {transition type, duration}
Before delivering a mockup: