25 mẹo nâng cấp Claude Design từ cơ bản tới nâng cao

1. Từ người mới tới power user, và mẹo số 1: design system

Jay mở đầu bằng lời hứa của video: đây là những mẹo dùng Claude Design có thể đưa bạn từ một người mới hoàn toàn tới chỗ tạo ra những website, user interface và motion graphics đẹp, giống chính những thứ đang chạy trên màn hình trong video. Video đi từ phần dễ, ai cũng làm được trong vài phút, tới những mẹo nâng cao cho power user, kèm vài mẹo bonus mà theo lời anh thì anh chưa nghe ai khác nói tới.

Anh giới thiệu ngắn về mình: tên là Jay, đã làm hơn mười năm với những thương hiệu mà nhiều người có thể biết, và đi theo AI từ hồi học thạc sĩ data science. Hiện anh đang điều hành một doanh nghiệp về AI. Các mẹo được chia làm ba nhóm theo độ khó: Easy, Intermediate và Advanced.

Mẹo số 1 là design system. Theo Jay, đây là nơi mọi thứ bắt đầu khi bạn dùng Claude, hay thật ra là bất kỳ AI agent nào, để làm design. Cách đơn giản nhất để tạo một design system: mở Claude Design ở địa chỉ claude.ai/design, vào mục design systems và bấm create. Ở đó bạn mô tả doanh nghiệp của mình, thêm font, logo và các asset.

Bạn cũng không cần bắt đầu từ con số không. Bạn có thể thả vào một bộ slide (deck) mà mình thích, một website, hay chỉ một ảnh chụp màn hình, rồi bảo Claude biến nó thành một design system. Claude sẽ tự rút ra màu sắc, font chữ và các component cho bạn. Trên màn hình, Jay đính kèm một file PDF deck, một địa chỉ website và một ảnh chụp màn hình app, rồi gõ đúng một câu:

I love this. Turn it into a design system.

2. Mẹo 2 và 3: hơn 2.000 design style, để Claude lọc ra ba cái hợp nhất

Mẹo số 2: cho Claude hơn 2.000 design style. Có một trang tên là styles.refero.design (Refero Styles), một gallery gồm hơn 2.000 design system thật, ví dụ của Mercury, Linear hay Apple (con số theo video ngày 27/09/2026). Điểm hay là chúng được viết theo cách Claude thực sự đọc được: màu, kiểu chữ (type) và khoảng cách (spacing) đều được bày ra rõ ràng.

Cách dùng: mở design system bạn thích, copy nó, dán vào Claude, nói thêm những chỗ muốn chỉnh, và Claude tạo cho bạn một design system chất lượng cao chỉ trong một lượt.

Mẹo số 3: để Claude shortlist ra ba cái tốt nhất. Đây là một mẹo với chính gallery Refero đó, và thật ra với bất kỳ gallery design system nào bạn tìm thấy trên mạng: bạn không cần tự lướt. Danh sách có tới hàng nghìn design. Thay vào đó, hãy đưa Claude đường link và bảo nó đi qua gallery này, tìm cho bạn ba design system gần với doanh nghiệp của bạn nhất, rồi gửi lại link của ba cái đó. Claude lọc chúng xuống đúng ngách (niche) của bạn trong một lượt, và bạn tìm ra cái mình cần dễ hơn nhiều.

3. Mẹo 4: design system ngay trong Claude Code, dưới dạng một skill

Mẹo số 4 là build design system trực tiếp trong Claude Code. Bản web app Claude Design mà nhiều người đã quen, tức bản chạy ở địa chỉ trên, rất tốt nhưng có giới hạn của nó. Một giới hạn lớn là nó chạy trên web, nên không thực sự chạm được tới các file trên máy bạn, trừ khi bạn upload từng file một.

Tin tốt là nếu bạn đã dùng Claude Code, hay thậm chí Claude Cowork, thì tạo một design system chỉ là chuyện làm một custom skill chứa design system đó. Ví dụ, bạn có thể gửi một prompt để tạo một skill /duolingo; skill này tạo ra tài liệu theo đúng phong cách Duolingo mỗi lần bạn gọi nó.

