Skill for creating mockups with UI/UX trends without a designer. Designs HTML/CSS/JS prototypes that can be converted to Next.js components. Triggers: mockup, prototype, wireframe, UI design, 목업, モックアップ, 原型
/plugin marketplace add popup-studio-ai/bkit-claude-code/plugin install bkit@bkit-marketplaceThis skill is limited to using the following tools:
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
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.