20.9 · Hand-off & integration — Claude Code, Figma MCP, Canva, HTML

Mở đầu: Prototype đẹp ≠ Production

*"Prototype đẹp trong Claude Design. Tôi click 'Hand off to Claude Code'. Copy command. Mở Claude Code, paste, run. Đợi 7 phút. Push lên Figma. Mở Figma — đã có design ở đó. Nhưng**: it's not perfectly responsive. Some elements responsive, some you have to go through and adjust.*

7 phút render. Output: 80% production-ready, 20% cần polish.

Kirk's verdict cân bằng: "It's pretty good in the grand scheme of things. As we zoom in, có issues. Nhưng đủ để start iterate."

Đây là tâm trạng đúng cho hand-off:

• 80% là big win — bạn đi từ nothing → 80% trong vài phút thay vì vài ngày
• 20% còn lại là craft — nơi designer/dev đầu tư, không phải tool

Bài này dạy 5 path hand-off + cách đầu tư đúng vào 20% craft.

5 hand-off path — Bản đồ

                    CLAUDE DESIGN
                    (prototype/page/deck)
                          │
        ┌─────────────────┼─────────────────┐
        │       │         │         │       │
        ▼       ▼         ▼         ▼       ▼
   ┌────────┬────────┬────────┬────────┬────────┐
   │   ①    │   ②   │   ③   │   ④   │   ⑤    │
   │ CLAUDE │ FIGMA  │ CANVA  │ HTML   │ PPTX/  │
   │ CODE   │ (via   │        │ stand- │ PDF    │
   │ direct │ MCP)   │        │ alone  │        │
   ├────────┼────────┼────────┼────────┼────────┤
   │ Dev    │ Design │ Polish │ Custom │ Stake- │
   │ inte-  │ team   │ presen-│ domain │ holder │
   │ gration│ Figma  │ tation │ deploy │ review │
   │ backend│ workflow│ Canva │ Vercel │ deck   │
   │        │ collab │ assets │ WordPress│      │
   └────────┴────────┴────────┴────────┴────────┘

Mỗi path có purpose riêng. Misuse path = tốn token + workflow break.

Path ① — Claude Code direct development

Khi nào

• Hand-off cho dev backend/frontend integrate
• Build production app từ prototype
• Cần custom logic, API integration, database

Workflow

Claude Design prototype
    ↓
Click "Hand off to Claude Code"
    ↓
Copy command (Claude Design generate ready-to-paste)
    ↓
Open Claude Code (CLI / VS Code extension)
    ↓
Paste command + Enter
    ↓
Claude Code:
  - Fetch design file
  - Read README
  - Implement code (HTML/CSS/JS or React/Vue/Svelte)
  - Set up project structure
    ↓
Test local
    ↓
Iterate trong Claude Code (text-based)

Khi nào path này shine

• Solo dev xây MVP cùng product+code
• Indie hacker ship trong tuần
• Hackathon từ design → working app

Setup tối thiểu

• Claude Code CLI installed: npm install -g @anthropic/claude-code
• API key Claude Code (separate billing từ Claude Pro)
• Project folder ready

Caveat

• Token cost: cao (Claude Code = Claude API direct)
• Output là code starting point, không phải production-grade. Phải review security, performance, accessibility.

Path ② — Figma (via MCP) — designer team workflow

Đây là path complex nhất nhưng powerful nhất cho design team đã invest Figma.

Setup yêu cầu

1. Figma MCP server — bridge Claude ↔ Figma API
2. Figma skills trong Claude Code — set up tools để Claude operate Figma
3. Figma file target để push design

Setup chi tiết

┌───────────────────────────────────────────────────────┐
│                                                       │
│  ① Install Figma MCP server                           │
│     npm install -g figma-mcp-server                   │
│                                                       │
│  ② Get Figma API token                                │
│     figma.com → Settings → Personal access tokens     │
│                                                       │
│  ③ Configure Claude Code:                             │
│     claude-code mcp add figma                         │
│     (paste API token when prompted)                   │
│                                                       │
│  ④ Install Figma skills:                              │
│     claude-code skill install figma-toolkit           │
│                                                       │
│  ⑤ Test connection:                                   │
│     claude-code: "List my Figma files"                │
│                                                       │
└───────────────────────────────────────────────────────┘

