Từ Figma tới website có animation với Figma MCP và Claude Code

1. Hai cách thường được dạy, và vì sao chúng không hợp với khách hàng thật

AyzZ mở đầu bằng một nhận xét về cách người ta học làm một website có tương tác và animation bằng AI (video đăng ngày 31/10/2026). Theo anh, người học thường được dạy theo một trong hai cách.

Cách thứ nhất: bạn gõ một prompt cho Claude, model AI trả lại một thứ gì đó. Theo AyzZ (video đăng ngày 31/10/2026), kết quả kiểu này lúc nào cũng trông "vibe coded", vì không có creative direction nào cả, chỉ là vài câu prompt. Trên màn hình lúc anh nói là một ô chat chỉ có dòng chữ "make me a l..." đang gõ dở, với nhãn Opus 5.5 bên dưới.

Cách thứ hai: người dạy bạn những workflow này thường có sẵn một thư viện template riêng gồm nhiều component khác nhau. Bạn mua code của component hay của cả website đó, dán vào Claude, và Claude build lại đúng website ấy cho bạn. Theo AyzZ (video đăng ngày 31/10/2026), như vậy về cơ bản bạn đang tạo ra một bản sao của cùng một website, chỉ khác phần thông tin.

AyzZ giới thiệu mình là một UI/UX designer với gần 10 năm kinh nghiệm trong ngành, đang điều hành creative agency riêng (theo lời anh trong video đăng ngày 31/10/2026). Anh nói thẳng: không cách nào trong hai cách trên là cách tốt nhất để dùng cho một khách hàng thật, có một doanh nghiệp nghiêm túc (ý kiến của anh, video đăng ngày 31/10/2026).

Lý do anh đưa ra (video đăng ngày 31/10/2026): một thương hiệu nghiêm túc không muốn trông như vibe-coded, và chắc chắn không muốn trông như bản sao của một website khác. Vì nếu như vậy, khách hàng sẽ không tin thương hiệu đó.

2. Workflow của agency: sáng tạo trong Figma, Claude lo phần development

Vậy workflow nào để tận dụng AI mà không làm giảm phần sáng tạo trong quy trình? Câu trả lời của AyzZ (video đăng ngày 31/10/2026): bạn design website trong Figma, để giữ nguyên quy trình sáng tạo của mình và đưa sự sáng tạo của chính bạn vào bước design.

Sau đó bạn kết nối bản design với Claude để Claude animate và build nó. Theo AyzZ (video đăng ngày 31/10/2026), mọi quy trình sáng tạo vẫn giữ nguyên, còn phần development và backend do Claude làm.

Đó là nội dung của video: anh lấy một bản design Figma, animate và build nó bằng Claude, và kể cả trong lúc build và animate, mọi quyết định sáng tạo vẫn nằm trong tay anh và nhóm. Anh nói sẽ chia sẻ mọi kỹ thuật mà agency của anh đang dùng để build những website có animation kiểu này (video đăng ngày 31/10/2026).

3. Bản design landing page cho một agency quảng cáo

Bước đầu tiên là design mọi thứ trong Figma. AyzZ có sẵn một landing page cho một agency quảng cáo (ads agency), và anh cho xem qua bản design trước khi bắt đầu (video đăng ngày 31/10/2026).

Đầu trang là hero section: một bức chân dung chính ở giữa, headline, nút call to action, và xung quanh là một số mẫu quảng cáo mà agency làm cho khách hàng. Trên bản design, headline là "Turn ads into paying customers." và bức chân dung là một người quấn kín bằng băng dính vàng in chữ "ADVERTISEMENT" (bản design trong video đăng ngày 31/10/2026).

Tiếp theo là phần social proof, nơi agency trưng kết quả của mình: tỉ lệ sign up trung bình, search impression và những con số tương tự. Sau đó là phần problem statement chính cho loại doanh nghiệp mà trang này nhắm tới, để nói trúng đúng vấn đề mà doanh nghiệp đó đang gặp. Trên Figma, section này có tiêu đề "Stand out from the noise..." (bản design trong video đăng ngày 31/10/2026).

Sau đó là một số case study kèm kết quả. Tiếp theo là quy trình làm việc của agency đó, về cơ bản là audit, build, plan và get results: cả quy trình mà agency đó có để cung cấp dịch vụ quảng cáo (video đăng ngày 31/10/2026). Cuối cùng là testimonials và footer.

Bản design đã có trong Figma, và AyzZ chuyển sang bước kế tiếp (video đăng ngày 31/10/2026).

4. Kết nối Figma với Claude qua Figma MCP và tạo environment local

Bước tiếp theo là dùng Claude cho phần development. Để làm vậy, cần kết nối Figma MCP với Claude. AyzZ dùng Opus 5.5 và nói anh nghĩ đó là model tốt nhất cho motion design và cho việc tạo các animation trong lúc develop (ý kiến của anh, video đăng ngày 31/10/2026).

