AI design workflow đã chết nếu bạn còn thiết kế sai cách

Đừng gọi mình là maker nếu chưa dám để AI thiết kế app trong 1 giờ

TL;DR

• AI design workflow cho phép một kỹ sư không biết thiết kế tạo xong UI app + landing page trong 1 giờ.
• Pencil AI với multi-agent giúp iterate nhiều màn hình song song, nhưng dễ sinh bug và mất đồng bộ.
• Thiếu mood board và reference chất lượng thì mọi thiết kế AI đều trông “na ná như nhau”, rất cơ bản.
• Thiết kế trước trong Pencil/Figma rồi mới code SwiftUI giúp tiết kiệm thời gian và chi phí đáng kể.
• Đi theo chuỗi: Deep research → Mood board → PRD → Design system → Iteration màn hình cho kết quả tốt nhất.

Mục lục

• AI-native design workflow là gì và vì sao đáng thử?
• Deep research cho ý tưởng app Clippy được thực hiện thế nào?
• Mood board và reference hình ảnh ảnh hưởng ra sao tới AI design?
• Pencil AI có thực sự đủ sức thay thế Figma không?
• PRD và design system trong workflow AI-native quan trọng thế nào?
• Làm marketing page bằng AI và 21st.dev khác gì template mặc định?
• Làm sao vượt qua “căn bệnh thiết kế generic” của AI?
• Sau 1 giờ, kết quả thực tế cho thấy điều gì về “AI-native designer”?
• Workflow AI design 5 bước: áp dụng thế nào cho dự án của bạn?
• Nên bắt đầu từ đâu? Lộ trình hành động trong 30 ngày
• Hệ thống lại & bước tiếp theo
• Câu hỏi thường gặp

---

AI-native design workflow là cách dùng AI như công cụ chính — không chỉ hỗ trợ — để đi từ ý tưởng đến UI và landing page. Trong thử nghiệm này, một kỹ sư không phải front-end hay designer đã dùng Claude Code, Pencil AI và Gemini để hoàn thành UI app clipboard “Clippy” cùng marketing page trong đúng 1 giờ.

Related: Claude Design: sự thật về AI design startup trước khi quá muộn

Related: Claude Managed Agents và sự thật về AI hạ tầng đã chết

Related: AI coding assistant đã phá hủy năng suất dev của bạn?

Related: AI website na ná nhau: nguyên nhân & cách sửa | Hướng dẫn

Related: Harness Engineering là gì? Thiết kế AI Agent 2026

Bài này breakdown từng bước của quy trình đó: chiến lược prompt, cách dùng reference, cách tổ chức multi-agent. Bất kỳ solo founder hay dev nào cũng có thể áp dụng ngay.

---

AI-native design workflow là gì và vì sao đáng thử?

AI-native design workflow là quy trình thiết kế mà AI đóng vai trò công cụ chính từ đầu đến cuối, không phải tiện ích phụ. Hiểu đúng điều này quan trọng vì nó thay đổi hoàn toàn cách bạn phân bổ thời gian — thay vì học Figma hay thuê designer, bạn tập trung vào việc chuẩn bị context tốt để AI làm việc hiệu quả.

Trong series “Build It With AI”, tác giả đặt giới hạn 1 giờ cho mỗi thử thách để trả lời câu hỏi: “Một vai trò nghề nghiệp — designer, data scientist, PM — có thể được mô phỏng chỉ bằng AI tool không?”. Tập đầu chọn vai designer, với bài toán cụ thể: thiết kế UI mobile và marketing page cho app quản lý clipboard.

Trọng tâm không phải là sản phẩm hoàn hảo, mà là “AI có thể đi đến đâu trong 1 giờ nếu nó là công cụ chính?”.

Triết lý xuyên suốt là AI-native — từ nghiên cứu thị trường, viết PRD, xây design system đến dựng UI và landing page, tất cả đều chạy trong môi trường AI.

Những điểm cần nhớ:

