Dispatch #2: handoff pattern: từ ảnh chụp app đến Figma và video demo

Presenter: tom · Runtime: 13:15 · Recorded: 2026-09-18

Highlights

• Nhóm dùng pattern prompt end-to-end test để AI tự chụp ảnh app rồi convert sang Figma, tránh phải để chị gái (dự án gia đình) test tay.
• MCP Bridge Figma UI của một bạn Việt Nam trên GitHub giúp tiết kiệm chi phí Figma bằng cách để AI sửa trực tiếp từ mẫu vẽ tay.
• Figma/UI kit được coi là source of reference chứ không phải source of truth; source of truth vẫn nằm ở code.
• Với feature mới không dễ demo ảnh, nhóm dùng video end-to-end gửi khách hàng thay vì bắt khách hàng tự test.
• Một dự án dùng công nghệ ghi lại DOM trực tiếp (kiểu Hotjar) để dựng heatmap tương tác người dùng trên web.
• HyperFrame là skill chạy trên HTML cho phép AI edit video, output có thể là mp4, HTML hoặc keyframe.

Chapters

Resources

• links shown in the talk

Transcript (Vietnamese)

[00:02] Đúng ra là bên phía em Tuấn đang làm chung với anh Hân, em thì làm với chị lớn của em Chị lớn của em có vài ý tưởng về kiểu startup chơi chơi, làm một game mobile app Nên technique ở đây thì không có cái gì quá khó đâu Nếu mình muốn tránh swap thì có khá là nhiều mấu cho tránh swap Ví dụ là T-Skill hoặc là nếu mọi người có dùng MCP nó có INSPO MCP để tí gửi trên INSPO luôn Những idea là kể cả mình lấy mấu ở đâu Đúng ra là mấy cái ý tưởng bên phía chị em đưa cho em ấy

[00:50] đưa video sau đó là đưa ảnh sau đó em quăng bên phía Astro nó tự làm thôi iterate mỗi hai lần thì nó sẽ ra artifact vấn đề là em có một cái problem là mình show cho bên phía chị lớn như thế nào và chị không có thời gian cho test app ấy thì em có một cái pattern mình prompt đơn giản thôi, ví dụ là mình nói với AI là End to end test cho lấy ảnh về máy sau đó là up lại ở trên Figma thì đúng ra là bên phía chị em có một trang Figma riêng cũng là từ mẫu đầu tiên của em chỉnh lại sửa cho nó nhìn đẹp thì cái này là bên phía của chị em Dizan cũng làm bằng tay hết

[01:35] nhưng em nhờ bên phía AI dùng MCB Bridge của bên phía một bạn Việt Nam cũng gửi trên GitHub ở trên kênh hub giảng ở đây Figma UI MCV một là chi tiết kiệm tiền vì mọi người cũng quen là thẳng bên phía Figma sẽ tốn tiền nhưng từ cái mấu lặng bàn tay em nhờ bên phía AI sửa lại hết từ đầu cho nó đi theo đúng cái mấu đó sau đó là output giảng ảnh ảnh thì nó sẽ output đúng ở trên terminal của em, em chỉ cần xem thôi đi ở đây, đây là output của bên phía app chính đó là so sánh với figma bên kia thì đúng là trang figma này là riêng cho bên phía AI

[02:21] dạng output của design sau đó em sẽ handoff cho bên phía chỉ lớn của em cho xem có ok không handoff pattern này nó khá là thú vị ở chỗ là mình không cần test UI, UX trên tay UX thì chắc là một đợt, tiếng một đợt sau cho OGIFT cho mọi người Ui thì không có khó đâu mình chỉ nhờ bên phía AI nó chụp ảnh, rồi nó gửi lại cho mình thôi điều kiện của cái prompt này nó không có cái gì khó đâu là end to end test lấy ảnh chụp ảnh sau đó là convert cái ảnh đó sang Figma thì cái prompt cho convert sang Figma cho đỡ bên phía chỉ lớn của em bị phiền phức em gửi prompt trên Discord