Theo AyzZ (video đăng ngày 31/10/2026), có hai hướng để đưa bản design cho Claude:

• Export từng asset một, dạng PNG, SVG và mọi định dạng khác, cùng cả landing page, rồi đưa hết các asset đó cho Claude (theo video đăng ngày 31/10/2026).
• Kết nối thẳng qua Figma MCP. Đây là cách anh chọn trong video đăng ngày 31/10/2026.

Anh mở app Claude, vào phần Claude Code, rồi vào Settings, chọn Connectors và tìm "figma". Anh đã kết nối sẵn từ trước. Nếu chưa biết cách, theo hướng dẫn của anh (video đăng ngày 31/10/2026), bạn chỉ cần tìm Figma ở đây, bấm nút Connect, nó sẽ đăng nhập vào tài khoản Figma của bạn, và thế là Claude được kết nối với Figma.

Theo trang hướng dẫn của Figma (đọc ngày 31/10/2026), Figma MCP server đưa Figma vào workflow AI: nó cho agent design context cần thiết để sinh code từ file Figma, và việc lấy design context từ file dựa trên link.

Việc tiếp theo: tạo một chat mới, rồi thêm một environment mới. AyzZ chọn loại Local và đặt tên "Ads". Theo anh (video đăng ngày 31/10/2026), environment mới này là nơi mọi code của website cùng mọi asset sẽ được lưu trên máy của bạn.

Ở mục chọn folder, anh tạo một folder mới tên "Ads", chọn folder đó, tạo environment và bấm trust workspace (demo trong video đăng ngày 31/10/2026). Environment giờ đã nối với folder của anh.

Vì sao điều này quan trọng? Theo AyzZ (video đăng ngày 31/10/2026), mọi code mà Claude sinh ra cho bản design sẽ được lưu trong đúng folder đó, nên bạn luôn lấy được code từ đấy.

5. Dán link Figma và viết phần prompt cho development

Tiếp theo, AyzZ quay lại bản design trong Figma, bấm nút Share, copy link của file Figma rồi dán vào Claude (demo trong video đăng ngày 31/10/2026). Giờ là lúc viết một prompt đầy đủ cho website.

Theo AyzZ (video đăng ngày 31/10/2026), prompt nên đi theo thứ tự này: đầu tiên là phần cho development, nói rõ bạn muốn website được làm bằng ngôn ngữ nào, dùng thư viện nào, v.v. Sau đó là phần giải thích mọi animation bạn muốn có. Khi Claude trả về kết quả, bạn sẽ chỉnh tiếp dựa trên kết quả đó.

Anh đi qua phần viết prompt để người xem hiểu cách anh ra prompt. Theo anh (video đăng ngày 31/10/2026), bạn không cần prompt engineering đặc biệt gì cả. Bạn chỉ cần nói chuyện với nó và giải thích bạn muốn nó làm gì.

Anh bật microphone để đọc prompt, chọn model Opus 5.5, và ở mục effort chọn Extra (demo trong video đăng ngày 31/10/2026). Phần đầu prompt anh nói ra: anh đã đưa một file Figma, trong đó có một folder tên "Ads", trong folder là bản design hoàn chỉnh của một landing page. Anh muốn Claude build toàn website này và animate nó luôn. Anh sẽ giải thích mọi animation ở bên dưới, nhưng muốn website được build bằng Next.js, hoặc ngôn ngữ nào tốt nhất cho website có animation.

Một đoạn của prompt hiện trên màn hình trong video đăng ngày 31/10/2026:

I've given you a Figma file. In it you will find a folder named "Ads". In that folder you will find the complete design of a landing page. I want you to build this whole website and animate it as well. I will explain all the animations below, but I want you to build the whole website in Next.js, or whatever the best language for animated websites is.

Get all the libraries you need for the animations and for making them smooth. For smooth scroll, use Lenis, GSAP or Three.js, whatever you want to use. Get all the libraries and use all of this.

Anh muốn Claude lấy mọi thư viện cần cho animation, hay để làm animation mượt. Với smooth scroll, anh muốn dùng Lenis, GSAP hoặc Three.js, cái nào Claude muốn dùng thì dùng, lấy hết các thư viện và dùng hết (theo prompt anh đọc trong video đăng ngày 31/10/2026). Theo AyzZ, đây mới chỉ là phần prompt chung.

Tiếp theo là phần animation. Anh viết tiêu đề "animation concept" và nói mọi animation sẽ được giải thích từng cái một ở bên dưới. Anh cũng mách một mẹo trên Windows (video đăng ngày 31/10/2026): bấm Windows + H để bật tính năng nhập bằng giọng nói và đọc prompt.

