​
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.
CommandMô tả
create_projectTạo project mới
generate_screen_from_textTạo screen từ mô tả
edit_screensChỉnh sửa screens
generate_variantsTạo design variants
create_design_systemTạo design system
apply_design_systemÁp dụng design system
list_screens / get_screenXem screens
exportExport screen (Tailwind/HTML)
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.
CommandMô tả
get_editor_stateXem trạng thái editor hiện tại
open_documentMở hoặc tạo file .pen
batch_getTìm và đọc nodes
batch_designInsert/Copy/Update/Replace/Move/Delete operations
snapshot_layoutXem layout structure
get_screenshotScreenshot node để validate visual
get_variables / set_variablesQuản lý variables và themes
export_nodesExport PNG/JPEG/WEBP/PDF
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).

​
Three.js — /design:3d

Tạo design 3D interactive với Three.js/WebGL: 
/design:3d "rotating product showcase with glass material"
/design:3d "interactive globe with data visualization"
/design:3d "particle system hero background"
Output: Self-contained HTML file với Three.js embedded.

​
Khi nào dùng gì?

Mục đíchCông cụ
Quick UI mockup từ textStitch MCP
Chỉnh sửa design chi tiếtPencil MCP
MVP/proof-of-conceptrapid-prototyper agent
3D interactive/design:3d
Full page design/design:good