[03:08] và có 1 cái prompt tránh nesting nhập bên phía AI dùng cái ảnh đó, convert sang Figma rồi đó là đừng có nest giá man trong Figma thôi chắc vậy thôi pattern này nó sẽ có nhiều ưu điểm vì do là mình không cần ở trên máy mình chỉ nhờ bên phía AI output ở đây sau này em sẽ làm một phần mềm bên phía làm như thế nào cho nó gửi email cho em hoặc nó chạy ở trên mình sẽ gửi ảnh trên cái Grogbot của em

[03:57] một cái Grogbot hơi hơi giống như bên phía ở đây Grogbot thì nó có ưu điểm là mình có thể đưa một cái artifact nằm ở trên này luôn thì em có một cái Grogbot riêng của em em sẽ sau này gửi ảnh ở trên đó cho kiểm tra artifact và nhờ bên phía AI gửi email cho em như là trong trường hợp em đi ra ngoài em mua đồ sắm cho bé của em thì nhờ bên phía bot nó sẽ bị hết và cũng không phải là khác trên pattern mình đang có dùng ở trên Pi hiện tại thì Pi cũng gửi ảnh thẳng ở trên này thôi Chắc hôm nay chỉ giới thiệu cái Outerfacts cho output thôi

[04:46] Mọi người quen dùng Cloud Code hoặc là Codex Nó có cái trang Outerfacts bên phía phải rồi Nhưng cái đấy là dạng Interactive Em thì đang cần một cái Em đi ra ngoài chơi chơi đi xíu Sau đó em quay lại em thấy nó ok Ok thì em flop lại tiếp Cho nó output đúng mô hình của em thôi Anh có một hỏi nha, anh đang hiểu là ban đầu đã có một cái design sẵn, sau đó em làm là em đã điều chỉnh lại cái UI đó bằng cái InSpo đúng không? Xong rồi em mới làm một cái chuyện nữa là em lát cái đấy lên trên Figma sử dụng MCP, đúng không Tân? Đúng ra là mấy trang Playment, chắc bên phía em Tuấn cũng biết

[05:39] Một cái mấu cho làm 3D Bên phía AI cũng tìm kiếm một cái về bên phía shop Một cái 3D về xem sách ảnh tức là copy từ cái này thôi nên là mình nhờ bên phía AI vô ở trong trang này record một cái video sau đó là hiểu cái hái niệm về animation drag này nọ và sắp xếp 3D của sách như thế nào đó là nhờ cho nó quất thôi tại này, Astral và Fable hiện tại là ổn nhất cho làm đúng theo mong muốn của mình còn mấy cái nhỏ chi tiết thì mình sẽ chỉnh sửa lúc ở trong prop thôi

[06:25] Có câu gọi của anh cho phần liên quan đến phần Tuấn làm đi, vậy thì sau đấy xong với setup của em thì nếu mà dự án tiếp tục phát triển tiếp, thêm feature thì cái sort of truth của em sẽ maintain ở đâu? Figma hả? Hoặc là code Figma là inspiration hơi giống như bên phía install MCP hoặc là UI kit bên phía em Tuấn chủ yếu là nó là một chỗ cho mình tương tác một style xây dựng xây dựng hơn là dạng là Social Truth thì nó sẽ là Social Reference cho bên phía AI

[07:10] Social Truth là vấn vào code tất cả tài sản nó sẽ vào code hết nếu là Reference của product thì nó nằm vào cho hack thì nó vẫn là Reference thôi Social Truth nó vẫn nằm vào trên code Nhưng mà câu hỏi là với người khách hàng thì sao? Người khách hàng là người mà người ta sẽ có ý tưởng mới để người ta thêm vào tiếp Lúc mà người ta thêm ý tưởng mới vào thì người ta đâu có version related để người ta làm đâu Tại vì người ta đâu có hands on trên level của code base đâu Lúc đó mình xử lý như thế nào Cái này là cái hải nghiệm về artifact Hiện tại là artifact em đang làm là dạng ảnh nhưng chắc đợt schedule đợt ô gip sau

