AI Cho Designer & Thiết KếQuyển Thượng (上) · 6 tình huống hàng ngày
Khôi phụ trách thiết kế từ banner TMĐT, infographic y khoa, giao diện Landing Page cho tới bao bì hộp Thực phẩm bảo vệ sức khỏe (TPBVSK) và POSM nhà thuốc.…
Mục lục · Quyển Thượng (上) · Căn bản & Hàng ngày
Đồng hành cùng Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX) & Daruma Xanh Genki Fami.
Chọn đúng công cụ AI trong 10 giây
Mỗi tình huống của Khôi đều kết thúc bằng việc lưu sản phẩm chuẩn vào Google Drive chung để cả phòng dùng lại:
Viết văn bản tự nhiên, dựng bảng/biểu đồ trực quan bằng Artifacts và dùng Cowork đọc hàng loạt file chứng từ/báo cáo.
NotebookLM: tra cứu quy chế/hồ sơ SP từ Drive 0% bịa đặt. Gemini Sheets/Docs/Nano Banana/Flow: xử lý bảng tính, ảnh & video.
Thư mục gốc GenkiFami_Drive / 11_ThietKe_BrandKit_Creative / gồm: 01_BrandKit_Logo_Font_Color/ (File gốc Logo SVG/PNG, bảng mã màu HEX/CMYK, file Font chữ và tài liệu BRAND_SYSTEM.md) · 02_UI_LandingPage_Stitch_Figma/ (Giao diện Landing Page, Mini-App tạo từ Google Stitch và file xuất Figma) · 03_Infographic_KeyVisual_Banner/ (Infographic cơ chế sản phẩm, Key Visual chiến dịch và bộ banner đa sàn) · 04_BaoBi_NhanPhu_POSM_NhaThuoc/ (File thiết kế vỏ hộp, nhãn phụ tiếng Việt, tờ hướng dẫn sử dụng và ấn phẩm quầy thuốc).
Đóng gói "Bộ Nhận Diện Thương Hiệu Số (BRAND_SYSTEM.md)" để nạp vào Claude Design, Google Stitch & Gemini
Rút ngắn từ "Mỗi lần dùng AI lại phải gõ lại màu, chỉnh lại font mất 45 phút" còn "5 phút tạo file BRAND_SYSTEM.md dùng xuyên suốt mọi dự án"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Nếu chỉ bảo AI "thiết kế theo tông xanh đỏ Nhật Bản", mỗi lần AI sẽ pha ra một màu khác nhau! Khôi đóng gói toàn bộ mã màu HEX, quy tắc Font chữ, tỷ lệ Logo SVG vào 1 file BRAND_SYSTEM.md là mọi công cụ AI đều tuân thủ răm rắp!
Chọn đúng công cụ & Lưu trữ Google Drive
Claude Design và Google Stitch đọc trực tiếp file cấu hình thiết kế dạng Markdown/CSS Tokens (`BRAND_SYSTEM.md` / `DESIGN.md`), giúp khóa cứng mã màu `#HEX`, hệ thống chữ (Typography scale), bo góc và vị trí đặt Logo Vector SVG.
Google Drive — Lưu thư mục `01_BrandKit_Logo_Font_Color/` làm nguồn gốc duy nhất cho toàn bộ Designer và Agency.. Lưu tại 01_BrandKit_Logo_Font_Color/BRAND_SYSTEM.md và chia sẻ quyền Viewer cho cả đội Marketing, Content và Agency.
Nhắc nhở từ Daruma Xanh: Lưu tại 01_BrandKit_Logo_Font_Color/BRAND_SYSTEM.md và chia sẻ quyền Viewer cho cả đội Marketing, Content và Agency.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Mở cuốn Brand Guideline PDF hiện tại của công ty cùng các file Logo SVG và bộ Font chữ trong thư mục
01_BrandKit_Logo_Font_Color/. - B2
Chạy Prompt bên dưới trên Claude để trích xuất toàn bộ quy chuẩn thị giác thành file
BRAND_SYSTEM.md(kèm biến CSS `root` và quy tắc cho Google Stitch / Claude Design). - B3
Ghim file
BRAND_SYSTEM.mdvào **Claude Project / Skill**, nạp vào **Google Stitch Design System** và **Sổ tay Gemini Notebook** của phòng Thiết kế.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Muốn AI thiết kế chuẩn nhận diện: đừng mô tả màu sắc bằng tính từ ("xanh đậm, đỏ tươi"), hãy đưa bảng biến số `#HEX`, tên Font và file `BRAND_SYSTEM.md`.
Cách hỏi sai: "Hãy thiết kế cho tôi theo phong cách thương hiệu Genki Fami nhé."
Cách làm đúng: Nạp file BRAND_SYSTEM.md chứa đủ mã HEX, biến CSS, phân cấp Font và quy tắc bảo toàn Logo/Daruma gốc vào Project.
Hậu quả: AI không biết mã màu chính xác hay font chữ của công ty, tự chọn màu xanh dương chói và font chữ mặc định xa lạ.
Kết quả chuẩn: 100% bảng biểu, giao diện web, infographic do AI tạo ra đều mang đúng màu sắc, font chữ và hơi thở thương hiệu ngay từ bản đầu tiên.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu tại 01_BrandKit_Logo_Font_Color/BRAND_SYSTEM.md và chia sẻ quyền Viewer cho cả đội Marketing, Content và Agency.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Luôn lưu một bản Logo dạng mã .svg gọn nhẹ trong thư mục Brand Kit để Claude Design có thể nhúng trực tiếp vào các thiết kế HTML/SVG sắc nét tuyệt đối ở mọi kích thước.
Trong BRAND_SYSTEM.md luôn ghi song song mã #HEX (cho màn hình/UI) và thông số C-M-Y-K (cho bao bì, tờ rơi nhà thuốc) để không bị xỉn màu khi in.
Luôn cài câu lệnh cứng: "Chỉ tạo khoảng trống bố cục hoặc nhúng đúng file ảnh gốc của Logo và Daruma, không tự sinh lại bằng AI tạo ảnh".
Lưu tại 01_BrandKit_Logo_Font_Color/BRAND_SYSTEM.md và chia sẻ quyền Viewer cho cả đội Marketing, Content và Agency.
Chính xác! File cấu hình thiết kế dạng văn bản có cấu trúc giúp AI áp dụng chính xác tuyệt đối các Design Tokens.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành
Dùng Google Stitch biến bản tóm tắt chiến dịch thành giao diện Landing Page & Mini-App chuẩn nhận diện rồi xuất thẳng sang Figma
Rút ngắn từ "2 ngày dựng khung & dàn layout trên Figma" còn "20 phút tạo UI trên Google Stitch & xuất qua Figma"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Mỗi khi Marketing cần gấp giao diện Landing Page ra mắt sản phẩm mới hoặc trang tra cứu liệu trình, Khôi đưa brief + DESIGN.md vào Google Stitch là có ngay 3 phương án UI hoàn chỉnh và xuất thẳng sang Figma có đủ layer để chỉnh sửa!
Chọn đúng công cụ & Lưu trữ Google Drive
Google Stitch chuyên biệt cho thiết kế giao diện Web/App bằng ngôn ngữ tự nhiên hoặc ảnh phác thảo, hỗ trợ khóa bảng màu/font qua Design System (`DESIGN.md`) và xuất trực tiếp sang Figma với đầy đủ lớp (layers), Auto Layout và chữ chỉnh sửa được.
Claude Design (Artifacts HTML/Tailwind) — Tạo bản mẫu có hiệu ứng tương tác (interactive prototype) để thử nghiệm ngay trên trình duyệt.. Lưu file Figma và bản chụp màn hình UI tại 02_UI_LandingPage_Stitch_Figma/[MaSP]_LandingUI_v1 trên Google Drive.
Nhắc nhở từ Daruma Xanh: Lưu file Figma và bản chụp màn hình UI tại 02_UI_LandingPage_Stitch_Figma/[MaSP]_LandingUI_v1 trên Google Drive.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Chuẩn bị nội dung các khối của Landing Page (đã được Pháp chế duyệt claim) và thông số màu sắc/font trong
BRAND_SYSTEM.md. - B2
Mở **Google Stitch**, thiết lập bảng màu thương hiệu (`#22365A`, `#C83E2B`, `#1D6A64`, `#FFFDF8`) cùng cặp font chữ, sau đó dán Prompt thiết kế giao diện đa màn hình (Desktop & Mobile).
- B3
Chọn phương án bố cục ưng ý nhất trên canvas của Google Stitch, bấm **Export to Figma** (hoặc xuất HTML/CSS) để gắn ảnh chụp hộp sản phẩm thật (Packshot) và Logo chính thức rồi lưu vào
02_UI_LandingPage_Stitch_Figma/.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Quy trình UI tốc độ cao: Google Stitch tạo nhanh 3 phương án bố cục chuẩn màu/font → Xuất sang Figma → Ghép Packshot sản phẩm thật & Logo chuẩn.
Cách hỏi sai: "Thiết kế trang web bán thực phẩm chức năng."
Cách làm đúng: Khai báo rõ mã màu HEX, font chữ, đối tượng người đọc (cần chữ to rõ) và đủ 7 khối chuẩn ngành TPBVSK trên Google Stitch.
Hậu quả: Giao diện trông như web bán hàng giá rẻ, màu sắc lòe loẹt, chữ nhỏ khó đọc và thiếu khu vực hiển thị giấy phép công bố cùng khuyến cáo bắt buộc.
Kết quả chuẩn: Giao diện sang trọng, chuẩn y khoa Nhật Bản, khi xuất sang Figma đã chia sẵn Auto Layout gọn gàng để Designer tinh chỉnh trong 15 phút.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu file Figma và bản chụp màn hình UI tại 02_UI_LandingPage_Stitch_Figma/[MaSP]_LandingUI_v1 trên Google Drive.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Nếu bạn đã vẽ nhanh bố cục trên giấy hoặc iPad, hãy tải ảnh phác thảo đó lên Google Stitch kèm `BRAND_SYSTEM.md` — Stitch sẽ biến nét vẽ tay thành giao diện UI hoàn chỉnh đúng màu thương hiệu.
85% khách hàng xem thông tin sức khỏe qua điện thoại (Zalo/Facebook): luôn yêu cầu Google Stitch tối ưu bản Mobile 390px với nút bấm cao tối thiểu 48px trước.
Trên Stitch chỉ để khung giữ chỗ (Placeholder) cho hộp sản phẩm, sau khi sang Figma mới đặt ảnh chụp hộp thật tách nền PNG vào để nhãn hộp chính xác 100%.
Lưu file Figma và bản chụp màn hình UI tại 02_UI_LandingPage_Stitch_Figma/[MaSP]_LandingUI_v1 trên Google Drive.
Chính xác! Sự kết hợp này giúp rút ngắn 80% thời gian dựng khung mà vẫn giữ trọn quyền kiểm soát chi tiết trên Figma.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành
Dùng Claude Design (Artifacts SVG & HTML/CSS) thiết kế Infographic Y khoa, Sơ đồ Cơ chế & Bảng So sánh sắc nét chuẩn Vector
Rút ngắn từ "180 phút vẽ tay từng hộp chữ & mũi tên trên Illustrator" còn "10 phút có Infographic SVG/HTML chuẩn Vector đúng font"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Nếu bảo các AI vẽ ảnh thông thường tạo Infographic có chữ tiếng Việt và con số hàm lượng mg, chữ sẽ bị lỗi dấu hoặc sai số ngay! Khôi dùng Claude Design xuất thẳng file Vector SVG & HTML là chữ tiếng Việt sắc như in, đúng font 100%!
Chọn đúng công cụ & Lưu trữ Google Drive
Claude Design viết trực tiếp mã đồ họa Vector `
Gemini Notebook — Rút trích chính xác các con số nghiên cứu và hàm lượng từ Hồ sơ công bố/PubMed trước khi đưa vào Claude Design.. Lưu cả file mã .svg/.html và bản xuất .png tại 03_Infographic_KeyVisual_Banner/[MaSP]_Infographic_CoChe trên Google Drive.
Nhắc nhở từ Daruma Xanh: Lưu cả file mã .svg/.html và bản xuất .png tại 03_Infographic_KeyVisual_Banner/[MaSP]_Infographic_CoChe trên Google Drive.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Lấy số liệu thành phần, hàm lượng và 3 bước cơ chế tác dụng đã kiểm chứng từ Sổ tay **Gemini Notebook** của phòng R&D/Pháp chế.
- B2
Chạy Prompt trên **Claude (bật Artifacts)** kèm thông số màu/font từ `BRAND_SYSTEM.md` để tạo Infographic định dạng Vector SVG hoặc thẻ HTML chuẩn kích thước mạng xã hội (1080×1350px hoặc A4).
- B3
Tải file `.svg` về mở trực tiếp trong **Adobe Illustrator / Figma** để gắn thêm Logo/Daruma gốc và xuất ảnh PNG 300 DPI lưu vào
03_Infographic_KeyVisual_Banner/.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Phân vai công cụ thông minh: Ảnh nền cảm xúc dùng AI tạo ảnh; còn Infographic có chữ tiếng Việt, con số mg và sơ đồ khoa học thì dùng Claude Design xuất SVG/HTML.
Cách hỏi sai: "Dùng công cụ tạo ảnh raster thông thường và gõ lệnh "Hãy vẽ infographic có đủ bảng thành phần tiếng Việt dài 200 chữ"."
Cách làm đúng: Lấy số liệu chuẩn từ Gemini Notebook và dùng Claude Design dựng bố cục Vector SVG/HTML nhúng font tiếng Việt chuẩn.
Hậu quả: Chữ tiếng Việt bị biến dạng không đọc được, các con số hàm lượng mg bị nhảy sai gây nguy hiểm pháp lý.
Kết quả chuẩn: Chữ sắc nét tuyệt đối, đúng 100% mã màu và mở được từng lớp vector trong Illustrator/Figma để tinh chỉnh.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu cả file mã .svg/.html và bản xuất .png tại 03_Infographic_KeyVisual_Banner/[MaSP]_Infographic_CoChe trên Google Drive.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Khi tải file .svg từ Claude Artifacts về máy, bạn chỉ cần kéo thả vào Figma hoặc Adobe Illustrator là toàn bộ các ô chữ, mũi tên, vòng tròn đều tách sẵn thành từng layer vector độc lập!
Nhờ Claude Design: "Hãy vẽ 6 icon SVG nét mảnh 2px bo tròn màu #22365A biểu thị: Giấc ngủ ngon, Bảo vệ gan, Tuần hoàn máu, Đề kháng, Hấp thu nhanh, Chuẩn Nhật Bản" để dùng chung cho toàn bộ ấn phẩm.
Dặn Claude Design luôn đảm bảo tỷ lệ tương phản giữa chữ và nền đạt chuẩn `WCAG AA (>= 4.5:1)` để người lớn tuổi đọc trên điện thoại không bị mỏi mắt.
Lưu cả file mã .svg/.html và bản xuất .png tại 03_Infographic_KeyVisual_Banner/[MaSP]_Infographic_CoChe trên Google Drive.
Hoàn toàn chính xác! Đây là bí quyết giúp Designer làm Infographic nhanh gấp 10 lần mà chất lượng chuẩn in ấn.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành
Quy trình "Tạo Nền Sạch Bằng AI + Ghép Packshot, Logo & Daruma Gốc" để giữ 100% nhận diện thương hiệu trên Key Visual
Rút ngắn từ "2 giờ loay hoay sửa lỗi chữ nhòe trên vỏ hộp do AI vẽ lại" còn "12 phút có Key Visual sạch đẹp, đúng 100% hộp thật & Daruma gốc"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Đừng bao giờ bắt AI tự vẽ lại hộp sản phẩm Genki Fami hay vẽ lại linh vật Daruma — nó sẽ làm biến dạng nhận diện ngay! Hãy để AI vẽ bối cảnh ánh sáng tuyệt đẹp có chừa khoảng trống, rồi ghép Packshot thật và Daruma gốc vào!
Chọn đúng công cụ & Lưu trữ Google Drive
Tách bạch 2 lớp: AI phát huy thế mạnh tạo bối cảnh (bàn gỗ Nhật Bản, ánh nắng sớm, lá trà xanh, giọt nước tinh khiết) với vùng trống đã tính toán trước (Negative Space); con người ghép lớp Packshot sản phẩm thật, Logo SVG và Daruma gốc lên trên.
Claude Design — Viết script Python (Pillow) tự động ghép hàng loạt Logo và Daruma gốc vào đúng tọa độ chuẩn trên 20 tấm ảnh nền.. Lưu cả file nền sạch (Clean Background) và file thiết kế hoàn chỉnh vào 03_Infographic_KeyVisual_Banner/ trên Google Drive.
Nhắc nhở từ Daruma Xanh: Lưu cả file nền sạch (Clean Background) và file thiết kế hoàn chỉnh vào 03_Infographic_KeyVisual_Banner/ trên Google Drive.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Xác định bố cục Key Visual theo quy tắc 1/3 hoặc trung tâm: chỉ định rõ vùng nào để trống đặt chữ (Top 35% hoặc Left 40%) và vùng mặt phẳng nào để đặt hộp sản phẩm thật.
- B2
Chạy Prompt tạo "Ảnh nền sạch không chữ, không sản phẩm giả (Clean Stage Background)" trên Gemini Image.
- B3
Đặt file PNG tách nền của Hộp sản phẩm thật (Packshot), Logo chính thức và Linh vật Daruma gốc từ thư mục
01_BrandKit_Logo_Font_Color/lên đúng vị trí bệ đỡ ánh sáng.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Nguyên tắc vàng bảo vệ nhận diện thương hiệu: AI vẽ sân khấu và ánh sáng — Sản phẩm, Logo, Linh vật Daruma và Chữ bắt buộc dùng file gốc chính hãng.
Cách hỏi sai: "Hãy vẽ hộp sản phẩm Genki Fami cùng linh vật Daruma và dòng chữ khuyến mãi 20% trên bàn gỗ."
Cách làm đúng: Yêu cầu AI vẽ phông nền sân khấu sạch (có mặt bàn phẳng, hướng ánh sáng rõ và vùng trống 40% phía trên), sau đó ghép Packshot thật, Daruma gốc và gõ chữ bằng Font thương hiệu.
Hậu quả: Hộp sản phẩm bị sai tỷ lệ, chữ trên nhãn biến thành ký tự lạ, linh vật Daruma mất nét nhận diện gốc của công ty.
Kết quả chuẩn: Bức ảnh vừa có chiều sâu nghệ thuật studio, vừa giữ nguyên vẹn 100% hộp sản phẩm thật, Logo và Daruma chuẩn nhận diện.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu cả file nền sạch (Clean Background) và file thiết kế hoàn chỉnh vào 03_Infographic_KeyVisual_Banner/ trên Google Drive.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Trong Prompt tạo nền, luôn quy định rõ hướng nắng (ví dụ: "ánh sáng chiếu từ góc trên bên trái 45 độ") để khi đặt ảnh chụp hộp sản phẩm vào và tạo bóng đổ (Drop shadow) góc dưới bên phải sẽ trông thật như chụp chung một lần.
Tạo sẵn 20 phông nền sạch theo 4 mùa (Xuân hoa anh đào nhẹ, Hạ lá xanh mát, Thu lá phong ấm, Đông phòng trà gỗ) lưu trên Google Drive để cả năm dùng lại cực nhanh.
Khi cần ghép linh vật Daruma gốc vào góc dưới bên phải cho hàng chục bức tranh minh họa, dùng ngay script Python của phòng để ghép đồng loạt trong 3 giây.
Lưu cả file nền sạch (Clean Background) và file thiết kế hoàn chỉnh vào 03_Infographic_KeyVisual_Banner/ trên Google Drive.
Chính xác! Tách lớp Nền (AI) và Lớp Nhận diện Gốc (File chuẩn) giúp tác phẩm vừa đẹp vừa chuẩn nhận diện 100%.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành
Dàn trang Nhãn phụ, Tờ hướng dẫn sử dụng (Insert Paper) & Vỏ hộp TPBVSK đúng chuẩn Nhận diện và Pháp chế ATTP
Rút ngắn từ "Sửa đi sửa lại 4 vòng giữa Thiết kế và Pháp chế" còn "25 phút có Bố cục Nhãn & Bao bì chuẩn thẩm mỹ lẫn pháp lý"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Thiết kế vỏ hộp hay nhãn phụ TPBVSK không chỉ cần đẹp mà còn phải đủ từng mục bắt buộc của Nghị định 43 & Nghị định 15, cỡ chữ tối thiểu đọc rõ, mã vạch chuẩn! Khôi phối hợp Gemini Notebook và Claude Design là không bao giờ phải in lại vỏ hộp!
Chọn đúng công cụ & Lưu trữ Google Drive
Gemini Notebook đối chiếu nội dung chữ với Hồ sơ công bố gốc và quy định ghi nhãn hàng hóa; Claude Design dựng bố cục dàn trang (Typography Grid & Packaging Layout) chuẩn tỷ lệ kích thước thực tế (mm) trước khi đưa vào Illustrator.
Adobe Illustrator — Hoàn thiện file khuôn bế (Die-cut) xuất in CMYK PDF/X-1a.. Lưu file dàn trang và file in chuẩn tại 04_BaoBi_NhanPhu_POSM_NhaThuoc/[MaSP]_Packaging_PrintReady trên Google Drive.
Nhắc nhở từ Daruma Xanh: Lưu file dàn trang và file in chuẩn tại 04_BaoBi_NhanPhu_POSM_NhaThuoc/[MaSP]_Packaging_PrintReady trên Google Drive.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Lấy bản nội dung nhãn đã được phòng Pháp chế kiểm duyệt trong Sổ tay **Gemini Notebook** (`02_SoTay_PhapChe_KhoaHoc_COA/`).
- B2
Chạy Prompt trên **Claude Design** kèm kích thước khuôn nhãn/vỏ hộp (chiều rộng × chiều cao tính bằng mm) để nhận bản thiết kế bố cục phân vùng tỷ lệ vàng và kiểm tra độ tương phản chữ.
- B3
Áp dụng bố cục đã duyệt lên file khuôn bế (Die-line) trên Illustrator, chạy bước rà soát 10 điểm trước khi xuất file in lưu vào
04_BaoBi_NhanPhu_POSM_NhaThuoc/.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Bao bì TPBVSK chuẩn Nhật Bản là sự kết hợp giữa bố cục lưới (Grid) khúc chiết, chữ thông số rõ ràng cho người lớn tuổi và tuân thủ 100% quy định ghi nhãn.
Cách hỏi sai: "Cho chữ thành phần và khuyến cáo nhỏ li ti màu xám nhạt để nhìn hộp cho sang."
Cách làm đúng: Dùng Claude Design chia lưới phân vùng theo mm, đặt bảng thành phần rõ nét và đóng khung câu khuyến cáo có độ tương phản cao.
Hậu quả: Vi phạm quy định về độ tương phản và kích thước chữ bắt buộc trên nhãn hàng hóa, khách hàng lớn tuổi không đọc được cách uống.
Kết quả chuẩn: Mẫu bao bì vừa toát lên vẻ chuẩn mực khoa học Nhật Bản, vừa vượt qua vòng duyệt của Pháp chế và Hậu kiểm ngay lần đầu.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu file dàn trang và file in chuẩn tại 04_BaoBi_NhanPhu_POSM_NhaThuoc/[MaSP]_Packaging_PrintReady trên Google Drive.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Trước khi duyệt file bao bì, hãy in đen trắng đúng kích thước thật (100% scale) trên giấy A4 và nhờ 1 người trên 50 tuổi đọc thử mục "Cách dùng" — nếu đọc trơn tru mới đạt chuẩn!
Khu vực đặt mã vạch EAN/JAN và mã QR truy xuất nguồn gốc luôn phải để nền trắng tinh (CMYK 0-0-0-0) có lề an toàn xung quanh để máy quét tại nhà thuốc đọc nhạy 100%.
Luôn lưu 2 phiên bản trên Google Drive: 1 file còn nguyên font chữ (`_Editable.ai`) và 1 file đã chuyển chữ thành đường nét (`_Outlined_Print.pdf`) gửi nhà in.
Lưu file dàn trang và file in chuẩn tại 04_BaoBi_NhanPhu_POSM_NhaThuoc/[MaSP]_Packaging_PrintReady trên Google Drive.
Chính xác! Sự minh bạch, rõ ràng trên bao bì vừa đúng luật vừa tạo dựng niềm tin y khoa với người tiêu dùng và nhà thuốc.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành
Chuyển thể (Resize & Adapt) 1 Key Visual gốc ra 12 kích thước đa kênh giữ nguyên tỷ lệ vàng của Logo, Font & Thông điệp
Rút ngắn từ "3 giờ căn chỉnh thủ công 12 kích thước khác nhau" còn "15 phút có Bảng Quy tắc Bố cục & CSS Grid 12 khổ chuẩn"
Chuyện của Khôi (Chuyên viên Thiết kế Thương hiệu & UI/UX): Làm xong 1 tấm Key Visual chính mới chỉ là 30% công việc; 70% thời gian còn lại của Designer bị ngốn vào việc kéo giãn ra 12 kích thước từ ảnh vuông Shopee, dọc TikTok 9:16, ngang Facebook đến Standee nhà thuốc!
Chọn đúng công cụ & Lưu trữ Google Drive
Claude Design tính toán chính xác tọa độ phân vùng (Layout Grid), cỡ chữ tương ứng và Vùng an toàn (Platform Safe Zones) cho cả 12 kích thước; kết hợp Figma Auto Layout giúp xuất đồng loạt mà không vỡ tỷ lệ.
Google Stitch — Nhanh chóng xem trước giao diện hiển thị trên các tỷ lệ màn hình khác nhau.. Lưu trọn bộ file xuất theo cấu trúc 03_Infographic_KeyVisual_Banner/[TenChienDich]/01_Digital_Sizes/ và 02_Print_POSM/.
Nhắc nhở từ Daruma Xanh: Lưu trọn bộ file xuất theo cấu trúc 03_Infographic_KeyVisual_Banner/[TenChienDich]/01_Digital_Sizes/ và 02_Print_POSM/.
Chuẩn thực hành Chibo Academy × Quy trình Google Drive nội bộ Genki Fami.
3 bước xử lý & lưu vào Google Drive
- B1
Xác định 5 thành phần cốt lõi của Key Visual gốc: (1) Logo thương hiệu, (2) Tiêu đề chính & Phụ đề, (3) Hình ảnh Hộp sản phẩm + Daruma, (4) Huy hiệu điểm mạnh/Giá, (5) Nút CTA & Dòng khuyến cáo bắt buộc.
- B2
Chạy Prompt trên **Claude Design** để tạo "Bản Đồ Chuyển Thể Bố Cục 12 Kích Thước Đa Kênh (Multi-Format Adaptation Matrix & HTML Preview)".
- B3
Áp dụng thông số tỷ lệ vào Figma/Canva và xuất trọn bộ 12 kích thước lưu theo thư mục chuẩn trong
03_Infographic_KeyVisual_Banner/.
Nguyên tắc cốt lõi & Đối chiếu Sai / Đúng
Nguyên tắc rút ra cho các tình huống tương tự
Resize chuyên nghiệp không phải là bóp méo bức ảnh, mà là tái sắp xếp 5 phần tử thương hiệu theo trục của từng khung hình và tôn trọng Vùng an toàn (Safe Zone) của từng nền tảng.
Cách hỏi sai: "Dùng một tấm ảnh vuông 1080x1080 đăng lên cả TikTok 9:16 lẫn làm Standee cao 1m6."
Cách làm đúng: Chia nhóm bố cục (Dọc – Vuông – Ngang – In ấn), khóa vùng Safe Zone của TikTok/Shopee và giữ tầm mắt 90–150cm trên Standee.
Hậu quả: Trên TikTok chữ bị nút bấm che khuất; trên Standee nhà thuốc thì sản phẩm tụt xuống sát mặt đất bị giỏ hàng che mất.
Kết quả chuẩn: Cả 12 điểm chạm từ màn hình điện thoại đến quầy thuốc đều đồng nhất nhận diện, sắc nét và thu hút tối đa.
Lưu file rời rạc ngoài Desktop hoặc để trôi trong nhóm chat Zalo
Lưu trọn bộ file xuất theo cấu trúc 03_Infographic_KeyVisual_Banner/[TenChienDich]/01_Digital_Sizes/ và 02_Print_POSM/.
Đúc kết từ tình huống thực tế phòng ban Genki Fami.
4 mẹo xử lý nhanh trong 30 giây
Luôn bật một lớp khung mờ (Overlay Mask) đánh dấu vùng chữ/nút của TikTok ở cạnh phải và đáy màn hình 1080×1920 trước khi xếp chữ và dòng khuyến cáo.
Nửa dưới của Standee (từ 0 đến 60cm sát đất) tại nhà thuốc thường bị che khuất bởi ghế ngồi hoặc thùng hàng — tuyệt đối không đặt tên sản phẩm hay ưu đãi chính ở vùng đáy này!
Luôn xuất file theo chuẩn [MaSP]_[TenChienDich]_[RongxCao].png (VD: GF01_MuaHe_1080x1920.png) để đội Marketing và TMĐT lấy đúng file trong 1 giây.
Lưu trọn bộ file xuất theo cấu trúc 03_Infographic_KeyVisual_Banner/[TenChienDich]/01_Digital_Sizes/ và 02_Print_POSM/.
Chính xác! Hiểu rõ bối cảnh hiển thị thực tế của từng kênh là đẳng cấp của một Designer thực chiến.
Máy ghép Prompt & Đóng dấu 7 ngày
Đóng dấu 7 ngày áp dụng (済)
Bấm ngày đã thực hành6 nguyên tắc bỏ túi cùng Khôi
- 01
Chuẩn hóa Brand Kit cho AI (Claude Design + Gemini Notebook): Đóng gói BRAND_SYSTEM.md (Mã HEX, Font, quy tắc Logo SVG).
- 02
Thiết kế UI Landing Page (Google Stitch + Figma): Tạo UI chuẩn màu/font từ brief rồi xuất thẳng layer sang Figma.
- 03
Thiết kế Infographic Y khoa (Claude Design (Artifacts SVG)): Xuất Vector SVG nhúng font tiếng Việt chuẩn, 0% lỗi dấu chữ.
- 04
Tạo Key Visual chuẩn nhận diện (Gemini Image + Ghép lớp gốc): AI tạo nền sân khấu sạch + Ghép Packshot thật, Logo & Daruma gốc.
- 05
Dàn trang Bao bì & Nhãn phụ (Gemini Notebook + Claude Design): Phân vùng theo mm, kiểm độ tương phản & chuẩn Nghị định ATTP.
- 06
Resize & Adapt 12 kích thước (Claude Design + Figma Auto Layout): Tái bố cục theo trục Dọc/Vuông/Ngang & khóa vùng Safe Zone.
Biên soạn cho Genki Fami dựa trên học liệu Chibo Academy & phong cách Genki Cẩm Nang. Lưu trữ đồng bộ qua Google Drive.