From ai-first-engineering
Generates interactive low-fidelity HTML wireframes from Lean PRD Screen States and workflows, with business rule annotations and navigation. Use for UI validation before design or coding.
npx claudepluginhub cuongtl1992/vibe-skills --plugin ai-first-engineeringThis skill uses the workspace's default tool permissions.
Chuyển Screen States từ Lean PRD thành **low-fidelity wireframe** dạng HTML. Mỗi screen state = 1 wireframe, liên kết theo workflow diagram.
Wireframes UI screens in ASCII text (default) or hand-drawn HTML (on 'sketch', 'whiteboard' keywords). Outputs buildable specs or visual whiteboard-style files.
Creates and renders UI wireframes from Markdown using wiremd. Converts descriptions, Jira tickets, PRDs, or React/JSX into visual HTML mockups for prototyping screens.
Text and Mermaid wireframes — produce screen-level layouts with content hierarchy, component placement, and interaction annotations. Use when asked to "wireframe this", "sketch the UI", "layout for this screen", "lo-fi mockup", "screen design", or "what should this page look like".
Share bugs, ideas, or general feedback.
Chuyển Screen States từ Lean PRD thành low-fidelity wireframe dạng HTML. Mỗi screen state = 1 wireframe, liên kết theo workflow diagram.
Wireframe là visual validation cho Business Rules, không phải pixel-perfect design.
Mục đích:
@web scenario cần verify element gìWireframe KHÔNG quyết định: màu sắc, font, spacing cụ thể, responsive behavior → đó là việc của designer.
Khi nhận PRD (lean-prd format), extract:
Nếu PRD không có Screen States, hỏi:
"PRD này chưa có Screen States. Bạn mô tả sơ: user nhìn thấy gì ở mỗi bước trong workflow?"
Tạo 1 file HTML duy nhất chứa tất cả screens, navigate giữa chúng được.
Layout:
Elements mapping:
Screen State field → Wireframe element
─────────────────────────────────────────────
Hiển thị (read-only data) → Gray box với label + placeholder value
Có thể sửa (editable) → Input field với border + label
Chỉ đọc (from source) → Gray background input, disabled look
Actions (buttons) → Button với label, annotate guard rule
Khi lỗi (error) → Red border + error message text
Annotations (quan trọng!):
[BR-M01][Submit] → requires BR-M01, BR-M02Navigation:
Nháp → Đang kiểm tra → Đã gửi → Đã duyệt<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Wireframe: [Feature Name]</title>
<style>
/* Minimal wireframe styles - gray, borders, system font */
* { font-family: system-ui; box-sizing: border-box; }
body { max-width: 800px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
.screen { background: white; border: 2px solid #333; padding: 20px; margin: 20px 0; display: none; }
.screen.active { display: block; }
.screen-title { font-size: 18px; font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
.flow-nav { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.flow-step { padding: 8px 16px; border: 1px solid #999; cursor: pointer; background: #eee; }
.flow-step.current { background: #333; color: white; }
.field-group { margin: 12px 0; }
.field-label { font-size: 12px; color: #666; margin-bottom: 4px; }
.field-input { border: 1px solid #999; padding: 8px; width: 100%; }
.field-readonly { background: #e9e9e9; border: 1px solid #ccc; padding: 8px; width: 100%; }
.field-display { background: #f0f0f0; padding: 8px; border: 1px dashed #ccc; }
.btn { padding: 10px 20px; margin: 4px; cursor: pointer; border: 2px solid #333; background: white; }
.btn-primary { background: #333; color: white; }
.btn:hover { opacity: 0.8; }
.annotation { font-size: 10px; color: #888; font-style: italic; }
.error-state { border-color: red; }
.error-msg { color: red; font-size: 12px; margin-top: 4px; }
.success-msg { color: green; font-size: 12px; }
.actions { margin-top: 20px; padding-top: 12px; border-top: 1px solid #eee; }
/* Error variant toggle */
.error-variant { display: none; border: 2px solid red; background: #fff5f5; padding: 12px; margin: 8px 0; }
.show-error .error-variant { display: block; }
.toggle-error { font-size: 11px; color: red; cursor: pointer; text-decoration: underline; }
</style>
</head>
<body>
<h1>Wireframe: [Feature Name]</h1>
<p class="annotation">Generated from Lean PRD — Screen States section</p>
<!-- Flow navigation -->
<div class="flow-nav">
<!-- One step per screen state, linked to workflow -->
</div>
<!-- Screens -->
<div class="screen active" id="screen-1">
<div class="screen-title">[State Name]</div>
<p class="annotation">Trigger: [khi nào user vào screen này]</p>
<!-- Fields -->
<div class="field-group">
<div class="field-label">[Label] <span class="annotation">[BR-Mxx]</span></div>
<input class="field-input" placeholder="[placeholder]" />
</div>
<!-- Error variant (toggle) -->
<span class="toggle-error" onclick="this.closest('.screen').classList.toggle('show-error')">
Xem error state
</span>
<div class="error-variant">
<div class="error-msg">[Error message khi rule vi phạm]</div>
</div>
<!-- Actions -->
<div class="actions">
<button class="btn btn-primary" onclick="showScreen('screen-2')">[Action] [BR-Mxx]</button>
<button class="btn">[Secondary action]</button>
</div>
</div>
<script>
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
// Update flow nav
document.querySelectorAll('.flow-step').forEach(s => s.classList.remove('current'));
document.querySelector(`[data-screen="${id}"]`)?.classList.add('current');
}
</script>
</body>
</html>
## Screen Inventory
| # | Screen Name | Workflow State | Rules Active | Elements | Actions |
|---|-------------|---------------|-------------|----------| --------|
| 1 | [name] | [state] | BR-M01, BR-M02 | 5 fields, 2 display | 2 buttons |
| 2 | [name] | [state] | BR-M03 | 3 fields | 1 button |
## Annotations
Wireframe sử dụng annotations sau:
- [BR-Mxx] trên field/button = Business Rule guard cho element đó
- Xem error state = click để toggle hiển thị error variant
- Gray background = read-only field (data từ nguồn khác)
- Red border = error state khi rule bị vi phạm