6. Mô tả animation của hero section

Với phần animation, theo AyzZ (video đăng ngày 31/10/2026), ta đi lần lượt từng cái: nói cho Claude animation của từng element một, bạn muốn điều gì xảy ra, và Claude sẽ implement. Anh mở file Figma ngay bên cạnh để vừa nhìn vừa nói, và bắt đầu từ đầu trang.

Với hero section, đây là những gì anh nói trong prompt (video đăng ngày 31/10/2026):

• Khi website load, header đi từ trên xuống, và các nút scale lên (theo prompt trong video đăng ngày 31/10/2026).
• Với chữ, thêm text animation kiểu Apple: chữ đi lên từ dưới, từ opacity thấp lên opacity cao, mỗi lần một từ, từng từ một (theo prompt trong video đăng ngày 31/10/2026). Anh muốn áp đúng kiểu text animation Apple đó.
• Bức chân dung scale lên từ 0% tới 100%, đúng kích thước đang có trên design (theo prompt trong video đăng ngày 31/10/2026).
• Các card ở nền cũng có animation scale lên, và chạy thành một infinite scroll ngang theo đúng đường path có trên design: trên Figma có một path cho các card, và anh muốn các card đi theo đúng path đó (theo prompt trong video đăng ngày 31/10/2026).
• Khi các card đi vào phía sau bức chân dung thì nhỏ dần, khi đi ra khỏi bức chân dung thì to dần lên (theo prompt trong video đăng ngày 31/10/2026).

Thế là xong animation của hero section, và anh chuyển sang section thứ hai.

7. Section hai và ba: chữ chạy ngang, card xoay 3D, card mở thành section

Kéo xuống section thứ hai, có một lớp chữ (text layer). AyzZ muốn lớp chữ này thành một infinite scroll ngang: nó cứ chạy mãi, và chạy cả khi ta cuộn chuột (theo prompt trong video đăng ngày 31/10/2026).

Ngoài ra, bên cạnh có các card đánh số 1, 2, 3, 4, 5. Anh muốn lấy các card này đặt hết vào giữa section hai, và cho chúng xoay vòng tròn theo kiểu 3D: tất cả cùng xoay quanh nhau thành một vòng tròn trọn vẹn trong lúc ta cuộn, đi từ card một sang card hai, sang card ba, sang card bốn (theo prompt trong video đăng ngày 31/10/2026).

Một điểm chính khác cần nói: bức chân dung dùng ở hero section, khi ta cuộn xuống, sẽ đi xuống section thứ hai. Đúng bức chân dung người quấn băng dính đó sẽ đi xuống, đi vào trong card thứ nhất, card thứ nhất hình thành, rồi mọi card khác hiện ra (theo prompt trong video đăng ngày 31/10/2026).

Cuộn tiếp tới card thứ tư: khi card thứ tư ở trước mặt, nó sẽ mở rộng ra và tạo thành chính section thứ ba trên design (theo prompt trong video đăng ngày 31/10/2026).

AyzZ dừng lại để giải thích: anh đang tả mọi animation theo từng section từ đầu tới cuối, và Claude sẽ mắc lỗi ở những animation đó. Nên ở cuối, anh sẽ chỉ cách chỉnh lại các animation, cách đưa reference, và làm gì để Claude làm đúng animation của bạn (video đăng ngày 31/10/2026).

Trở lại card thứ tư: trong card có logo của thương hiệu. Logo đó đứng yên, còn mọi chữ khác trong card thứ tư sẽ đi xuống hoặc đi lên. Card mở rộng ra thành section thứ ba, và sau đó mọi text animation được áp vào chữ "Stand out from the noise" cùng mọi animation khác có trong section đó (theo prompt trong video đăng ngày 31/10/2026).

8. Case studies: horizontal scroll, parallax và đi vào logo phát sáng

Cuộn tiếp là section case studies, nơi agency trưng các dự án: một cái là Roberto AI (trên design ghi AI SaaS), rồi cái thứ hai, thứ ba, thứ tư. Tới đây, theo prompt của AyzZ (video đăng ngày 31/10/2026), section sẽ thành một horizontal scroll.

Để Claude biết horizontal scroll này chạy thế nào, anh đã dán sẵn trong Figma một frame cạnh đó, tên "Horizontal Scroll". Ba card sẽ nằm trong đó, ta cuộn ngang và đi tới cuối (theo prompt trong video đăng ngày 31/10/2026).

Sau khi qua hết các case study, ta đi tới chỗ có nhiều bức ảnh trôi lơ lửng. Anh muốn thêm một chút parallax cho những bức ảnh đó, để chúng không đi cùng tốc độ khi cuộn (theo prompt trong video đăng ngày 31/10/2026).

