Dispatch #1: UI kit workflow: bốn bước từ setup đến implement

Presenter: tuan · Runtime: 10:56 · Recorded: 2026-09-18

Highlights

• Kit này ghép nhiều skill/command lại thành một workflow gồm bốn bước chính: setup, initial design system, prototype, và implement.
• Bước setup hỏi user về tech stack và lưu lại flow để các bước sau không phải hỏi lại.
• Bước initial design system scaffold một bộ design system rồi lưu trong repo.
• Kit dùng thêm nguồn tham khảo như Mobbin để agent reference UI có sẵn, giảm việc bị lệch chuẩn.
• Bước prototype spawn ra nhiều variant UI để người dùng chọn trước khi implement vào code thật.
• Kit được áp dụng thử trên một dự án thật, một nền tảng cho thuê nơi ở trung hạn 6 tháng đến 1 năm.

Chapters

Resources

• links shown in the talk

Transcript (Vietnamese)

[00:00] hôm nay là em giới thiệu cái UI kit thì nói kit thì hơi fancy nói như anh bảo nó cũng fancy Thật ra là cái kit này là em gớt này gớt kia, nhạc này nhạc kia bắt vô thành cái workflow. Thì câu chuyện là tuần trước anh Bảo có hỏi em là hiện tại cái approach mà mình dùng cho một cái project từ không có UI gì hết mà là được cái UI nhìn nó không có bị slot.

[00:45] thì đang như thế nào thì thú thật là em cũng không biết tại vì em giờ đi nhanh quá em không biết là xã hội nó làm sao luôn tại vì nó là một phần nữa là em làm vô lô mà vô lô thì lúc mà ý là nó đã có sẵn với máy bên designer đưa qua rồi là không có tính cái số được thì mới nhưng em mới nhận cơ hội làm luôn cái vô kích sẵn tiện học luôn thì cái vô kích mọi người thấy cái flow cái cái cái ra này hơi phức tạp nhưng mà mọi người chỉ cần quan tâm cái chính giữa thôi cái 0 1 2 3 này bản chất của nó là nó sẽ giúp mình đi phải ra một cái system có sẵn trong có và mình sẽ dựa vô

[01:33] cái đó làm cái số sấp trước xong rồi mình mình spawn ra nhiều cái variant design trong quá trình mình có thể là có variant A có cái UI này hay variant B có cái UI kia nhìn đẹp cái kiểu vậy thì mình có thể pick cái này từ cái này pick cái kia từ kia rồi gợp lại một cái flow và cuối cùng là implement thì cái co idea là vậy nếu mà để đi vào cái comment của kit thì đầu tiên là có setup thì cái comment setup là nó chỉ làm là nó hỏi user về cái text stack của cái project là cái nhất cái hai là để lưu mấy cái flow

[02:23] để đâu thì chi tiết mấy flow là gì thì lấy anh nói sao thì nói chung là những cái câu hỏi để biết đang có những gì trong cái project này để những bước sau nó không hỏi lại nếu như mọi người không có làm bước sau thì những cái skill sau nó cũng sẽ hỏi lại thôi đó là cái nhất sau đó thì mọi người sẽ có cái là initial design system thì cái này nó sẽ giúp mình scaffold một cái bộ design system theo em nghĩ là cũng đúng chuẩn cũng gọi là tạm được so với tư chuẩn hiện tại nó không phải là chi tiết quá mà cũng không phải sâu sài quá nó đủ dùng rồi quay lại cái design system

[03:09] thì sau khi nó generate xong rồi mình sẽ có một cái bước tiếp theo là prototype tại vì Em nghĩ là cái bare minimum của một cái project là nó phải có ít nhất là cái product MD là kiểu như cái description về cái project đó cũng như là cái feature roadmap thì mình sẽ cần hai cái file đó để kiểu như là prototype thử một cái flow feature nó sẽ như thế nào thì nó sẽ là cái bước 2 này Ờ để ở đây để mà hạn chế slot thì em có quyết định dùng thêm một vài nguồn Ví dụ như thằng Mubbin Mubbin nó là không biết mọi người biết chưa

[03:56] Nhưng mà Mubbin nó là một cái kiểu collection Những cái UI ngoài đời thật iOS có, web cũng có luôn Thì mình có thể gắn thêm cái này cho con agent nó có thể reference từ những cái button đã có sẵn rồi thì nó sẽ đỡ slope hơn, nó sẽ đỡ chế hơn thì nó là một phần thì sau khi mà mình có prototype rồi mình có flow rồi mình tới bước chung như mình chung như mình bước này thì em nghĩ là nó cũng straightforward nó chỉ lấy từ flow rồi đưa cái code đó vô cái code mình thực sự dùng thôi rồi thì có một cái nữa comment này

