Prototyping — Tạo prototype nhanh
3 công cụ chính cho prototyping: Stitch MCP (AI screen generation), Pencil MCP (design editor), và rapid-prototyper agent.Công cụ prototyping
Stitch MCP
Generate UI screens từ text, quản lý design systems, tạo variants. Output: Tailwind/HTML.
Pencil MCP
Editor cho
.pen files — insert, update, delete nodes. Screenshots, variables, themes.rapid-prototyper
Agent chuyên tạo MVP ultra-fast. Turns ideas into working prototypes.
Stitch MCP — AI Screen Generation
Generate UI screens trực tiếp từ mô tả text.
Workflow:
1
Tạo project
Dùng
create_project để khởi tạo project Stitch.2
Generate screens
Dùng
generate_screen_from_text với mô tả chi tiết:
“Dashboard với sidebar navigation, header with search, main content area với cards grid, dark mode”3
Tạo variants
Dùng
generate_variants để tạo nhiều phiên bản (light/dark, mobile/desktop).4
Apply design system
Dùng
create_design_system + apply_design_system để đảm bảo consistency.Pencil MCP — Design Editor
Editor cho.pen design files — đọc, tạo, chỉnh sửa designs.
File
.pen là format encrypted — KHÔNG dùng Read/Grep để đọc. Chỉ dùng Pencil MCP tools.
Workflow:
1
Mở/tạo file
open_document("new") hoặc open_document("path/to/file.pen")2
Thiết kế
Dùng
batch_design với operations: Insert (I), Copy (C), Update (U), Replace (R), Delete (D), Move (M).
Tối đa 25 operations per call.3
Validate
get_screenshot để kiểm tra visual output.
snapshot_layout để kiểm tra layout structure.4
Export
export_nodes để xuất images (PNG/JPEG/WEBP/PDF).Design & Prototyping Skills
/huashu-design — HTML hi-fi design
/huashu-design — HTML hi-fi design
Prefix: Output: HTML/CSS/animations, hi-fi prototypesKhi nào dùng:
/huashu-design, :prototype, :animation, :deck, :variants, :infographic, :review, :export, :advisorHTML-first design (Chinese design skill). Prototype, animation timeline, slide deck, variant exploration.- HTML-first prototyping
- Animation timeline design
- Slide deck presentations
- Design variant exploration
/frontend-design — Distinctive frontend (anti-AI-slop)
/frontend-design — Distinctive frontend (anti-AI-slop)
Prefix: Output: Production-ready HTML/CSS/ReactKhi nào dùng:
/frontend-designPolished frontend interfaces, avoid generic AI aesthetics. Original, distinctive design.- Need distinctive, non-generic design
- Anti-AI-slop aesthetic
- High-quality frontend without templates
/tech-graph — Architecture diagrams
/tech-graph — Architecture diagrams
Prefix: Styles: modern, clean, technical, minimalist, playful, academic, vintage, colorfulOutput: SVG + PNG diagramsKhi nào dùng:
/tech-graphSVG+PNG diagrams: architecture, data flow, flowchart, sequence, agent/memory, concept maps. 8 visual styles.- Document system architecture
- Visualize data flows
- Create flowcharts, sequence diagrams
- Agent/memory patterns
/excalidraw — Hand-drawn diagrams
/excalidraw — Hand-drawn diagrams
Prefix: Output: Excalidraw JSON + PNG/SVG exportsKhi nào dùng:
/excalidrawExcalidraw diagrams — live MCP canvas hoặc file-based JSON. Hand-drawn aesthetic.- Quick wireframes
- User flows
- Sketchy diagrams
- Live collaborative sketching
/mermaidjs-v11 — Inline Mermaid diagrams
/mermaidjs-v11 — Inline Mermaid diagrams
Prefix: Output: Mermaid syntax (copy-paste into docs)Khi nào dùng:
/mermaidjs-v11Mermaid v11 syntax: flowchart, sequence, ER, Gantt, state, architecture diagrams — inline trong docs.- Inline diagrams trong markdown/docs
- Flowcharts, sequence, state diagrams
- Database schema diagrams
- Project roadmap Gantt charts
/react-components — Convert Stitch → React
/react-components — Convert Stitch → React
Prefix: Output: React components (JSX + CSS modules hoặc Tailwind)Khi nào dùng:
/react-componentsConvert /stitch output → production React components.- After
/stitchgeneration, need React components - Componentize HTML output