Tạo Design System thô với Claude bằng 2 prompt với reference từ Pinterest

Tổng quan

Kỹ thuật này giúp bạn chuẩn hóa design output từ Claude bằng cách bắt đầu từ một ảnh design yêu thích trên Pinterest. Thay vì mô tả màu sắc, font, spacing bằng lời - bạn cho Claude “nhìn” ảnh và tự trích xuất thành một design system chuẩn, sau đó dùng system đó để tạo các output nhất quán.

Quy trình gồm 3 bước chính: tìm ảnh trên Pinterest - trích xuất design system - generate output từ system đó.

Bước 1 - Tìm ảnh input trên Pinterest

Tìm một design bạn thích trên Pinterest (social media post, landing page, editorial layout…). Đây là 2 ảnh mình dùng làm input trong thực tế - chọn 2 ảnh cùng brand để Claude có nhiều context hơn:

Ảnh input từ Pinterest - 2 poster từ brand Universitas Royal: blue electric làm primary, lime green làm accent, Montserrat bold làm headline. Đây là thứ Claude sẽ “đọc” và trích xuất thành design token.

Bước 2 - Prompt 1: Trích xuất Design System

Đính kèm ảnh vào Claude, dùng prompt:

turn this into a design system in a html file and a design md file

Claude sẽ tạo ra:

• HTML file: preview trực tiếp trên trình duyệt với toàn bộ color palette, typography scale, component examples
• Design .md file: tài liệu quy chuẩn portable - color tokens, font stack, spacing scale, component rules

File .md là “linh hồn” của kỹ thuật này. Nó capture aesthetic của ảnh gốc thành text có cấu trúc, dùng lại được vô hạn lần qua nhiều session và dự án khác nhau.

Screenshot thực tế khi chạy Prompt 1:

Output: Design System HTML - preview trực tiếp từ file Claude tạo ra:

Bước 3 - Prompt 2: Generate Output từ Design System

Sau khi có file .md, paste nội dung vào conversation và dùng prompt:

create a carousel post for a publishing firm with industry specific insights via html with this design in mind

Thay carousel post for a publishing firm bằng output bạn cần: landing page, hero section, email template, pricing card, social media post…

Screenshot thực tế khi chạy Prompt 2:

Output: Carousel HTML - live preview của asset Claude tạo ra dựa trên design system:

Lưu ý quan trọng: Prompt trích xuất design system chỉ nên dùng một lần duy nhất ở bước đầu tiên khi setup design mới. Sau đó, dùng file .md làm context cố định cho tất cả output tiếp theo. Đừng lạm dụng bằng cách chạy lại Prompt 1 mỗi lần - sẽ làm mất đi tính nhất quán và tốn context không cần thiết.

Tại sao kỹ thuật này hiệu quả

• Nhất quán: mọi output đều kéo từ cùng 1 design system, không bị drift qua nhiều session
• Tái sử dụng cao: file .md dùng lại nhiều lần, nhiều dự án khác nhau
• Không cần mô tả dài: thay vì giải thích “tôi muốn màu này, font kia”, Claude tự extract từ visual
• Iterate nhanh: đổi ảnh Pinterest mới = design system mới trong vài phút
• HTML preview ngay: thấy kết quả thực tế ngay trong bước trích xuất, không cần chờ build

Cách áp dụng ngay

1. Vào Pinterest, tìm design phong cách bạn thích (UI card, dashboard, editorial layout…)
2. Screenshot hoặc save ảnh về máy (nên lấy 2-3 ảnh cùng brand)
3. Mở Claude, đính kèm ảnh, dùng Prompt 1 - đợi Claude tạo HTML + .md
4. Save cả 2 file output, đặt tên rõ ràng theo project
5. Với mỗi asset tiếp theo: paste nội dung .md làm context, dùng Prompt 2 với mô tả output cụ thể
6. Không chạy lại Prompt 1 - chỉ dùng file .md đã có

Click button bên trên để xem video demo chi tiết ở source gốc.