Tất cả đều là một horizontal scroll, chạy tới khi gặp bức ảnh 3D model của logo. Cuộn thêm nữa thì ta đi vào bên trong logo đó, một logo đang phát sáng trong bức ảnh 3D (theo prompt trong video đăng ngày 31/10/2026).

Sau khi đi vào bên trong, section tiếp theo hiện ra: process section với bốn bước, tiêu đề "Four steps, then steady growth". Theo prompt của anh (video đăng ngày 31/10/2026), section này xuất hiện sau khi ta đi vào bên trong logo.

9. Process section: trim path animation, số và ribbon

Ở section này, AyzZ muốn Claude dùng lại đúng các text animation đã có. Ngoài ra anh muốn tạo một trim path animation: trên design có một path hoàn chỉnh dạng SVG, một bản màu xám và một bản màu vàng. Anh muốn trim path animation chạy trên bản màu vàng, để trong lúc ta cuộn, path vàng chạy và lấp dần cả path (theo prompt trong video đăng ngày 31/10/2026).

Áp text animation cho mọi thứ, cả các con số. Ngay khi path chạy tới một con số, con số đó scale lên: trước đó nó ở scale 0, rồi lớn lên tới đúng kích thước của các con số trên design (theo prompt trong video đăng ngày 31/10/2026).

Thêm animation cho các ribbon hai bên nữa: cho chúng đi từ trái sang phải hoặc từ phải sang trái, và scale lên một chút (theo prompt trong video đăng ngày 31/10/2026).

AyzZ dừng lại để lưu ý cách anh đang làm (video đăng ngày 31/10/2026): anh giải thích mọi animation và transition y như khi giải thích cho một designer, đơn giản, không làm phức tạp, không cần prompt engineering hay JSON prompt gì cả. Cứ nói như đang nói với một người thật.

Theo anh (video đăng ngày 31/10/2026), bạn càng giải thích kỹ từng section, từng animation, thì kết quả ở lần thử đầu tiên càng tốt. Nhưng tất nhiên, sau đó ta vẫn có thể chỉnh đi chỉnh lại nhiều lần.

10. Testimonial folder hai trạng thái, footer và loading screen

Section tiếp theo là testimonials. Theo prompt của AyzZ (video đăng ngày 31/10/2026), headline dùng cùng text animation, và với những cái folder anh đã tạo, anh muốn thêm một hover animation.

Trên Figma có hai phiên bản của folder. AyzZ quay sang nói với người xem (không phải trong prompt): anh tạo hai phiên bản này cho Claude. Theo anh (video đăng ngày 31/10/2026), nếu chỉ đưa một phiên bản, Claude sẽ tự làm hỏng phiên bản thứ hai. Có cả hai, Claude hiểu: trạng thái ban đầu là cái này, trạng thái thứ hai là cái kia. Animation đi từ một trạng thái ban đầu tới một trạng thái sau.

Phiên bản đầu, folder đang mở, là khi ta hover lên một folder. Những folder khác, khi con trỏ không nằm trên chúng, là folder đóng. Anh muốn áp hover animation này cho cả sáu folder (theo prompt trong video đăng ngày 31/10/2026).

Tiếp theo là footer: áp cùng text animation, fade in animation và mọi thứ tương tự cho chữ. Với các dải băng dính ở footer, anh muốn chúng đi từ dưới lên và scale lên một chút, tạo một kiểu hiệu ứng parallax ở đó (theo prompt trong video đăng ngày 31/10/2026).

Tới đây anh đã đưa chi tiết từng section, mọi thứ về animation. Rồi anh quay lại loading screen. Theo anh (video đăng ngày 31/10/2026), prompt cho loading screen có thể đưa ở đầu hoặc ở cuối đều được.

Website có một loader, và theo AyzZ nó rất đơn giản. Khi website bắt đầu, anh muốn chữ hiện từng ký tự một, đi từ dưới lên, và logo được tô đầy màu vàng (theo prompt trong video đăng ngày 31/10/2026).

Trên design chưa có phần tô đầy đó, nên anh đưa cho Claude một reference đầy đủ: trong Figma có hai logo, một màu vàng và một màu xám nằm ở nền. Trong lúc load, anh muốn cả logo được tô dần bằng đúng màu vàng đó, áp text animation từng ký tự đi từ dưới lên cho loading animation, rồi trang loading đi lên trên để lộ ra hero section (theo prompt trong video đăng ngày 31/10/2026).

Câu cuối của prompt: build cả website với mọi animation anh đã đưa, build cả landing page. Thế là có prompt cuối cùng, một prompt cho animation và cho mọi thứ (video đăng ngày 31/10/2026).

11. Gửi prompt cho Claude Code