Thực tế, Jay nói phần lớn các mẹo khác trong video cũng chạy được trong Claude Code, đơn giản vì công cụ đó linh hoạt tới mức nào. Cách viết skill được mô tả trong docs về skill của Claude Code.

4. Mẹo 5: font, dấu hiệu dễ thấy nhất của một design vibe-code

Mẹo số 5 là font. Theo Jay, cách nhanh nhất để nhận ra một design được vibe-code là nhìn font, vì người mới thường để nguyên font mặc định mà Claude đưa cho. Mẹo ở đây là vào các trang như Fontshare hay Fontesk, cả hai đều miễn phí, rồi chọn một font thực sự hợp với thương hiệu của bạn.

Nếu bạn cần một cặp font đi cùng nhau, Fontjoy sẽ tự động tạo ra các tổ hợp font cho heading và body. Trên màn hình là trang Fontjoy với dòng "Font pairing made simple" và một tổ hợp mẫu Magra, Crimson Text, Quattrocento Sans.

Sau đó bạn chỉ cần gọi tên các font này trong prompt, hoặc upload file font vào design system, và design của bạn lập tức được nâng cấp về mặt thị giác.

5. Mẹo 6 và 7: copy học từ năm người dẫn đầu, và trộn design system

Mẹo số 6 là về copy, tức phần chữ trên design. Nếu chữ trong design của bạn nghe như AI viết, thì bạn đã mất khán giả rồi, kể cả khi phần hình ảnh trông hoàn hảo. Vì vậy Jay gợi ý gửi một prompt yêu cầu Claude nghiên cứu năm người chơi hàng đầu (top five players) trong ngách của bạn, ghi lại những pattern chung trong cách họ viết copy, rồi đưa những điều đó vào design system.

Như vậy bạn bắt đầu từ best practice của ngành, thay vì từ thứ "giọng AI" mà khán giả của bạn nhận ra ngay lập tức.

Mẹo số 7 là trộn các design system. Một cách để có được một design chuyên nghiệp và nguyên bản của riêng bạn là mix and match các design system. Bạn chỉ cần mở design system đang làm, thêm các design system khác vào cùng cuộc chat, rồi nói với Claude lấy phần nào từ cái nào: chẳng hạn kiểu chữ từ design số một, còn màu sắc và motion từ design số hai. Claude sẽ hợp nhất chúng lại.

Thứ bạn nhận được là một bản pha trộn trông giống của chính bạn, chứ không phải bản sao y của một thương hiệu bạn thích. Trên màn hình, câu "An original design of your own" đi kèm ô "Describe an app idea" đang gắn sẵn một Apple Design System.

Đó là phần cơ bản. Theo Jay, chỉ cần làm hết bảy mẹo này là bạn đã đi trước phần lớn những người đang dùng Claude và AI agent để làm design. Các mẹo tiếp theo thuộc nhóm trung cấp, giúp frontend và tài liệu marketing của bạn trông chuyên nghiệp hơn nữa.

6. Mẹo 8 và 9: nối Claude với máy tạo ảnh, video, và dùng lại project cũ

Mẹo số 8 là ảnh và video. Claude Design không tự tạo được ảnh hay video, nhưng bạn có thể nối Claude với một generator. Cá nhân Jay dùng một dịch vụ API trung gian cho model, gom phần lớn các model ảnh và video lớn vào một chỗ, và bạn chỉ trả tiền cho những gì mình tạo ra. Theo anh (video ngày 27/09/2026), đây cũng là một trong những nơi rẻ nhất. Cách dễ nhất để kết nối là gửi một prompt cho Claude Code và để nó tự cài đặt dịch vụ đó cho bạn.

Mẹo số 9 là tham chiếu tới một project khác. Trong Claude Design, khi bắt đầu một thứ mới, một nước đi tốt là lấy URL của một project bạn đã làm xong trong Claude Design, dán vào session mới, rồi chỉ cần nói: dùng design system và asset của project này cho thứ tôi sắp build.

Cách này cũng chạy trong Claude Code: bạn đưa tên của một session trước đó, hoặc thậm chí nhờ Claude tự tìm nó, để mọi việc đã làm ở session cũ trở thành điểm xuất phát cho việc mới.