[07:58] em sẽ đi sâu về UX UX thì... ví dụ cái output của bên phía AI đưa là dạng ảnh nhưng mình muốn thêm một cái feature ví dụ là thêm feature trên miệng, trên Slack add thêm ở trên app xong nhưng không biết ở chỗ nào cho bên phía hack hàng biết mình đã update ở đâu ấy thì nó sẽ là record dạng video, end to end video gửi lại cho bên phía hack hàng thì nó là một artifact dạng video cũng không phải là source of truth, nó là source of reference nhưng ít nhất là video đó có thể khách hàng biết có feature nó cảm giác như thế nào và không cần khách hàng test gì hết để nó animate như thế nào, tương tác như thế nào nó cũng là một cái mẫu sau này cho làm promo video chủ yếu là product nữa nữa

[08:46] tây giờ đó là chưa có đúng không? Player đúng ra là bên phía [dự án] em có một cái cho về browser browser nó có cái khái niệm gọi là oral web em không cần record chắc mọi người chơi với post hoc nhiều rồi nó có một cái trang riêng record DOM trực tiếp cho bên phía post hoc thế là lúc nó lấy thông tin ở trên trang web nó record DOM của những người user tương tác ở trên web như thế nào sau đó là xây dựng hitmap ở trên đó VeeBrowser đã có rồi, không biết có mấu ở đây không ta Chúng ta sẽ là cái concept của cái này là Chỗ này nó là DOM hết, ví dụ nó có có hết ở trên này

[09:35] thì cái này đang có tác dụng cho bên phía [dự án] nên là kể cả bên phía em, em và khách hàng cũng không thích mất thời gian cho demo và chơi thử feature ấy thì nhờ bên phía AI chơi thử cho mình record lại, sau đó gửi gửi cho 2 bên và em sẽ xem là UX là ok, có vẻ UI chưa tốt nhưng UX là tuyệt vời rồi hãy khẳng cũng thế như vậy chẳng như là mình đem ôt hãy khẳng là ra áo quất như vậy hiểu có nhà ok rồi đáp liên hội dung của buổi hôm nay có vài câu hỏi từ bên phía trên Thứ nhất anh hỏi là sao không dạy chị em luôn cho khỏe Đứng ra là ra HTML thì nó có một skill của Hyperframe

[10:35] Mọi người có dùng bên phía Hyperframe Agents Nếu như HyperFrame nó chạy ở trên HTML thì HTML này nó sẽ chạy một cái player bên phía HyperFrame cho mình edit video Ở phía sau nó cũng là HTML nhưng HTML này nó xịn xắn rồi á nên hơi giống như mình có một mẫu source of reference trên phía AI cũng tương tác với HTML cho record và video cho mình Được ra là medium này nào cũng không quá lo có thể output mp4, HTML hoặc keyframe

[11:21] Nếu mình có một artifact thì mình sẽ dùng một tương tác với mấy cái idea của mình dễ hơn Hiện tại thì em thấy dùng ảnh thì nó sẽ dễ iterate hơn vì một là nó sẽ không tốn quá nhiều thời gian cho iterate về UI UX thì là một chuyện khác nên là UX thì chưa cần lắm performance thì cũng chưa đến đoạn này là cần nhưng optimize cũng dễ, mình nhập BPAI Optimize đã xong rồi Ok, oh nice. Đó, chắc là câu hỏi dành cho Tom, anh nghĩ là tới đây. Cảm ơn Tom về cái phần chia sẻ của Tom nha. Hai cái topic này anh đang xếp nó vào, thật ra không phải phần brand nhiều mà team mình bắt đầu,

[12:11] bắt đầu mấy bạn chuyển hướng một phần sang phía design system, một phần sang hướng làm sản phẩm á. thì anh nghĩ những chủ đề này nó sẽ theo cái suy nghĩ của anh thì nó sẽ gom về cái hướng là hỗ trợ cái chuyện làm sản phẩm nó dễ hơn rồi tai pin rồi những thứ khác rồi ok tắt ra kêu cho tuần sau nhé thật là buổi khác rồi anh em xem còn có hỏi gì không nếu không thì chắc mình kết thúc buổi ngày hôm nay đây hay sách sạch đủ ngắn đủ dễ hiểu mọi nếu sau này có những cái topic nào thêm mà liên quan tới chuyện làm product những kỹ năng đó là cần thiết cho cái đội của mình nó đi chờ consulting