AyzZ gửi prompt và nói sẽ xem kết quả rồi mới chỉnh. Theo lời anh trong video đăng ngày 31/10/2026, trước hết Claude sẽ khám phá file Figma và folder "Ads", vào folder đó, lấy mọi bản design ra và export mọi asset.

Sau đó nó dùng đúng các công nghệ đã chọn, Next.js với GSAP và Lenis. Rồi nó build loader, hero và các card, build từng section một, rồi thêm mọi scroll animation (theo lời anh trong video đăng ngày 31/10/2026). Anh cũng nói ở cuối sẽ chỉ cách làm cho website mobile responsive.

Danh sách việc Claude lập ra, trên màn hình trong video đăng ngày 31/10/2026: (1) "Explore Figma file and the Ads folder", (2) "Extract design specs and export assets", (3) "Scaffold Next.js app with GSAP, Lenis", (4) "Build loader, hero, cards sections", (5) "Build stand-out, case studies, process sections", (6) "Build testimonials and footer", (7) "Wire scroll animations and verify in browser".

Anh để Claude chạy và quay lại một lúc sau, khi nó làm xong (video đăng ngày 31/10/2026).

12. Kết quả đầu tiên và những lỗi người designer phải tự nhận ra

Đây là kết quả Claude sinh ra từ prompt đầu tiên, và AyzZ cho xem cả trang trước (demo trong video đăng ngày 31/10/2026). Ở animation đầu có một chỗ glitch. Có chỗ ổn, nhưng có chỗ các thứ đè lên nhau một chút.

Theo AyzZ (video đăng ngày 31/10/2026), những lỗi nhỏ như vậy là thứ người designer phải tự nhận ra, vì ta không cần sinh ra mọi thứ chỉ từ prompt đầu tiên rồi coi như xong.

Kéo xuống để xem các vấn đề chính (demo trong video đăng ngày 31/10/2026):

• Phần bị cắt (cutout) của bức chân dung làm trang có cảm giác rất kém chất lượng, không ra một thứ có thương hiệu, trông không đẹp (nhận xét của AyzZ, demo trong video đăng ngày 31/10/2026).
• Một animation chưa đủ mượt; một chỗ khác thì ổn nhưng bị dừng lại giữa chừng; một chỗ nữa cũng ổn (nhận xét của AyzZ, demo trong video đăng ngày 31/10/2026).
• Transition anh muốn đã có. Đi xuống là horizontal scroll, parallax, rồi đi vào logo; nhưng glow còn có thể tốt hơn, và ở đó còn glitch (nhận xét của AyzZ, demo trong video đăng ngày 31/10/2026).
• Các text animation ở phần sau trông tốt. Vấn đề duy nhất ở testimonials là dấu cộng xoay thành dấu nhân theo một cách kỳ lạ. Footer thì ổn (nhận xét của AyzZ, demo trong video đăng ngày 31/10/2026).

Nhìn chung, theo AyzZ (demo trong video đăng ngày 31/10/2026), kết quả Claude sinh ra nhìn chung rất tuyệt: chỉ từ một prompt, khi đã giải thích từng element, nó sinh ra một website rất tốt. Nhưng giờ cần sửa mọi chỗ cần sửa.

Trên màn hình, bản tóm tắt của Claude còn liệt kê những chỗ nó đã phải tự quyết (demo trong video đăng ngày 31/10/2026): path của các card trong Figma nằm cao hơn các card khoảng 500px nên nó dời xuống; frame "Horizontal Scroll" cao hơn màn hình nên camera lùi ra để thấy cả chiếc cúp trước khi đi vào logo; Figma export một số poster xếp chồng thành ảnh trống nên nó dựng lại từ các layer ảnh gốc; ảnh ribbon ở process section có một khung sáng mờ quanh viền nên nó dùng bản trong suốt của cùng artwork lấy từ loader. Mục "Not done yet" ghi: trên điện thoại, layout chỉ thu nhỏ lại và chữ quá bé, cần một mobile layout đúng nghĩa; mọi link và nút chưa trỏ đi đâu cả.

Cuối bản tóm tắt, Claude ghi landing page đã được build bằng Next.js với GSAP và Lenis, production build, type check và lint đều pass, mới chỉ test ở kích thước desktop, rồi hỏi "Should I build a proper mobile layout next?" với hai nút "Yes, do mobile" và "Not now" (demo trong video đăng ngày 31/10/2026).

Sau khi làm xong, Claude còn hỏi anh có muốn tạo bản mobile, bản cho điện thoại không: có nên tự làm một mobile layout đúng nghĩa không. AyzZ nói nó hỏi vậy vì anh đã tạo nhiều bản mobile, nên nó biết sau bước này anh cần một bản mobile (video đăng ngày 31/10/2026). Anh chọn "chưa phải lúc này", vì trước hết cần sửa mọi lỗi đang có.

13. Sửa loading animation và hero section bằng screenshot