• AI-native workflow xem AI là công cụ chính, không phải “đồ chơi bên cạnh”.
• Thử thách 1 giờ đặt trọng tâm vào khả năng và giới hạn thực tế của AI trong từng vai trò.
• Mục tiêu là prototype “đủ tốt để tiến bước tiếp”, không phải pixel-perfect.

---

Deep research cho ý tưởng app Clippy được thực hiện thế nào?

Bước đầu tiên — và dễ bị bỏ qua nhất — là dùng AI để gom toàn bộ thông tin nền về thị trường, tính năng, đối thủ trước khi đụng đến bất kỳ pixel nào. Bỏ qua bước này, UI bạn tạo ra sẽ “trôi nổi”, không bám vào nhu cầu thật hay bối cảnh sử dụng.

Tác giả chọn ý tưởng app quản lý clipboard lấy cảm hứng từ một app trả phí nổi tiếng. Vấn đề đơn giản: app gốc rất tốt nhưng nhiều tính năng bị khóa sau paywall, nên nảy ra ý định tự làm một bản — có sync đa thiết bị, lưu lịch sử copy lâu dài, highlight đoạn quan trọng.

Cách dùng AI để làm deep research ở đây khá thú vị: không đọc kỹ từng dòng, mà để AI thu thập, tóm tắt thành tài liệu Markdown rồi dùng nó như “xương sống thông tin” cho mọi bước sau. Tài liệu này vừa làm nền cho PRD, vừa là context để Pencil “hiểu” app thay vì chỉ vẽ giao diện.

Deep research trong trường hợp này hoạt động rất giống bước nghiên cứu của team sản phẩm thật: từ insight thị trường → list tính năng → định nghĩa trải nghiệm cơ bản.

Deep research nên bao gồm gì:

• Bối cảnh thị trường: người dùng hiện dùng gì để quản lý clipboard, app nào đang nổi.
• Danh sách tính năng cốt lõi: lịch sử copy, pin, search, sync, render code snippet, ảnh, link.
• Vấn đề với giải pháp hiện tại: giới hạn tính năng, paywall, trải nghiệm rườm rà.

---

Mood board và reference hình ảnh ảnh hưởng ra sao tới AI design?

Mood board là bảng tập hợp hình ảnh, màu sắc, phong cách — dùng để “đóng khung” cảm xúc và ngôn ngữ thị giác trước khi vẽ UI. Với AI design, bước này còn quan trọng hơn bình thường: thiếu reference, AI gần như luôn quay về những layout và style rất cơ bản.

Tác giả chủ động dùng Pinterest, Dribbble và 21st.dev để sưu tầm kiểu vẽ sketch, hand-drawn, gần giống Notion — vì hành vi “clipping” rất hợp với cảm giác ghi chú tay, dán note. Nhưng anh cũng sớm nhận ra giới hạn: một số chi tiết đẹp trong reference như viền bo tròn bất quy tắc sẽ rất khó triển khai responsive trong SwiftUI.

Palette màu cũng không bắt đầu từ công cụ random. Tác giả xuất phát từ “hình ảnh mental” của chữ Clippy: giấy ghi chú, clipboard, kẹp giấy → vàng đậm, đen, xám. Anh thậm chí hỏi thẳng khán giả: “Khi nghĩ đến hành động copy, bạn nghĩ đến màu gì?” — rồi từ đó chốt palette xám-vàng.

Mood board không chỉ là board hình đẹp. Nó là cầu nối giữa cảm xúc, khả năng triển khai kỹ thuật và brand của sản phẩm.

Cách làm mood board cho AI:

1. Tìm reference trên Pinterest/Dribbble — Tập trung vào app cùng loại (clipboard, note, productivity) và style mong muốn.
2. Chọn 3–5 hình “đinh” — Đây là những hình bạn thật sự muốn AI noi theo về layout, màu hoặc style.
3. Đưa hình kèm mô tả rõ cho AI — Ví dụ: “Dùng style sketch giống hình này, nhưng tối giản để dễ code với SwiftUI”.

---

Pencil AI có thực sự đủ sức thay thế Figma không?

