Bạn đã từng ship một feature sang iOS, Android, Web cùng lúc và phát hiện font weight lệch nhau giữa ba bản? Claude Design ra mắt 17/4/2026 (TechCrunch, 2026) đã thêm tính năng export design token cho từng nền tảng. Bài này hướng dẫn quy trình 15 phút để có asset đồng bộ kèm spec compliance Material Design 3 và Apple SF Symbols.
Key Takeaways - Figma giữ 80% thị phần UI/UX 2026, Apple chuyển UI kit sang Figma natively (Sigma Collection, 2026) - Claude Design export tokens.json riêng cho iOS, Android, Web (Anthropic Support, 2026) - Material Symbols 3 trên Figma có 21K+ icon, support Material Design 3 adaptive (Figma Community, 2026) - Asset đồng bộ thủ công ngốn 8 giờ designer, Claude Design rút xuống 15-20 phút theo benchmark cá nhân
Multi-platform export là gì và vì sao khó?
Trả lời ngắn: Là quá trình tạo asset (icon, font, color, spacing) cho ba nền tảng iOS, Android, Web với cùng design intent nhưng tuân chuẩn riêng từng platform. Khó vì SF Symbols dùng pt và scale theo Dynamic Type, Material Design 3 dùng dp và adaptive container, Web dùng px và rem (Apple Developer, 2026).
Một button "Mua hàng" trong iOS dùng SF Pro 17pt semibold, padding 14pt vertical. Trong Android dùng Roboto 14sp medium, padding 12dp. Trong Web dùng Inter 16px font-medium, padding 12px. Designer phải maintain ba bản và sync mỗi khi update. Theo Stack Overflow Survey 2025, 84% developer dùng AI tools để giảm tải sync work (Stack Overflow, 2025). Untitled UI xếp hạng 30 best Figma UI Kit 2026 đều có multi-platform token bundling (Untitled UI, 2026).
Tham khảo thêm: - Claude Design Tổng Quan - Claude Design Iconography
Claude Design export tokens như thế nào?
Trả lời ngắn: Claude Design Pro $20/tháng cho phép yêu cầu export design token riêng cho từng nền tảng (Claude Pricing, 2026). Format hỗ trợ: tokens.json (W3C draft), .swift cho iOS, .xml cho Android resources, .css custom property cho Web. Mỗi nền tảng nhận đúng đơn vị và naming convention.
Prompt mẫu: "export design token cho iOS dạng .swift extension, Android dạng colors.xml và dimens.xml, Web dạng :root CSS custom property. Maintain semantic naming token-color-primary thay vì literal blue-500". Claude trả về 3 file ngay trong chat. Bạn copy paste vào project hoặc download.
McKinsey State of AI 2025 ghi nhận 88% tổ chức đã dùng AI và 62% đang thử AI agents (McKinsey, 2025). Multi-platform export là use case lý tưởng vì tính lặp lại cao và rule-based.
Tham khảo thêm: - Claude Design Vs Figma - Tạo Design System Voice
Token naming convention nào nên dùng?
Trả lời ngắn: Semantic naming theo W3C Design Tokens draft. Cấu trúc 3 layer: primitive (blue-500), semantic (color-primary), component (button-bg-primary). Claude Design tự follow pattern này khi export (Anthropic Support, 2026).
Vì sao 3 layer? Layer primitive là raw color value, không thay đổi. Layer semantic gán meaning, có thể đổi từ blue sang teal mà không sửa code. Layer component map vào use case cụ thể. Khi rebrand, bạn chỉ sửa layer semantic. JetBrains 2025 ghi nhận 85% developer dùng AI regularly (JetBrains, 2025).
Tham khảo thêm: - Claude Design Color Palette - Mobile UI Best Practices
Cách export icon đa định dạng?
Trả lời ngắn: Icon export dạng PDF cho iOS, vector drawable cho Android, SVG cho Web. Claude Design generate cả 3 format từ 1 source SVG (MCP Market, 2026). PDF cho iOS giữ vector chuẩn cho Asset Catalog. Vector drawable cho Android bao gồm android:width và android:height. SVG Web giữ viewBox cho responsive.
Material Symbols 3 trên Figma đã có 21K+ SVG icon free, support Material Design 3 (Figma Community, 2026). Bạn có thể combine: dùng Material Symbols 3 cho icon system phổ biến và Claude Design cho icon brand custom.
JetBrains 2026 báo cáo Claude Code awareness 57% và usage 18% workplace (JetBrains AI Tools 2026, 2026). Designer dùng Claude Design với cùng API key có thể chạy parallel với Claude Code generate component code. Glow UI 2026 cho biết top 12 free icon set Figma đều support multi-platform export (Glow UI, 2026). Lucky Graphics ghi nhận 2026 là năm AI tools dominant resource designer Việt (Lucky Graphics, 2026).
Tham khảo thêm: - Claude Design Marketplace - Typography Pairing Cho Brand
Workflow CI/CD tích hợp ra sao?
Trả lời ngắn: Build pipeline GitHub Actions chạy Claude Code (cùng platform) để regenerate token mỗi khi DESIGN.md update. Theo Pragmatic Engineer 2026, workflow tự động này đang phổ biến trong team mid-size (Pragmatic Engineer, 2026).
Step 1, designer push DESIGN.md lên Git. Step 2, GitHub Action trigger Claude Code với prompt regenerate tokens.json. Step 3, output commit lên branch chore/regen-tokens. Step 4, PR review. Step 5, merge. Stanford HAI AI Index 2025 ghi nhận adoption AI workflow tăng 23% YoY (Stanford HAI, 2025).
Tham khảo thêm: - Claude Code Là Gì - Claude Code GitHub Action
Khi nào không nên dùng Claude Design export?
Trả lời ngắn: Bốn trường hợp: design system <20 token, monorepo dùng Style Dictionary đã quen, project dưới $20/tháng budget, team không có Pro plan. Claude Design chỉ cho Pro $20, Max $100 hoặc $200, Team, Enterprise (Anthropic News, 2026).
Design system nhỏ <20 token có thể manage thủ công trong Figma Variables. Style Dictionary đã có pipeline ổn định thì giữ. Project budget thấp dùng Tokens Studio plugin Figma free. Theo Eigent 2026, Claude Design phù hợp non-designer hoặc small team hơn enterprise pipeline đã trưởng thành (Eigent, 2026).
Tham khảo thêm: - Claude Free Pro Team So Sánh - Case Study Redesign Brand
FAQ
Có support Web Components không? Có. Claude Design export CSS custom property và class component sẵn dùng cho Lit, Stencil, Web Components. Output tương thích W3C standard. Buildfastwithai phân tích Claude Design 4/2026 xác nhận điểm này (Buildfastwithai, 2026).
iOS bao gồm SwiftUI và UIKit không? Có. Claude Design export Swift extension dùng được cho cả SwiftUI ColorScheme và UIKit UIColor. Bạn chọn target trong prompt. Apple SF Symbols compliance được Icon Designer skill đảm bảo (MCP Market, 2026).
Android bao gồm Jetpack Compose không? Có. Output có file Theme.kt cho Compose và colors.xml cho View truyền thống. Material Design 3 adaptive design support (Figma Community, 2026).
Có sync với Figma Variables không? Hiện tại Claude Design parse Figma library qua URL nhưng chưa có 2-way sync. Anthropic chưa công bố roadmap Figma Variables sync (Anthropic Release Notes, 2026).
Token có version control không? Có. Output là plain text file (.json, .swift, .xml, .css), bạn quản lý qua Git như source code. Theo D2i 2026, version control design token là best practice cho team mid-size trở lên (D2i, 2026).
Kết luận
Multi-platform export từng tốn 8 giờ designer giờ chỉ 15 phút với Claude Design Pro $20/tháng. Hỗ trợ tokens.json, .swift, .xml, .css. Compliance Material Design 3 và Apple SF Symbols. Tích hợp được CI/CD qua Claude Code. Vẫn cần human review cho semantic naming và brand decision.
Bước tiếp theo: đăng ký Pro tại claude.com/pricing, paste Figma library URL, export 3 format token cho project hiện có. Nếu chưa quen Claude Design, đọc bài tổng quan trước.
Tham khảo thêm: - Claude Design Là Gì - Claude Design Iconography - Claude Design Color Palette - Tạo Design System Voice - TechCrunch Claude Design Launch - Anthropic Claude Design - Material Symbols 3 Icon Pack - Apple SF Symbols Developer - Claude Pricing - Anthropic Costs Documentation