[12:57] tất cả những kỹ thuật nó giúp cho mình chuyện làm nghề nó dễ hơn thì anh em trao đổi kỹ thuật với nhau Rồi ok, nếu mà không có gì khác thì chắc là mình sẽ kết thúc ở đây Cảm ơn mọi người đã tham gia Hẹn gặp lại buổi tiếp theo Chào tạm biệt Bye bye

Transcript (English)

[00:00] So this is a nice quiet spot for Tom, let's invite Tom to run it. Do you have a tool for recording voice and screen? We have one but haven't set it up yet, actually there's an upgrade coming next week, I have an extension to stream it out using a separate machine to make Discord recording easier. Used to do it before but it wasn't stable, we haven't reverse-engineered the backend of Discord yet.

[00:00] These days there's AI, doesn't Mac already have built-in capture? Use that instead, no? I'm capturing and talking at the same time, it's a bit hard. That only captures my own screen, let me switch it, since I'm running Rust it won't record. Ok ok, go ahead, this is Tan's turn. Ok ok, you're recording right? No, no one. Wait, I thought Tan was recording their own earlier. It's recording but not streaming.

[00:03] Ok, can everyone see now? Yes, we can see now, floor goes to Tom, Tom please introduce from the start. So on my side, Tuan is working together with anh Han, and I'm working with my older sister. My sister has some startup-ish ideas for fun, building a mobile game app. So the technique here isn't too hard. If you want to avoid swapping there are quite a few hooks for that, for example T-Skill, or if you use MCP there's INSPO MCP, I'll send it in INSPO later.

[00:38] These ideas, wherever the templates come from, actually my sister gives me ideas, first she sends a video, then a picture, then I throw it into Astro and it iterates on its own, after two iterations it produces an artifact. The problem I have is how to show this to my sister, and she doesn't have time to test the app, so I have a pattern where I just prompt simply, for example telling the AI: end-to-end test, grab the screenshot, then upload it to Figma. So my sister has her own Figma page.

[01:25] Also from the first template, adjusted to look nicer, this side my sister's designer also does by hand, but I ask the AI side using the MCP Bridge from a Vietnamese dev, also shared on GitHub in the channel here, Figma UI MCP, one is it saves money since normally using Figma directly costs money, but from the hand-drawn template I ask AI to redo it entirely to follow that template, then output screenshots, it outputs right in my terminal, I just look at it here, this is the output of the actual app.

[02:13] That's compared against the Figma on the other side, so this Figma page is dedicated to the AI-side design output, then I hand it off to my sister to review, is it ok. This handoff pattern is pretty interesting in that I don't need to test UI by hand. UX, I'll probably cover that in a future session for everyone. UI isn't hard, I just ask the AI to take a screenshot and send it back to me. The condition for this prompt isn't complicated: end-to-end test, take a screenshot, then convert that screenshot to Figma.

[02:58] So the prompt for converting to Figma, to save my sister the hassle, I send the prompt on Discord, and there's one prompt to avoid nesting, tell the AI to use that image, convert to Figma, and don't nest layers deeply in Figma, that's it basically. This pattern has a lot of advantages because I don't need to be on my machine, I just ask the AI to output here, later I'll build software on the side.

[03:45] to figure out how to get it to email me, or run and send images to my Grogbot, actually maybe I'm mispronouncing it, a Grogbot kind of similar to this side. Grogbot's advantage is I can attach an artifact right here, so I have my own Grogbot, later I'll send images there for checking artifacts and ask the AI to email me, like in cases where I go out shopping for my kid.

[04:23] then I ask the bot side and it'll be done, and it's not that different from the pattern I currently use with Pi, Pi also sends images straight here. I think today I'll just introduce the Artifacts for output. Everyone's used to Claude Code or Codex, it has that Artifacts panel on the right. But that's interactive. What I need is, I go out to play for a bit, come back, check if it's ok, and if not I flop it again to get it to output my exact model. I have a question, my understanding is at first there was a ready-made design, then what you did was adjust that UI using InSpo, right?

[05:22] And then you did one more thing, you put that onto Figma using MCP, right Tan? Right, so on the Playment pages, Tuan probably knows this too, there's a template for making 3D. AI side also searches around, like on a shop for a 3D book preview, basically copying from that, so I ask AI to go into that page, record a video, then understand the animation concept, drag interactions, and how the 3D arrangement of the book works.