Pencil là công cụ thiết kế AI-native, được xây để thay thế vai trò Figma trong một workflow mà AI là trung tâm. Nó kết nối với Claude Code qua MCP (Model Context Protocol), cho phép AI không chỉ vẽ component riêng lẻ mà còn đặt, sắp xếp và sửa layout trực tiếp trên canvas.

Phần thú vị nhất là khả năng multi-agent: bạn không nói chuyện với một bot, mà với nhiều agent chạy song song — mỗi agent xử lý một màn hình hay một phần việc khác nhau. Ví dụ cụ thể từ thử nghiệm:

• Agent A tập trung sửa Search View.
• Agent B lo chỉnh lại Pinned View và vấn đề căn lề thanh nhấn bên trái.
• Agent C trong khi đó dựng mood board cho marketing page.

Cảm giác giống như quản lý một team designer junior: mỗi người xử lý một task, bạn là người tổng hợp và review.

Nhưng Pencil vấp ở đâu?

Tác giả khá thẳng thắn về nhược điểm. Nhiều agent chạy cùng lúc dễ sinh visual bug trên canvas. Agent đôi khi hiểu sai yêu cầu và phải khởi động lại task. Giao diện quản lý nhiều agent chưa thân thiện, dễ lạc mất trạng thái.

Kết luận hợp lý: Pencil rất tốt ở giai đoạn prototype, nhưng đừng trông chờ nó xuất ra design production-ready chỉ trong một shot. Tác giả cũng dán nguyên PRD vào Pencil rồi bảo nó “tạo luôn design system và các màn hình chính” — với giới hạn 1 giờ, đây là trade-off hợp lý giữa chất lượng và tốc độ.

---

PRD và design system trong workflow AI-native quan trọng thế nào?

PRD (Product Requirements Document) mô tả đầy đủ màn hình, luồng và tính năng: clip list, pin, search, navigation bar, cách render code snippet, hình, link. Với AI, PRD là context gốc để nó hiểu mình đang thiết kế cái gì, cho ai và theo tiêu chí nào. Không có PRD, AI sẽ đoán — và thường đoán theo hướng generic nhất.

Tác giả dùng Gemini để từ kết quả deep research và hình AI tạo mà dựng bản PRD đầu tiên. Tài liệu này được dùng cho cả Pencil lẫn các bước tiếp để giữ nhất quán giữa UI, UX và tính năng thực tế.

Vấn đề xuất hiện ngay ở vòng đầu: design system AI tạo ra khá rời rạc.

• Tab ở Search View thì bo tròn, ở màn khác thì vuông.
• Thanh nhấn bên trái cho content được pin có bo góc khác nhau giữa các màn.

Đây là ví dụ điển hình của “AI hiểu tính năng nhưng chưa hiểu hệ thống”: nó biết cần tab, cần highlight, nhưng không tự duy trì tính nhất quán nếu bạn không ép nó làm vậy.

Cách yêu cầu AI tự nâng cấp design system:

Tác giả giải quyết bằng prompt trực diện: bảo AI tự đi đọc về color theory và chuẩn iOS mới nhất, rồi quay lại thiết kế lại design system. Đây là mẹo đáng học — không chỉ nói “cải thiện cho đẹp hơn”, mà chỉ định nguồn tri thức cụ thể: “Dựa trên color theory” + “theo best practice iOS hiện nay”.

Anh cũng yêu cầu hiển thị design token màu bằng ô màu trực quan thay vì mã hex — vừa dễ nhìn, vừa giúp người khác đọc file hiểu nhanh hơn.

---

Làm marketing page bằng AI và 21st.dev khác gì template mặc định?

Marketing page là nơi người dùng tiếp xúc đầu tiên với sản phẩm. Nếu nó trông “giống mọi landing page khác”, bạn đã mất điểm ngay từ giây đầu.

Tác giả dùng 21st.dev như một thư viện web UI chất lượng cao, để AI có reference khi dựng landing cho Clippy. Kết quả thực tế rõ ràng hơn template mặc định: layout gãy khúc đẹp hơn, component tinh chỉnh tốt hơn, có thêm hiệu ứng blur làm nổi bật nội dung chính.

