Cách đây một thời gian, tôi đã mã nguồn mở guizang-ppt-skill, và sau đó tôi phát hiện ra một điều khi tự mình dùng nó để tạo nội dung.
Các trang web do nó tạo ra, khi chụp màn hình và đăng lên các nền tảng hình ảnh – văn bản, nhận được phản hồi và dữ liệu tốt hơn nhiều so với bố cục thủ công của tôi.
Tôi tin rằng bạn đã từng tìm thấy một số prompt hoặc Skill trước đây có khả năng tạo ra những tấm thẻ 3:4 này.
Hầu hết chúng đều mang một phong cách giống nhau: Tailwind + mảng màu lớn + xếp chồng emoji + hệ thống phân cấp phông chữ tầm thường.
Sau khi xem qua, tôi có thể hiểu đại khái tại sao thẻ hình ảnh – văn bản do AI tạo ra lại dễ bị phát hiện ngay từ cái nhìn đầu tiên – vì chúng đang tạo các trang web, chứ không phải tạp chí.
Thẻ hình ảnh – văn bản là một dạng hoàn toàn khác so với PPT: màn hình dọc, quyết định dừng lại hay không trong 1 giây khi lướt feed, và dựa vào hình ảnh chứ không phải chữ.
Bố cục khác, nhịp điệu khác, người đọc khác.
Vì vậy, tôi đã tách nó ra khỏi PPT Skill và biến nó thành một Skill độc lập mang tên guizang-social-card-skill (https://github.com/op7418/guizang-social-card-skill).
Dưới đây, tôi sẽ nói về lý do tại sao nó tốt và tại sao tôi sẵn sàng dành nhiều thời gian cho nó.
2. Tại sao nó lại tốt như vậy?
Hình ảnh dọc 3:4 là chiến trường chính của thẻ hình ảnh – văn bản. Phần lớn năng lượng thiết kế của Skill này được dồn vào 3:4 – hệ thống phân cấp phông chữ, tỷ lệ bố cục và quy tắc ngắt dòng.
Mọi thứ đã được hiệu chỉnh theo kịch bản thực tế khi lướt trong luồng thông tin trên thiết bị di động. Cũng hỗ trợ ảnh bìa WeChat Official Account tỷ lệ 21:9 và 1:1.
Hãy bắt đầu với điều mà những người sáng tạo nội dung hình ảnh – văn bản quan tâm nhất.
2.1 Nó phân biệt những gì bạn đang viết và ghép đúng phong cách
Nội dung trên các nền tảng hình ảnh – văn bản được phân loại. Một bài review phim và một bài review sản phẩm đòi hỏi ngôn ngữ thị giác hoàn toàn khác;
Nhật ký du lịch và mẹo vặt công sở nên dùng bố cục khác nhau.
Nhưng hầu hết các công cụ AI không quan tâm đến điều này; chúng dùng cùng một mẫu cho bất cứ thứ gì bạn viết.
Kết quả là thẻ của mọi người trông như thể chúng được lấy từ một dây chuyền sản xuất ảnh bìa WeChat Official Account.
Skill này có sẵn các quy tắc thích ứng cho 11 danh mục nội dung hình ảnh – văn bản phổ biến:
- Du lịch / Phong cách sống: Phong cách tạp chí, bảng màu ấm áp, ảnh toàn màn hình, tiêu đề serif lớn;
- Công sở / Mẹo vặt / Góc nhìn kinh doanh: Phong cách lưới, nền tối, bố cục poster nhiều dữ liệu;
- Phim ảnh / Văn hóa: Phong cách tạp chí tông lạnh, bố cục poster phim, ưu tiên cận cảnh nhân vật;
- Review sản phẩm / Công nghệ số: Phong cách lưới, ma trận so sánh, ảnh chụp màn hình trong khung thiết bị;
- Đọc sách / Ghi chép: Phong cách tạp chí, phông serif, bố cục trích dẫn căn giữa, khoảng trắng tối đa;
- Ẩm thực / Khám phá quán: Phong cách tạp chí bão hòa cao, ưu tiên góc chụp từ trên xuống, chữ đưa ra góc;
Tôi thậm chí còn tạo riêng một thành phần bản đồ cho các blogger du lịch. Bạn có thể đánh dấu vị trí quán và lộ trình du lịch trên đó, và AI sẽ tự động tạo chú thích cho bạn.
Đưa cho nó cùng một văn bản: bảo nó là review phim, nó sẽ cho bạn tấm thẻ phong cách poster phim; bảo nó là review sản phẩm, nó sẽ cho bạn biểu đồ so sánh với khung thiết bị.
Quan trọng hơn, nó có những "vùng cấm" rõ ràng:
- Nội dung hướng đến fan: ngôn ngữ thị giác yêu cầu hoàn toàn khác;
- Quảng cáo thuần túy: đi ngược với triết lý thiết kế nhấn mạnh nội dung;
- Hướng dẫn dài quá 12 màn hình: định dạng hình ảnh – văn bản không phải là phương tiện tối ưu cho hướng dẫn dài.
Trong những kịch bản này, Skill sẽ nói với bạn ngay từ đầu: "Bạn có thể muốn dùng một công cụ khác."
Tôi cố tình để lại điều này. Ranh giới định hình một sản phẩm hơn cả bản thân khả năng; một Skill cố gắng làm tất cả thường kết thúc bằng việc chẳng làm tốt việc gì.
2.2 Cách chồng chữ lên hình ảnh
Chồng chữ lên hình ảnh là phần khó nhất của thẻ hình ảnh – văn bản và cũng là nơi "cảm giác AI" dễ bị lộ nhất.
Nếu không làm tốt, sẽ có ba kiểu thất bại:
- Chữ che khuất khuôn mặt hoặc trung tâm sản phẩm.
- Chữ trắng trên nền sáng hoặc chữ đen trên nền tối không đọc được.
- Chữ trải dài toàn bộ hình, phá hỏng bố cục vốn đẹp.
Skill xử lý điều này theo ba bước:
- Xác định chủ thể trong hình: khuôn mặt, sản phẩm, vùng nhiều chữ, và tự động tránh khi bố trí;
- Tính toán màu sắc và độ sáng của khu vực đặt chữ: quyết định màu chữ, có thêm lớp phủ hay không, và đổ bóng sâu đến đâu;
- Kích thước phông chữ và ngắt dòng thích ứng: tự động điều chỉnh kích thước phông và vị trí ngắt dòng dựa trên kích thước vùng đặt chữ, thay vì dùng cứng một kích thước phông bị tràn.
Với những quy tắc này, "cảm giác cao cấp" của thẻ được thiết lập. Người đọc không thể phân biệt giữa "chữ bị đè lên" và "chữ vốn đã có sẵn."
2.3 Hình ảnh từ đâu ra: Đây là điểm khác biệt lớn nhất so với các công cụ thẻ AI khác
Hầu hết các công cụ AI tạo thẻ hình ảnh – văn bản hoặc yêu cầu bạn tự upload ảnh, hoặc dùng emoji thay thế, hoặc tạo ra các minh họa trông như AI ngay từ cái nhìn đầu tiên.
Kết quả là việc săn ảnh thủ công rất mệt mỏi, hoặc xếp chồng emoji trông giả tạo.
Skill này được kết nối mặc định với ba thư viện ảnh miễn phí sử dụng thương mại:
- Pexels: hỗ trợ tìm kiếm tiếng Trung, phù hợp với các tình huống chung;
- Unsplash: chất liệu nhiếp ảnh mạnh nhất, lựa chọn hàng đầu cho nội dung về người, cuộc sống và không gian;
- Wallhaven: game, nhiếp ảnh và hình nền đều có ở đây, mặc dù bản quyền hơi lộn xộn.
Nó tự động phân phối từ khóa tìm kiếm dựa trên ngữ nghĩa của các đoạn văn bản, lấy hình ảnh, cắt ảnh cho phù hợp với bố cục, và tránh cắt đứt khuôn mặt hoặc chủ thể.
Bạn nhận được một tấm thẻ với ảnh chụp thực tế, không phải thẻ mảng màu.
Và nó không cứng nhắc trong việc tìm kiếm những hình ảnh hoàn toàn không có vấn đề bản quyền. Nó sẽ cho bạn biết nó đã tìm thấy những hình ảnh nào, và bạn quyết định có sử dụng những hình ảnh có bản quyền không rõ ràng hay không.
Ngoài ra, các nền tảng hiện đang rất nghiêm ngặt về watermark AI. Hầu hết ảnh do AI tạo ra bạn dùng hiện nay đều có watermark, bị nền tảng phát hiện và có thể dẫn đến shadowban. Đây là một điểm đau lớn.
2.4 Ảnh chụp màn hình cũng là ảnh: Bốn bước làm đẹp
Phần lớn nội dung của chúng ta không thể dùng ảnh chụp; cần ảnh chụp màn hình phần mềm, tin nhắn trò chuyện hoặc giao diện sản phẩm.
Skill có sẵn một công cụ làm đẹp ảnh chụp màn hình:
Thêm khung thiết bị kiểu macOS/iOS (viền trình duyệt hoặc viền điện thoại), sử dụng các chất liệu nền khác nhau để giữ ảnh chụp màn hình – giấy kẻ ô, chấm bi, trắng ấm hoặc tối – để ảnh chụp không còn nổi trên nền trắng nữa;
Đồng thời, nó tự động khớp các tham số lớp đổ bóng và góc bo tròn dựa trên phong cách thị giác. Hai phong cách mỗi cái có một công thức cho ảnh chụp màn hình, đảm bảo tính nhất quán mà không cần điều chỉnh thủ công.
Nói đơn giản, một ảnh chụp màn hình ngẫu nhiên bạn chụp sẽ trông giống như ảnh quảng cáo sản phẩm chính thức sau khi đi qua nó.
2.5 Tạo hình ảnh AI: Sử dụng có chừng mực
Skill chỉ gọi tạo hình ảnh AI khi tất cả các nguồn ảnh trước đó không tìm được chất liệu phù hợp.
Khi tạo hình ảnh, nó ép buộc các từ khóa ràng buộc phong cách để tránh hiệu ứng thị giác tầm thường của "minh họa AI rõ ràng."
Tôi thà nó sử dụng AI ít hơn còn hơn dùng AI theo kiểu khiến tất cả các thẻ hình ảnh – văn bản trông như chị em sinh đôi. Điều này cũng tránh việc mức độ hiển thị nội dung bị ảnh hưởng do dùng hình ảnh AI.
2.6 Hệ thống thị giác: Hai phong cách + 28 khung bố cục
Những ai quen với PPT Skill trước đây của tôi sẽ thấy điều này quen thuộc. Hai hệ thống thị giác và khung bố cục này đã được thích ứng và hiệu chỉnh lại từ PPT Skill.
Tôi sẽ không lặp lại chi tiết, nhưng đây là cách chúng thể hiện trong bối cảnh thẻ hình ảnh – văn bản.
Hai hệ thống thị giác:
- Phong cách Tạp chí: Kiểu typography bạn thấy trên bìa The New Yorker hoặc Nhà xuất bản Dịch thuật Thượng Hải. Khoảng trắng lớn, tiêu đề serif lớn, bố cục bất đối xứng, và chữ có không gian để thở.
- Phong cách Lưới: Theo phong cách thiết kế đồ họa Thụy Sĩ của Massimo Vignelli và Helmut Schmid. Lưới mạnh mẽ, phông sans-serif, cảm giác hình học, sử dụng màu sắc tiết chế nhưng chính xác.
28 khung bố cục, tôi đã chọn từ các tạp chí, poster, bìa album và poster phim tôi từng thấy trong suốt thập kỷ qua – những thứ chịu được sự soi xét.
AI vẫn rất kém trong "thiết kế bố cục tự do." Bằng cách đưa cho nó một khung bố cục đã được kiểm chứng, nhiệm vụ của nó được hạ từ "thiết kế" xuống "điền vào," và sự ổn định của thành phẩm ngay lập tức được cải thiện.
10 bộ bảng màu chủ đề, các ghéo phông cố định và thư viện biểu tượng giới hạn – tôi sẽ không liệt kê từng chi tiết này.
Logic vẫn vậy: Ràng buộc không phải là trở ngại; chúng là đường cơ sở.
Đưa cho một người sáng tạo nội dung vô số lựa chọn màu sắc, họ có nhiều khả năng tạo ra thứ xấu hơn; đưa cho họ 10 bộ màu đã được kiểm chứng, xác suất họ tạo ra thứ đẹp sẽ gần như 100%.
3. Tại sao lại làm điều này?
3.1 Góc nhìn Thiết kế: Cảm giác tạp chí rất hiệu quả
Tại sao lại chọn phong cách tạp chí và lưới thay vì các kiểu thẻ "hiện đại" hơn?
Bản chất của thẻ hình ảnh – văn bản cũng giống như poster in ấn, ảnh báo chí hay bìa album. Sử dụng một hình ảnh tĩnh để thuyết phục một người lạ dừng lại trong 1 giây. Tạp chí và poster đã nghiên cứu điều này trong suốt hàng trăm năm qua.
Ngôn ngữ thiết kế web được tạo ra cho các kịch bản có thể cuộn và tương tác. Chuyển nó lên hình ảnh tĩnh làm nó trông gượng gạo và thông tin trở nên phẳng.
Vì vậy, tất cả các "tại sao" trong các quyết định thị giác của Skill này:
- Tại sao khoảng trắng lớn? Khoảng trắng là cách tạp chí nói với bạn "trọng tâm ở đây."
- Tại sao ưu tiên phông serif? Phông serif có trọng lượng của ấn phẩm in ấn ở kích thước lớn.
- Tại sao bố cục bất đối xứng? Sự bất đối xứng tạo nhịp điệu thị giác, giúp mắt biết nhìn đâu trước.
- Tại sao màu sắc tiết chế? Trong các feed trên mạng xã hội, một bảng màu tiết chế thực tế lại bắt mắt hơn màu bão hòa cao; nó nổi bật giữa tất cả các thẻ "đang la hét ầm ĩ" xung quanh.
Những quyết định này nghe có vẻ "trừu tượng," nhưng chúng đều là các hằng số cụ thể trong mã. Tỷ lệ kích thước phông, tỷ lệ khoảng trắng, số cột lưới, ngưỡng tương phản, quy tắc ngắt dòng. Những hằng số này là hào thực sự của Skill này.
3.2 Góc nhìn Sản phẩm: Nó là một sản phẩm, không chỉ là một Prompt
Sau khi làm ra nhiều Skill, tôi đã hình thành một nhận định về "một Skill thực sự là gì":
Một Skill thực chất là một sản phẩm nhỏ.
Áp dụng vào dự án này:
Tôi đã viết một PRODUCT.md cho nó, giải thích rõ ràng nó giải quyết vấn đề gì, nó dành cho ai và nó không làm gì. Đó là để buộc bản thân suy nghĩ thấu đáo về "tôi thực sự đang làm gì?" Nếu tôi không thể giải thích được, Skill đó không nên được phát hành.
Tôi gán cho nó các số phiên bản (v0.5 / v0.9 / v0.10 / v0.12), và mọi phiên bản đều có CHANGELOG. Tôi có thể nói với bạn tại sao v0.10 là một nỗ lực thất bại và v0.12 đã sửa nó như thế nào.
Tôi đã viết một HANDOVER.md cho nó, giải thích các sản phẩm bàn giao trông như thế nào, ranh giới ở đâu và khi nào nên dùng các công cụ khác. Tôi hy vọng bất kỳ ai tiếp quản nó đều có thể hiểu đầy đủ về nó trong vòng 30 phút.
Tôi liệt kê trước những điểm yếu của nó để giúp người dùng tiết kiệm thời gian thử sai.
Tại sao lại làm tất cả những điều này?
Bởi vì vấn đề lớn nhất của hệ sinh thái Skill là hầu hết các Skill đều hài lòng với "tôi có thể tạo ra một cái," và rất ít người theo đuổi "làm đến mức tận cùng."
Một Skill nên là một sản phẩm nhỏ có thể đứng vững. Một Prompt có thể bị đối thủ sao chép trong mười phút; một sản phẩm thì không.
Mặt khác, nếu tôi thậm chí không thể giải thích ranh giới của Skill của chính mình, tôi không có quyền yêu cầu người khác giao quy trình làm việc của họ cho nó.
Lời kết
Skill này đã giúp tôi hiểu điều gì thực sự đúng đắn trong PPT Skill của tôi.
Điều đúng đắn là nó đã được coi như một sản phẩm ngay từ đầu. Rất nhiều mẫu, quy tắc chi tiết và màu sắc đẹp đều là sản phẩm phụ của điều này.
Nếu ai đó hỏi tôi sau này Skill là gì, tôi sẽ trả lời bằng hai câu:
Skill là một sản phẩm. Để đánh giá một Skill có tốt hay không, hãy xem nó đã được tác giả của nó yêu thích hay chưa.
Nếu bạn cũng đang sáng tạo nội dung hình ảnh – văn bản, tôi hy vọng nó giúp bạn cứu vãn những chủ đề hay bị bố cục tồi làm hỏng.
Nếu bạn cũng đang tạo Skill, tôi hy vọng nó làm bạn suy nghĩ lại liệu thứ bạn tạo ra có đáng để có một PRODUCT.md hay không.
GitHub: https://github.com/op7418/guizang-social-card-skill
Hãy bảo Codex, Xiaolongxia, ClaudeCode hoặc Workbuddy của bạn: Giúp tôi cài đặt Skill này: https://github.com/op7418/guizang-social-card-skill
