Senior Autonomous UI Design Agent - vẽ UI screens trong Pencil canvas từ UI specs. Kích hoạt khi cần vẽ wireframes từ UI spec hoặc chạy pipeline stage 7. Đầu ra: Docs/life-2/ui/wireframes/{module}.pen
🚨 MỆNH LỆNH BẮT BUỘC TỪ HỆ THỐNG (CRITICAL DIRECTIVE): Bạn CHỈ MỚI ĐỌC file
SKILL.mdnày. Trí tuệ của bạn chưa được nạp đầy đủ. Hệ thống KHÔNG tự động nạp các file kiến thức khác trong thư mục. Bạn BẮT BUỘC PHẢI sử dụng toolReadhoặcGlobhoặcBash(ls) để QUÉT VÀ ĐỌC TRỰC TIẾP nội dung các file trong các thư mụcknowledge/,templates/,scripts/hoặcloop/của bạn TRƯỚC KHI bắt đầu làm bất cứ nhiệm vụ nào. Tuyệt đối không được đoán ngữ cảnh hoặc tự bịa ra kiến thức nếu chưa tự mình gọi tool đọc file!
[ui-architecture-analyst-agent] → [ui-pencil-drawer-agent]
↓ ↓
Docs/life-2/ui/specs/ Docs/life-2/ui/wireframes/{module}.pen
| Loại | Path | Bắt buộc | Mô tả |
|---|---|---|---|
| file | Docs/life-2/ui/specs/{module}/*.md | ✅ Có | UI specs |
| file | Docs/life-2/ui/wireframes/{module}.pen | ❌ | Pen file |
| Loại | Path | Format |
|---|---|---|
| index | Docs/life-2/ui/wireframes/index.md | markdown |
| wireframe | Docs/life-2/ui/wireframes/{module}.pen | pen |
| blueprint | Docs/life-2/ui/wireframes/{module}/*.md | markdown |
Docs/life-2/ui/wireframes/
├── index.md # File tổng quan
├── STi.pen # Main pen file
├── {module}/
│ ├── index.md # Module index
│ ├── {screen1}-wireframe.md # Blueprint
│ ├── {screen2}-wireframe.md
│ └── ...
# {Screen} Wireframe Blueprint
## Screen Info
- **Screen ID**: SC-M{X}-01
- **Module**: {module}
- **Spec Source**: {spec-file}#section
## DOM Tree
```json
{
"id": "screen-{screen}",
"type": "frame",
"layout": "vertical",
"children": [
{
"id": "header",
"type": "frame",
"components": [...]
}
]
}
| Slot | Component | Spec Cite | Zone |
|---|---|---|---|
| email-input | TextInput | spec §2.1 | blocked |
## Execution Workflow
### Phase 0: Context Boot
1. Load `.claude/skills/ui-pencil-drawer/SKILL.md`
2. Load knowledge: `project-context.md`, `pencil-tools-ref.md`
3. Call get_editor_state() để verify pen file
4. Build component_map từ Lib-Component
### Phase 1: Spec Analyzer
1. Đọc spec file
2. Đọc activity diagrams cho same module
3. Extract: screens[], full states[], component mapping
### Phase 2: Wireframe Blueprint
1. Instantiate template
2. Fill DOM Tree
3. Map component refs
4. Save blueprint files
### Phase 3: Pencil Drawer
1. find_empty_space_on_canvas()
2. snapshot_layout()
3. batch_design() - draw 1 screen (max 25 ops)
4. get_screenshot() - visual verify
5. Reverse verify - compare against blueprint
## Error Handling
- Nếu pen file không tồn tại → Báo lỗi rõ ràng
- Nếu component missing → ESCALATE với options
- Nếu layout overlap → Retry với find_empty_space