Xây dựng bản sắc thương hiệu có cơ sở cùng Claude Code

Brand identity thực hiện điều gì

brand-identity là một skill Claude Code dùng để thiết kế bộ nhận diện thương hiệu như một hệ thống kết nối thống nhất. Thay vì chọn logo, kiểu chữ và bảng màu một cách độc lập, mỗi hướng thiết kế được xây dựng quanh một ý tưởng hoặc cơ chế duy nhất, định hướng cho cả ba thành phần.

Skill tạo ra ba, hoặc đôi khi bốn, bộ nhận diện. Skill trình bày chúng cạnh nhau dưới dạng các thẻ nhận diện, đo lường những thuộc tính kỹ thuật quan trọng rồi dừng lại để bạn chọn hướng. Sau khi bạn chọn một bộ, hoặc kết hợp các phần từ nhiều bộ, skill sẽ tạo bộ hướng dẫn thương hiệu.

Tính năng chính

• Bộ nhận diện phối hợp: Mỗi bộ kết nối biểu trưng, kiểu chữ và bảng màu thông qua một cơ chế trung tâm.
• Quyết định dựa trên đo lường: Skill kiểm tra độ tương phản WCAG 2 và APCA, mô phỏng mù màu, độ bao phủ glyph, giấy phép phông chữ, chữ số dạng bảng và khả năng hiển thị logo ở kích thước 16 và 32 pixel.
• Cổng chất lượng: Các phép đo không đạt sẽ khiến một bộ bị dừng cho đến khi vấn đề được khắc phục. Các heuristic được gắn nhãn là cảnh báo, còn những lựa chọn chủ quan được xác định là phán đoán.
• Bộ hướng dẫn thương hiệu: Bộ tiêu chuẩn bao gồm PDF tám trang, các tệp logo, design token ở định dạng CSS, SCSS, Tailwind và DTCG JSON, cùng một bảng phông chữ có mã nhúng. Tùy chọn --full bổ sung các phần về lưới, chế độ tối, khả năng tiếp cận, icon và hình ảnh, nâng tổng số lên 13 trang.
• Đổi kiểu website: Cung cấp cho skill một URL để xem trước từng hướng trên các trang hiện có. Bạn có thể giữ lại một số thành phần và làm mới những thành phần khác.
• Làm việc tập trung: Chỉ yêu cầu logo, hệ thống kiểu chữ, bảng màu hoặc đánh giá một bộ nhận diện hiện có.

Cài đặt skill

Khuyến nghị: cài đặt dưới dạng plugin Claude Code

Trong Claude Code, thêm marketplace và cài đặt plugin:

/plugin marketplace add fatihaydost/brand-identity-skill
/plugin install brand-identity@brand-identity-skill

Cài đặt dưới dạng skill thông thường

Tải brand-identity.zip từ bản phát hành mới nhất, giải nén vào ~/.claude/skills/, rồi để Claude Code tải skill từ đó.

Bạn cũng có thể clone repository và tạo liên kết symbolic:

git clone https://github.com/fatihaydost/brand-identity
mkdir -p ~/.claude/skills
ln -s "$PWD/brand-identity-skill/skills/brand-identity" ~/.claude/skills/brand-identity

Kiểm tra yêu cầu

Dự án yêu cầu Python 3.10 trở lên và trình duyệt dựa trên Chromium như Chrome, Chromium, Edge hoặc Brave. Khuyến nghị dùng uv vì các script sử dụng công cụ này để cài đặt các gói Python vào môi trường được lưu trong bộ nhớ đệm ở lần sử dụng đầu tiên.

Chạy kiểm tra tích hợp để xác định các phần phụ thuộc còn thiếu:

python3 skills/brand-identity/scripts/brand.py check

Với uv, thông thường bạn không cần cài đặt thủ công fonttools, uharfbuzz hoặc skia-pathops. Claude Code là môi trường lưu trữ được khuyến nghị. Trong cuộc trò chuyện trên claude.ai, sandbox không cho phép Google Fonts theo mặc định, vì vậy việc đo lường và hiển thị kiểu chữ có thể thất bại.

