Profile
Quỳnh Ruby
Author
Quỳnh Ruby quynhfruby.com
“
”
Author
Quỳnh Ruby quynhfruby.com
Author
Quỳnh Ruby quynhfruby.com

Handy Thumb — Tự build công cụ tạo ảnh cho blog từ thư viện SVG

Mọi chuyện bắt đầu từ việc làm ảnh cho blog

Trước khi có Handy Thumb, mỗi khi cần ảnh bìa hoặc ảnh minh họa cho blog, mình thường nhờ AI vẽ. Mình mô tả nội dung bài, yêu cầu kiểu doodle với nét vẽ tay màu đen và một chút màu nhấn, rồi chờ AI tạo ra một bức ảnh hoàn chỉnh.

Cách này tiện lúc bắt đầu, nhưng khá mệt khi cần sửa. Có những bức đã gần đúng, mình chỉ muốn đổi một dòng chữ hoặc dời một chi tiết. Vì không thể chọn riêng phần đó, mình phải diễn đạt lại yêu cầu và nhờ AI tạo lại cả bức. Ảnh mới sửa được chỗ này thì đôi khi lại làm khác chỗ khác; cùng một nhân vật cũng có thể thay đổi sau mỗi lần tạo.

Vòng lặp khi tạo ảnh bằng AI: mô tả ý tưởng, AI tạo ảnh, phát hiện chỗ chưa đúng rồi phải tạo lại cả ảnh.

Những lần sửa tới lui như vậy khiến mình nghĩ đến Handy Thumb. Phần lớn ảnh mình cần chỉ là sự kết hợp của một số thành phần quen thuộc. Nếu tách chúng ra và lưu riêng, lần sau mình có thể sửa đúng phần cần sửa thay vì làm lại cả ảnh.

Nếu tách mọi thứ thành các mảnh nhỏ thì sao?

Một ảnh về sửa lỗi có thể được ghép từ nhân vật đang suy nghĩ, laptop, biểu tượng lỗi, dấu hỏi và một dòng chữ. Nhân vật hay biểu tượng trong ảnh này vẫn có thể được lấy sang bài khác.

Các thành phần như nhân vật, laptop, biểu tượng lỗi và dấu hỏi được ghép thành một ảnh minh họa hoàn chỉnh.

Mình bắt đầu nghĩ tới một thư viện gồm nhân vật, đồ vật, biểu tượng, mũi tên và các nét nhấn cùng phong cách doodle. Khi cần ảnh mới, mình chỉ việc lấy những mảnh phù hợp ra ghép.

Ý tưởng ban đầu của Handy Thumb chỉ có vậy: ghép hình SVG với chữ, sắp xếp chúng trên một trang rồi xuất thành ảnh cho blog.

Tối hôm đó, mình ghi lại ý tưởng này trong cuộc trò chuyện với ChatGPT:

Cuộc trò chuyện ngày 15/8/2026, khi ý tưởng Handy Thumb lần đầu được mô tả như một hệ thống lắp ghép các thành phần SVG.

Vì sao mình không dùng luôn Canva hoặc Figma?

Mình có thể làm việc này bằng Canva hoặc Figma. Nhưng nhu cầu của mình khá hẹp:

Mình không cần một công cụ thiết kế tổng quát. Mình cần một cách nhanh để ráp những thành phần mình đã có.

Trong Handy Thumb, mình muốn cố định sẵn kích thước ảnh, phông chữ, màu sắc và phong cách hình vẽ. Mỗi bài chỉ cần thay dòng chữ, nhân vật và vị trí của vài thành phần. Một công cụ nhỏ như vậy hợp với việc mình đang làm hơn.

Vì sao mình không chỉ giữ ảnh PNG?

Ban đầu mình có thể chỉ kéo hình vào trang rồi xuất PNG. Nhưng nếu chỉ giữ PNG, lần sau mình vẫn không thể chọn riêng nhân vật, chữ hay mũi tên để sửa.

Handy Thumb cần lưu lại từng thành phần, vị trí và nội dung chữ. Tài liệu chứa những thông tin đó được gọi là scene. Khi cần đăng lên blog, mình mới xuất scene thành PNG, WebP hoặc SVG.

Các thành phần được lưu trong scene, rồi từ scene có thể xuất ra ảnh PNG, WebP hoặc SVG.

Nhờ giữ scene, mình có thể mở lại để đổi chữ, di chuyển một biểu tượng hoặc dùng bố cục cũ làm mẫu cho ảnh mới.

Phiên bản đầu tiên trông như thế nào?

Tối ngày 15/8, phiên bản đầu tiên đã chạy được. Nó mở thẳng vào màn hình làm ảnh, chưa có trang dự án hay hướng dẫn bắt đầu.

Phiên bản đầu tiên của Handy Thumb ngày 15/8/2026: thư viện doodle ở bên trái, trang làm việc ở giữa và phần chỉnh sửa ở bên phải.

Bên trái là thư viện hình, ở giữa là trang làm việc và bên phải là phần chỉnh sửa. Mình đã có thể chọn hình, thêm chữ, sắp xếp, lưu scene rồi xuất ảnh. Vậy là mình đã tự ráp được một ảnh blog bằng những mảnh trong thư viện.

Nhưng giao diện vẫn giống một công cụ nội bộ. Mở ứng dụng lên là thấy ngay một trang trắng mà không biết nên bắt đầu từ đâu. Hình doodle chưa đổi được màu, khung chữ chưa co giãn và các thao tác như nhân bản hay sắp xếp lớp còn khó tìm.

Mình đã thử đổi màu và kiểu nút cho giao diện cũ, nhưng vấn đề không nằm ở đó. Cuối cùng, mình bỏ phần giao diện ấy, giữ lại thư viện hình, scene và cách xuất ảnh rồi làm lại không gian làm việc.

Từ Handy Thumb tới Kitvas

Từ đây, mình cũng đổi cách nhờ AI hỗ trợ. Thay vì yêu cầu một bức ảnh hoàn chỉnh, mình nhờ AI vẽ thêm nhân vật hoặc đồ vật còn thiếu, đưa chúng vào thư viện rồi tự ráp ảnh.

Lúc đầu, mình chỉ muốn làm ảnh blog nhanh hơn và không phải bắt đầu lại mỗi lần cần sửa. Về sau, mình thêm tài liệu nhiều trang, slide và sơ đồ, rồi đổi tên dự án thành Kitvas.

Chia sẻ bài viết này:
import "../components/workflow-connectors.ts";