[04:44] cũng kiểu chỉ giúp onboarding mọi người nếu mà mọi người thực sự quyết định dùng cái UIKit của em là mọi người có thấy UIKit để kiểu như là nếu như mọi người không biết là tiếp theo nên làm cái gì thì cứ UIKit nó sẽ cho biết là Cái project hiện tại đang ở cái bước nào Và cần chạy theo một thùng mấy nào nữa Để mà qua bước tiếp theo Thì đó là cái bắt Cái call chắc kính như đó Còn nếu như tiếp theo Chắc là em show mấy cái kết quả Em apply Vô mấy cái dự án của anh Bảo Đầu tiên là cái [dự án] [dự án] thì nó là một cái project kiểu như là cho thuê nơi ở

[05:31] trung hạn thì nó sẽ hơi giống EB&B nhưng mà MBB là kiểu mọi người đi chơi mọi người thuê chỗ ở EB&B vài ngày hoặc là cùng lắm là vài tuần còn cái này nó sẽ kiểu như là thuê 6 tháng hoặc tới 1 năm ID nó chỉ đơn giản thôi thì cái cần là cái đưa từ cái say của dự án không chưa có UA hết ra thành một cái giống như vậy cái văn sinh đầu tiên nhưng mà khá chẳng mọi người văn sinh đầu tiên nó không có được như vậy rồi cái này là cái sản phẩm cuối cùng có em nói chung là cái này là từ cái design system ra hết rồi cái chỗ design system thì nó sẽ nằm ở đây

[06:21] lúc mà chơi xong thì cái trang này là cái trang mà sản phẩm của nó mọi người sẽ có được mấy cái tiêu chuẩn như là logo rồi phong chữ rồi bảng màu các thứ em nghĩ là cũng cover gần đủ rồi đây là bước còn cái bước prototype thì mọi người sẽ lúc mà mọi người làm mọi người sẽ kêu nó là prototype và spawn ra thử nhiều cái variant như đây là em dùng spawn ra chắc là 3-4 cái variant gì đó của cái world game mọi cái thì nó theo

[07:07] một cái đặc thù focus là tại sao nó lại đi xa cách này rồi cái cái là mình chính của này là gì kiểu kiểu là ở đây nó cũng ghi là kiểu như nó làm cái này là tại vì nó dựa theo mất pin ngang CP có trên ngoài đời rồi rồi còn mấy cái nó không có thì nó sẽ kiểu quyết định thì nó có lý sản xuất mình cái này là một version thêm một version nữa nói chung là tới bước này thì mọi người chỉ có là dựa vào cái cái gu thôi em nghĩ là như vậy 3 cái nhìn nó cũng y chang nè nó cũng là chung một cái working

[07:53] và cuối cùng thì chốt là chốt cái này này mà nhìn là nó khá giống với cái mút cuối cùng rồi đó chỉ là thịt play sẵn kiểu rồi thôi dài nhưng mà ý chính là vậy này nó cũng có lý sơ luôn comment của em thì nó có nó có mẫu output không cho mọi người xem tham khảo thử được Ồ, tóm trở về với mấy nhà OpenCode Tân yêu ra Tại vì em xài hết mấy cái, em xài hết cô ta rồi mới xài tạm OpenCode hơn

[08:43] Đây chắc là đây là một cái em kêu nó prototype thì nó spawn ra mấy cái này nè mấy cái này chắc cũng bỏ rồi nhìn nó vậy thôi chứ nè kiểu kiểu vậy output sẽ là cái những cái giai đoạn mà trigger trigger skill hay trigger command đâu gian cũng không còn nhiều anh em có câu hỏi trên thủ hỏi trong trong khi chuẩn bị cho cái sàn

[09:30] Em nghĩ nếu mà Cái của em mọi người Không dùng cái của em cũng được Nhưng mà có cái methodology Là kiểu dùng một cái design system Thành cái sọ trước Xong rồi spawn ra nhiều cái virus Của prototype á Thì cái cách làm đó em nghĩ vẫn Vẫn legit trong Tối cảnh hiện tại Kèm theo vài cái Referent nữa như cái mapping Nghĩ là Được anh chắc là không Cảm ơn Tuấn gì là tên hãy đi chính của em trong quá trình làm là có một cái số lập chút đúng không cút cái file product trước xong rồi ra thành cái system

[10:18] ở đó đang được lưu trữ đâu trong có luôn anh rồi lưu thì xong trong có luôn anh em sử dụng đó làm cái số hợp chút rồi từ đó thì mình sẽ làm cái pro tay này chính đúng không ra được một số vài rành để mà làm brainstorming rồi chọn cái đó biết được và dành cuối rồi sành web ngồi ok cu thôi xong ha Cảm ơn Cảm ơn Tuấn rồi tiếp câu chuyện về sort of truth chắc là mình sẽ

Transcript (English)

[00:00] Alright, please go ahead and start, Tuấn. Is Cô here? No, seems normal today, so I'm introducing the UI kit. Calling it a "kit" sounds a bit fancy, like you said it's fancy too. Actually this kit is me gớt this, gớt that, nhạc this nhạc that hooked together into a workflow. So the story is last week anh Bảo asked me what the current approach is for a project that has no UI at all but ends up with a UI that doesn't look "slot" (janky/off).