Cho AI xem component đẹp trên 21st.dev giống như cho junior designer xem Dribbble tốt — nó lập tức kéo mặt bằng chất lượng lên một nấc.

Làm song song app UI và marketing page ra sao?

Đây là nước đi khá thú vị:

• Một chat ChatGPT lo deep research riêng cho marketing: lợi ích, tagline, thông điệp.
• Một agent trong Pencil lo mood board cho web.
• Các agent khác vẫn tiếp tục sửa UI mobile.

Nhờ chạy song song, trong 1 giờ, không chỉ app UI mà cả marketing page cũng đạt mức có thể dùng làm bản đầu cho product launch.

---

Làm sao vượt qua “căn bệnh thiết kế generic” của AI?

Khi nhìn vào thiết kế mà Pencil và Claude Code tạo ra, tác giả thẳng thắn nhận xét: đây là những thứ “bạn có thể thấy trong mọi app”. Card na ná nhau, thanh chia nhỏ, nút bo tròn kiểu default.

Anh còn chỉ ra một “dấu vân tay” rất đặc trưng của code AI: thanh bar nhỏ làm vạch ngăn xuất hiện ở khắp nơi. Ví nó là “phiên bản mới của dấu gạch ngang dài” — chỉ cần thấy pattern đó lặp lại là đoán được code do AI generate.

Câu nói quan trọng nhất trong phần này: “Nếu bạn chỉ bảo nó ‘làm giúp tôi một giao diện’, nó sẽ luôn rơi vào mức basic nhất của default UI.”

Ba chiến lược cụ thể để thoát khỏi “generic”:

1. Đưa hình reference thật, không chỉ mô tả bằng chữ — Pinterest, Dribbble: chọn hình cụ thể, đính kèm cho AI, bảo “lấy style này”.

2. Chọn một ngôn ngữ thiết kế khác biệt và nhắc đi nhắc lại — Ở đây là “sketch style không quá phổ biến, giống hình vẽ tay của Notion, nhưng phải code được bằng SwiftUI”.

3. Tham chiếu đến component library chất lượng như 21st.dev — Bảo AI “dựa trên phong cách component ở đây để dựng layout” và mặt bằng chất lượng tăng rõ rệt.

Ngoài ra, khi dùng Gemini tạo hình UI, kết quả đầu tiên thường lộn xộn. Tác giả phải feedback: “giảm yếu tố sketch, làm hiện đại hơn, sạch hơn” trước khi ra được ảnh có thể dùng thật. Đừng chấp nhận kết quả đầu tiên.

---

Sau 1 giờ, kết quả thực tế cho thấy điều gì về “AI-native designer”?

1 giờ có thể đi xa tới đâu?

Sau 1 giờ, sản phẩm đạt được bao gồm:

• Bộ UI chính cho app Clippy: danh sách clip, pin, search, interaction copy, navigation bar.
• Bản design system ban đầu: màu, typography, component cơ bản.
• Mood board cho style sketch.
• Marketing landing page với hiệu ứng blur và layout khá ấn tượng.

Đánh giá của tác giả rất thành thật: “Gần hoàn chỉnh nhưng chưa đủ để gọi là xong.” Lỗi còn lại chủ yếu ở chi tiết: màu không nhất quán, căn chỉnh thanh nhấn pin, cách render code snippet. Nhưng nếu so với việc một engineer không biết design phải tự mò Figma từ đầu, thì mức này đã là nhảy vọt thật sự.

Điểm tích cực: chỉ trong 1 giờ đã có hướng đi rõ ràng cho vòng iterate tiếp theo — thử dark mode, tinh chỉnh palette, tăng độ đồng nhất của sketch style.

AI-native designer có thể thay thế designer thật không?

Câu trả lời ngắn: không. So với designer chuyên nghiệp, thiết kế AI vẫn thiếu tinh chỉnh về màu, khoảng trắng, nhịp visual. Nhưng so với việc tự làm từ con số 0, AI giúp bạn đi xa hơn nhiều — nhất là với vai trò solo founder hay engineer.

