# Vibe code một app hoạt hình với Claude Opus 5.5

[Jason Lee](https://homus.dev/speakers/jason-lee) · [Jason Lee](https://homus.dev/orgs/jason-lee)

> Dựng lại app uống nước kiểu Waterllama với Opus 5.5: Mobbin MCP, screen recording làm tham chiếu, video Higgsfield cho nhân vật, màn hình nghiêng máy bằng Expo.

Topics: Workflow, Coding Agents, AI UX

Canonical: https://homus.dev/talks/watch-me-vibe-code-an-animated-app-with-claude-opus-5-5-its-super-smooth

## 1. Một app hoạt hình mà mọi chuyển động đều là code

Jason Lee mở đầu bằng thành phẩm: một mobile app hoạt hình rất đẹp mà anh làm với Opus 5.5 (video đăng ngày 14/10/2026). Trong app có cả loạt nhân vật do anh tạo, và cũng có những phần tử tương tác, phản hồi theo con trỏ chuột. Anh chọn được loại đồ uống và kéo thanh trượt qua lại theo thời gian thực. Chưa hết, anh còn làm được một màn hình mà nhân vật trôi lềnh bềnh, và khi anh nghiêng điện thoại, nhân vật đi theo hướng nghiêng.

![Năm màn hình của app Brownie: Welcome, First sip, Reminders, Your goal và một màn hình chọn đồ uống](https://homus.dev/photos/Rk6t9Uq1y9M-0003.jpg)

Năm màn hình của app thành phẩm xếp cạnh nhau: Welcome ("Tilt to float"), First sip ("Tap water to fill him up"), Reminders ("Leaps out of the bushes"), Your goal ("Swims through ice cubes") và một màn hình chọn đồ uống, theo phần mở đầu của video đăng ngày 14/10/2026.

Theo Jason (video đăng ngày 14/10/2026), từng chút animation trong đó đều thuần là code, và tất cả do Opus 5.5 viết. Trong video, anh hứa sẽ đi từng bước một để chỉ cách anh tạo ra tất cả những animation này, cùng với đúng những prompt anh đã dùng để chúng mượt như vậy.

Lý do anh nhấn mạnh prompt: nếu bạn chỉ prompt AI một cách ngẫu nhiên như phần lớn mọi người, nhiều khả năng bạn sẽ nhận về những animation cứng đơ, trông như "AI slop" (theo Jason, video đăng ngày 14/10/2026). Vì thế anh muốn làm tutorial này thật dễ theo. Và anh bắt đầu.

## 2. Ý tưởng gốc: Waterllama, một habit tracker chỉ cho việc uống nước

App mà Jason dựng lại hôm nay là một app tên Waterllama; đó là nơi anh lấy ý tưởng. Anh nói app này đang kiếm khoảng 100k mỗi tháng. Trên màn hình, trang phân tích của Sensor Tower cho "Water tracker Waterllama" ghi Revenue $100K và Downloads 100K, cả hai là "Worldwide, Last Month", cùng hạng #100 ở mục Health & Fitness tại Mỹ (số liệu như hiện trong video đăng ngày 14/10/2026).

![Trang Sensor Tower của Water tracker Waterllama với Downloads 100K và Revenue $100K](https://homus.dev/photos/Rk6t9Uq1y9M-0053.jpg)

Trang Sensor Tower của Waterllama trong video đăng ngày 14/10/2026: app miễn phí ở mục Health & Fitness và Food & Drink, Downloads 100K và Revenue $100K trong tháng trước, hạng #100 về lượt tải ở Health & Fitness tại Mỹ. Các chỉ số còn lại phải đăng nhập mới xem.

Việc app này làm rất đơn giản: giúp người ta theo dõi lượng nước mình uống. Jason thấy 100k là con số khá điên rồ cho một thứ đơn giản như vậy (theo lời anh trong video đăng ngày 14/10/2026).

Anh chỉ ra rằng nếu nghĩ kỹ, đây thực chất là một habit tracker. Nhưng thay vì làm một app habit tracker chung chung, họ chọn đúng một thói quen cụ thể là uống nước. Rồi họ dựng một giao diện vui nhộn quanh thói quen đó, với đủ loại animation rất hay, và theo Jason chính những thứ đó khiến người dùng cứ quay lại mở app (nhận định của anh trong video đăng ngày 14/10/2026).

## 3. Đi một vòng trong app Waterllama

Jason đã cài Waterllama trên điện thoại, và anh đi nhanh một vòng để người xem biết mình đang làm việc với cái gì (theo bản app như hiện trong video đăng ngày 14/10/2026).

Đây là màn hình home, nơi bạn theo dõi lượng nước uống vào. Ở đây bạn đặt được mục tiêu lượng nước mỗi ngày; ví dụ của anh là mỗi ngày muốn uống 71 ounce nước. Khi uống nước, anh bấm vào mục nước và dùng một thanh trượt tương tác để chỉ ra mình vừa uống bao nhiêu. Bấm "add water" là một ít nước được đổ thêm vào con llama (app Waterllama như trong video đăng ngày 14/10/2026).

Còn nếu vừa uống cà phê, anh bấm vào mục cà phê và cũng chọn lượng cà phê đã uống. Theo phần trình bày của Jason (video đăng ngày 14/10/2026), app đã biết trong loại cà phê cụ thể đó có bao nhiêu phần nước, nên nó chỉ cộng phần nước ấy vào chiếc bình chứa. Ngoài ra app còn một loạt animation khác khá hay.

Kế hoạch là dựng lại app này: dùng ý tưởng của nó, nhưng tất nhiên tạo nhân vật của riêng mình bằng Opus 5.5 (kế hoạch của demo trong video đăng ngày 14/10/2026). Và tới đây là sẵn sàng để prompt.

## 4. Vì sao một URL App Store là chưa đủ: Mobbin

Jason đang ở trong Claude với một session mới mở. Theo anh, bước một luôn là đưa cho Claude tham chiếu về thứ nó sắp dựng. Có thể đưa URL trang App Store của app cho Claude, nhưng theo Jason (video đăng ngày 14/10/2026) như vậy không đủ: tất cả những gì ở đó chỉ là ảnh chụp app. Claude sẽ không hiểu được các trang nối với nhau ra sao, app thực sự có bao nhiêu màn hình, hay bấm vào một nút nào đó thì chuyện gì xảy ra.

Vì vậy anh thích vào một website tên mobbin.com. Ở đó có một bộ sưu tập hàng nghìn app (theo lời anh trong video đăng ngày 14/10/2026). Anh chỉ vài app nổi tiếng: Waymo, Google Health, Copilot, có cả Shopify, TripAdvisor, và cũng có một mục cho Waterllama.

Mục Waterllama có 246 màn hình (số hiện trên trang trong video đăng ngày 14/10/2026). Bạn xem được họ làm onboarding thế nào, các trang trông ra sao, paywall trông ra sao. Mọi thứ về cơ bản đều ở đó, và theo Jason đây chính là thứ bạn muốn đưa cho Claude để nó hiểu cách dựng cấu trúc app của bạn dựa trên app gốc.

![Trang Waterllama trên Mobbin với lưới màn hình Track your intake và nhân vật llama, bạch tuộc](https://homus.dev/photos/Rk6t9Uq1y9M-0251.jpg)

Trang Waterllama trên Mobbin trong video đăng ngày 14/10/2026: tab Screens, góc phải ghi "Showing 246 screens", và lưới các màn hình onboarding "Track your intake" với llama, bạch tuộc và các nhân vật khác.

## 5. Mobbin MCP và prompt dựng app Brownie

Điều Jason thích ở Mobbin là họ có một MCP connector cho Claude (tính đến video đăng ngày 14/10/2026). Nhờ vậy bạn không bao giờ phải tự tải từng màn hình về rồi upload lên Claude; Claude truy cập tất cả qua MCP connector.

Giờ anh sẵn sàng prompt. Anh dán prompt vào và giải thích từng phần. Anh muốn dựng một app giống Waterllama, nhưng thay con llama bằng một con capybara, kèm ảnh. Ảnh đó anh tìm được trên Pinterest và sẽ dùng làm mascot, rồi nhờ Opus 5.5 làm nó chuyển động. App được đặt tên là Brownie. Sau đó anh lấy URL của trang Mobbin vừa xem và dán thẳng vào prompt. Anh cũng kiểm tra để chắc là Mobbin đã được kết nối, và connector đang ở trạng thái active (như hiện trong video đăng ngày 14/10/2026).

![Ô prompt trong Claude với ảnh capybara, link Mobbin và các yêu cầu dựng app Brownie](https://homus.dev/photos/Rk6t9Uq1y9M-0349.jpg)

Prompt trong ứng dụng Claude (thư mục Animated Apps, model Opus 5.5, mức High) như hiện trong video đăng ngày 14/10/2026: ảnh capybara đính kèm, câu yêu cầu dựng app giống Waterllama tên Brownie, link trang Mobbin, yêu cầu dựng toàn bộ onboarding và màn hình home, cùng hai dòng về screen recording và Mobbin MCP.

Nội dung prompt trên màn hình:

```
I want to build an app like Waterllama, but instead of a llama I want to use a capybara instead (image attached). Call it Brownie.

https://mobbin.com/apps/waterllama-ios-ba545461-e4a8-4ded-a166-cdd7c7a95be7/e3e26783-3d88-4153-8a02-6e4fa985bdd6/screens

Build the full onboarding pages and the home screen.

Watch my screen recording to understand the flow of pages and how each UI element animates. Create all motion graphics using code.

Mobbin MCP is connected so you can browse through all the pages of the app, but check my screen recording for all animation references.
```

Anh chỉ yêu cầu dựng toàn bộ các trang onboarding và màn hình home. Theo Jason (video đăng ngày 14/10/2026), vì Claude truy cập được trang chứa tất cả màn hình đó, nó sẽ hiểu onboarding trông thế nào và trang home trông thế nào, bởi mọi màn hình ở đó đều đã được gắn nhãn.

## 6. Screen recording làm tham chiếu cho animation

Jason thêm một thứ nữa vào prompt. Anh nói thứ này không bắt buộc, nhưng anh cảm thấy nó sẽ giúp Claude hiểu các animation: anh đã tải app Waterllama về điện thoại và quay màn hình lại toàn bộ. Theo Jason (video đăng ngày 14/10/2026), nhờ vậy Claude sẽ biết các animation thực sự trông ra sao.

Anh quay lại trang Mobbin một chút để giải thích: các màn hình của Waterllama ở đó đều là ảnh, không may là không có bản quay màn hình, và đó chỉ là giới hạn của riêng app này trên Mobbin. Nếu bạn mở một app khác, ví dụ app anh chỉ trên màn hình, thì có cả một số animation đã được quay lại. Theo Jason (video đăng ngày 14/10/2026), chuyện này tuỳ vào thời điểm app được cập nhật trên Mobbin.

Còn nếu app bạn nhắm tới không có animation nào trên đó, cách của anh rất đơn giản: tự quay màn hình toàn bộ app, cứ bấm loanh quanh, bấm hết các nút, rồi lưu file vào một thư mục mà Claude truy cập được (cách làm của anh trong video đăng ngày 14/10/2026).

Hai dòng cuối của prompt là vì thế. Một dòng bảo Claude xem screen recording của anh để hiểu luồng các trang và từng phần tử UI chuyển động ra sao, và tạo toàn bộ motion graphics bằng code. Dòng kia nhấn mạnh rằng Mobbin MCP đã được kết nối và Claude cứ duyệt qua tất cả các trang của app, nhưng mọi tham chiếu về animation thì phải xem trong screen recording. Rồi anh gửi prompt đi và để Claude làm (demo trong video đăng ngày 14/10/2026).

Ba đầu vào Jason đưa cho Claude trong demo (video đăng ngày 14/10/2026): ảnh mascot, trang Mobbin của app gốc kèm MCP connector để hiểu cấu trúc, và screen recording của app gốc làm tham chiếu cho animation.

## 7. Bản thứ nhất: màn hình home và thanh trượt lượng nước

Vài phút sau, Claude xong và đưa ra phiên bản thứ nhất (demo trong video đăng ngày 14/10/2026). Có một mockup iPhone, và đây là trang home. Jason thử xem nó có chạy không: bấm vào mục nước, giả sử đang uống 150, rồi 250. Mực nước di chuyển theo dung tích anh chọn, và anh còn kéo được mực nước lên xuống, nên nó rất có tính tương tác.

Anh chỉ ra cả những bong bóng nhỏ, và thấy chuyển động của nước khá ổn, rất mượt (nhận xét của anh trong demo, video đăng ngày 14/10/2026). Anh chỉ định được mình đang uống bao nhiêu. Bấm "add water", nó thật sự cộng thêm và làm mực nước trong bình dâng lên, điều anh thấy rất hay. Anh đoán mục tiêu ở đây là uống đủ nước để đổ đầy cả bình.

![Mockup Brownie: cốc nước cam với ống hút, 320ml, Counts as 95% hydration](https://homus.dev/photos/Rk6t9Uq1y9M-0723.jpg)

Bản thứ nhất của Brownie trong demo video đăng ngày 14/10/2026: chọn nước ép, một cốc màu cam có ống hút đang ở 320ml, dòng "Counts as 95% hydration" và ba mức nhanh 250ml, 350ml, 500ml.

Anh thử thêm nước ép. Lại kéo được bằng thanh trượt, và mọi thứ đều ổn. Theo Jason (demo trong video đăng ngày 14/10/2026), Claude đã lấy mọi thứ từ app Waterllama và mang sang. Anh nhắc thêm: tất cả những thứ này đều làm bằng code, và đó là lý do nó tương tác được.

Anh thêm cả phần đó, rồi thử vuốt thanh đồ uống. Không được: anh nghĩ bản này còn thiếu chức năng vuốt để hiện thêm đồ uống (demo trong video đăng ngày 14/10/2026). Việc đó chắc chắn sửa được ở phiên bản sau.

Cuộn xuống dưới là phần challenges, nhưng vẫn đang ghi "coming soon" nên chưa bấm được. Anh bấm vào một chỗ khác và hiện ra phần settings: đổi được đơn vị đo, bật tắt một tuỳ chọn, và có mục beverages. Trong đó có kha khá lựa chọn, ví dụ latte, và theo demo trong video đăng ngày 14/10/2026 app đã biết lượng nước có trong từng loại đồ uống, điều Jason thấy khá hay. Anh thoát ra và nhận xét rằng nhìn chung bản này ổn.

## 8. Onboarding của bản thứ nhất: con capybara còn cứng

Tiếp theo là kiểm tra onboarding. Claude đã để sẵn một lối tắt để chạy lại onboarding, Jason bấm vào và màn hình onboarding hiện ra (demo trong video đăng ngày 14/10/2026). Anh thấy animation chưa tốt: bàn tay trông khá cứng, không đủ mượt, không đủ uyển chuyển. Đó là thứ có thể sửa. Anh bấm bắt đầu.

Màn hình kế tiếp hỏi chọn đơn vị đo, và anh kéo được các thứ trên đó. Theo Jason (video đăng ngày 14/10/2026), màn hình này là để khuyến khích người dùng mới trải nghiệm app trước cả khi đăng ký, và anh gọi đó là một chiến thuật tốt. Anh thêm chút nước, rồi sang trang sau.

Ở đây anh chỉ ra rằng chuyển động của con capybara không mượt lắm, và khi nó nhảy lên, bàn tay cũng khá cứng (demo trong video đăng ngày 14/10/2026). Đây là thứ có thể cải thiện. Anh sang trang tiếp và bấm "allow".

![Màn hình Smart Reminders của bản thứ nhất: capybara giơ tay sau bụi cây, thông báo Water reduces stress](https://homus.dev/photos/Rk6t9Uq1y9M-0843.jpg)

Màn hình Smart Reminders của bản thứ nhất trong demo video đăng ngày 14/10/2026: con capybara vẽ bằng code nhảy lên từ bụi cây với thông báo "Water reduces stress". Đây là kiểu chuyển động Jason nhận xét là cứng, nhất là phần tay.

Màn hình kế là cảnh bơi. Jason thấy cảnh bơi khá hay, nhưng nếu để ý thì chuyển động không mượt, rất cứng (nhận xét trong demo, video đăng ngày 14/10/2026). Theo anh, đây phần nào là giới hạn của việc dựng thứ này bằng code: nếu làm cho một nhân vật di chuyển nhiều, đôi khi rất khó khiến nó chuyển động đúng như ý bạn. Anh nói mình có vài giải pháp cho chuyện này, nhưng trước hết đi tiếp sang màn hình sau.

Anh bấm skip. Màn hình kế không tệ. Có một màn hình "Feel my best", rồi màn hình loading. Sau đó là paywall, và tất cả chỉ là mockup: anh bấm chọn bất kỳ gói nào, bấm continue và vào tới màn hình home (demo trong video đăng ngày 14/10/2026).

## 9. Phần khung của app và hai loại animation

Jason nói anh cố ý cho xem bản thứ nhất này, dù nó chưa hoàn hảo. Phần lớn animation chạy đúng, nhưng vài animation của con capybara rõ ràng là hỏng (demo trong video đăng ngày 14/10/2026). Anh muốn người xem thấy một số giới hạn của Opus 5.5 và cách vượt qua chúng.

Mục tiêu của anh với phiên bản này thật ra là dựng 95% app: cấu trúc tổng thể, tức tất cả các trang, cách chúng chuyển từ trang này sang trang kia, toàn bộ logic, và tất cả những animation đơn giản hơn. Theo Jason (video đăng ngày 14/10/2026), đó vẫn là một chiến thắng lớn, vì bạn không phải tự design từng cái một, việc đó sẽ mất cả đời. Opus 5.5 đang gánh phần việc nặng, còn mình chỉ cần đánh bóng lại.

Trước khi chỉ cách sửa những animation hỏng, anh muốn người xem hiểu vì sao chúng hỏng. Về cơ bản app này có hai loại animation, và chúng được dựng theo hai cách hoàn toàn khác nhau (theo Jason, video đăng ngày 14/10/2026).

![Trang Two kinds of animation: bên trái The interface làm bằng code, bên phải The character làm bằng video](https://homus.dev/photos/Rk6t9Uq1y9M-1016.jpg)

Trang "Two kinds of animation" trong video đăng ngày 14/10/2026. Bên trái, "01 · Code, The interface": phản hồi mọi cú chạm, nhỏ, sắc nét ở mọi kích thước, làm với Opus 5.5, React Native, Reanimated và SVG. Bên phải, "02 · Video, The character": chuyển động tự nhiên mà code làm cứng, với ba cảnh Swim, Sip, Leap; dòng dưới ghi Higgsfield xuất MP4 trên nền xanh 10.4 MB, "Opus cuts out + shrinks it" thành video trong suốt .mov và .webm 1.6 MB.

Bên trái là phần giao diện: những thứ như chỉnh mực nước, hay chọn các loại đồ uống khác nhau. Theo Jason (video đăng ngày 14/10/2026), tất cả những thứ đó làm được bằng code và sẽ trông đẹp. Anh nói mình luôn muốn dùng code bất cứ khi nào có thể, vì code thì tương tác được, file nhỏ, và giữ sắc nét ở mọi kích thước.

Bên phải là các nhân vật. Jason chỉ ra rằng khi anh nhờ Claude làm con capybara chuyển động bằng code, chuyển động rất cứng, trông như một con rối điều khiển bằng que, nhất là đôi tay (demo trong video đăng ngày 14/10/2026). Cách anh lách là tạo các chuyển động này dưới dạng video, dùng một công cụ như Higgsfield, và bạn sẽ có animation mượt hơn nhiều: capybara bơi, capybara nhấp ngụm nước, capybara nhảy lên, đều rất mượt.

Anh nói phần lớn mọi người nghĩ file video rất nặng, và hứa sẽ chỉ vài mẹo để file thật nhỏ mà vẫn giữ chất lượng cao. Trên trang so sánh, phần dưới cột bên phải ghi: file MP4 nền xanh 10.4 MB, sau khi Opus cắt nền và nén, còn 1.6 MB ở dạng video trong suốt (số liệu như hiện trong video đăng ngày 14/10/2026).

## 10. Prompt tạo ba video capybara qua Higgsfield MCP

Việc tiếp theo là tạo lại các video đó trên Higgsfield. Jason quay lại Claude và đưa prompt: tạo ba animation khác nhau bằng Higgsfield MCP. Vì Higgsfield MCP đã được kết nối vào session Claude của anh, anh không phải vào Higgsfield trực tiếp; chỉ cần prompt Claude, và theo demo trong video đăng ngày 14/10/2026 Claude sẽ gọi Higgsfield để tạo các video đó.

![Prompt Create 3 different animations using Higgsfield MCP trong ô chat của Claude](https://homus.dev/photos/Rk6t9Uq1y9M-1136.jpg)

Prompt ba animation trong ô chat của Claude, video đăng ngày 14/10/2026: sipping dùng Seedance 2.5, leaping và swimming dùng Genjutsu kèm mốc thời gian trong video tham chiếu, cuối cùng là đường dẫn tới file screen recording.

Prompt như trên màn hình (giữ nguyên chính tả):

```
Create 3 different animations using Higgsfield MCP.

1. Capybara sitting and sipping from a glass of water (Use Seedance 2.5)
2. Capybara leaping (Refrence video timestamp 00.41, use Genjutsu, follow exact motion of llama in reference video)
3. Capybara swimming left to right, then right to left (Reference video timestamp 00:46, use Genjutsu, follow exact motion of llama in reference video)

'/Trial 1/ScreenRecording_10-05-2026 10-13-01_1.mov'
```

Anh liệt kê ba chuyển động. Thứ nhất là capybara ngồi nhấp ngụm từ một cốc nước, chính là cảnh ở giữa trên trang so sánh, và cho cảnh này anh muốn dùng Seedance 2.5 (prompt trong video đăng ngày 14/10/2026).

Thứ hai là capybara nhảy lên, cảnh bên cạnh. Ở đây anh thêm chỉ dẫn bám theo video tham chiếu: trong video tham chiếu có con llama đang nhảy, và anh muốn đúng chuyển động đó, nên anh đưa đường dẫn tới file screen recording và ghi đúng mốc thời gian lúc cảnh đó xảy ra. Cho cảnh này anh không dùng Seedance mà dùng Genjutsu, theo lời anh là video model mới của Higgsfield (tính đến video đăng ngày 14/10/2026), với yêu cầu bám đúng chuyển động của con llama trong video tham chiếu.

Thứ ba là capybara bơi từ trái sang phải rồi từ phải sang trái, tức animation thứ nhất trên trang so sánh. Anh cũng ghi mốc thời gian và cũng dùng Genjutsu làm model (prompt như hiện trong video đăng ngày 14/10/2026). Rồi anh bấm chạy.

## 11. Kết quả trên Higgsfield và chuyện credit

Vài phút sau đã có vài kết quả từ Higgsfield (demo trong video đăng ngày 14/10/2026). Có animation nhấp ngụm nước, và Higgsfield đưa vài biến thể để anh xem và chọn cái mình thích.

Mở chính trang Higgsfield, bạn thấy video được làm ra thế nào. Ở đó có prompt mà Opus 5.5 đã viết cho anh; trên màn hình nó bắt đầu bằng "Transfer the full-body motion of the llama in the video onto the cartoon capybara from the image". Opus cũng đã upload ảnh con capybara và video tham chiếu mà anh muốn bám theo, cắt từ chính file screen recording anh đưa. Model đang dùng, theo dòng Details trên màn hình, là "Higgsfield Genjutsu - Motion Transfer" (demo trong video đăng ngày 14/10/2026).

Thêm một điểm: các video này được tạo trên nền xanh lá để sau này dễ tách nền, và theo Jason (video đăng ngày 14/10/2026) đó là việc Opus 5.5 sẽ làm được ở bước sau.

Về chuyện các video này tốn bao nhiêu credit: anh đã tạo ba video, cảnh nhảy, cảnh uống và cảnh bơi. Cảnh nhảy dùng Genjutsu và tốn 15 credit. Hai chuyển động còn lại dùng Seedance, và anh nói chúng tốn tổng cộng 60 credit để làm video đó; bảng tổng kết Claude đưa trên màn hình thì ghi Drinking 60 credit và Swimming 75 credit (số liệu trong video đăng ngày 14/10/2026).

![Bảng so sánh credit giữa Genjutsu và Seedance 2.5 và chi phí từng asset](https://homus.dev/photos/Rk6t9Uq1y9M-1323.jpg)

Bảng tổng kết của Claude trong video đăng ngày 14/10/2026. Ở 480p (draft) cả Genjutsu và Seedance 2.5 đều 3 credit/giây (15 credit cho 5 giây); ở 1080p là 55 so với 60, Genjutsu rẻ hơn khoảng 8%. Chi phí thực: Leap 15.1 credit (Genjutsu 480p 15 + upscale 0.1), Drinking 60 (draft 12 + HD 48), Swimming 75 (draft 15 + HD 60). Bên dưới ghi cảnh nhảy rẻ hơn khoảng 4 lần chủ yếu vì upscale chỉ tốn 0.1 credit.

"Bạn thấy sự khác biệt rồi đấy", Jason nói. Với những thứ như cảnh này, bạn có thể dùng Genjutsu rồi upscale lên, bước upscale chỉ tốn khoảng 0.1 credit mà cho ra cùng chất lượng (theo số đo của Jason, video đăng ngày 14/10/2026). Vì thế, theo anh, bạn không phải lúc nào cũng mặc định chọn model đắt nhất cho phần lớn công việc.

## 12. Gom yêu cầu sửa bằng screen recording kèm giọng nói

Trước khi nhờ Claude dùng các video này để tạo phiên bản mới, Jason còn vài chỗ muốn sửa, để làm tất cả trong một lượt. Ví dụ ở một trang, anh muốn các nút lắc lư khi người dùng chưa bấm vào, vì anh nghĩ như vậy sẽ mời người dùng bấm (demo trong video đăng ngày 14/10/2026).

Anh nghĩ phần lớn mọi người trong trường hợp này sẽ chụp màn hình, vẽ đánh dấu lên đó rồi prompt Claude bằng tay, và cách đó hoàn toàn ổn. Nhưng nếu có nhiều màn hình cần sửa, việc đó khá mệt. Cách anh thích, và theo anh là cách nhanh nhất để yêu cầu sửa (nhận định của Jason, video đăng ngày 14/10/2026), là quay màn hình toàn bộ màn hình đó, đọc yêu cầu bằng giọng nói, rồi đưa video ấy cho Claude. Thay vì gõ prompt, bạn nói với nó, và nói thì nhanh hơn gõ nhiều.

Anh dùng Mac, nên chỉ cần quay một vùng màn hình và đọc những gì muốn đổi. Trong lúc quay, anh nói: ở trang này, tôi muốn các nút chưa được bấm lắc lư để mời người dùng bấm vào. Anh để ý rằng con trỏ của mình hiện trong bản quay, nên theo anh Claude sẽ biết anh đang chỉ vào đâu (video đăng ngày 14/10/2026).

Sang trang home, anh thấy có một chỗ lỗi ở phần nước, và nói: sửa animation nước bị hỏng ở đây. Anh cũng muốn bỏ biểu tượng capybara ở đó, và muốn dùng được con trỏ hoặc ngón tay để vuốt qua các loại đồ uống, vì lúc đó anh chưa chọn thêm được đồ uống nào. Anh thêm yêu cầu có hiệu ứng âm thanh, và lại dặn hãy nhìn app Waterllama để lấy cảm hứng (demo trong video đăng ngày 14/10/2026).

Cách Jason gom yêu cầu sửa trong video đăng ngày 14/10/2026: một bản quay màn hình có giọng nói và con trỏ, một đường dẫn file dán vào Claude, thay cho nhiều ảnh chụp đánh dấu.

Anh quay lại Claude, dán đường dẫn của file screen recording đang nằm trên Desktop, và thêm một câu nhờ dùng các video capybara vừa tạo trên Higgsfield để thay vào và cập nhật mockup (demo trong video đăng ngày 14/10/2026). Câu đó trên màn hình:

```
Can you use the capybara videos we created in Higgsfield and replace and update the mockup.
```

Rồi anh bấm chạy. Theo Jason (demo trong video đăng ngày 14/10/2026), Claude sẽ xem video và thực hiện các thay đổi.

## 13. Bản thứ hai: nhân vật mượt hơn, các lỗi đã sửa

Vài phút sau đã có phiên bản mới (demo trong video đăng ngày 14/10/2026). Animation mới tạo trên Higgsfield đã được áp vào trang đầu của onboarding. Jason đi lại qua các màn hình để kiểm tra mọi thứ đã đúng chưa: chọn nước, sang màn hình kế.

Đó là cảnh capybara nhảy lên, và anh thấy trông rất tốt. So với bản thứ nhất, anh gọi đó là khác biệt một trời một vực, và nó mượt hơn nhiều (nhận xét trong demo, video đăng ngày 14/10/2026).

![Màn hình Smart Reminders của bản thứ hai: capybara dạng video đang nhảy giữa không trung với thông báo 1 glass left. You got this!](https://homus.dev/photos/Rk6t9Uq1y9M-1543.jpg)

Smart Reminders ở bản thứ hai trong demo video đăng ngày 14/10/2026: con capybara giờ là video tạo bằng Genjutsu, dang tay chân nhảy lên khỏi bụi cây với thông báo "1 glass left. You got this!".

Sang trang tiếp là cảnh bơi. Jason thấy cảnh này cũng đẹp hơn nhiều, uyển chuyển hơn nhiều, và các nút lắc lư cũng đã có (demo trong video đăng ngày 14/10/2026). Anh cho xem lại bản thứ nhất để so sánh, và nói bản đó trông rất tệ.

Tua nhanh tới màn hình home: chỗ lỗi ở phần nước đã biến mất, biểu tượng capybara cũng đã bị bỏ. Và giờ anh vuốt được để xem thêm các lựa chọn đồ uống. Theo Jason (demo trong video đăng ngày 14/10/2026), Claude đã làm đủ mọi thay đổi anh yêu cầu.

## 14. Màn hình hồ bơi: code cho nước, SVG cho nhân vật, cảm biến cho độ nghiêng

Jason chuyển sang thứ anh gọi là phần ngầu nhất của video: một màn hình mà con capybara đi theo con trỏ chuột. Anh bấm xuống một chỗ, con capybara di chuyển theo, và có gợn nước lan quanh nó khi nó di chuyển (demo trong video đăng ngày 14/10/2026). Anh nhấn mạnh tất cả những thứ này đều làm bằng code, không có video nào ở đây, kể cả mặt nước chuyển động.

Thứ người xem đang thấy là mockup trên trình duyệt, nhưng theo anh nó còn ngầu hơn khi đưa lên điện thoại, vì khi nghiêng điện thoại, con capybara đi theo hướng nghiêng. Anh sẽ chỉ prompt anh dùng để làm được việc này. Anh quay lại Claude và dán prompt vào; anh nói đó là một prompt khá dài (demo trong video đăng ngày 14/10/2026).

Trước khi đi qua prompt, anh giải thích ở mức high level màn hình này được dựng thế nào. Hồ bơi chỉ là code, một dòng nước chảy liên tục. Còn con capybara là một ảnh SVG (cấu trúc của demo trong video đăng ngày 14/10/2026).

Lý do anh dùng SVG thay vì JPEG hay PNG: SVG là file vector, nên nó giữ sắc nét ở mọi kích thước. Dù bạn phóng to gấp ba, nó vẫn sắc như vậy, và kích thước file cũng rất nhỏ. Ngược lại, theo Jason (video đăng ngày 14/10/2026), JPEG hay PNG sẽ vỡ nếu bạn phóng quá tay.

Anh cho xem thêm: nếu tò mò, anh đã thử nhờ Claude vẽ con capybara bằng code, và kết quả rõ ràng là không đẹp, trông như hình que (demo trong video đăng ngày 14/10/2026). Hơn nữa anh không cần con capybara chạy nhảy gì ở màn hình này; anh chỉ muốn nó nằm trên chiếc phao donut. Vì không cần chuyển động, anh dùng SVG là đủ.

Thứ cho phép nhân vật đi theo con trỏ, hay theo hướng nghiêng của điện thoại, là con quay hồi chuyển (gyroscope) và cảm biến trọng lực (gravity sensor) của điện thoại. Nhờ chúng, app hiểu được bạn đang nghiêng máy về phía nào. Đó là cách nó chạy phía sau. Jason nói bạn không phải bận tâm tới chi tiết hoạt động, vì mọi thứ sẽ được code sẵn vào app (theo lời anh, video đăng ngày 14/10/2026).

Cách Jason giải thích cấu trúc màn hình hồ bơi trong video đăng ngày 14/10/2026: nước là code, nhân vật là một file SVG đứng yên, còn chuyển động đến từ cảm biến của điện thoại.

## 15. Chuẩn bị hình: capybara vector và ảnh hồ bơi tham chiếu

Bước thứ nhất Jason làm là lại vào Claude và nhờ nó dùng Higgsfield để tạo vài ảnh vector của con capybara trên một chiếc phao donut. Anh chỉ việc mô tả cho nó những gì đang hình dung trong đầu (demo trong video đăng ngày 14/10/2026). Trên màn hình, Claude báo đã upload ảnh tham chiếu, đang tạo ba biến thể kiểu flat vector trên Higgsfield rồi sẽ trace từng cái sang SVG.

![Ba biến thể capybara vector: trên phao dưa hấu, trên phao donut xanh với vịt vàng và ly nước](https://homus.dev/photos/Rk6t9Uq1y9M-1833.jpg)

Cửa sổ xem ảnh trong Claude, video đăng ngày 14/10/2026: biến thể 2/3 là capybara đeo kính trên phao donut xanh, ôm ly nước và một chú vịt vàng; bên trái lấp ló biến thể trên phao dưa hấu. Dòng phía sau ghi Claude đang tạo ba biến thể flat vector trên Higgsfield rồi trace sang SVG.

Claude đưa ba lựa chọn: một con trên phao donut, một con trên phao dưa hấu, và một con trên phao donut màu xanh (demo trong video đăng ngày 14/10/2026). Anh chọn một con và lưu về Desktop.

Việc tiếp theo là tìm một tấm ảnh hồ bơi, để Claude có định hướng thiết kế cho hồ bơi anh muốn. Anh giải thích rằng hồ bơi có nhiều kiểu, nhiều thiết kế khác nhau. Anh lưu tấm ảnh đó lại để dùng cho prompt sau. Thế là sẵn sàng để tạo màn hình (demo trong video đăng ngày 14/10/2026).

## 16. Prompt Expo React Native cho màn hình nghiêng điện thoại

Prompt mở đầu bằng yêu cầu dựng màn hình đầu của một mobile app với Expo (React Native). Theo Jason (video đăng ngày 14/10/2026), Expo là thứ cho phép xem trước app ngay trên điện thoại. Anh đính kèm hai ảnh. Ảnh thứ nhất là nhân vật: capybara nằm trên phao donut. Anh cho xem đây thực sự là một file SVG: phóng to lên, nó không vỡ, và đó đúng là điều anh muốn. Ảnh thứ hai là một hồ bơi làm tham chiếu cho dáng vẻ mặt nước, chính là tấm lấy từ Pinterest.

Phần đầu prompt trên màn hình:

```
Build the first screen of a mobile app with Expo (React Native) that I can test on my phone in Expo Go.

I've attached two images:
1. My character: a capybara lying on a donut float, seen from above (transparent background).
2. A swimming pool, as a reference for the look of the water.

THE TECH
• Expo with TypeScript. Use the SDK version that the current Expo Go app supports.
• react-native-reanimated for all animation. Read the tilt with useAnimatedSensor(SensorType.GRAVITY) and run the physics every frame on the UI thread with useFrameCallback.
• react-native-svg to draw the pool and the water in code.
• Use my character image exactly as attached. Don't redraw it.
• Lock the app to portrait.
```

Phần còn lại của prompt, theo Jason, chỉ là nói rõ anh muốn gì về tech stack, về cảnh (THE SCENE), về hành động, và nhân vật sẽ cư xử ra sao khi anh nghiêng điện thoại. Anh không đọc từng dòng để khỏi làm người xem chán, chỉ dừng ở phần mô tả nước sẽ phản ứng thế nào, tức các gợn sóng (video đăng ngày 14/10/2026). Phần cuối prompt trên màn hình:

```
• As it moves it leans left or right a little, like a boat turning, up to about 30 degrees. It never spins or turns upside down. It rotates around the centre of the float, not the centre of the image.
• For testing on a computer: if I press and hold the water, it drifts toward my finger.

THE WATER EFFECTS
• Ripples only appear while the character is moving. None when it's still.
• Faster movement means more and stronger ripples, dropped just behind it.
• Make them look like water, not radar: slightly wobbly rings with a thin bright edge and a darker band just inside, spreading fast then slowing, fading as they grow.
• A thin white foam line around the float where it touches the water.

WHEN YOU'RE DONE
• Start the Expo dev server for Expo Go and tell me how to open it on my phone.
```

Dòng cuối cùng là khi xong việc thì dựng Expo dev server, để anh quét một mã QR và mở app trên điện thoại (prompt trong video đăng ngày 14/10/2026). Anh bấm chạy.

Các thư viện trong prompt có tài liệu riêng (đọc ngày 25/10/2026): trang [useAnimatedSensor của Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor/) liệt kê các loại cảm biến, trong đó có GYROSCOPE và GRAVITY; README của [react-native-svg](https://github.com/software-mansion/react-native-svg) ghi thư viện này đưa SVG vào React Native trên iOS, Android, macOS, Windows và có lớp tương thích cho web.

## 17. Mở app trên điện thoại bằng Expo Go

Tua nhanh vài phút, màn hình bắt đầu sống động. Claude đưa một mã QR để anh quét bằng điện thoại và mở ngay trong Expo Go (demo trong video đăng ngày 14/10/2026). Trên màn hình, Claude dặn thêm: nếu không tải được, hãy kiểm tra điện thoại có cùng Wi-Fi với laptop không, và Expo server phải tiếp tục chạy trong tab terminal "brownie-pool expo".

Nếu chưa có Expo Go, Jason nói bạn chỉ cần tải app đó về iPhone. Có nó rồi, bạn dùng app camera quét mã QR, và app sẽ mở ra bên trong Expo Go (theo cách anh làm trong video đăng ngày 14/10/2026). Trang [Expo Go](https://expo.dev/go) mô tả nó là một môi trường học và sandbox để bắt đầu (đọc ngày 25/10/2026).

![Tay cầm iPhone đang mở màn hình hồ bơi với capybara trên phao donut và nút Get Started](https://homus.dev/photos/Rk6t9Uq1y9M-2023.jpg)

App chạy trên iPhone qua Expo Go trong demo video đăng ngày 14/10/2026: con capybara trên phao donut trôi về một góc hồ khi điện thoại nghiêng, nút "Get Started" ở dưới.

Giờ app đã mở, và khi anh nghiêng điện thoại, con capybara đi theo hướng nghiêng (demo trong video đăng ngày 14/10/2026). Jason thấy trông cực kỳ ngầu. Anh nghĩ đây sẽ là một màn hình tuyệt vời khi người dùng mở app, để họ cảm nhận ngay app này tương tác tới mức nào.

Nó cũng phản ứng với ngón tay: chạm ngón tay quanh màn hình, con capybara cũng đi theo (demo trong video đăng ngày 14/10/2026). Anh nhắc lại là thấy chuyện này rất ngầu.

Đó là tất cả cho hôm nay. Jason cảm ơn mọi người đã xem tới cuối video và chào tạm biệt.

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

- Tên gốc: Watch Me Vibe Code an Animated App with Claude Opus 5.5 (It's Super Smooth)
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=Rk6t9Uq1y9M](https://www.youtube.com/watch?v=Rk6t9Uq1y9M)

- Kênh YouTube Jason Lee (Jason Lee): [youtube.com/channel/UCSm7riYU-NTWWFlG9XJBcRA](https://www.youtube.com/channel/UCSm7riYU-NTWWFlG9XJBcRA)

- Expo Go, trang giới thiệu của Expo (đọc ngày 25/10/2026): [expo.dev/go](https://expo.dev/go)

- Tài liệu useAnimatedSensor của React Native Reanimated, danh sách SensorType gồm GYROSCOPE và GRAVITY (đọc ngày 25/10/2026): [docs.swmansion.com/react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor/)

- Repo react-native-svg (đọc ngày 25/10/2026): [github.com/software-mansion/react-native-svg](https://github.com/software-mansion/react-native-svg)

Nguồn: https://homus.dev/talks/watch-me-vibe-code-an-animated-app-with-claude-opus-5-5-its-super-smooth · cập nhật 2026-10-25