[00:45] So how is it going, honestly I don't know either because I'm moving too fast, I don't really know how it works in society, because it's also partly that I work in vô lô, and in vô lô sometimes it's already there, given by the designer, so it can't really be counted, but I just took the opportunity to build the vô kích right away and learn on the fly. So for the vô kích, everyone can see this flow, this diagram is a bit complex but everyone just needs to focus on the middle part, this 0 1 2 3, basically what it does is help you go out and produce an available system, and based on that

[01:32] you build the number spec first, then you spawn many design variants during the process. You might have variant A with this UI, or variant B with that UI, looks nice, that kind of thing. Then you can pick this from here, pick that from there, combine them into one flow, and finally implement it. So the core idea is that. If we go into the comments/commands of the kit, first there's setup, and the setup comment just asks the user about the tech stack of the project, that's one thing, and second is to save the flows

[02:22] where to store them, the details of what the flows are, whatever anh says. Basically these are questions to know what's already in this project so that later steps don't ask again. If people skip a later step, the next skill will ask again anyway. That's the first one. After that you'll have the "initial design system," this one helps scaffold a design system that I think is also up to standard, decent compared to current standards, not too detailed, not too shallow either, it's just enough. I forgot to send the link, let me send it

[03:04] let me send it here, everyone take a look, then back to the design system. After it finishes generating, there's a next step: prototype, because I think the bare minimum for a project is that it needs at least a product MD, which is like a description of the project, as well as a feature roadmap. So we need those two files to prototype what a flow/feature would look like, that's step 2

[03:43] here, to reduce "slot" (jankiness), I decided to use a few additional sources. For example, Mubbin, not sure if everyone knows it, but Mubbin is a kind of collection of real-world UI, both iOS and web. So we can attach this so the agent can reference existing buttons that are already there, which reduces slop, reduces the "made-up" feel. That's one part. So after we have the prototype, we have the flow, we move to the next step, building it out, I think that's also straightforward

[04:30] it just takes from the flow and puts that code into the code you actually use. Then there's one more comment/command, this one is just to help onboarding people, if someone decides to actually use my UIKit, they'll see the UIKit, so if you don't know what to do next, just check the UIKit, it'll tell you what stage the current project is at and what steps still need to run to get to the next stage. That's basically it, I think

[05:10] that's roughly the call. I think next I'll show some results I applied to anh Bảo's projects. First is [a project] [a project], a project like a mid-term rental place, it's kind of like Airbnb, but Airbnb is where people travel and rent a place for a few days or at most a few weeks, while this one is more like renting for 6 months or up to a year. The idea is simple, what we need is turning

[05:52] the project's SaaS/spec, which has zero UI, into something like this. I can't show the very first version but I can tell you the first version didn't look like this, this is the final product, this all comes from the design system, and the design system part is over here. After running it, this page is the output page you'll get with standards like the logo, then the font, then the color palette, etc. I think it's

[06:40] covered pretty well already. This is the prototype step where, when you run it, you tell it to prototype and it spawns multiple variants, here I used it to spawn maybe 3-4 variants of the world/wall game, and it follows a specific focus, like why it went this particular way, and what the main point of this is, kind of, it also writes here why it did this, because it's based on some pattern/reference that exists out in the real world, and

[07:28] for whatever it doesn't have, it decides on its own, it has its own logic, produces this, one version, then another version, basically at this point it's really just up to your own taste, I think. These three look basically the same, it's the same underlying working set, and finally you lock it in, lock this one in, it looks quite close to the final one, it's just laid out ready to play with, kind of. That's the long version but the main point is that, it also has its own logic there

[08:16] let me show you a bit more, on the interface, using... my version, I use my comment/command, does it have a sample output to show as reference? Let me try to find it now, because when I was working it got quite messy, hard to find, let's see if I can find it

[08:25] oh, back to using OpenCode instead of Tân yêu (?), because I used up all my quota on the other one, so using OpenCode instead for now. This here, I think this is one where I told it to prototype, and it spawned these, some of these were probably dropped already, it just looked like this, that kind of thing, the output would be the stages that trigger

[09:16] trigger a skill or trigger a command, I don't know where, can't find it. OK I think that's basically it, not much time left, anh has a question, I'll take questions while preparing the demo. I think even if people don't use mine, that's fine, but the methodology of using a design system as the source of truth first, then spawning multiple prototype variants, I think that method is still

[09:47] still legit given the current context, plus a few more references like the mapping, I think that's it, comment, comment, anyone want to ask, ask before, quota's gone, I'm scared, don't dare hit enter, but anyway, does anyone have any questions?

[10:01] anh: probably not. Thanks Tuấn, so the main flow during your work has a bit of a loop, right, take the product file first, then turn it into a system, and that gets stored where, in có (?) luôn anh, then it's stored there, and you use that as the source-of-truth spec, and from there you build the prototype, right, get out a few options for brainstorming, then pick and finalize, then move to building the actual site, ok, cool, thanks. Thanks Tuấn, next, continuing the conversation about source of truth, I think we'll...

---

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.