# Figma MCP hay screenshot: thử cả ba cách với Claude Code

[Jonas Arleth](https://homus.dev/speakers/jonas-arleth) · [FORMBURG](https://homus.dev/orgs/formburg)

> Cùng một design website, Jonas so screenshot kèm prompt chi tiết với Figma MCP kèm prompt ngắn trong Claude Code: độ khớp, animation, thời gian và giá.

Topics: Coding Agents, Dev Tools, Workflow

Canonical: https://homus.dev/talks/i-tested-figma-mcp-vs-screenshots-with-claude-code

## 1. Điểm xuất phát: website EDDY build từ screenshot

Jonas Arleth (FORMBURG) mở đầu bằng lần thử ngay trước bài test này: anh thách Claude Code build một website từ design Figma của chính anh. Đó là trang EDDY (trên màn hình ghi "Independent Artist Agency"), có một infinite slider, các profile nghệ sĩ có animation, và thêm vài interaction khác. Theo anh, phần development khi đó thực sự rất tốt (video đăng ngày 28/10/2026).

![Trang chủ website EDDY với logo đỏ, dòng Independent Artist Agency và các ảnh nghệ sĩ](https://homus.dev/photos/3M71yNV_K9E-0003.jpg)

Trang chủ EDDY, website mẫu dùng xuyên suốt bài test: logo EDDY lớn màu đỏ, dòng "Independent Artist Agency" và một cụm ảnh nghệ sĩ. Jonas nói ở góc phải màn hình (video đăng ngày 28/10/2026).

Theo số đo của Jonas (video đăng ngày 28/10/2026), kết quả đầu tiên lần đó mất của Claude khoảng 48 phút, và anh cần thêm đúng một feedback prompt để sửa vài lỗi nhỏ hơn. Với một layout phức tạp như vậy, anh thấy thế là rất ấn tượng.

Nhưng riêng prompt ban đầu đã dài 2.646 từ (số liệu trong video đăng ngày 28/10/2026). Anh nói thêm cho công bằng: phần lớn prompt đó anh đọc cho máy ghi (dictate), rồi để Claude tự viết prompt giúp anh.

![Màn hình ghi 2,646 words và dòng 2 prompts, 48 min cộng khoảng 17 min, Opus 5.5 high](https://homus.dev/photos/3M71yNV_K9E-0100.jpg)

Thẻ tổng kết lần build bằng screenshot: "2,646 words", bên dưới là "2 prompts · 48 min + ~17 min · Opus 5.5 high": hai prompt (prompt gốc và một feedback prompt), thời gian ghi 48 phút cộng khoảng 17 phút, chạy trên Claude Opus 5.5 ở mức high (theo video đăng ngày 28/10/2026).

Dù vậy, theo Jonas (video đăng ngày 28/10/2026), muốn có kết quả như thế từ screenshot thì bạn vẫn cần một prompt khá chi tiết và được viết cẩn thận.

## 2. Câu hỏi của người xem: sao không dùng Figma MCP?

Theo Jonas (video đăng ngày 28/10/2026), khá nhiều người xem đã hỏi anh trong phần bình luận: tại sao anh không dùng Figma MCP server? Trên màn hình anh cho lướt qua vài câu hỏi kiểu đó, chẳng hạn "tại sao không dùng Figma MCP để cho nó thêm context?", hay "sao không gửi luôn link Figma cho Claude để nó tự lấy mọi thuộc tính như size, gap mà không cần prompt?".

Anh thấy đó là một câu hỏi hay. Lý do: với Figma MCP, Claude đọc được thông tin design thật trực tiếp từ Figma, thay vì chỉ nhìn screenshot (theo Jonas, video đăng ngày 28/10/2026). Vậy về lý thuyết, anh sẽ không cần giải thích nhiều chi tiết trong prompt nữa. Nhưng cách đó có thực sự chạy không? Và có đáng trả tiền không?

Câu sau là vì Figma chắc chắn muốn thu tiền cho tính năng này (theo Jonas, video đăng ngày 28/10/2026). Đó là điều anh muốn tìm ra trong bài test đặt hai bên cạnh nhau (side-by-side), khá phức tạp, của video này.

Câu hỏi của bài test theo Jonas (video đăng ngày 28/10/2026): nếu Claude đọc thẳng design từ Figma, prompt có ngắn đi mà kết quả vẫn tốt không, và có đáng trả tiền cho Figma không.

## 3. Screenshot và Figma MCP khác nhau ở đâu

Trước khi test, Jonas giải thích nhanh hai cách khác nhau thế nào. Ở các lần thử trước, anh export layout Figma ra ảnh rồi thêm vào project Claude Code, gồm cả một bản bật lưới 12 cột (12-column grid) cho thấy rõ cột. Cùng với một số chỉ dẫn trong prompt, Claude đã dựng lại design gần như pixel perfect (theo Jonas, video đăng ngày 28/10/2026).

Nhưng từ một screenshot, Claude vẫn phải tự đoán ra những thứ như spacing (anh nói nhân tiện là phần này chạy khá tốt), cỡ chữ và cách các phần tử được đặt vào vị trí (theo Jonas, video đăng ngày 28/10/2026).

Ví dụ, theo anh (video đăng ngày 28/10/2026), từ ảnh thì Claude không phải lúc nào cũng phân biệt được một phần tử đang giảm opacity hay chỉ đơn giản là dùng màu khác. Tất nhiên anh có thể giải thích những điều đó trong prompt, nhưng việc ấy có thể rất tốn thời gian, nhất là khi làm các project website lớn hơn.

![So sánh hai cột: Screenshot với các câu hỏi màu hay opacity, size, gap, font size và Figma MCP với giá trị chính xác](https://homus.dev/photos/3M71yNV_K9E-0230.jpg)

Bên trái (SCREENSHOT), trang EDDY với các nhãn hỏi "Color or opacity?", "Size?", "Gap?", "Font size?". Bên phải (FIGMA MCP), các giá trị chính xác: màu #FF4229 ("giá trị hex chính xác, không lấy mẫu từ pixel"), ảnh 383 × 514 px export thẳng từ Figma kèm kích thước và vị trí, khoảng cách 12 px gap đọc từ vị trí, chữ Geist Bold 52 px với line height 44 px và letter spacing -3.12 px (minh hoạ trong video đăng ngày 28/10/2026).

Với Figma MCP thì mọi thứ chạy hơi khác. Theo Jonas (video đăng ngày 28/10/2026), Claude truy cập được cấu trúc design thật, gồm kích thước, thông tin layout, typography, variables và assets. Đúng vậy, cả assets: nó còn tải ảnh về giúp bạn một cách trọn vẹn.

Anh kể tiếp (video đăng ngày 28/10/2026): nó cũng chuyển được ảnh sang WebP và lưu vào một folder trên desktop của bạn. Nó còn chụp được screenshot trực tiếp từ artboard Figma, điều anh thấy rất tuyệt, vì bạn không phải tự export layout nào cả. Tóm lại, Claude có nhiều thông tin hơn hẳn để làm việc.

## 4. Không có Figma MCP vẫn build được website

Dù vậy, Jonas thấy cần nói rõ một điều: bạn chắc chắn không cần Figma MCP để build website với Claude Code. Theo anh (video đăng ngày 28/10/2026), chỉ với screenshot thôi cách này đã chạy rất, rất tốt, và bạn thậm chí có thể làm design trong những công cụ hoàn toàn khác. Nên chuyện này không phải là chuyện riêng của Figma.

Nhưng nếu sắp có một project khách hàng phức tạp hơn, anh nghĩ đáng để tìm hiểu xem trả tiền cho một gói Figma có thực sự tạo ra khác biệt không (video đăng ngày 28/10/2026).

Hai đường vào Claude Code mà Jonas so sánh (video đăng ngày 28/10/2026): screenshot kèm prompt thì không phụ thuộc Figma; Figma MCP là đường thứ hai mà anh muốn xem có đáng trả tiền cho project khách hàng phức tạp không.

## 5. Thiết lập bài test: ba cách trên cùng một design

Để thử, Jonas dùng lại website EDDY và so sánh ba cách tiếp cận khác nhau.

- **Run A, screenshot và prompt dài:** chính là kết quả gốc của lần thử trước đây. Anh dùng screenshot, một master prompt chi tiết và thêm một feedback prompt để sửa vài lỗi nhỏ. Theo số đo của anh, kết quả đầu tiên mất khoảng 48 phút với Claude Opus 5.5 ở mức high (video đăng ngày 28/10/2026). Đây là mốc tham chiếu.

- **Run B, Figma MCP và chỉ có link:** anh dùng Figma MCP nhưng chỉ với một prompt rất ngắn. Anh đưa cho Claude link tới các layout Figma khác nhau và vài chỉ dẫn cơ bản về cách chúng nối với nhau, nhưng không có chỉ dẫn chi tiết nào về animation hay cách build animation (thiết lập trong video đăng ngày 28/10/2026).

- **Run C, Figma MCP và prompt ngắn:** phần kỹ thuật và các interaction anh muốn, nhưng không có chỉ dẫn layout chi tiết (thiết lập trong video đăng ngày 28/10/2026; phần kết quả ở mục 9).

Ba run trên cùng design EDDY, đúng theo các thẻ Run A, Run B, Run C trên màn hình (video đăng ngày 28/10/2026).

## 6. Cách copy link tới một artboard trong Figma

Nhân tiện, nếu bạn chưa biết cách lấy các link đó, Jonas chỉ từng bước (thao tác trong video đăng ngày 28/10/2026):

- Vào một artboard của bạn trong Figma.

- Bấm Shift-D trên bàn phím. Figma chuyển sang chế độ code, tức developer mode (Dev Mode), theo thao tác trong video đăng ngày 28/10/2026.

- Ở bên phải có một biểu tượng link nhỏ. Bấm vào đó, Figma copy URL dẫn tới đúng artboard này (thao tác trong video đăng ngày 28/10/2026).

- Trong Claude Code, Jonas tham chiếu link đó thẳng trong prompt (demo trong video đăng ngày 28/10/2026).

![Figma ở Dev Mode với artboard Eddy-home được chọn, bảng Inspect bên phải có mục MCP và các thông số layout](https://homus.dev/photos/3M71yNV_K9E-0403.jpg)

Figma ở Dev Mode: artboard trang chủ EDDY đang được chọn, bên cạnh là artboard overlay của một nghệ sĩ. Bảng Inspect bên phải có mục MCP, các thông số layout (width, height, padding theo rem) và màu nền #F3F4ED, màu chọn #FF4229 (demo trong video đăng ngày 28/10/2026).

## 7. Run B: Figma MCP với prompt tối giản

Prompt của Run B trên màn hình chỉ có mấy dòng: build website này từ Figma, rồi một link cho trang Home, một link cho trạng thái bấm vào một nghệ sĩ trong slider để mở overlay, một link cho trạng thái hover tên nghệ sĩ trong danh sách genre, và một link cho preloader khi tải trang. Ô chat chọn model Opus 5.5 (demo trong video đăng ngày 28/10/2026).

```
Build this website from Figma:
- Home: [link]
- Clicking an artist in the slider opens the artist overlay: [link]
- Hovering an artist name in the genre list: [link]
- Preloader on page load: [link]
```

![Thẻ RUN B LINKS ONLY và ô prompt Build this website from Figma với bốn link](https://homus.dev/photos/3M71yNV_K9E-0343.jpg)

Prompt "Run B · Links only": bốn dòng, mỗi dòng một link Figma cho trang chủ, overlay nghệ sĩ, hover trong danh sách genre và preloader; model là Opus 5.5 (demo trong video đăng ngày 28/10/2026).

Theo số đo của Jonas (video đăng ngày 28/10/2026), lần này Claude chỉ mất khoảng 10 phút, nhanh hơn rất nhiều so với 48 phút của prompt screenshot chi tiết. Tất nhiên bản này thiếu một số interaction phức tạp hơn, nên đây không hẳn là một phép so sánh hoàn toàn công bằng. Nhưng với chỉ 10 phút và một prompt ngắn như vậy, anh thấy chất lượng build thực ra khá tốt (demo trong video đăng ngày 28/10/2026). Anh bắt đầu đi qua từng phần.

Ảnh và chữ nằm gần như đúng chỗ của chúng (demo trong video đăng ngày 28/10/2026). Nhưng anh để ý một điều thú vị khi resize trình duyệt và dùng một màn hình lớn hơn: Claude về cơ bản làm cả website co giãn theo chiều rộng viewport.

Nhìn vào CSS, anh thấy lý do (demo trong video đăng ngày 28/10/2026). Claude dùng đơn vị rem cho chữ, điều mà bình thường là tốt, nhưng root font size ở đây lại được tính theo chiều rộng viewport. Vì thế trên màn hình càng lớn, mọi thứ cứ to dần lên.

![DevTools tab Stile hiển thị rule html với font-size calc(100vw / 172.8)](https://homus.dev/photos/3M71yNV_K9E-0502.jpg)

DevTools (giao diện tiếng Đức, tab "Stile") ở bản Run B: rule `html { font-size: calc(100vw / 172.8); }`, tức root font size đi theo chiều rộng viewport, nên mọi kích thước theo rem cũng lớn theo màn hình (demo trong video đăng ngày 28/10/2026).

Và khi anh thử phóng to website bằng bàn phím, chữ không to lên chút nào (demo trong video đăng ngày 28/10/2026). Anh nói rõ: điều đó rõ ràng không tốt cho accessibility.

## 8. Run B: so từng pixel và thử các interaction

Tiếp theo, Jonas so design thật ở đúng chiều rộng artboard gốc trong Figma là 1728 pixel. Anh đặt một screenshot kết quả của Claude chồng thẳng lên design Figma, dùng blend mode difference. Những vùng màu đen là chỗ pixel khớp nhau, còn các vùng khác lộ ra chỗ khác biệt (demo trong video đăng ngày 28/10/2026).

Theo Jonas (demo trong video đăng ngày 28/10/2026), có vài chỗ hơi lệch một chút, nhưng nhìn chung vẫn rất tốt. Ở phần đang hiện trên màn hình lúc đó, danh sách genre, anh nghĩ có vài vấn đề chỉ là do sai tên. Anh cũng cho xem cùng chế độ đó với overlay để tham chiếu.

![Ảnh chồng ở blend mode difference: danh sách genre gần như đen, chữ ield của Leftfield và vài tên nghệ sĩ hiện màu xanh](https://homus.dev/photos/3M71yNV_K9E-0543.jpg)

Chồng bản Run B lên design Figma ở blend mode difference: phần lớn danh sách genre gần như đen (khớp), riêng phần cuối chữ "Leftfield" và một số tên nghệ sĩ mẫu ở cột phải sáng màu xanh, tức là lệch so với design (demo trong video đăng ngày 28/10/2026).

Rồi anh xem các interaction (demo trong video đăng ngày 28/10/2026):

- **Preloader:** Claude chỉ đơn giản fade logo vào rồi trượt cả màn hình lên trên. Không có animation nào đưa logo di chuyển vào vị trí của nó trên trang (demo trong video đăng ngày 28/10/2026).

- **Slider:** kéo được, nhưng cảm giác khá cứng so với bản gốc của anh. Nó cũng không mượt và không infinite: tới cuối là dừng lại luôn (demo trong video đăng ngày 28/10/2026).

- **Overlay nghệ sĩ:** khi bấm vào một nghệ sĩ, overlay mở ra bằng một hiệu ứng fade đơn giản, thay vì hiệu ứng chuyển ảnh rất đẹp mà anh muốn (demo trong video đăng ngày 28/10/2026).

Phần genre thì thực ra khá thú vị. Theo Jonas (demo trong video đăng ngày 28/10/2026), Claude dựng lại interaction hover ở đây tốt một cách bất ngờ, dù anh thậm chí không hề nhắc tới nó trong prompt. Nó còn có một animation scale và fade nhỏ. Nhưng ảnh biến mất ngay lập tức khi rời chuột khỏi tên một nghệ sĩ, điều có thể gây nhấp nháy (flickering).

Responsive layout nhìn chung cũng ổn (demo trong video đăng ngày 28/10/2026). Anh nói có lẽ mình sẽ đưa cho Claude đúng những feedback giống như với prompt screenshot chi tiết. Tất nhiên anh có thể sửa hết bằng vài prompt nữa, nhưng việc đó có khi lại tốn thời gian hơn là đưa cho Claude chỉ dẫn rõ ràng ngay từ đầu. Và đó là điều anh muốn thử tiếp, cùng với Figma MCP.

## 9. Run C: Figma MCP với prompt ngắn có phần kỹ thuật

Với prompt ngắn, Jonas đưa cho Claude phần, như anh nói, technical setup và chỉ dẫn cho các animation, nhưng không có tất cả các chỉ dẫn layout chi tiết. Phần prompt thấy được trên màn hình (thiết lập trong video đăng ngày 28/10/2026):

```
Build this website from Figma.

Tech setup
- HTML, CSS, vanilla JavaScript, GSAP
- Smooothy for the artist slider
- Infinite, snap, parallax and autoplay, like this example: https://github.com/vallafederico/smooothy/blob/master/docs/extend.md#parallax-and-speed
- Keep the code lightweight and easy to read

Design references (Figma)
- Home: [link]
- Artist overlay: [link]
- Genre hover: [link]
- Preloader: [link]

Content
- Artist data: EDDY_Artist_Roster.csv
- Images by slug in the raw-images folder

Layout and units
- The Figma artboard is the max-width of the main container, centered.
- Keep the 12-column grid. Take margins and gutter from Figma.
- Use rem. Scale large type and spacing with clamp().
- Only desktop is designed, make it responsive.
- Use CSS custom properties where useful.
- Make it accessible and respect prefers-reduced-motion.
```

Bên dưới prompt còn một mục Motion, nhưng trên màn hình chỉ thấy dòng đầu về easing mặc định.

![Thẻ RUN C SHORT PROMPT với prompt gồm các mục Tech setup, Design references, Content, Layout and units, Motion](https://homus.dev/photos/3M71yNV_K9E-0703.jpg)

Prompt "Run C · Short prompt": stack HTML, CSS, vanilla JavaScript, GSAP, thư viện Smooothy cho slider, bốn link Figma, file dữ liệu nghệ sĩ dạng CSV, các quy tắc layout (rem, clamp(), lưới 12 cột, responsive, prefers-reduced-motion) và một mục Motion ở dưới cùng mà màn hình chỉ cho thấy dòng đầu về easing mặc định (demo trong video đăng ngày 28/10/2026).

Theo số đo của Jonas (video đăng ngày 28/10/2026), lần này Claude cần khoảng 21 phút, vẫn nhanh hơn nhiều so với 48 phút của bài test gốc.

Bắt đầu với preloader: Claude làm animation từng chữ cái (letter by letter) chạy tốt, nhưng có một lỗi giật (glitch) khi logo di chuyển vào vị trí cuối cùng: letter spacing bỗng thay đổi, điều không xảy ra với prompt screenshot gốc của anh (demo trong video đăng ngày 28/10/2026).

Thật ra letter spacing có vẻ hơi lệch trên toàn bộ website (demo trong video đăng ngày 28/10/2026). Dù Claude có quyền đọc các giá trị trong Figma, anh không biết vì sao giờ lại sai. Điều đó thấy khá rõ ở chế độ blend difference.

Slider lần này có autoplay, nhưng thay vì chạy liên tục, nó nhảy từ nghệ sĩ này sang nghệ sĩ kế tiếp (demo trong video đăng ngày 28/10/2026). Nó cũng có đúng những vấn đề như kết quả đầu tiên của bản gốc: slider không trải hết bề ngang màn hình, và ảnh parallax bị nhảy sau khi kéo.

Điều làm anh ngạc nhiên nhất là overlay nghệ sĩ (demo trong video đăng ngày 28/10/2026). Ảnh thậm chí không chuyển mượt từ slider sang. Khi đóng overlay cũng có một cú nhảy thấy rõ. Theo anh, đó lại là thứ Claude làm đúng ngay lần đầu với prompt screenshot chi tiết.

Animation hover ở phần genre thì, theo anh, thực ra nhìn khá đẹp (demo trong video đăng ngày 28/10/2026). Nhưng ảnh chạy theo con trỏ chuột thay vì đứng yên ở phía bên trái, và Claude làm mờ tất cả tên nghệ sĩ thay vì chỉ những tên trong cùng một hàng.

![Bản Run C ở chế độ responsive trong DevTools, overlay nghệ sĩ mẫu với nút Book và dòng genre](https://homus.dev/photos/3M71yNV_K9E-0843.jpg)

Bản Run C mở ở chế độ responsive trong DevTools: overlay của một nghệ sĩ mẫu trên khung hẹp, có nút Book, danh sách genre và tên nghệ sĩ cỡ lớn (demo trong video đăng ngày 28/10/2026).

Trên mobile vẫn còn vài lỗi, nhưng phần lớn giống những lỗi của bản prompt tối giản (demo trong video đăng ngày 28/10/2026). Nên nhìn chung anh hơi thất vọng với kết quả này. Prompt gọn, Claude xong nhanh hơn, nhưng anh vẫn sẽ cần kha khá feedback để mọi thứ chạy đúng như anh muốn.

## 10. So sánh cả ba kết quả

Vậy Figma MCP có thực sự tạo ra khác biệt ở đây không? Jonas so sánh cả ba kết quả.

Về design, theo Jonas (video đăng ngày 28/10/2026), cả ba bản đều khá sát layout Figma gốc của anh. Nhưng về interaction, prompt screenshot chi tiết rõ ràng chạy tốt hơn hẳn, đặc biệt là infinite slider và hiệu ứng chuyển mượt vào overlay nghệ sĩ.

Còn về thời gian, theo số đo của anh (video đăng ngày 28/10/2026), các bản MCP chắc chắn nhanh hơn. Nhưng tất nhiên đây mới chỉ là kết quả đầu tiên, và vẫn còn cần vài vòng feedback.

![Bảng Scorecard First results so ba cách theo design accuracy, responsive, slider và overlay, genre interaction, thời gian](https://homus.dev/photos/3M71yNV_K9E-0903.jpg)

Bảng "Scorecard · First results" của Jonas (video đăng ngày 28/10/2026). Screenshots + detailed prompt: design Very good, responsive và accessibility Good, slider và overlay Very good, genre interaction Very good, 48 phút. MCP + minimal prompt: Very good, Needs improvement, Basic, Good, khoảng 10 phút. MCP + short prompt: Good, Needs improvement, Needs improvement, Needs improvement, 21 phút. Chú thích dưới bảng: đây là đánh giá định tính kết quả đầu tiên, trước các vòng feedback.

## 11. Figma MCP tốn bao nhiêu tiền

Theo Jonas (video đăng ngày 28/10/2026), thực ra bạn có thể dùng remote Figma MCP miễn phí, nhưng bị giới hạn chỉ 20 tool call mỗi tháng. Trong bài test của anh, Claude dùng 5 tool call chỉ cho một prompt. Nên bạn có thể hình dung mình sẽ chạm giới hạn đó nhanh đến mức nào.

Để dùng thường xuyên, theo anh (video đăng ngày 28/10/2026), có lẽ bạn sẽ cần một gói trả phí của Figma, nhưng không nhất thiết phải là một seat đầy đủ (Full seat). Anh nói một Dev seat trên gói Professional, tính đến lúc quay, tốn khoảng 15 đô mỗi tháng, và như vậy đã cho bạn tới 200 tool call mỗi ngày, mà theo anh là quá đủ cho hầu hết các project.

![Bảng Figma Professional per seat per month với ba seat Collab, Dev, Full và mức MCP](https://homus.dev/photos/3M71yNV_K9E-0943.jpg)

Bảng "Figma Professional · per seat / month" trong video đăng ngày 28/10/2026: Collab 3 đô (trả theo năm) hoặc 5 đô (trả theo tháng), 6 MCP call mỗi tháng; Dev 12 đô hoặc 15 đô, Full MCP access; Full 16 đô hoặc 20 đô, Full MCP access cộng quyền ghi vào Figma. Lời Jonas "khoảng 15 đô mỗi tháng" khớp với cột trả theo tháng của Dev seat; trả theo năm thì màn hình ghi 12 đô.

Màn hình kế tiếp tóm lại hai con số (video đăng ngày 28/10/2026): 20 tool call mỗi tháng với gói Starter miễn phí, và 200 tool call mỗi ngày với Dev seat hoặc Full seat trên gói Professional.

## 12. Kết luận: MCP là công cụ, không thay được một prompt tốt

Vậy Jonas có dùng Figma MCP cho project tiếp theo không? Anh nghĩ điều đó thực sự tùy vào chính project (video đăng ngày 28/10/2026).

Điều làm anh ngạc nhiên nhất (video đăng ngày 28/10/2026) là cho Claude truy cập trực tiếp vào file design không tự động cho anh kết quả tốt hơn. Workflow screenshot gốc của anh thực ra xử lý các animation phức tạp tốt hơn nhiều. Và với MCP chắc chắn có một lợi thế tiềm năng về thời gian; anh nghĩ đây là lợi thế lớn nhất. Nó trở nên đặc biệt đáng chú ý với các website lớn hơn, chẳng hạn có nhiều trang.

![Hai cột Figma MCP helps with và A good prompt still decides](https://homus.dev/photos/3M71yNV_K9E-1023.jpg)

Tổng kết của Jonas (video đăng ngày 28/10/2026). "Figma MCP helps with": kết quả đầu nhanh hơn, site lớn có nhiều trang, đưa design vào code. "A good prompt still decides": hành vi responsive, animation phức tạp, các chi tiết nhỏ.

Nhưng điều bài thử nghiệm này cũng cho anh thấy (video đăng ngày 28/10/2026) là một prompt tốt vẫn cực kỳ quan trọng, nhất là với hành vi responsive, animation, và tất cả những chi tiết nhỏ làm một website có cảm giác tốt. Theo anh, đây là phần việc bạn chắc chắn phải tự làm.

Nên với Jonas (video đăng ngày 28/10/2026), Figma MCP không thực sự là thứ thay thế một prompt tốt. Nó giống một công cụ nữa có thể làm quá trình dễ hơn một chút.

## Nguồn và liên kết

- Tên gốc: I Tested Figma MCP vs Screenshots With Claude Code
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=3M71yNV_K9E](https://www.youtube.com/watch?v=3M71yNV_K9E)

- Kênh YouTube FORMBURG (Jonas Arleth): [youtube.com/channel/UCZafck8c9_Nel9U9QARnvSw](https://www.youtube.com/channel/UCZafck8c9_Nel9U9QARnvSw)

- Figma Help Center, "Guide to the Figma MCP server": mô tả remote MCP server (endpoint do Figma host, được khuyên dùng) và desktop MCP server (cần Dev hoặc Full seat trên gói Professional trở lên), đọc ngày 29/10/2026: [help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server)

- Figma Developer Docs, Figma MCP Server (cài đặt, tools và prompts), đọc ngày 29/10/2026: [developers.figma.com/docs/figma-mcp-server](https://developers.figma.com/docs/figma-mcp-server/)

- Repo Smooothy, thư viện slider có trong prompt Run C; README ghi class Core hỗ trợ infinite scrolling, snapping, touch và parallax, đọc ngày 29/10/2026: [github.com/vallafederico/smooothy](https://github.com/vallafederico/smooothy)

Nguồn: https://homus.dev/talks/i-tested-figma-mcp-vs-screenshots-with-claude-code · cập nhật 2026-10-29