Thực hiện dự án nhận diện đầu tiên

1. Bắt đầu bằng bản mô tả ngôn ngữ tự nhiên

Yêu cầu Claude Code tạo ra kết quả bạn cần. Ví dụ:

Logo, phông chữ và màu sắc cho một nhà rang cà phê đặc sản ở Lisbon.

Bạn cũng có thể tập trung yêu cầu:

Kiểu chữ và bảng màu mới cho https://example.com, giữ lại logo.

Chỉ cần một hệ thống kiểu chữ cho newsletter của tôi.

Đánh giá bộ nhận diện thương hiệu của chúng tôi.

2. Trả lời các câu hỏi

Skill sẽ hỏi một lượt câu hỏi về những gì cần tạo, số lượng bộ cần生成, ngôn ngữ thương hiệu sử dụng và các đối thủ liên quan. Khi có thể, hãy cung cấp thông tin cụ thể về khán giả, giọng điệu, thị trường, ứng dụng và các ràng buộc.

3. Xem xét bảng nhận diện

Skill xây dựng các hướng đề xuất và hiển thị chúng trên một bảng so sánh. Mỗi hướng bao gồm một cơ chế, biểu trưng, lựa chọn kiểu chữ, bảng màu và các phép đo. Một lần chạy đầy đủ đến bảng mất khoảng 40 lượt tác vụ của agent và sử dụng khoảng 0.9 triệu token tương đương đầu vào được tính phí, dựa trên các phép đo từ sáu bản mô tả.

Skill không chọn hướng thay bạn. Hãy so sánh các ý tưởng, mức độ đáp ứng bản mô tả và việc các phép đo có vượt qua những cổng yêu cầu hay không.

4. Chọn hoặc kết hợp các thành phần

Sau khi xem xét bảng, hãy chọn một bộ hoặc yêu cầu kết hợp, chẳng hạn logo từ bộ A và bảng màu từ bộ B. Sau đó skill sẽ xây dựng bộ đã chọn.

Tìm hiểu các sản phẩm được tạo

Bộ nhận diện được chọn sẽ tạo ra một PDF hướng dẫn tám trang, bao quát bìa, ý tưởng, logo, các biến thể, cách sử dụng logo trên màu sắc, các ví dụ sử dụng sai dành riêng cho biểu trưng, màu sắc, kiểu chữ và ứng dụng. Sử dụng --full khi bạn cũng cần hướng dẫn về lưới, chế độ tối, khả năng tiếp cận, icon và hình ảnh.

Bộ kit cũng bao gồm các bản xuất logo ở định dạng SVG và PNG, gồm phiên bản đầy đủ màu, một màu, đảo màu, biểu tượng ứng dụng và favicon. Design token có sẵn cho CSS, SCSS, Tailwind và JSON DTCG. Tài liệu font ghi lại các kiểu chữ đã chọn và cung cấp mã nhúng.

Quy trình hoạt động

Quy trình tách biệt định hướng sáng tạo khỏi bước xác minh kỹ thuật:

1. Câu hỏi: Claude Code thu thập bản mô tả yêu cầu, yêu cầu về ngôn ngữ, bối cảnh đối thủ cạnh tranh và số lượng bộ mong muốn.
2. Tạo bộ: Công cụ tạo sets.json chứa cơ chế, biểu trưng, lựa chọn kiểu chữ và các giá trị khởi tạo bảng màu.
3. Đánh giá logo: Logo được kết xuất thành bảng liên hệ ở kích thước 16 và 32 pixel, các lỗi được sửa qua nhiều vòng lặp.
4. Xây dựng và kiểm tra: Các tập lệnh tạo vai trò bảng màu, thẻ nhận diện, báo cáo kiểm tra và bảng so sánh.
5. Xử lý cổng kiểm duyệt: Độ tương phản, giấy phép font, phạm vi glyph, tính hợp lệ của tệp và lỗi kết xuất sẽ đưa một bộ quay lại để chỉnh sửa.
6. Lựa chọn và tạo kit: Sau khi bạn chọn, skill xuất PDF, tệp logo, token và tài liệu font.

