Phase 3: Mockup Creation
SkillAI & modelsSkill for creating mockups with UI/UX trends. Designs HTML/CSS/JS prototypes before implementation.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Phase 3: Mockup Creation skill
What this skill tells your AI
The instructions your AI receives, as published by ww-w-ai/bkit-gemini in skills/phase-3-mockup/SKILL.md and read by ahel’s review.
Design before you code
Purpose
Create visual prototypes to validate UI/UX before implementation.
Deliverables
1. Wireframes
Low-fidelity layouts showing structure:
┌─────────────────────────────────┐
│ [Logo] [Nav] [User]│
├─────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ Card 1 │ │ Card 2 │ │
│ └─────────┘ └─────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ Card 3 │ │ Card 4 │ │
│ └─────────┘ └─────────┘ │
│ │
└─────────────────────────────────┘
2. Component Mockups
HTML/CSS prototypes:
<!-- components/mockups/card.html -->
<div class="card">
<img src="placeholder.jpg" alt="">
<h3>Title</h3>
<p>Description text here</p>
<button>Action</button>
</div>
3. User Flows
Document user journeys:
Home → Browse Products → View Product → Add to Cart → Checkout → Payment → Confirmation
Tools
- HTML/CSS prototypes (recommended)
- Figma exports
- ASCII diagrams
Output
Save to: docs/02-design/mockups/
Next Phase
After completion: /phase-4-api (Dynamic/Enterprise) or /phase-6-ui-integration (Starter)
Signals
- GitHub stars
- 65
- Forks
- 16
- Last commit
- May 2026
Advanced
- Catalog kind
- skill
- Gateway key
phase-3-mockup- Source
- github.com/ww-w-ai/bkit-gemini