[06:10] So I just ask it to crank that out, currently Astral and Fable are the best for matching what I want, and small details I adjust in the prompt. Anh has a question related to the part Tuan worked on, so with your setup, if the project keeps growing and adding features, where does your source of truth get maintained?

[06:42] In Figma? Or in code. Figma is more like inspiration, similar to the install MCP or UI kit side, Tuan mainly uses it as a place to interact, more of a style-building thing than a Source of Truth. It would be a Source of Reference for the AI. Source of Truth is when everything, all the assets, go into code. If it's a product reference it sits outside for hacking, it's still a reference. Source of Truth still lives in code. But the question is, what about the customer?

[07:29] The customer is the one who'll come up with new ideas to add. When they add a new idea, they don't have a version reference to work from, since they're not hands-on at the codebase level. How do we handle that then? This is about the artifact experience. Currently the artifact I'm making is image-based, but probably in a future scheduled session I'll go deeper into UX. UX-wise... for example, the AI's output is an image, but if I want to add a feature, say add something on Slack or add it in the app, but there's no way for the customer to know where I updated it ,

[08:15] then it gets recorded as a video, end-to-end video sent to the customer, so it's a video-type artifact, also not a source of truth, it's a source of reference, but at least with that video the customer can see how the feature feels, without needing the customer to test anything, to see how it animates, how it interacts, it's also a template for making promo videos later, mainly for the product. That part isn't done yet, right? Player-wise, actually on the [project] side I have something for browser, browser has a concept called oral web, you don't need to record, I think everyone's used PostHog a lot.

[09:01] There's a dedicated page that records the DOM directly for PostHog, so when it captures info on the web page, it records the DOM of how users interact on the web, then builds a heatmap from that. VeeBrowser already has this, not sure if there's a template here. Let me check if there's a template for this part. The concept here is this part is all DOM, for example it has everything here, so this is currently being used for the [a project] side.

[09:42] So even on my end, neither I nor the customer likes wasting time on demos and trying out features, so I ask the AI to try it out, record it, then send it to both sides, and I'll check, UX is ok, UI might not be great yet but UX is excellent, same thing, kind of like putting out a report that way. Ok got it. Alright, wrapping up today's session content, there are a few questions from up top. First, anh asks why not just teach your sister directly to make it easier. Actually with HTML there's a skill from Hyperframe.

[10:34] Does everyone use Hyperframe Agents? Play the Hyperframe launch video. Launch... Keyframes. Yeah, if Hyperframe runs on HTML, this HTML will run a Hyperframe-side player for me to edit video. Underneath it's still HTML but a polished HTML, so it's kind of like having a template, a source of reference where the AI side also interacts with the HTML to record and produce video for me.

[11:11] The medium doesn't matter much, it can output mp4, HTML, or keyframes. If I have one artifact I can interact with my ideas more easily. Currently I find using images makes iterating easier, since it doesn't take too much time to iterate, UI vs UX is a different matter.

[11:42] You can sell that item, or buy and sell equipment, buy and sell clothing, so for now it's still iterating on design, so UX isn't critical yet, performance isn't at that stage yet either, but optimizing is easy too, I just tell AI "optimize this" and it's done. Ok, oh nice. That's probably it, questions for Tom, anh thinks that's a good place to stop. Thanks Tom for the sharing. Anh's grouping these two topics, it's not really about branding, more that the team is starting to shift, some people moving toward design systems, some toward product-building.

[12:17] Anh thinks these topics will converge toward supporting product-building being easier, and other things. Yeah right. Oh, does anyone want to go up and present for 5 minutes? Anh Thanh's around, want to jump in for 5 minutes? Ok, let's cut it here, save it for next week or another session, anh, does anyone have more questions?

[12:42] If not, let's wrap up for today. Clean and easy to follow. If there are more topics later related to product-building, skills that are useful for the team heading toward consulting, all these techniques that make our work easier, let's exchange them. Ok, if nothing else, let's end here. Thanks everyone for joining. See you next session. Bye, take care. Bye bye.

---

Dwarves Dispatch is the spoken tier of our field reports: a member reports from a live project in ten minutes; the written field report follows once the numbers are in. Predecessor series: OGIF office hours.