Help us improve
Share bugs, ideas, or general feedback.
From bkit — AI Native Development OS
Creates UI/UX mockups and HTML/CSS/JS prototypes for rapid design validation. Triggers on: mockup, prototype, wireframe, UI design.
How this skill is triggered — by the user, by Claude, or both
Slash command
/bkit:phase-3-mockupThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Create trendy UI without a designer + Consider Next.js componentization
Share bugs, ideas, or general feedback.
Create trendy UI without a designer + Consider Next.js componentization
Quickly validate ideas before actual implementation. Even without a designer, research UI/UX trends to create high-quality prototypes, designed for easy conversion to Next.js components later.
mockup/
├── pages/ # HTML pages
│ ├── index.html
│ ├── login.html
│ └── ...
├── styles/ # CSS
│ └── main.css
├── scripts/ # JavaScript
│ └── app.js
└── data/ # JSON mock data
├── users.json
└── products.json
docs/02-design/
└── mockup-spec.md # Mockup specification
| Level | Application Method |
|---|---|
| Starter | This stage may be the final deliverable |
| Dynamic | For validation before next stages |
| Enterprise | For quick PoC |
"Working prototype over perfect code"
- Pure HTML/CSS/JS without frameworks
- JSON files instead of APIs for data simulation
- Fast feedback loops
- Structure considering Next.js componentization
| Source | Purpose | URL |
|---|---|---|
| Dribbble | UI design trends, color palettes | dribbble.com |
| Behance | Real project case studies | behance.net |
| Awwwards | Latest web trends from award winners | awwwards.com |
| Mobbin | Mobile app UI patterns | mobbin.com |
| Godly | Landing page references | godly.website |
| Land-book | Landing page gallery | land-book.com |
🎨 Visual Trends
├── Bento Grid Layout
├── Glassmorphism
├── Gradient Mesh
├── 3D Elements (minimal 3D elements)
└── Micro-interactions
📱 UX Trends
├── Dark Mode First
├── Skeleton Loading
├── Progressive Disclosure
├── Thumb-friendly Mobile Design
└── Accessibility (WCAG 2.1)
🔤 Typography
├── Variable Fonts
├── Large Hero Text
└── Mixed Font Weights
| Tool | Purpose |
|---|---|
| v0.dev | AI-based UI generation (shadcn/ui compatible) |
| Tailwind UI | High-quality component templates |
| Heroicons | Icons |
| Lucide | Icons (React compatible) |
| Coolors | Color palette generation |
| Realtime Colors | Real-time color preview |
## UI Research Checklist
- [ ] Analyzed 3+ similar services
- [ ] Decided color palette (Primary, Secondary, Accent)
- [ ] Selected typography (Heading, Body)
- [ ] Chose layout pattern (Grid, Bento, etc.)
- [ ] Collected reference design screenshots
Considering component separation from the mockup stage makes Next.js transition easier.
<!-- ❌ Bad: Monolithic HTML -->
<div class="page">
<header>...</header>
<main>
<div class="hero">...</div>
<div class="features">...</div>
</main>
<footer>...</footer>
</div>
<!-- ✅ Good: Separated by component units -->
<!-- components/Header.html -->
<header data-component="Header">
<nav data-component="Navigation">...</nav>
</header>
<!-- components/Hero.html -->
<section data-component="Hero">
<h1 data-slot="title">...</h1>
<p data-slot="description">...</p>
<button data-component="Button" data-variant="primary">...</button>
</section>
mockup/
├── styles/
│ ├── base/
│ │ ├── reset.css
│ │ └── variables.css # CSS variables (design tokens)
│ ├── components/
│ │ ├── button.css
│ │ ├── card.css
│ │ ├── header.css
│ │ └── hero.css
│ └── pages/
│ └── home.css
## Component Mapping (mockup → Next.js)
| Mockup File | Next.js Component | Props |
|-------------|------------------|-------|
| `components/button.html` | `components/ui/Button.tsx` | variant, size, disabled |
| `components/card.html` | `components/ui/Card.tsx` | title, description, image |
| `components/header.html` | `components/layout/Header.tsx` | user, navigation |
// mockup/data/hero.json
{
"title": "Innovative Service",
"description": "We provide better experiences",
"cta": {
"label": "Get Started",
"href": "/signup"
},
"image": "/hero-image.png"
}
// → When transitioning to Next.js
// components/Hero.tsx
interface HeroProps {
title: string;
description: string;
cta: {
label: string;
href: string;
};
image: string;
}
Mockup (HTML):
<!-- mockup/components/feature-card.html -->
<div class="feature-card" data-component="FeatureCard">
<div class="feature-card__icon">🚀</div>
<h3 class="feature-card__title">Fast Speed</h3>
<p class="feature-card__description">We provide optimized performance.</p>
</div>
Next.js Component:
// components/FeatureCard.tsx
interface FeatureCardProps {
icon: string;
title: string;
description: string;
}
export function FeatureCard({ icon, title, description }: FeatureCardProps) {
return (
<div className="feature-card">
<div className="feature-card__icon">{icon}</div>
<h3 className="feature-card__title">{title}</h3>
<p className="feature-card__description">{description}</p>
</div>
);
}
// scripts/app.js
async function loadProducts() {
const response = await fetch('./data/products.json');
const products = await response.json();
renderProducts(products);
}
// mockup/data/products.json
// This structure becomes the basis for Phase 4 API design
{
"data": [
{
"id": 1,
"name": "Product Name",
"price": 10000,
"image": "/products/1.jpg"
}
],
"pagination": {
"page": 1,
"limit": 10,
"total": 50
}
}
UI Research
Mockup Implementation
Next.js Transition Preparation
See templates/pipeline/phase-3-mockup.template.md
Phase 4: API Design/Implementation → Mockup is validated, now implement actual backend
npx claudepluginhub popup-studio-ai/bkit-claude-code --plugin bkitBuilds self-contained interactive HTML mockups matching the project's CSS theme for UX exploration, design reviews, comparing options, and prototyping features before coding.
Guides visual direction, interface hierarchy, layout, typography, color, and prototyping for Web and mini program UIs before implementation.
Builds polished visual web artifacts: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations using HTML/CSS/JavaScript/React. Best for browser-rendered front-end deliverables, not back-end or non-visual tasks.