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

5 hand-off path — Bản đồ

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

                    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│      │
   └────────┴────────┴────────┴────────┴────────┘

Path ① — Claude Code direct development

Khi nào

Workflow

Khi nào path này shine

Setup tối thiểu

Caveat

• Hand-off cho dev backend/frontend integrate
• Build production app từ prototype
• Cần custom logic, API integration, database
• Solo dev xây MVP cùng product+code
• Indie hacker ship trong tuần
• Hackathon từ design → working app
• Claude Code CLI installed: npm install -g @anthropic/claude-code
• API key Claude Code (separate billing từ Claude Pro)
• Project folder ready
• 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.

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)

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

Setup chi tiết

Workflow hand-off

Limitations Kirk's experience

Khi nào path này shine

Khi nào skip

• Figma MCP server — bridge Claude ↔ Figma API
• Figma skills trong Claude Code — set up tools để Claude operate Figma
• Figma file target để push design
• 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.
• 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
• One-off prototype không cần production
• Claude Design có thể export HTML đủ (path ④)
• Token budget tight

┌───────────────────────────────────────────────────────┐
│                                                       │
│  ① 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"                │
│                                                       │
└───────────────────────────────────────────────────────┘

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

Path ③ — Canva — polish presentation/asset

Khi nào

Workflow

Limitations

Khi nào path này shine

Khi nào skip

• 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
• 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.
• 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
• 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

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

Path ④ — HTML standalone — custom domain deploy

Khi nào

Workflow

Limitations

Khi nào path này shine

Khi nào skip

• Deploy landing page lên custom domain
• WordPress / Webflow / Vercel hosting
• Indie hacker MVP ship nhanh
• 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
• MVP / waitlist landing ship nhanh
• Course sales page WordPress (như Lil)
• Event landing hosted on subdomain
• Production CMS → Webflow/Framer trực tiếp
• E-commerce → Shopify/WooCommerce
• Heavy JS interactions cần backend

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

Path ⑤ — PPTX / PDF — stakeholder review

Khi nào

Workflow

Limitations

Khi nào path này shine

Khi nào skip

• Slide deck cho corporate stakeholder dùng PowerPoint
• PDF cho cold email VC outreach
• Print review
• 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.
• Corporate environment mọi người dùng PPT
• Cold outreach PDF chuẩn workflow
• Print materials
• 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

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

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:

Path mix

Token budget breakdown

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

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

Ví dụ theo ngành / Case studies

🚀 Indie hacker — solo MVP cycle

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

Workflow:

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:

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:

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:

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

• 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
• 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
• 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
• Sales page Claude Design (~30 phút)
• Path ④ HTML standalone export
• Lil's specific: upload HTML vào Elementor HTML widget

Prompt template — Hand-off

Template H-1: Claude Code app build

Template H-2: Figma push

[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

Template H-3: HTML deploy

[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

Template H-4: Canva polish

[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

Template H-5: PPTX 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:

❌ 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:

❌ 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:

• Animation-heavy deck → ở lại Claude Design (share link cho stakeholder)
• Hoặc export HTML → host link → share
• PPTX cho deck text + image only
• 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
• 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:

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:

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

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

Sau iterate xong, export multi-format simultaneously:

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:

• Quality preservation 95%
• Token cost thấp
• Deploy 5 phút Vercel
• Reuse domain, SSL, hosting
• HTML (Path ④) — for deploy
• PPTX (Path ⑤) — for presentation backup
• PDF (Path ⑤) — for cold outreach
• Send to Canva (Path ③) — for marketing variants

☐ 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

Mẹo 4: Naming convention cho Figma push

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:

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

Mẹo 5: Path ① Claude Code workflow optimization

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

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

Á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:

Bước 4 — Reflection:

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):

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

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

Bước 4 — Decision:

• IG square 1080x1080
• IG story 1080x1920
• FB landscape 1200x628
• 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?
• Follow setup section ở trên
• Test connection
• Use simple prototype (1-2 screen)
• Path ② push to Figma
• Track time + quality
• Fix auto-layout issues
• Remap components
• Apply Figma library styles
• Worth investment cho workflow của bạn?
• Frequency dùng path ② estimate?

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

🎯 5 hand-off path — Claude Code, Figma (MCP), Canva, HTML standalone, PPTX/PDF. Mỗi path có purpose riêng, đừng force 1 path mọi use case.

🎯 Default path = ④ HTML cho landing/page, ⑤ PPTX cho deck. Upgrade ① hoặc ② khi cần production-grade.

🎯 Path ② Figma MCP mạnh nhưng setup nặng — chỉ invest nếu team đã có Figma workflow + frequent hand-off.

🎯 80% production-ready, 20% craft — Tool đưa bạn 80%. 20% còn lại là designer/dev đầu tư polish responsive, accessibility, performance.

🎯 Hand-off checklist trước path ① hoặc ② — iterate xong, save checkpoint, test path nhỏ trước. 5 phút checklist tránh 2 giờ rework.

🎯 Multi-format export trong 1 lần — 5 phút export ra 4 format → 4 use case. Không re-export sau.