7. Mẹo 10 và 11: thư viện tham khảo riêng, và skill Impeccable

Mẹo số 10 là tự xây một thư viện tham khảo (reference library). Theo Jay, gu thẩm mỹ (taste) của bạn càng tốt lên khi bạn càng được nhìn nhiều design hay. Vì thế, một trong những điều tốt nhất bạn có thể làm là tự xây một thư viện tham khảo từ những nơi như Dribbble, Awwwards, và cả X (Twitter), về cơ bản là bất cứ đâu bạn thấy design mình thích.

Mẹo số 11 là Impeccable. Impeccable là một design skill với cả một bộ lệnh, hứa hẹn "deslop" (gột bỏ vẻ AI) cho website. Khi bạn chạy nó, nó audit những thứ như hierarchy, spacing, type, accessibility, thậm chí cả empty state, rồi sửa chúng. Jay đánh giá nó rất tốt cho khâu đánh bóng: biến một bản nháp tốt thành một bản chuyên nghiệp.

Theo README hiển thị trên màn hình, hai lệnh để bắt đầu là:

npx impeccable install

/impeccable init

Cũng trong đoạn README đó, Impeccable giải thích vì sao cần nó: mọi model đều được train trên cùng những SaaS template, nên nếu bỏ qua phần hướng dẫn, project nào cũng mang cùng một nhúm "dấu hiệu": Inter cho mọi thứ, gradient tím sang xanh, card lồng trong card, chữ xám trên nền màu, icon ô vuông bo góc.

8. Mẹo 12: skill tone of voice

Mẹo số 12 là một skill tone of voice. Chữ do AI viết rất dễ bị nhận ra, nhất là khi bạn không tinh chỉnh nó theo giọng của riêng mình. Trên màn hình là một landing page mẫu với tiêu đề "Unlock seamless, game-changing growth.", đúng kiểu câu "dễ nhận ra" mà Jay nói tới.

Vì vậy, việc nên làm là cùng Claude build một skill tone of voice, chứa danh sách các từ bị cấm (banned words), cách bạn nói chuyện, và những câu của chính bạn. Jay đưa ra một prompt để bắt đầu quá trình đó.

Bạn còn có thể thêm những bộ quy tắc có sẵn, tức các best practice guide đã được công bố. Anh lấy ví dụ:

• ASD-STE100, chuẩn Simplified Technical English (tiếng Anh kỹ thuật giản lược);
• Google developer documentation style guide, bộ quy tắc viết tài liệu cho developer của Google;
• Apple Style Guide, cách viết của Apple.

9. Mẹo 13 và 14: component từ 21st.dev và React Bits

Mẹo số 13 là 21st.dev. Đây là một thư viện UI component, nhiều cái trong đó do cộng đồng open source chia sẻ. Điểm hay nhất, theo Jay, là chúng được làm ra để giao thẳng cho agent. Bạn chỉ cần copy một component mình thích, dán vào Claude và bảo nó dùng component này. Claude sẽ thả một section đã được kiểm chứng vào trang của bạn thay vì tự thiết kế lại từ đầu, và việc đó còn giúp bạn tiết kiệm token.

Mẹo số 14 là React Bits. Cùng ý tưởng đó nhưng chuyên biệt hơn. ReactBits.dev cũng là một thư viện component, nhưng các component ở đây "chất" hơn một chút: chữ chuyển động (animated text), glass card, hiệu ứng con trỏ (cursor effect), đúng kiểu thứ bạn hay thấy trên các website cao cấp. Trên màn hình là trang React Bits với dòng "React components for creative developers" và vài mẫu hiệu ứng chữ.

Mẹo ở đây là tìm một cái bạn thích, copy code, rồi đưa cho Claude để thêm vào frontend của bạn, hoặc lưu nó như một phần của design system.

10. Mẹo 15, 16 và 17: Canvas UI, bộ icon có sẵn và SVG

Mẹo số 15 là Canvas UI. canvasui.dev có 35 hiệu ứng thực sự độc đáo (con số theo video ngày 27/09/2026). Nếu bạn muốn nổi bật, đây là một nguồn miễn phí rất tốt. Ví dụ, nó có các hiệu ứng liquid glass, shatter và particle reveal, tất cả đều miễn phí.

