Ian Xiaohei Illustrations: Biến bài viết tiếng Trung thành minh họa hand-drawn b
Một Codex Skill giúp AI tự phân tích bài viết và vẽ minh họa 16:9 phong cách hand-drawn với nhân vật "Tiểu Hắc" không cần designer, không cần Figma.
Nguyễn Nhật Long
@nguyennhatlong1303
Bạn có bao giờ viết xong một bài blog dài, đọc lại thấy tường chữ dày đặc, rồi nghĩ: "Giá mà có vài cái hình minh họa cho nó dễ thở"? Rồi bạn mở Figma, ngồi 2 tiếng vẽ được một cái flowchart xấu ơi là xấu, cuối cùng lại xóa đi paste cái screenshot cho nhanh.
Mình vừa thấy một repo trên GitHub giải quyết đúng cái pain point này nhưng theo một cách khá bất ngờ.
Chuyện gì đang xảy ra?
Một developer tên Ian vừa open-source một project có tên ian-xiaohei-illustrations. Tính đến thời điểm hiện tại, repo đã có 1.6k stars và 146 forks con số không nhỏ cho một project mới chỉ có 6 commits.
Nhưng đây không phải một library hay framework thông thường. Đây là một Codex Skill tức là một bộ instruction set được thiết kế để "dạy" AI agent cách đọc hiểu bài viết tiếng Trung, tìm ra những điểm nhận thức quan trọng, rồi tự động generate ra minh họa hand-drawn cho từng đoạn.
Nhân vật chính trong mọi bức minh họa là "Tiểu Hắc" (小黑) một character đen thui, mắt chấm trắng, chân que, mặt vô cảm. Nghe mô tả thì buồn cười, nhưng nhìn output thì phải nói là ấn tượng.
Tại sao project này đáng chú ý?
Điều mình thấy hay nhất không phải là style vẽ mà là cách nó approach vấn đề minh họa.
Đa số chúng ta khi dùng AI generate hình, thường chỉ prompt kiểu: "Vẽ cho tôi một cái hình về teamwork" hay "Tạo illustration cho bài viết về microservices". Kết quả thường là những hình stock photo AI nhìn rất generic, chẳng liên quan gì đến nội dung cụ thể của bài.
Project này làm khác. Nó bắt AI phải:
- Đọc và phân tích bài viết trước tìm ra các "cognitive anchor" (điểm nhận thức then chốt)
- Chọn đúng một ý cho mỗi bức hình không nhồi nhét
- Phát minh ra một metaphor vật lý để diễn đạt ý đó
- Bắt Tiểu Hắc tham gia vào hành động chính không phải đứng trang trí
- Kiểm tra chất lượng theo một QA checklist cụ thể
Nói cách khác, nó không chỉ generate hình nó tư duy về editorial illustration rồi mới vẽ.
Ai nên quan tâm, ai không?
Mình tổng hợp lại để bạn dễ hình dung:
| Phù hợp | Không phù hợp |
|---|---|
| Viết blog/article tiếng Trung cần minh họa chèn giữa bài | Cần commercial illustration, brand KV chuyên nghiệp |
| Làm content về knowledge, methodology, AI workflow | Cần PPT infographic phức tạp, architecture diagram chi tiết |
| Muốn phong cách nhận diện cá nhân, quirky, khác biệt | Muốn cute cartoon, sticker, emoji style |
| Dùng Codex và muốn reuse một visual language nhất quán | Cần editable SVG/vector source file |
| Thích minimalism ít chi tiết, nhiều whitespace | Muốn nhét nhiều text, giải thích dài vào một hình |
Cách nó hoạt động
Về mặt technical, project này là một Codex Skill bạn cài nó vào thư mục skills của Codex, rồi gọi bằng prefix $ian-xiaohei-illustrations.
Setup khá đơn giản:
1git clone https://github.com/helloianneo/ian-xiaohei-illustrations.git2cd ian-xiaohei-illustrations3mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"4cp -R ./ian-xiaohei-illustrations "${CODEX_HOME:-$HOME/.codex}/skills/"
Sau đó bạn có thể dùng theo nhiều mode:
Chỉ lên plan, chưa vẽ
Bạn paste bài viết vào, AI sẽ phân tích và đưa ra shot list gồm 4-8 bức hình. Mỗi bức ghi rõ: đặt sau đoạn nào, chủ đề gì, Tiểu Hắc đang làm gì, gợi ý annotation tiếng Trung.
Vẽ luôn
Paste bài, AI generate thẳng PNG 16:9. Output mặc định lưu vào assets/<article-slug>-illustrations/.
Vẽ cho một concept đơn lẻ
Không cần cả bài viết bạn đưa một câu như "Niềm tin không phải hét lên mà có, mà phải lát từng viên gạch bằng chứng" và nó sẽ biến thành một bức minh họa.
Theo kinh nghiệm của mình khi dùng các AI image tool, việc có một bộ constraint rõ ràng như thế này (trắng nền, ít màu, một ý một hình) thường cho output ổn định hơn rất nhiều so với prompt tự do.
Cấu trúc bên trong
Nếu bạn tò mò về cách một Codex Skill được tổ chức, repo này là một case study khá gọn:
Điều mình appreciate là cách tác giả tách biệt rõ ràng giữa style definition, character spec, và quality control. Đây không phải kiểu "viết một cái mega prompt rồi cầu nguyện" mà là engineering một hệ thống có structure.
| File/Folder | Vai trò |
|---|---|
| `SKILL.md` | Entry point mô tả skill cho Codex |
| `agents/openai.yaml` | Config cho AI agent |
| `references/style-dna.md` | Định nghĩa DNA visual style |
| `references/xiaohei-ip.md` | Spec của nhân vật Tiểu Hắc |
| `references/composition-patterns.md` | Các pattern bố cục được phép dùng |
| `references/prompt-template.md` | Template prompt cho image generation |
| `references/qa-checklist.md` | Checklist kiểm tra output |
Góc nhìn thật lòng
Mình thấy project này thú vị ở mấy điểm:
Thứ nhất, nó cho thấy trend "AI Skill as a product" đang hình thành. Bạn không cần build app, không cần UI chỉ cần một bộ instruction đủ tốt, package nó lại, và người khác có thể reuse. 1.6k stars chứng minh nhu cầu là thật.
Thứ hai, approach "đọc hiểu trước, vẽ sau" là đúng hướng. Đa số content creator đang dùng AI image generation sai cách họ nghĩ về hình trước khi nghĩ về ý. Project này lật ngược lại.
Thứ ba, và đây là điểm mình muốn thẳng thắn: project này hiện tại focus hoàn toàn vào tiếng Trung. Nếu bạn viết content tiếng Việt hay tiếng Anh, bạn sẽ cần fork và adapt khá nhiều đặc biệt phần annotation style và cách phân tích cognitive anchor. Không phải cứ dịch prompt là xong.
Thứ tư, output là PNG không phải vector. Nếu bạn cần chỉnh sửa sau đó, bạn sẽ gặp hạn chế. Đây là trade-off có chủ đích của tác giả, nhưng bạn cần biết trước.
Bạn có thể làm gì tiếp?
Nếu bạn đang làm content tiếng Trung, thử luôn setup mất 5 phút.
Nếu bạn viết tiếng Việt nhưng thích idea này, mình nghĩ có vài hướng đáng explore:
- Fork và adapt cho tiếng Việt thay đổi annotation style, thêm Vietnamese-specific metaphor patterns
- Học cách tác giả structure Codex Skill áp dụng cho use case khác của bạn (generate slide outline, tạo social media caption, v.v.)
- Lấy cảm hứng từ QA checklist approach bất kể bạn dùng tool gì để generate hình, việc có một checklist rõ ràng sẽ giúp output consistent hơn nhiều
Đây là kiểu project mà giá trị lớn nhất không nằm ở code mà nằm ở tư duy thiết kế đằng sau nó. Cách tác giả decompose một bài toán mơ hồ ("vẽ hình minh họa cho bài viết") thành một pipeline có structure, có constraint, có quality gate đó là thứ đáng học hơn bất kỳ dòng YAML nào trong repo.
Nguyễn Nhật Long
@nguyennhatlong1303Nguyễn Nhật Long is a Senior Frontend Engineer and Frontend Team Leader with 7 years of experience building real-time fintech platforms. Specializing in React, Next.js, TypeScript, and React Native, shipping 10+ products across Web, Mobile, Telegram Mini-Apps, and Web3.
Thấy hay? Chia sẻ cho bạn bè!