AyzZ đi qua từng lỗi một. Đầu tiên là loading animation: nó bị glitch ở một chỗ rồi mới tô đầy, và anh không muốn như vậy. Cách anh làm (demo trong video đăng ngày 31/10/2026): chụp một screenshot chỗ đó, đưa cho Claude, và giải thích điều cần sửa.

Những gì anh nói với Claude về loading animation (theo prompt sửa lỗi trong video đăng ngày 31/10/2026):

• Bên trong logo, phần đang tô là một hình tròn tô vào logo, không phải một đường thẳng (theo prompt trong video đăng ngày 31/10/2026).
• Loading animation đang glitch: một nửa tự động được tô, nửa còn lại mới chạy animation. Anh muốn sửa, để việc tô đi từ 0% tới 100% bằng animation (theo prompt trong video đăng ngày 31/10/2026).
• Khi trang loading đi lên, nó đang đi lên theo dạng hình vuông; anh muốn nó đi lên theo dạng hình tròn (theo prompt trong video đăng ngày 31/10/2026).

Để cho Claude một ví dụ, anh vẽ ngay trong Figma: một hình tròn, kéo thành ellipse như thế này, để màu xám, rồi tô đầy, chụp screenshot và đưa cho Claude (demo trong video đăng ngày 31/10/2026). Anh nói thêm: bạn cũng có thể tìm vài loading animation trên Awwwards và đưa cho Claude, và anh sẽ làm như vậy ngay trong video này để chỉ cách.

Câu anh nói kèm screenshot (theo prompt trong video đăng ngày 31/10/2026): anh đã đưa thêm một ví dụ về transition từ loading animation sang hero section; nó sẽ không đi lên theo đường thẳng mà theo dạng tròn, như thể loading screen là một hình tròn đang đi lên.

Tiếp theo là hero section, sửa từng lỗi một. Theo AyzZ (demo trong video đăng ngày 31/10/2026), text animation ổn, một chỗ khác thì đang hỏng. Với các card đi phía sau bức chân dung, anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026):

• Cho các card chạy từ trái sang phải thay vì từ phải sang trái (theo prompt trong video đăng ngày 31/10/2026).
• Đừng xoay nhiều tới mức các card đè lên nhau: ở phía bên phải các card đang đè lên nhau và chồng lên nhau (theo prompt trong video đăng ngày 31/10/2026).
• Giữ khoảng cách giữa các card không đổi trong lúc chúng chạy, để trông không kỳ lạ (theo prompt trong video đăng ngày 31/10/2026).

AyzZ lưu ý (video đăng ngày 31/10/2026): anh đang giải thích theo kiểu bình thường, bằng ngôn ngữ con người, không nói bằng thuật ngữ design gì đặc biệt. Đúng là anh có dùng vài thuật ngữ như spacing, những thứ bạn đã biết, nhưng không cần đưa cho nó một JSON prompt cầu kỳ hay gì tương tự.

Lỗi tiếp theo nằm ở chỗ chuyển xuống: theo AyzZ (demo trong video đăng ngày 31/10/2026), vấn đề chính là khi bức chân dung đi xuống thì phần bị cắt hiện ra. Anh muốn bức chân dung đứng yên ở đáy màn hình cho tới khi card hình thành; khi card hình thành rồi thì card mới đi lên.

Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): từ hero section sang section thứ hai, khi đi xuống, bức chân dung người quấn băng dính lộ ra phần bị cắt ở đáy của ảnh PNG, và anh không muốn thấy điều đó. Để sửa, anh muốn bức chân dung luôn nằm ở đáy màn hình trong lúc ta cuộn xuống tới section thứ hai, tới khi các card hình thành và nó đi vào card màu vàng. Tới lúc đó nó vẫn ở đáy màn hình, rồi mới đi vào giữa và bắt đầu xoay.

14. Video reference cho những animation khó tả bằng lời

Ở section hai, transition chưa thật sự ổn và anh muốn sửa, đồng thời muốn dòng chữ cứ chạy trong lúc cuộn, không dừng lại. Lần này AyzZ dùng một video reference (demo trong video đăng ngày 31/10/2026).

Theo AyzZ (video đăng ngày 31/10/2026): nếu bạn tạo được một video về animation của mình, Claude sẽ làm đúng nó. Cũng như khi bạn tạo được design của website thì Claude làm ra design rất giống, khi bạn đưa được animation reference thì nó làm ra animation đó.

Theo anh (video đăng ngày 31/10/2026), bạn có thể tự tạo animation của mình trong Figma prototype hoặc Figma Motion, export ra video và đưa cho Claude, Claude sẽ tạo ra nó. Bạn cũng có thể tìm reference trên mạng, qua Awwwards, Maxibestof và những nguồn cảm hứng tương tự: tìm vài animation reference, screen record lại rồi đưa cho Claude, hoặc đưa link website đó kèm lời giải thích, kiểu "ở section này, có lẽ thêm animation này vào".