📝 Reference: Kirk @UI Collective có video setup chi tiết Figma MCP + skills. Search YouTube "UI Collective Figma MCP setup".

Workflow hand-off

Claude Design prototype done
    ↓
Click "Hand off to Claude Code"
    ↓
Copy command, paste vào Claude Code
    ↓
Trong Claude Code, gõ:
"Push this design to Figma file [URL or name]"
    ↓
Claude Code (với Figma MCP + skills):
  - Đọc design Claude Design
  - Convert thành Figma frames + components
  - Push qua Figma API
    ↓
Đợi ~5-10 phút (Kirk: ~7 phút)
    ↓
Mở Figma → design xuất hiện
    ↓
Polish responsive issues

Limitations Kirk's experience

• Responsive imperfect: Claude Code push frames, nhưng auto-layout / constraints / variables không 1-1 với Figma best practice. 20-30% manual fix.
• Components don't always link: Component master Claude tạo có thể không match component library Figma sẵn có. Phải remap.
• Slow: 7 phút cho 1 prototype mid-complex. Khoản đầu tư lớn nếu chỉ 1 prototype.

Khi nào path này shine

• Production handoff — design team Figma cần file để engineer dùng dev mode
• Design system update — push thay đổi từ Claude Design về Figma library
• Brand consistency — Figma là source of truth, Claude Design feed in

Khi nào skip

• One-off prototype không cần production
• Claude Design có thể export HTML đủ (path ④)
• Token budget tight

Path ③ — Canva — polish presentation/asset

Khi nào

• Polish slide deck cho presentation team không quen Claude Design
• Marketing asset cần version cho social media (1080x1920, 1200x628, ...)
• Team marketing/non-designer đã quen Canva

Workflow

Claude Design (slide deck / landing / asset)
    ↓
Click Share → Send to Canva
    ↓
Canva mở tab mới với design imported
    ↓
Polish trong Canva:
  - Resize cho social formats
  - Add Canva-specific assets (stock photo, icon)
  - Apply Canva brand kit nếu có
    ↓
Export Canva → PNG / PDF / video

Limitations

• Canva simplify complex elements khi import. Animation lost. Custom font có thể substitute.
• Layer structure imported có thể "flatten" — khó edit detailed.
• Free tier Canva có watermark cho 1 số element.

Khi nào path này shine

• Marketing team đã có Canva license + brand kit
• Social media variants từ 1 master deck
• Quick edits trước khi share không cần re-prompt Claude

Khi nào skip

• Designer team — Canva downgrade quality
• Animation/motion-heavy → Canva mất, dùng HTML standalone
• Production landing page → Canva không phải web hosting

Path ④ — HTML standalone — custom domain deploy

Khi nào

• Deploy landing page lên custom domain
• WordPress / Webflow / Vercel hosting
• Indie hacker MVP ship nhanh

Workflow

Claude Design (landing page / page-based output)
    ↓
Click Share → Export as standalone HTML
    ↓
Download .zip (HTML, CSS, JS, assets)
    ↓
3 deployment options:

OPTION A: Vercel/Netlify free tier
  - Drag .zip vào Vercel dashboard
  - Auto-deploy
  - Custom domain attach
  - Live trong 5 phút