Mẹo số 16 là icon. Phần lớn thời gian, Claude không vẽ icon đẹp. Thay vào đó, bạn có thể vào Iconify hoặc Flaticon, tải về trọn một bộ icon cùng một phong cách, rồi đưa cả thư mục cho Claude dùng xuyên suốt design system.

Làm vậy, bạn không chỉ có sẵn icon dùng ngay, mà còn cho Claude những tham chiếu tốt cho bất kỳ icon nào bạn muốn nó vẽ thêm sau này, theo đúng phong cách đó. Prompt trên màn hình, gửi kèm thư mục icon-pack:

Use these icons across the whole design. Don't generate any icons yourself.

Mẹo số 17 là yêu cầu SVG. Khi bạn nhờ Claude làm icon mới, minh hoạ hay diagram, theo Jay, một trong những điều tốt nhất là yêu cầu định dạng SVG. SVG là viết tắt của Scalable Vector Graphics, nên nó phóng to tới cỡ nào cũng không bị mờ. Trên màn hình, cùng một icon bóng đèn được mở cạnh nhau ở hai file: icon.png và icon.svg.

Bạn có thể mở file ra và tự tay đổi màu, thậm chí nhờ Claude làm cho các icon này chuyển động. Nghĩa là với SVG, mọi graphic Claude trả về đều sửa được và animate được.

11. Mẹo 18 và 19: Lordicon và Creators Toolbox

Mẹo số 18 là Lordicon. lordicon.com là một thư viện icon động, và hàng nghìn icon trong đó thực sự miễn phí (theo video ngày 27/09/2026). Cách dùng: tìm một icon, tải về dưới dạng Lottie file, về cơ bản là một animation nhỏ được viết dưới dạng code, rồi thả vào Claude để dùng.

Theo Jay, Lottie file là một bước nâng cấp so với icon SVG thông thường, vì animation đã được "nướng" sẵn bên trong. Định dạng Lottie được mô tả ở trang tài liệu Lottie.

Mẹo số 19 là Creators Toolbox. Jay nói nếu bạn chỉ bookmark một thứ từ video này, hãy bookmark creatorstoolbox.com, cụ thể là mục resources của họ. Đó là một danh mục gồm hơn 150 nguồn tài nguyên design miễn phí (con số theo video ngày 27/09/2026): component động, hiệu ứng Three.js, icon SVG, gallery logo, và cả bộ mockup. Trong đó còn có vài nguồn anh đã nhắc trong video, như Refero Styles. Nhìn chung, theo anh, đây là một nguồn rất đáng bookmark.

Tới đây là hết phần trung cấp. Jay chuyển sang các mẹo nâng cao.

12. Mẹo 20 và 21: Human Interface Guidelines của Apple và GSAP

Mẹo số 20 là cho agent "ăn" Human Interface Guidelines của Apple. Apple công bố miễn phí bộ Human Interface Guidelines, về cơ bản là toàn bộ cuốn luật của họ về bố cục (layout), cỡ chữ, vùng chạm (tap target) và màu sắc.

Mẹo ở đây là biến bộ guideline đó thành một skill, bằng một prompt Jay đưa ra trong video, để khi bạn thiết kế một màn hình app hay một màn hình user interface, Claude làm theo luật của Apple thay vì đoán.

Mẹo số 21 là GSAP. Nếu bạn muốn motion và tính tương tác trên website có cảm giác đẳng cấp thế giới, hãy bảo Claude dùng GSAP, viết tắt của GreenSock Animation Platform. Đó là một thư viện JavaScript nhanh và ổn định cho các animation mượt trên trang web, và theo Jay, là thư viện animation mà rất nhiều agency hàng đầu đang dùng.

Những thứ như các section chạy theo thao tác cuộn (scroll-driven), hay chữ hiện dần ra khi bạn xem tới phần đó của trang, GSAP lo được hết. Trên màn hình, câu "GSAP handles all of that" đi kèm hai website mẫu: illoca.unseen.co với phần "Augmented Sketch" và cappen.com với dòng chữ lớn "Building Tomorrow for Today".

