KB-530A

Branch I — Prompts (Cowork / Claude Code / Claude Design / GPT-User / Nuxt)

4 min read Revision 1
ai-workspaceui-previewpromptscoworkclaude-designclaude-codegpt2026-05-29

Branch I — Prompts

Copy-paste prompts for each role. Replace <project>/<surface>/<version> as needed. This deployment: mow/unified-canvas/v1.


P1 — Cowork: update the visual skeleton

Bạn là Cowork. Cập nhật skeleton trực quan cho surface MOW Unified Canvas.
- Đọc spec: knowledge/dev/ui/mow/unified-canvas/spec.md (Component 1, 2, 5).
- Giữ triết lý "MỘT khuôn — SÁU tầng", tabs T6→T1, breadcrumb, Proposal Mode.
- Vẽ/chỉnh prototype HTML trong Drive (PHU-LUC), KHÔNG thêm business logic.
- Khi xong: ghi 1 note ngắn vào review-log.md (đổi gì, vì sao) + cập nhật Drive link.
KHÔNG sửa DB, KHÔNG viết Nuxt.

P2 — Claude Code: deploy / refresh the static preview

Bạn là Claude Code. Deploy lại static preview cho mow/unified-canvas, bump version nếu đã được review.
1. Đọc spec.md + review-log.md (kiểm tra approval_status).
2. Build các file index.html / styles.css / mock-data.json / preview.meta.json dưới
   /tmp/incomex-preview/mow/unified-canvas/<version>/.
3. ssh contabo → tar vào /opt/incomex/docker/nginx/static/ui-preview/mow/unified-canvas/<version>/.
4. Route /ui-preview/ đã tồn tại (nginx). Verify HTTP 200 + content-type cho từng file.
5. Cập nhật preview_url + log entry trong review-log.md.
RÀNG BUỘC: chỉ static; KHÔNG PG/Directus/Qdrant; KHÔNG secrets; versioned; KHÔNG ghi đè version đã review.

P3 — Claude Design: improve Surface 1 using the preview URL

Bạn là Claude Design. Làm đẹp MOW Unified Canvas.
- Brief ngắn: knowledge/dev/ui/mow/unified-canvas/design-brief.md
- Preview: https://vps.incomexsaigoncorp.vn/ui-preview/mow/unified-canvas/v1/
GIỮ NGUYÊN: triết lý "một khuôn sáu tầng", tabs T6→T1, breadcrumb, Proposal Mode, traffic-light colors,
light theme, desktop-first. KHÔNG thêm "Sửa trực tiếp", KHÔNG business logic.
Trả về: design delta (token/spacing/component changes) + polish cho 3 state Normal/Proposal/Instance +
governance-alert. Ghi delta vào review-log.md. KHÔNG viết Nuxt.

P4 — GPT / User: review

GPT: đọc spec.md + mở preview URL. Kiểm tra lệch kiến trúc giữa preview và data/DOT contract.
Nêu blockers (nếu có). Ghi decision note vào review-log.md. KHÔNG implement.

User: mở https://vps.incomexsaigoncorp.vn/ui-preview/mow/unified-canvas/v1/ .
Trả lời ngắn: APPROVE hoặc CHANGE: <điều cần đổi>. Đổi approval_status trong review-log.md.
(Chỉ User được approve — Đ37, no self-approval.)

P5 — Claude Code: implement Nuxt shell AFTER approval

Bạn là Claude Code. CHỈ chạy khi review-log.md có approval_status: approved.
1. Live PG survey: map từng field CanvasNode/CanvasContext → cột PG/Directus có sẵn (reuse-first, KHÔNG bảng mới).
2. Verify 5 DOT (dot_mow_canvas_get_nodes/get_context/drill_down, dot_mow_design_propose_change,
   dot_mot_get_task_card) vs dot_iu_command_catalog; reuse workflow_change_requests cho propose.
3. Implement Nuxt render shell đọc config từ registry (Đ28) — KHÔNG hardcode tier/quy trình/task,
   KHÔNG query PG trực tiếp từ Nuxt (đi qua Directus), KHÔNG vector realtime.
4. Acceptance: preview ⇄ Nuxt parity cho Normal/Proposal/Instance.
Nếu chưa approved hoặc PG survey chưa xong → DỪNG, không viết Nuxt.

P6 — Unblock PHU-LUC verbatim hosting (optional)

User: đặt sharing 4 file PHU-LUC trên Drive (A/C/D/E) = "anyone with the link can view".
Sau đó Claude Code re-run: ssh contabo → curl từng Drive download URL → base64 -d / lưu .html vào
/opt/incomex/docker/nginx/static/ui-preview/mow/unified-canvas/v1/ (phu-luc-{a,c,d,e}.html). Verify 200.
Back to Knowledge Hub knowledge/dev/reports/architecture/ai-shared-ui-workspace-preview-pipeline-2026-05-29/09-prompts.md