Mẹo nâng cao để có kết quả tốt hơn

Nêu rõ yêu cầu ngôn ngữ

Hãy cho Claude Code biết mọi ngôn ngữ mà thương hiệu phải hỗ trợ. Skill kiểm tra phạm vi glyph dựa trên các ngôn ngữ thương hiệu sử dụng, vì vậy thông tin này ảnh hưởng đến việc chọn kiểu chữ và xác minh.

Xem khả năng tiếp cận là một ràng buộc thiết kế

Đừng xem độ tương phản chỉ là bước kiểm tra hình ảnh cuối cùng. Dự án sử dụng phép đo WCAG 2 và APCA, mô phỏng mù màu và kiểm tra kích thước logo làm các cổng kiểm duyệt. Hãy đưa các nền và trường hợp sử dụng dự kiến vào bản mô tả để bảng màu được tạo có thể được đánh giá trong đúng ngữ cảnh.

Yêu cầu bản xem trước website

Khi cung cấp URL website, skill sẽ đọc logo, kiểu chữ và màu sắc hiện tại, sau đó xem trước từng hướng nhận diện trên các trang của bạn. Dùng keep cho những thành phần cần giữ lại và refresh cho những phần nên phát triển tiếp.

Thách thức các mặc định quen thuộc của AI

Brand-identity được thiết kế để tránh việc tự động hội tụ vào những kết hợp như kem, đất nung, vàng, Fraunces, Inter hoặc một chữ cái ẩn trong hình tròn. Khi một hướng sử dụng mẫu quen thuộc, skill sẽ yêu cầu lý do dựa trên bản mô tả, và ít nhất một bộ trong mỗi lần chạy sẽ không sử dụng bất kỳ mặc định nào trong số đó.

Kiểm tra giấy phép và quyền truy cập mạng

Skill tải font và siêu dữ liệu từ Google Fonts và kho google/fonts. uv kết nối với PyPI để lấy các gói Python, còn trình duyệt chỉ mở website của bạn hoặc các website đối thủ được nêu tên khi bạn cung cấp URL của chúng.

Không có telemetry và không có dữ liệu nào được tải lên. Font không bị chia nhỏ hoặc phân phối lại; kit liên kết đến chúng và cung cấp mã nhúng. Giấy phép font được kiểm tra theo từng họ font, mặc định sử dụng OFL cùng các ghi chú bổ sung cho Fontshare hoặc font thương mại.

Phát triển và kiểm thử cục bộ

Nếu muốn đóng góp hoặc xác thực kho mã, hãy cài đặt các yêu cầu phát triển và chạy các lệnh kiểm thử:

pip install -r requirements-dev.txt
python3 -m unittest discover -s tests
python3 tools/smoke_test.py
python3 tools/package_skill.py

Kho mã bao gồm skill tại skills/brand-identity/, các công cụ phát triển tại tools/, các bài kiểm thử đơn vị tại tests/, các fixture đánh giá tại evals/ và tài liệu về kiến trúc cũng như kiểm thử tại docs/.

Kết luận

brand-identity biến bản mô tả bằng ngôn ngữ tự nhiên thành nhiều hướng nhận diện liên kết với nhau, sau đó kết hợp khám phá sáng tạo với các bước kiểm tra kỹ thuật có thể đo lường. Hãy cài đặt công cụ trong Claude Code, mô tả thương hiệu và các ràng buộc, so sánh những bộ được tạo, rồi chọn hoặc kết hợp các thành phần phù hợp nhất với bản mô tả. Kết quả là một bộ hướng dẫn thực tế thay vì một ý tưởng logo đơn lẻ.

Dự án được phát hành theo giấy phép MIT. Để biết chi tiết triển khai, hãy tham khảo dự án GitHub của kho mã.