AI design tool hiện tại không nhằm thay thế designer. Nó hạ thấp rào cản để người không phải designer vẫn có thể bắt đầu và iterate.

---

Workflow AI design 5 bước: áp dụng thế nào cho dự án của bạn?

Deep research → Mood board → PRD → Design system → Iteration màn hình — đây là chuỗi cho kết quả tốt nhất trong thử nghiệm này. Tác giả phải làm nhiều bước song song vì áp lực thời gian, nhưng thứ tự logic vẫn quan trọng.

Điểm mấu chốt: ở mỗi bước, AI không làm việc “trong chân không” — luôn có context từ step trước đính kèm. Khi làm design system trong Pencil, tác giả pass luôn PRD đầy đủ cho AI. Kết quả khác hẳn so với việc chỉ nói “vẽ UI cho tôi”.

Nhiều người than “AI thiết kế dở” chỉ vì họ nhảy thẳng vào bảo “vẽ UI cho app todo” mà không đi đủ chuỗi 5 bước này.

Tổ chức multi-agent sao cho hiệu quả:

Multi-agent trong Pencil cho kết quả ấn tượng về tốc độ, nhưng chỉ khi bạn:

• Chia task rõ: mỗi agent một màn, một phần, không chồng chéo.
• Review định kỳ: liên tục mở lại canvas tổng để check inconsistency.
• Đóng vai “nhạc trưởng”: nếu không, design system sẽ vỡ vụn rất nhanh.

Một nguyên tắc quan trọng: iterate trong design tool trước, rồi mới chuyển sang code. Sửa trong Pencil hay Figma rẻ và nhanh hơn nhiều so với sửa trực tiếp trong Xcode hay dự án thật.

Checklist 5 bước:

1. Deep research bằng AI — Gom thông tin về thị trường, đối thủ, tính năng. Xuất thành file Markdown làm tài liệu gốc.
2. Dựng mood board + màu sắc — Tìm reference trên Pinterest, Dribbble, chọn style chính và palette theo brand.
3. Viết PRD chi tiết — Liệt kê màn hình, luồng, state, cách render dữ liệu (text, code, image, link).
4. Sinh design system trong AI tool — Dùng PRD + reference, yêu cầu AI dựng bộ màu, typography, button, card, tab nhất quán.
5. Iterate màn hình với multi-agent — Mỗi agent phụ trách 1–2 màn, bạn review và yêu cầu sửa cho khớp design system.

---

Nên bắt đầu từ đâu? Lộ trình hành động trong 30 ngày

Lộ trình này dành cho solo founder, dev hoặc kỹ sư muốn thử AI-native design cho dự án cá nhân. Mỗi tuần chỉ cần 3–5 buổi, mỗi buổi 1–2 giờ.

Tuần 1 – Làm quen AI design & research

• Cài và làm quen với Claude/Gemini/ChatGPT, thử deep research cho một app bạn đang nghĩ tới.
• Tạo tài liệu Markdown tóm tắt thị trường, đối thủ, tính năng cốt lõi.

Tuần 2 – Mood board và PRD

• Sưu tầm 10–20 hình reference trên Pinterest, Dribbble, 21st.dev cho app của bạn.
• Nhờ AI giúp viết bản PRD đầu tiên, iterate 1–2 vòng cho rõ ràng.

Tuần 3 – Design system và UI cơ bản

• Dùng Pencil hoặc Figma + AI plugin để sinh design system từ PRD.
• Tạo ít nhất 3 màn hình chính (home, detail, settings/search), refine 2–3 vòng.

Tuần 4 – Marketing page và chuẩn bị handoff

• Dùng AI + 21st.dev để dựng landing page cho sản phẩm.
• Chuẩn hóa lại file: component, màu, token trước khi đưa sang code (SwiftUI, React…).

---

Hệ thống lại & bước tiếp theo