OPTION B: WordPress (Lil's case)
  - Extract .zip
  - Upload HTML vào WordPress Elementor (HTML widget)
  - Hoặc upload vào theme custom

OPTION C: Custom server / GitHub Pages
  - Push lên repo
  - Configure hosting

Limitations

• Code generated là static HTML/CSS/JS — không CMS, không backend
• Form submit (email signup, ...) phải integrate manually
• SEO meta tags có sẵn nhưng cần adjust cho domain

Khi nào path này shine

• MVP / waitlist landing ship nhanh
• Course sales page WordPress (như Lil)
• Event landing hosted on subdomain

Khi nào skip

• Production CMS → Webflow/Framer trực tiếp
• E-commerce → Shopify/WooCommerce
• Heavy JS interactions cần backend

Path ⑤ — PPTX / PDF — stakeholder review

Khi nào

• Slide deck cho corporate stakeholder dùng PowerPoint
• PDF cho cold email VC outreach
• Print review

Workflow

Claude Design (slide deck)
    ↓
Click Share → Export as
  - PowerPoint (.pptx)
  - PDF
    ↓
Download
    ↓
USE CASES:
- PPTX: Mở trong PowerPoint → polish chart, add Excel data viz
- PDF: Email attach, share via Slack/Drive

Limitations

• PPTX format drift: Animation web ≠ animation PPT. Một số transition lost.
• Font substitution: Custom fonts → PPT subs với system fonts.
• Layout shift: Đôi khi spacing slight off vs original Claude Design.

Khi nào path này shine

• Corporate environment mọi người dùng PPT
• Cold outreach PDF chuẩn workflow
• Print materials

Khi nào skip

• Animation-heavy deck → ở lại Claude Design (share link)
• Tech audience → Claude Design link, không cần PPT
• Production presentation → Keynote / Figma slides → cleaner

So sánh — 5 paths

Ví dụ thực chiến: Multi-path workflow Saigon Health

Tình huống

Saigon Health team cần:

1. Landing page deploy saigonhealth.vn (custom domain)
2. Pitch deck cho VC meeting tuần sau
3. Marketing variants cho social campaign launch
4. Dev team build app companion từ prototype

Path mix

Output 1: Landing page
  → Path ④ HTML standalone
  → Deploy Vercel + custom domain
  → 1 ngày: live

Output 2: Pitch deck
  → Path ⑤ PPTX
  → Polish trong Keynote (cofounder dùng Mac)
  → Email cho 20 VC

Output 3: Marketing variants
  → Path ③ Canva
  → Resize social: 1080x1080 IG, 1200x628 FB, 1080x1920 Story
  → Marketing post 3 tuần campaign

Output 4: Companion app
  → Path ① Claude Code (with Figma MCP + skills)
  → Push vào Figma cho design team review
  → Dev team Claude Code → React Native app skeleton
  → Iterate 4 tuần production

Token budget breakdown

🎯 Ghi nhớ: Multi-path workflow tận dụng strength mỗi path. Đừng force 1 path cho mọi use case.

Ví dụ theo ngành / Case studies

Indie hacker — solo MVP cycle

Pain: "Mình solo. Design + code + deploy = bottleneck. Outsource = $$ + slow."

Workflow:

• Brand synthesis Bài 5 (~30 phút)
• Landing page Claude Design (~30 phút)
• Path ④ HTML → Vercel deploy (~5 phút)
• Path ① Claude Code cho app prototype → push lên repo (~2 tiếng)
• 1 ngày: landing live + app starter code

Kết quả: MVP cycle 1 ngày thay vì 1 tuần. Solo founder ship nhanh hơn pre-AI.

Agency design lead — multi-deliverable client

Pain: "1 client = landing + brand guidelines + pitch deck + social variants. 4 deliverable, 4 tools, 2-3 tuần."

Workflow:

• Brand synthesis trong Claude Design (~1 giờ)
• 4 deliverable:
• · Landing → Path ④ HTML → Webflow import (deploy production)
• · Brand guidelines → Path ⑤ PDF
• · Pitch deck → Path ⑤ PPTX
• · Social variants → Path ③ Canva
• Total: 1 tuần thay vì 2-3 tuần

Kết quả: Agency margin tăng (more clients/month). Quality consistent across deliverables.

In-house product designer — Figma workflow integration

Pain: "Team mình invest Figma 2 năm. Library mature. Designer mới onboard học 1 tuần. Không muốn switch tool, nhưng Claude Design ý tưởng nhanh hơn."

Workflow:

• Idea trong Claude Design (5-30 phút)
• Path ② Figma MCP push (~7 phút)
• Polish trong Figma (auto-layout fix, component remap) — 30-60 phút
• Final design vào Figma library workflow

Kết quả: Ideation 5x nhanh, production workflow Figma không break. Team adoption Claude Design tăng vì không phải bỏ Figma.

Course creator — sales page WordPress

Pain (Lil's case): "Course platform là WordPress. Sales page phải go vào Elementor."

Workflow:

• Sales page Claude Design (~30 phút)
• Path ④ HTML standalone export
• Lil's specific: upload HTML vào Elementor HTML widget

Kết quả: WordPress workflow respected. Sales page premium quality. Không phải migrate platform.

Prompt template — Hand-off

Template H-1: Claude Code app build

[Trong Claude Code, sau paste command từ Claude Design]

Build a [framework — Next.js / React Native / Vue] app từ this design.
Setup:
- Project structure: [src/components, src/pages, src/styles]
- Styling: [Tailwind / styled-components / CSS modules]
- Routing: [next/router / react-router]
- State: [Zustand / Redux / Context]
- API integration: [REST / GraphQL] với endpoint [URL hoặc TBD]

Generate starting code, run dev server. Tell me how to test locally.

Template H-2: Figma push

[Trong Claude Code với Figma MCP + skills]

Push design [Claude Design URL hoặc paste command] to Figma file
"[Figma file name]". Setup:
- Page name: "[page]"
- Use auto-layout for responsive frames
- Link components to [existing design system / create new]
- Apply text styles + color styles từ Figma library

Run.

Template H-3: HTML deploy

[Sau export HTML từ Claude Design]

Deploy this HTML to Vercel (hoặc Netlify):
1. Drag .zip to dashboard
2. Configure custom domain [domain]
3. Enable HTTPS
4. Set up redirects: [if any]

Hoặc CLI:
npx vercel --prod

Template H-4: Canva polish

[Sau Send to Canva]

Adjust trong Canva:
- Resize cho [format: 1080x1080 IG / 1200x628 FB / 1080x1920 Story]
- Apply brand kit "[brand name]"
- Add Canva-stock element [icon / illustration]
- Export PNG cao quality

Template H-5: PPTX polish

[Sau export PPTX]

Open PowerPoint, polish:
- Verify font substitution (custom font → system equivalent)
- Re-check animation timing (web → PPT khác)
- Add Excel chart cho slide [N] data viz
- Embed video file [if any] (PPT max 100MB embedded)
- Save as both .pptx + .pdf

Anti-patterns — Sai lầm phổ biến

Path ① Claude Code mà không có Figma MCP setup

Bạn click hand-off, paste vào Claude Code, gõ "push to Figma" — Claude Code không có Figma MCP → fail.

Tại sao sai

Claude Code default không kết nối Figma. Phải setup MCP trước.

Cách đúng

Setup Figma MCP + Figma skills 1 lần (Setup section ở trên). Hoặc skip path này, dùng path ② direct.

Expect 100% responsive sau Path ②

Push Figma, mở Figma, frames lệch trên iPhone preview.

Tại sao sai

Auto-layout không 1-1 với Figma constraints. 20-30% manual fix mặc định.

Cách đúng

Plan 30-60 phút sau push để fix responsive. Đừng schedule meeting demo ngay sau push.

Path ③ Canva cho production landing

Export Canva PNG → upload làm hero image landing → trông cheap.

Tại sao sai

Canva là raster image. Landing page cần vector + responsive HTML.

Cách đúng

Canva chỉ cho marketing asset (social, print). Production page → Path ④ HTML.

Path ⑤ PPTX cho deck animation-heavy

Animation 5 transition + parallax → export PPTX → PowerPoint render flat.

Tại sao sai: PPT animation engine ≠ web animation engine.

Cách đúng:

• Animation-heavy deck → ở lại Claude Design (share link cho stakeholder)
• Hoặc export HTML → host link → share
• PPTX cho deck text + image only

Không version checkpoint trước hand-off

Hand-off path ②, trong khi Figma update — nếu sai, không revert được.

Tại sao sai: Hand-off là one-way (ít trường hợp). Lỗi push → Figma file dirty.

Cách đúng:

• Trước hand-off: save current state Claude Design (clone project) + Figma file (duplicate page)
• Test push với 1 frame nhỏ trước khi push toàn deck
• Confirm test ổn rồi push full

Hand-off mỗi prototype iteration

Bạn iterate 5 round trong Claude Design, hand-off Figma 5 lần.

Tại sao sai: Mỗi hand-off tốn token + Figma cleanup. 5 lần = 5x cost + 5x cleanup work.

Cách đúng:

• Iterate xong trong Claude Design (~3-5 round inside)
• Khi đã ổn, 1 lần hand-off path ② Figma
• Polish responsive + final tweaks trong Figma

Mẹo nâng cao

Mẹo 1: "Hand-off checklist" trước path ② hoặc path ①

Trước khi hand-off cost-heavy paths, check:

☐ Prototype iterate xong trong Claude Design (3-5 round)
☐ Design system applied + consistent
☐ Save checkpoint: clone project Claude Design
☐ Test path với 1 frame/section nhỏ trước
☐ Plan 30-60 phút polish post hand-off
☐ Stakeholder review preview, not first push

5 phút checklist → tránh 2 giờ rework.

Mẹo 2: Path ④ HTML là default cho landing

Nếu chỉ deploy landing/page (không CMS), default path ④. Lý do:

• Quality preservation 95%
• Token cost thấp
• Deploy 5 phút Vercel
• Reuse domain, SSL, hosting

90% indie hacker dùng path ④ là đủ.

Mẹo 3: Multi-format export trong 1 lần

Sau iterate xong, export multi-format simultaneously:

• HTML (Path ④) — for deploy
• PPTX (Path ⑤) — for presentation backup
• PDF (Path ⑤) — for cold outreach
• Send to Canva (Path ③) — for marketing variants

5 phút export, có 4 format → 4 use case covered. Không phải re-export sau.

Mẹo 4: Naming convention cho Figma push

Khi path ② Figma, đặt tên file/page convention:

[Project]_[Status]_[Date]
Example:
SaigonHealth_v1_2026-04-25
SaigonHealth_v2-redesign_2026-05-15
SaigonHealth_production_2026-06-01

Track version history. Designer mới onboard biết "v1 cũ, v2 đang work, production = ship".

Mẹo 5: Path ① Claude Code workflow optimization

Nếu dùng Claude Code dài hạn, set up:

~/.claude-code/config.yaml:
  default_framework: nextjs
  default_styling: tailwind
  default_state: zustand
  figma_mcp: enabled
  figma_token: [your-token]

Mỗi hand-off → Claude Code biết default → less prompting setup.

Áp dụng ngay

Bài tập 1: Multi-path từ 1 prototype (~45 phút)

Setup: Use prototype từ Bài 8 (landing page).

Bước 1 — Path ④ HTML deploy (15 phút):

Bước 2 — Path ⑤ PDF export (5 phút):

Generate PDF version → use case (cold email / archive). Note quality vs HTML.

Bước 3 — Path ③ Canva variants (15 phút):

Send to Canva → create 3 social variants:

• IG square 1080x1080
• IG story 1080x1920
• FB landscape 1200x628

Bước 4 — Reflection:

• Path nào nhanh nhất? ___
• Path nào quality cao nhất? ___
• Path nào tiết kiệm token? ___
• Workflow của bạn dùng path nào primary?

Bài tập 2 (advanced): Setup Figma MCP + Path ② (~60 phút)

Nếu có Figma + Claude Code:

Bước 1 — Install Figma MCP (15 phút):

• Follow setup section ở trên
• Test connection

Bước 2 — Test push 1 prototype (15 phút):

• Use simple prototype (1-2 screen)
• Path ② push to Figma
• Track time + quality

Bước 3 — Polish Figma file (30 phút):

• Fix auto-layout issues
• Remap components
• Apply Figma library styles

Bước 4 — Decision:

• Worth investment cho workflow của bạn?
• Frequency dùng path ② estimate?

Tóm tắt bài học

Tài liệu tham khảo

• Kirk @UI Collective — Claude Design: The Complete Guide — phần Claude Code → Figma MCP demo
• Claude Code documentation — anthropic.com/claude-code
• Figma MCP guide — UI Collective Academy course
• Vercel, Netlify — free deployment
• Canva brand kit — pro feature

Câu hỏi để giữ tinh thần đúng: bạn đang hand-off Production hay đang hand-off excuse "tool đã làm xong"? Tool đưa 80%. 20% còn lại là craft riêng. Designer giỏi đầu tư 20% đó. Designer trung bình ship 80% rồi blame tool. Sự khác biệt nằm ở kỳ vọng và investment 20% cuối.