13. Mẹo 22 và 23: /design trong Claude Code và skill tweak

Mẹo số 22 là /design trong Claude Code. Mẹo này dành riêng cho người dùng Claude Code, vì theo Jay (video ngày 27/09/2026), giờ đã có một slash command /design chính thức. Bạn chỉ cần gõ /design, đưa vào một ý tưởng hoặc một ảnh chụp màn hình, và nó mở ra một canvas với các artboard chỉnh sửa được, hơi giống thứ bạn quen dùng trong Figma. Lệnh này có trong danh sách command của Claude Code.

Khác biệt là ở đây, vì đó là Claude Code, nó biết toàn bộ workspace của bạn, các rule của bạn, và cả memory của bạn. Nên khi bạn lặp đi lặp lại trên một design, nó đã biết bạn muốn gì và không muốn gì.

Mẹo số 23 là /tweak. Claude Design có sẵn tính năng này, đó là bảng Tweaks, nơi design của bạn có các nút điều khiển cho kiểu chữ, spacing và màu sắc, để bạn tự chỉnh bằng thanh trượt (slider). Trên màn hình, bảng Tweaks của Claude Design nằm cạnh một trang "Launch week", với slider type 36px, spacing 16px và ba lựa chọn màu accent Blue, Orange, Amber.

Còn nếu bạn ở trong Claude Code, mẹo hay là tự build một skill tweak: một skill thả một bảng slider lên bất kỳ trang HTML hay frontend nào bạn làm ra. Nó cho phép bạn đánh bóng sản phẩm và ẩn đi những phần bạn không muốn. Khi bạn chỉnh xong, nó đưa các giá trị đó ngược trở lại vào design.

14. Mẹo 24 và 25: lời nói thành motion graphics, và design operating system của riêng bạn

Mẹo số 24: biến lời nói trong video thành motion graphics. Jay nói đây là mẹo được nhiều người thích nhất, và cũng chính là cách anh làm các animation trong những video như video này.

Cách làm: lấy bản chép lời của video bạn vừa quay, có mốc thời gian tới từng từ (word-level), việc này làm miễn phí được bằng công cụ Whisper. Sau đó nhờ Claude tìm những khoảnh khắc mà một animation sẽ giúp người xem. Claude có thể build graphic cho đúng những khoảnh khắc đó, thông qua một công cụ tên là HyperFrames (repo mô tả nó là "Write HTML. Render video. Built for agents."), và trả về các clip khớp đúng với lúc bạn nói. Prompt trên màn hình, gửi kèm một file JSON chứa lời nói theo từng từ:

Here's the word-level transcript of my video. Find the five moments where an animation would help the viewer, research the real numbers for each, then build a short HTML animation for each moment in my design system, timed to the timestamps, and render each one to MP4 with HyperFrames. Save them to /animations.

Thêm một mẹo bonus: nếu bạn đã có một design system tốt thì hãy dùng nó, để các animation cuối cùng không trông như design AI kiểu vibe-code.

Mẹo số 25: tự build một design operating system. Đây là mẹo cuối, và là nơi mọi thứ gom lại. Bạn có thể nhờ Claude build cho mình một micro app nhỏ, nơi mọi design bạn làm xong đều hiện ra, nơi mọi ảnh và video bạn tạo đều được đánh chỉ mục (index), để bạn dễ tìm lại các phong cách hình ảnh và tham chiếu, và Claude cũng chạm tới được chúng. Prompt trên màn hình:

Build me a local design OS: one HTML page that shows every finished design as a tile, indexes every image and video on my machine by describing what's in it with a vision model, lets me search by content, and copies any asset into a Claude chat with one click. Ask me three questions first: which folders, dark or light, and what I search by most.

Thứ này mỗi người một khác.

Vậy là đủ 25 mẹo. Jay cảm ơn mọi người đã xem tới cuối, mời mọi người cho anh biết video có hữu ích không và nghĩ gì về dạng video này. Đây là video thứ hai mà toàn bộ animation người xem thấy đều do AI tạo ra, nên anh cũng muốn biết mọi người thấy chúng thế nào. Anh chào và hẹn gặp lại ở video sau.