Với section này anh có sẵn cảm hứng: một chuyển động kiểu này, và anh dán file vào Claude, tên file là "cards" (demo trong video đăng ngày 31/10/2026). Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): với animation card xoay ở section hai, dùng Three.js; anh đã dán một file video tên cards, trong video đó có cả transition xoay vòng, hãy làm theo và tạo đúng animation đó cho các card.

Cũng trong prompt đó (video đăng ngày 31/10/2026): trong lúc cuộn, không để chữ phía sau các card bị cắt, và sửa để chữ luôn chạy khi cuộn, không dừng; lúc này nó đang dừng.

Anh xem tiếp kết quả: chỗ này ổn, chỗ kia ổn, nhưng text animation chưa được áp lên các card. Nên anh thêm (theo prompt trong video đăng ngày 31/10/2026): trên mọi card ở section hai, áp cùng text animation đang dùng cho mọi chữ khác.

Sang section tiếp theo, anh thấy ổn, rất tốt (demo trong video đăng ngày 31/10/2026). Ở đây, thay vì một bức ảnh, anh muốn đặt một video. Anh đã có sẵn video được generate, và theo anh bạn có thể dùng bất kỳ nền tảng video generation nào. Video này sẽ chạy trong lúc cuộn.

Anh dán video vào và nói (theo prompt trong video đăng ngày 31/10/2026): ở section ba, section "Stand out from the noise", thay bức ảnh bằng video anh đã dán, tên "Magnific video"; đặt video đó vào đây, và video sẽ chạy trong lúc cuộn.

Tiếp theo, anh không thích phần parallax này lắm, nên anh cũng có một video cảm hứng cho nó, cho horizontal scroll này (video đăng ngày 31/10/2026). Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): ở section bốn, phần horizontal scroll, anh cũng đã đưa một video horizontal scroll để làm theo, đặc biệt cho hiệu ứng parallax sau khi ba card đã đi qua, khi mọi bức ảnh đi tới trong không gian theo kiểu parallax; hãy làm theo animation parallax trong video anh đã dán, tên "horizontal scroll".

15. Glow tự dựng trong Figma, đi vào giữa logo và hover của folder

Tiếp theo là glow. AyzZ nói anh không thích glow này lắm: nó không trông như một glow, chỉ trông như một gradient (nhận xét của anh, demo trong video đăng ngày 31/10/2026). Anh có thể làm gì? Anh mở Figma và tự tạo một glow.

Đó là một glow tùy chỉnh, ghép từ nhiều file SVG khác nhau, và theo AyzZ (video đăng ngày 31/10/2026) glow này trông thật. Anh copy nó, dán vào, chụp một screenshot rồi dán cho Claude.

Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): ở cuối horizontal scroll, anh đã đưa một screenshot của glow bên trong logo, hãy làm lại đúng glow đó. Bạn cũng tìm thấy nó trong file Figma vì anh đã dán vào đó. Đây là một glow tạo từ nhiều file vector khác nhau, và anh đã đưa screenshot của glow đó trong logo 3D mà ta muốn sinh ra; hãy làm lại đúng glow như vậy ở đó.

Lỗi chính tiếp theo: khi đi vào logo, camera không đi vào chính giữa mà lệch sang một bên. Anh nói (theo prompt trong video đăng ngày 31/10/2026): đảm bảo ta đi vào giữa logo, vào trong glow, không phải ở một cạnh nào đó.

Sau khi đi vào glow, mất quá nhiều thời gian để đi xuống, có quá nhiều khoảng trắng. Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): sau khi đi vào glow của element 3D, process section hiện ra hơi muộn, phía trên có quá nhiều khoảng trắng; hãy đảm bảo khi đi vào glow, chỉ sau nửa lần cuộn, hoặc không cần cuộn, process section đã ở đó.

Process section thì ổn. Tiếp theo là testimonials: khi hover lên folder, dấu cộng cùng cái ribbon đi kèm đang bị xoay cả. Anh nói với Claude (theo prompt trong video đăng ngày 31/10/2026): không đổi hay xoay ribbon, chỉ xoay dấu cộng thành dấu nhân, thế thôi, đừng xoay cả ribbon hay gì tương tự.

Tiếp theo, chỗ này trông ổn. Theo AyzZ (video đăng ngày 31/10/2026), đây là lúc kỹ năng Figma Motion, kỹ năng Figma prototype và những kỹ năng tương tự của bạn trở nên có ích khi chỉnh sửa, để Claude hiểu rõ hơn nhiều bạn muốn tạo animation nào. Theo anh, nếu bạn đưa được cho Claude video reference, đó là điều tốt nhất bạn có thể làm (lời khuyên trong video đăng ngày 31/10/2026).