Vấn đề / Câu hỏi	Việc bạn nên làm ngay
Không biết bắt đầu thiết kế app từ đâu nếu chỉ có ý tưởng	Dùng AI làm deep research, xuất thành file Markdown làm nền cho mọi bước sau
UI AI tạo ra trông rất generic và giống mọi app khác	Chuẩn bị mood board từ Pinterest/Dribbble/21st.dev và đưa trực tiếp cho AI
Thiết kế bị lệch tông giữa các màn, thiếu nhất quán	Yêu cầu AI dựng design system và liên tục sửa theo chuẩn iOS/SwiftUI mới
Không đủ thời gian để vừa làm app UI, vừa làm landing page	Tận dụng multi-agent: tách riêng agent cho app, agent cho marketing page
Không phải designer, sợ không kiểm soát được AI tool	Bắt đầu với workflow 5 bước và chỉ cần học đủ để review, không cần pixel-perfect

AI-native design không phải phép màu. Nó chỉ là cách tổ chức lại công việc để AI trở thành đồng đội chính thức thay vì tiện ích bên lề. Thử nghiệm Clippy đã chứng minh điều đó: một kỹ sư không phải designer, với Claude Code, Pencil và Gemini, đã có prototype nghiêm túc sau đúng 1 giờ.

Điểm khác biệt lớn nhất giữa người dùng AI hiệu quả và phần còn lại là mức độ chuẩn bị context: tài liệu, reference, PRD, yêu cầu rõ ràng. Bạn càng cho AI “ăn” dữ liệu tốt, kết quả càng gần với tầm nhìn của bạn.

Nếu bạn đang ấp ủ một app mà chưa có designer, đây là thời điểm hợp lý để thử một sprint 1 giờ. Rất có thể bạn sẽ bất ngờ vì mình đi xa đến đâu chỉ trong một buổi tối.

---

Câu hỏi thường gặp

Q: Tôi không biết gì về thiết kế, có nên học Figma trước khi dùng Pencil và AI không?

A: Với workflow trong bài, bạn không bắt buộc phải giỏi Figma. AI xử lý phần lớn thao tác thiết kế, còn bạn tập trung vào việc mô tả rõ ý tưởng, chuẩn bị PRD và reference. Hiểu một số khái niệm cơ bản như frame, component, auto layout sẽ giúp bạn review và chỉnh sửa kết quả tốt hơn, nhưng không phải điều kiện tiên quyết.

Q: Vì sao AI cứ tạo ra thiết kế nhìn rất “na ná nhau”?

A: Thiếu context và reference, AI sẽ quay về các pattern UI phổ biến nhất mà nó học được — và kết quả là cảm giác generic, thiếu cá tính. Cách khắc phục là cung cấp mood board, ví dụ cụ thể và chỉ định rõ style, màu sắc, reference cho từng nhiệm vụ.

Q: Có thể dùng workflow này với web app thay vì app iOS/SwiftUI không?

A: Hoàn toàn có thể. Các bước deep research → mood board → PRD → design system → iterating màn hình áp dụng tốt cho web app. Bạn chỉ cần thay tiêu chí “tuân thủ SwiftUI” bằng “tuân thủ best practice của React/Vue/Tailwind” trong prompt.

Q: Multi-agent trong Pencil có cần thiết không nếu tôi chỉ làm app nhỏ?

A: Nếu app chỉ có vài màn hình, một agent vẫn ổn. Multi-agent phát huy tác dụng khi số lượng màn tăng hoặc khi bạn muốn làm song song app UI và marketing page. Điều quan trọng là bạn phải sẵn sàng điều phối và review kết quả liên tục.

Q: Khi nào nên chuyển từ thiết kế trong AI sang code thật?

A: Chuyển sang code khi design system đã ổn định, 2–3 màn hình chính đã qua vài vòng iterate, và các pattern UI chính không còn thay đổi nhiều. Làm vậy tránh được việc sửa tới sửa lui trong code — vốn tốn thời gian hơn nhiều so với sửa trong Pencil hay Figma.

---

Nguồn tham khảo thêm:

• Claude & MCP: https://docs.anthropic.com/en/docs
• SwiftUI Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines
• Design token concept (W3C draft): https://design-tokens.github.io/community-group/format/
• 21st.dev – Web UI reference: https://21st.dev/