Về video reference, theo AyzZ (video đăng ngày 31/10/2026), bạn có thể vào các trang cảm hứng như Awwwards, Maxibestof và những trang tương tự, tìm cảm hứng animation ở đó, screen record video và đưa cho Claude.

16. Kết quả sau khi sửa và đưa website lên mạng

Sau khi chạy hết các prompt và mọi thay đổi đã đưa, AyzZ xem lại kết quả (demo trong video đăng ngày 31/10/2026). Chỗ này ổn, chỗ kia cũng ổn. Đi xuống, giờ không còn lộ phần bị cắt, rồi card hiện lên và cả animation chạy.

Đi xuống tiếp là video chạy theo cuộn, rồi tới các card, rồi parallax (demo trong video đăng ngày 31/10/2026). Glow giờ trông khá hơn nhiều và còn chuyển động nhẹ. Đi vào trong là process section với cả animation, rồi tới testimonials.

Testimonials vẫn chưa được sửa nhiều (demo trong video đăng ngày 31/10/2026). AyzZ nói có lẽ anh sẽ lại phải tự design nó, hoặc animate nó, hoặc đưa nó một video, theo cách đó thì nó sẽ sửa được, và chỗ kia cũng vậy.

Với các hover animation, chẳng hạn hover animation cho chữ và những thứ tương tự, theo AyzZ (video đăng ngày 31/10/2026) bạn luôn có thể đưa reference tùy theo từng animation.

Theo AyzZ (video đăng ngày 31/10/2026), đó là cả quy trình: design một website rồi develop nó bằng Claude. Bạn chỉ cần cho nó quyền truy cập mọi thư viện của bạn, đưa font, màu sắc và mọi thứ của bạn theo cách này. Sau tất cả những thay đổi đó, mọi quyết định sáng tạo vẫn nằm trong tay bạn.

Anh cũng đã đưa thêm một số bức ảnh để đặt vào hero section, và đây là kết quả cuối cùng với mọi animation và bản build (demo trong video đăng ngày 31/10/2026).

Sau khi website đã được develop và build xong, việc còn lại là kết nối nó với Vercel và GitHub để đưa lên mạng và gắn vào một domain (theo AyzZ, video đăng ngày 31/10/2026).

17. Recap các bước

AyzZ tóm lại mọi bước cần làm (video đăng ngày 31/10/2026).

1. Design trong Figma. Theo AyzZ (video đăng ngày 31/10/2026), quy trình design giữ nguyên: mọi phần sáng tạo, mood boarding, sitemap.
2. Kết nối Figma với Claude qua MCP (theo video đăng ngày 31/10/2026).
3. Đưa link file Figma, rồi giải thích mọi animation, ngôn ngữ cần dùng, thư viện cần dùng và những thứ tương tự để develop cả website (theo video đăng ngày 31/10/2026).
4. Để nó build. Khi đã develop xong, bạn xem animation nào nó làm chưa tốt (theo video đăng ngày 31/10/2026).
5. Đưa reference. Theo AyzZ (video đăng ngày 31/10/2026), bạn luôn có thể đưa reference ngay từ đầu, nhưng lúc đầu bạn chưa biết nó sẽ làm đúng những gì khi không có reference. Nên cứ đưa prompt cho nó develop trước; sau đó bạn biết chỗ nào nó chưa làm đúng, lỗi nằm ở đâu, rồi mới đưa reference. Reference có thể tạo trong Figma hoặc trong Figma Motion.
6. Prompt chi tiết. Theo AyzZ (video đăng ngày 31/10/2026), bạn phải giải thích từng element thật chi tiết: mọi element chữ, mọi element nút, bất kỳ animation nào bạn muốn tạo, càng chi tiết càng tốt. Nếu nói được bạn muốn spacing đổi bao nhiêu khi đi từ chỗ này sang chỗ kia, muốn scale đổi bao nhiêu, ví dụ nút đi từ scale 0% lên 100%, thì hãy đưa prompt chi tiết nhất có thể.
7. Làm cho mobile responsive. Theo AyzZ (video đăng ngày 31/10/2026), cách làm cũng vậy: bạn chỉ cần bảo nó làm mobile responsive. Nó sẽ mắc vài lỗi trong phần mobile responsive đó; bạn vào Figma, xem section nào nó làm sai, design lại section đó một chút, có khi chỉ là một wireframe, đưa cho Claude và nói "đây là cách bạn nên sắp xếp nội dung này, đây là cách sắp xếp section này". Nó sẽ làm cho trang responsive trên mobile và trên mọi màn hình khác.
8. Đưa lên mạng qua Vercel và GitHub (theo video đăng ngày 31/10/2026).