# Claude Design từ A tới Z: website, post, deck và app

[Creating with Conor](https://homus.dev/speakers/creating-with-conor) · [Creating with Conor](https://homus.dev/orgs/creating-with-conor)

> Từ một prompt và một ảnh, dựng landing page trong Claude Design, biến nó thành design system rồi làm post động, pitch deck, prototype và app.

Topics: AI UX, Workflow, Coding Agents

Canonical: https://homus.dev/talks/the-only-claude-design-tutorial-you-need-in-2026

## 1. Một website, một post, một deck, một app: bắt đầu từ đâu

Video mở đầu bằng một câu hỏi: bạn đã bao giờ mở Claude Design mà không biết nên làm gì, hay không biết làm sao cho ra thứ trông thật sự đẹp chưa? Nếu có, anh (người dẫn của Creating with Conor) nói bạn đang ở đúng chỗ, vì anh vừa làm một website, một bài đăng Instagram, một slide deck và cuối cùng là một app chạy được hoàn chỉnh (theo video đăng ngày 20/10/2026). Anh hứa tới cuối video, bạn sẽ biết mọi công cụ bên trong Claude Design và cách bắt đầu có kết quả trông chuyên nghiệp chỉ trong vài phút.

![Màn hình tiêu đề với logo Claude và chữ Design](https://homus.dev/photos/b0aapjYhQUI-0001.jpg)

Màn hình mở đầu với logo Claude và chữ "Design": toàn bộ video đi qua Claude Design theo cách nó chạy trong video đăng ngày 20/10/2026.

Mọi thứ bắt đầu từ một chat mới trong app Claude Desktop. Theo các bước anh làm trong video (đăng ngày 20/10/2026): để mở trang Claude Design, anh rê chuột vào mục "More" trên thanh bên, bấm "Design", chọn "Design by Anthropic", rồi bấm nút "Start with a prompt". Thao tác này mở một chat mới, trong đó design system đang bật nằm ngay bên dưới ô nhập tin nhắn.

Bốn bước anh dùng để mở Claude Design từ Claude Desktop, như trong video đăng ngày 20/10/2026.

Anh giải thích vì sao phải qua các bước đó: nếu không, Claude sẽ chỉ trả lời trong một chat bình thường thay vì mở design canvas (theo video đăng ngày 20/10/2026). Anh cũng lưu ý rằng, tính đến video đăng ngày 20/10/2026, Claude Design không có trong gói miễn phí, nên bạn cần gói Pro, Max, Team hoặc Enterprise.

## 2. Ảnh chính cho trang web: nhờ ChatGPT tạo

Khi canvas đã sẵn sàng, việc tiếp theo là đưa cho Claude một prompt và một bức ảnh rồi xem nó dựng ra gì. Ảnh chính (main image) của trang lần này đến từ ChatGPT: anh dán một prompt vào ChatGPT, vì theo anh Claude không làm ảnh (theo video đăng ngày 20/10/2026).

Prompt nói với ChatGPT rằng bức ảnh sẽ là ảnh chính ở đầu website của Nuvola Gelato, một tiệm gelato Ý nhỏ, nên nó phải trông thật và chừa chỗ cho một headline lớn. Đó là lý do prompt yêu cầu một phần ba bên trái giữ yên tĩnh, đơn giản, không chữ và không logo, vì trang web sẽ tự thêm tất cả những thứ đó (demo trong video đăng ngày 20/10/2026). Nguyên văn prompt trên màn hình:

```
Create one wide 16:9 photo. This photo will be the main image at the top of the website of Nuvola Gelato, a small bright Italian gelato shop, so it must look real, fresh and inviting, and work behind or next to a big headline. Photorealistic wide shot of the glass display counter of the shop, rows of colourful gelato tubs in soft pastel colours (pistachio green, strawberry pink, vanilla cream, chocolate brown, lemon yellow), each tub topped with fresh fruit or nuts, a single waffle cone with two scoops standing in a holder in front of the glass, clean white marble counter, soft pastel pink wall in the background, bright natural daylight. Keep the left third of the image calm and simple so text can sit there. No people, no text, no logos, no signs, because the website will add the shop name and all the text. Sharp focus.
```

![Prompt tạo ảnh tiệm gelato dán trong ô chat của ChatGPT](https://homus.dev/photos/b0aapjYhQUI-0103.jpg)

Prompt tạo ảnh trong ChatGPT: một ảnh ngang 16:9 chụp quầy kính trưng bày gelato, một chiếc cone hai viên phía trước, một phần ba bên trái để trống cho chữ (demo trong video đăng ngày 20/10/2026).

Kết quả, theo anh, ra rất đẹp (demo trong video đăng ngày 20/10/2026): gelato trông tươi, tiệm sáng sủa và mời gọi, còn khoảng trống bên trái cho một chỗ gọn gàng để đặt headline. Anh tải ảnh về, quay lại Claude Design, bấm dấu cộng và upload ảnh lên.

## 3. Prompt cho landing page và ba hướng thiết kế

Tiếp theo anh dán prompt cho trang. Prompt nêu tên tiệm, dùng bức ảnh làm ảnh chính, và liệt kê mọi section anh muốn: một headline lớn, các vị gelato, điều gì làm gelato của tiệm đặc biệt, giờ mở cửa và địa điểm, và một footer. Theo anh (video đăng ngày 20/10/2026), chính việc liệt kê các section là thứ ngăn không cho phần quan trọng nào bị bỏ sót. Dòng cuối yêu cầu ba hướng thiết kế khác nhau, để anh được chọn thay vì nhận ngay ý tưởng thứ nhất.

```
Make a landing page for Nuvola Gelato, a small Italian gelato shop. Use the attached photo as the main image at the top. Include a big headline, our flavours, what makes our gelato special, opening hours and location, and a footer. Give me 3 different design directions so I can pick one.
```

Anh nói anh thích cách nó ra (demo trong video đăng ngày 20/10/2026). Mỗi hướng lấy cùng một nội dung nhưng đi theo một hướng khác, nên bạn nhanh chóng thấy layout nào hợp với tiệm nhất. Ba hướng của anh tên là Pastello, Editoriale và Dolce Pop.

![Canvas với ba landing page A Pastello, B Editoriale, C Dolce Pop đặt cạnh nhau](https://homus.dev/photos/b0aapjYhQUI-0203.jpg)

"Nuvola Gelato, three landing page directions": A Pastello, B Editoriale (trắng đen, headline serif rất lớn, trông như thực đơn quán café Ý) và C Dolce Pop (khối màu gelato, chữ tròn dày, viền đậm). Bên trái, Claude liệt kê bảy vị lấy từ ảnh và dặn các thông tin giờ mở cửa, liên hệ đang là placeholder trong ngoặc vuông (demo trong video đăng ngày 20/10/2026).

## 4. Chọn Dolce Pop và trả lời từng câu hỏi của Claude

Anh nói với Claude rằng anh chọn Dolce Pop, vì nó có màu và kiểu chữ mạnh nhất (chữ của anh: "the strongest colors and type"), nên phong cách của nó sẽ hiện rõ trong mọi thứ anh làm sau đó (demo trong video đăng ngày 20/10/2026).

Sau khi bạn chọn, theo anh (video đăng ngày 20/10/2026), Claude có thể bắt đầu hỏi lần lượt từng thông tin thật của bạn. Trong demo, nó kiểm tra bảy vị trước, và anh bảo giữ nguyên. Trên màn hình, tin nhắn anh gửi là "Yes, those seven flavours are right. Keep them as they are." Bảy vị trên dải màu nâu của trang là Fragola, Pistacchio, Fior di Vaniglia, Cioccolato Fondente, Limone, Nocciola và Frutti di Bosco.

Rồi Claude hỏi về giờ mở cửa. Anh trả lời rằng giờ như vậy là được, và anh sẽ tự xoá dấu ngoặc trên canvas. Sau đó Claude đề nghị để Dolce Pop thành thiết kế duy nhất trên canvas, và anh đồng ý (demo trong video đăng ngày 20/10/2026). Vậy là chỉ một prompt và một bức ảnh đã cho anh một landing page đầy đủ, theo một phong cách anh tự chọn trong ba.

Ba lượt hỏi đáp sau khi anh chọn Dolce Pop, theo thứ tự trong demo (video đăng ngày 20/10/2026).

## 5. Sửa nhanh bằng tay: xoá dấu ngoặc trên canvas

Nhưng trang vẫn còn mấy thứ giữ chỗ (placeholder): giờ mở cửa mẫu nằm trong ngoặc vuông, và một ô trống ở chỗ lẽ ra là bản đồ. Theo anh (video đăng ngày 20/10/2026), dấu ngoặc là chỗ sửa nhanh nhất, vì bạn không cần prompt gì cả.

Anh zoom vào phần giờ mở cửa, double-click vào chữ và chỉ xoá đúng mấy dấu ngoặc. Anh giải thích (video đăng ngày 20/10/2026): với một sửa nhỏ, như một từ hay một con số, tự gõ nhanh hơn viết prompt, và không có gì khác trên trang bị thay đổi. Trong lúc sửa, một thanh định dạng nhỏ hiện ngay trên dòng chữ (kiểu chữ Body, đậm, nghiêng, gạch chân, link, danh sách).

## 6. Comment mode: chỉ đúng chỗ cần sửa

Với bản đồ, anh bấm biểu tượng bong bóng thoại ở góc trên bên phải, cạnh nút Share, để bật comment mode (theo cách Claude Design chạy trong video đăng ngày 20/10/2026). Rồi anh kéo một hình chữ nhật lên ô bản đồ trống. Comment hiện ra cho biết phần nào được chọn, bắt đầu bằng "@Claude", và ô "Send to Claude" được tick sẵn. Anh nhờ Claude lấp ô đó bằng một bản đồ đường phố minh hoạ đơn giản, cùng màu với trang, có một cái ghim chỉ chỗ tiệm.

![Comment mode: một vùng được khoanh trên ô Map và khung comment gửi tới Claude](https://homus.dev/photos/b0aapjYhQUI-0323.jpg)

Comment gắn vào "C · Dolce Pop (bottom right) · 1 element": "@Claude Fill this box with a simple illustrated street map in the same colours as the page, with a pin showing where t…" đang gõ dở, ô "Send to Claude" đã tick (demo trong video đăng ngày 20/10/2026).

Theo anh (video đăng ngày 20/10/2026), một comment chỉ thẳng vào đúng vị trí, nên bạn không phải mô tả nó nằm ở đâu, và Claude trả lời ngay tại đó khi làm xong. Anh gọi đó là một chi tiết nhỏ dễ chịu. Anh thích việc ô bản đồ trống biến thành một hình minh hoạ riêng, khớp thật sự với phần còn lại của trang, và việc Claude xử lý thay đổi chỉ từ một comment (demo trong video đăng ngày 20/10/2026).

## 7. Tweaks: slider và bốn theme màu theo vị gelato

Tiếp theo là tweaks: các slider và lựa chọn màu được làm riêng cho thiết kế của bạn. Phía trên thiết kế, anh bấm "Show this artboard's tweaks", và tab Tweaks mở ra bên phải. Của anh lúc đầu chỉ có một tweak, tên Hero, là màu hồng ở phần trên cùng. Anh giải thích (theo video đăng ngày 20/10/2026): Claude tự làm tweaks cho từng thiết kế, nên lúc đầu bạn có thể chỉ được một hai cái, nhưng bạn có thể xin bất kỳ slider nào mình muốn.

Anh xin một slider cho khoảng cách giữa các section, một cho độ bo tròn của góc thẻ, một cho cỡ headline, và bốn theme màu dựa trên các vị gelato. Anh nói anh cố ý xin theme theo vị, để lựa chọn nào cũng vẫn hợp với một tiệm gelato. Prompt trên màn hình:

```
Add more tweaks to this design: a slider for the space between sections, a slider for how round the card corners are, a slider for the headline size, and a choice of colour themes. Make 4 colour themes that all fit a gelato shop, based on gelato flavours like strawberry, pistachio, lemon and chocolate, so each one changes the main colours of the whole page.
```

Khi anh chọn một theme trong danh sách, cả trang đổi màu, từ trên cùng xuống tới footer (demo trong video đăng ngày 20/10/2026). Anh nói cái này ra rất tốt, mọi thứ trông gọn gàng. Rồi anh kéo cỡ headline từ 104 lên 140. Ở mức 140, chữ cuối cùng, "cloud.", rơi xuống thành một dòng riêng, nên anh giữ ở 140 với theme Strawberry.

![Panel Tweaks bên phải với theme Strawberry, spacing 116, corners 24, headline 104](https://homus.dev/photos/b0aapjYhQUI-0423.jpg)

Panel Tweaks sau khi Claude thêm các điều khiển: Colour theme "Strawberry", Layout gồm spacing 116 px và corners 24 px, Type gồm headline 104 px, ngay trước khi anh kéo lên 140 (demo trong video đăng ngày 20/10/2026).

## 8. Pencil: phác một khung rồi nhờ Claude vẽ vào

Công cụ cuối cùng là cây bút chì (pencil) trên thanh công cụ, cho phép bạn phác thẳng lên thiết kế (theo video đăng ngày 20/10/2026). Anh vẽ một khung thô vào khoảng trống bên dưới giờ mở cửa, rồi trong chat bảo Claude đặt vào đó một chiếc cone gelato minh hoạ nhỏ, cùng màu với trang. Tin nhắn trên màn hình:

```
I drew a box under the opening hours. Put a small illustrated gelato cone there, in the same colours as the page.
```

Bên cạnh khung vẽ, phần chat còn giữ câu trả lời của Claude cho lượt tweaks: theme Strawberry là giao diện đang có (phần trên hồng, các section bên dưới màu pistachio và chanh), Pistachio có phần trên xanh lá, Lemon phần trên vàng, Chocolate phần trên màu sữa sô-cô-la; slider khoảng cách section từ 48 tới 200 px, góc thẻ từ 0 tới 48 px, headline từ 64 tới 160 px (demo trong video đăng ngày 20/10/2026). Sau lượt pencil, Claude báo đã đặt một chiếc cone hai viên có rắc cốm và một đám mây trắng nhỏ trên một vòng tròn màu, bỏ đường viền anh vẽ, và màu của cone đi theo theme.

Bốn công cụ sửa trang anh đi qua, từ một sửa gõ tay tới một hình phác (video đăng ngày 20/10/2026).

## 9. Share và Export: link chỉ đọc, file HTML và PNG

Để cho ai đó xem trang, anh bấm Share ở góc trên bên phải và đổi General Access từ "Only You" sang "Anyone with the link", rồi bấm "Copy Link". Theo anh (video đăng ngày 20/10/2026), người có link xem được nhưng không sửa được. Anh mở link trong một cửa sổ ẩn danh, không đăng nhập Claude, và trang hiện ra như một trang web bình thường, có nhãn "Read-only".

![Landing page Dolce Pop mở ở chế độ Read-only, có nút Sign in](https://homus.dev/photos/b0aapjYhQUI-0501.jpg)

Link chia sẻ mở khi chưa đăng nhập: thanh trên ghi "Read-only · Content is user-generated and unverified", phía dưới có dòng "Sign in to see this artifact's data" (demo trong video đăng ngày 20/10/2026).

Theo anh (video đăng ngày 20/10/2026), link luôn hiển thị bản mới nhất, nhưng vì đó là một link của Claude, bạn sẽ cần một dịch vụ hosting nếu muốn dùng tên miền riêng. Ngay bên dưới thiết lập đó, trên màn hình ghi rằng bất kỳ ai đã đăng nhập Claude cũng đọc được dữ liệu của trang ("Anyone signed in to Claude can also read this artifact's data"), nên anh dặn đừng đặt gì riêng tư lên một trang bạn chia sẻ.

Vẫn trong cửa sổ Share, bấm tab Export cho phép lưu thiết kế thành file (theo video đăng ngày 20/10/2026). Anh tải về file HTML, tức chính trang web, và một file PNG, tức một bức ảnh chụp toàn bộ trang.

Nhìn lại, anh nói (video đăng ngày 20/10/2026) việc có ba hướng khác nhau từ một prompt là khởi đầu tốt nhất ("the best start"). Dolce Pop là hướng vui nhất và mang chất gelato nhất ("the most fun and gelato inspired"), nên anh chọn nó. Mỗi công cụ có việc riêng, và giữa chúng bạn đổi được mọi thứ trên trang, từ một sửa gõ nhanh tới một comment, một slider hay một hình phác.

## 10. Biến trang thành một design system

Nhưng tất cả màu, font và hình khối anh vừa thiết lập chỉ tồn tại bên trong trang này. Vì vậy, ngay trong chat đó, anh nhờ Claude Design biến trang thành một design system. Prompt liệt kê những gì cần giữ: màu của cả bốn theme, font và cỡ chữ, các thẻ bo tròn với viền tối và bóng đổ cứng, các nút bấm và logo đám mây. Nó cũng nói anh sẽ dùng design system vào việc gì: một bài Instagram, một slide deck và một mobile app (demo trong video đăng ngày 20/10/2026).

```
Create a design system from this landing page: the colours of all four themes, the fonts, the type sizes, the rounded cards with the dark outline and offset shadow, the buttons and the cloud logo. I'll use it for an Instagram post, a slide deck and a mobile app for Nuvola Gelato.
```

Theo anh (video đăng ngày 20/10/2026), không có design system thì mỗi thiết kế mới đều bắt đầu từ con số không, hoặc bạn sẽ phải giải thích lại màu và font của mình mỗi lần.

![Design system Nuvola Gelato: trang Overview với Voice and tone và bảng Colour](https://homus.dev/photos/b0aapjYhQUI-0623.jpg)

Design system Nuvola Gelato ở mục Overview: phần "Voice and tone" và bảng bốn theme. Bên trái, Claude tóm tắt: font Bricolage Grotesque với 12 kiểu chữ có tên, viền tối 2.5px, ba mức bóng đổ (4, 6 và 8px), và ghi rằng nó rút bóng đổ từ bốn cỡ trên trang xuống còn ba (demo trong video đăng ngày 20/10/2026).

## 11. Bên trong design system Nuvola Gelato

Menu bên trái của design system có một loạt mục (theo cách Claude Design tạo ra trong demo video đăng ngày 20/10/2026). Anh đi qua từng mục:

- **Overview**: bản hướng dẫn thương hiệu (brand guide), gồm cách viết chữ và cách dùng phong cách này trên một bài đăng, một deck hay một app (demo trong video đăng ngày 20/10/2026).

- **Colors**: mọi màu của cả bốn theme đặt cạnh nhau, và mỗi hàng cho biết màu đó dùng ở đâu trên trang (demo trong video đăng ngày 20/10/2026).

- **Typography**: font và mọi cỡ chữ, từ headline lớn xuống tới các nhãn nhỏ (demo trong video đăng ngày 20/10/2026).

- **Spacing, Corner radius, Shadows** và phần anh gọi là "stroke" (trên menu ghi là "Border"): các quy tắc hình khối, như góc bo tròn cỡ nào và đường viền tối dày kia (demo trong video đăng ngày 20/10/2026).

- **Components**: các mảnh làm sẵn, như logo, các nút, sticker "Made by hand" và các thẻ vị. Theo anh (video đăng ngày 20/10/2026), thiết kế mới dùng lại chúng y nguyên.

- **Assets**: các file ảnh, tức logo đám mây và bức ảnh gelato (demo trong video đăng ngày 20/10/2026).

Menu bên trái của design system như trên màn hình trong demo (video đăng ngày 20/10/2026), kèm điều anh nói về từng nhóm mục.

Rồi anh bấm Share ở góc trên bên phải và đặt thành "Anyone with the link". Trong cửa sổ đó còn có một công tắc tên "Default design system", khiến mọi thiết kế mới tự động dùng design system này (theo video đăng ngày 20/10/2026). Nhưng anh để tắt, để cho bạn xem cách tự chọn nó.

Vậy là màu, font, sticker và logo được lưu ở một chỗ, và theo anh (video đăng ngày 20/10/2026) anh không bao giờ phải giải thích chúng lại nữa. Có điều, chưa thứ gì anh làm tới đây thật sự chuyển động.

## 12. Instagram post động, lặp lại mỗi sáu giây

Theo anh (video đăng ngày 20/10/2026), Claude Design cũng làm được hoạt hình. Thứ đầu tiên anh dùng design system là một bài Instagram động chạy lặp. Anh mở một chat mới, chọn Claude Design, bấm Design System, và dưới mục "Yours" chọn Nuvola Gelato. Bên dưới ô nhập giờ ghi "Claude Design" và "Nuvola Gelato".

Anh giải thích (video đăng ngày 20/10/2026): mỗi thiết kế mới có chat riêng, nên anh chọn design system ngay từ đầu, và mỗi project giữ tách biệt, dễ tìm. Một chat mới cũng ngắn hơn, nên Claude chỉ làm việc với những gì thiết kế này cần, không phải mọi thứ từ website.

Rồi anh dán prompt cho bài đăng. Nó yêu cầu kích thước 1080 x 1350, cỡ dọc của Instagram, lặp lại mỗi sáu giây. Sau đó nó liệt kê cái gì chuyển động và theo thứ tự nào: từ chiếc cone bánh quế trượt lên và ba viên kem rơi xuống với một cú nảy nhỏ, tới headline và sticker "Made by hand" bật ra. Prompt chỉ nói rằng các viên kem có màu vị khác nhau và logo nằm ở đâu, vì màu chính xác, font và logo đã có sẵn trong design system (theo anh, video đăng ngày 20/10/2026).

```
Make an animated Instagram post (1080 × 1350) for Nuvola Gelato that loops every 6 seconds. An illustrated waffle cone slides up from the bottom, then three gelato scoops drop onto it one by one, each in a different flavour colour, with a small bounce. Then the headline "Scoop up a little cloud." appears, and the "Made by hand" sticker pops in. The flavour strip scrolls slowly along the bottom, with the logo above it. Keep the motion smooth and playful.
```

Trong chat, Claude giải thích cái gì chuyển động ở từng giây của vòng lặp, và anh nói nó ra rất tuyệt (demo trong video đăng ngày 20/10/2026). Theo anh, design system lo phần thương hiệu, nên prompt chỉ cần tập trung vào layout và hoạt hình, và Claude chia vòng lặp sáu giây ra từng giây một cách hoàn hảo ("perfectly", chữ của anh).

Có điều, bản thứ nhất chỉ có hai đám mây ở nền, và logo hoàn toàn không chuyển động (demo trong video đăng ngày 20/10/2026). Nên anh xin thêm mây với nhiều kích cỡ, trôi ở tốc độ khác nhau, một ít cốm rắc nhỏ rơi xuống, và một cú nảy nhỏ cho logo. Prompt dặn tất cả những thứ đó nằm phía sau cone và chữ để bố cục không bị rối, và vòng lặp vẫn mượt.

![Bài Instagram động: cone ba viên kem, sticker Made by hand, mây và cốm rắc trên nền hồng](https://homus.dev/photos/b0aapjYhQUI-0903.jpg)

Bản sau khi sửa: headline "Scoop up a little cloud.", cone ba viên với sticker "Made by hand", nhiều đám mây và cốm rắc, logo nuvola và dải vị chạy ở đáy (demo trong video đăng ngày 20/10/2026).

Theo anh, lần sửa này làm mọi thứ tốt hơn nhiều, và hoạt hình tổng thể bắt mắt (demo trong video đăng ngày 20/10/2026). Khi đã có design system, anh nói prompt chỉ cần nói cái gì chuyển động và khi nào.

## 13. Pitch deck: viết brief trong chat thường, rồi dựng bảy slide

Nhưng một bài đăng đơn lẻ chỉ đưa bạn đi được tới một mức. Pitch deck bắt đầu là một tài liệu Word một trang, viết trong một chat bình thường, không chọn output nào. Anh giải thích (video đăng ngày 20/10/2026): brief chỉ là chữ, nên một chat thường là đủ.

Prompt anh dán vào liệt kê bảy section anh muốn làm heading, đưa ra mọi vị gelato và bốn lý do để chọn gelato của tiệm, và dặn không bịa giá, con số hay tuyên bố. Thông tin liên hệ để dạng placeholder vì đây chỉ là ví dụ, nên anh nhắc bạn điền thông tin của mình khi tự làm.

```
Write a one-page Word document (.docx) for Nuvola Gelato, a small Italian gelato shop. I will upload it to a design tool to turn it into a 7-slide presentation for pitching our gelato to local cafés and restaurants, so keep it short and split it into clear sections with headings: Who we are, What we offer, Our flavours, Why our gelato, How it works, What you get, Contact. Our flavours are Fragola, Pistacchio, Fior di Vaniglia, Cioccolato Fondente, Limone, Nocciola and Frutti di Bosco, plus seasonal specials; give each one short line. Why our gelato: churned slowly, served just right, real ingredients, small batches. How it works: three simple numbered steps. What you get: gelato tubs, a small display freezer, flavour labels and a counter sign, and a short guide for staff. Do not invent prices, numbers or claims. For the contact details use placeholders like [Phone number] and [Email address].
```

Xong, anh tải tài liệu về (demo trong video đăng ngày 20/10/2026). Tiếp theo là một chat mới với Claude Design và design system Nuvola Gelato, giống như với bài đăng. Anh bấm dấu cộng, upload tài liệu (trên màn hình là file `Nuvola_Gelato_Pitch.docx`) và dán prompt này:

```
Make a 7-slide presentation (16:9) from the attached brief. It's for pitching Nuvola Gelato to local cafés and restaurants. Slide 1: title slide with the gelato photo and the "Made by hand" sticker. Slide 2: who we are. Slide 3: our seven flavours as flavour cards. Slide 4: why our gelato, with the four points. Slide 5: how it works, in three numbered steps. Slide 6: what you get. Slide 7: contact, as a closing slide. Use only the text from the brief and keep it short on every slide.
```

Prompt yêu cầu bảy slide tỉ lệ 16:9 và nói chính xác cái gì nằm trên từng slide, từ slide tiêu đề có ảnh và sticker tới slide liên hệ khép lại. Theo anh (video đăng ngày 20/10/2026), dòng quan trọng nhất là "use only the text from the brief", vì nó ngăn Claude thêm những thứ anh chưa từng nói.

Thẻ trong chat ghi "Claude Slides". Anh giải thích (video đăng ngày 20/10/2026) điều đó chỉ có nghĩa là Claude Design thấy anh xin một bài thuyết trình nên mở nó trong Slides Editor, và bạn không phải đổi gì cả.

![Slide Our flavours với tám thẻ vị màu và dải thumbnail bảy slide](https://homus.dev/photos/b0aapjYhQUI-1023.jpg)

Slide 3 "Our flavours" trong thẻ "Nuvola Gelato café pitch · Claude Slides". Bên trái, Claude ghi rằng brief chỉ liệt kê bảy vị cộng seasonal specials, nên nó thêm một thẻ thứ tám viền đứt nét và đề nghị xoá nếu anh chỉ muốn bảy (demo trong video đăng ngày 20/10/2026).

Anh nói anh thích kết quả, vì brief cho Claude mọi thứ nó cần mà không chừa nhiều chỗ để bịa (demo trong video đăng ngày 20/10/2026). Cùng một design system được mang sang các slide, và dòng "use only the text from the brief" giữ mọi thứ đi đúng hướng.

## 14. Xuất deck: PDF, ba kiểu PowerPoint và Canva

Dưới Share và tab Export, theo anh (video đăng ngày 20/10/2026), PDF tải về ngay, và đó là thứ bạn muốn để gửi đi hoặc in. Trên màn hình, menu Export còn có PowerPoint ("3 options"), PNG, Google Slides và "More formats and apps".

PowerPoint cho bạn ba lựa chọn (theo cách anh giải thích trong video đăng ngày 20/10/2026):

- **Current fonts**: giữ font của thiết kế và cho sửa chữ. Nhưng nếu máy tính không có font đó, PowerPoint sẽ thay bằng một font khác (theo video đăng ngày 20/10/2026).

- **Basic fonts**: dùng các font máy nào cũng có. Chữ trông nhất quán, nhưng sẽ không khớp chính xác với thiết kế gốc (theo video đăng ngày 20/10/2026).

- **Slides as pictures**: biến mỗi slide thành một bức ảnh. Thiết kế giữ y nguyên, nhưng bạn không sửa được chữ (theo video đăng ngày 20/10/2026).

![Menu PowerPoint với Current fonts, Basic fonts, Slides as pictures trên slide liên hệ](https://homus.dev/photos/b0aapjYhQUI-1043.jpg)

Menu PowerPoint: "Current fonts" (editable, dùng font của bài thuyết trình), "Basic fonts" (editable, font máy nào cũng có), "Slides as pictures" (mỗi slide một ảnh, không sửa được chữ). Phía sau là slide liên hệ với các placeholder [Phone number], [Email address], [Shop address] (demo trong video đăng ngày 20/10/2026).

Với Canva, anh bấm "More formats and apps", tìm Canva, bấm Connect rồi Sign In. Theo anh (video đăng ngày 20/10/2026), một tài khoản Canva miễn phí là đủ. Bạn chỉ cần kết nối một lần, sau đó Canva hiện dưới mục "Send to". Anh bấm Canva, rồi Send, và Claude đưa cho anh một link mở deck trong Canva, sẵn sàng để sửa.

Theo anh, phần này ra rất ổn (demo trong video đăng ngày 20/10/2026): nó biến brief một trang thành bảy slide khớp với website, và chuyển sang Canva vẫn giữ cùng thương hiệu và bức ảnh. Slide năm còn hơi thừa khoảng trống ở dưới, nhưng anh nói đó là chỗ sửa dễ bằng một comment. Vậy là một tài liệu thành một deck đầy đủ theo cùng phong cách với website, và nó mở được dưới dạng PDF, trong PowerPoint hay trong Canva.

Trang sản phẩm Claude Design của Anthropic (đọc ngày 26/10/2026) cũng ghi việc xuất ra PowerPoint, PDF hoặc HTML, và gửi sang các app như Adobe và Canva.

## 15. Prototype app bấm được, năm màn hình

Nhưng chưa thiết kế nào trong số này cho phép ai đó bấm một nút và thật sự làm được gì. Theo anh, đó là việc của một prototype bấm được (clickable prototype), nơi mọi nút đều chạy. Anh lại mở một chat mới, chọn Claude Design và design system, upload ảnh gelato, rồi dùng prompt sau và bấm generate (demo trong video đăng ngày 20/10/2026).

```
Make a clickable mobile app prototype for Nuvola Gelato (phone size, 390 × 844) with five screens. Home: the attached photo, the headline "Scoop up a little cloud." and buttons to the other screens. Flavours: the seven flavour cards; tapping a card opens that flavour. Flavour: a big card with the flavour's description and an "Add to favourites" button that changes when tapped. Rewards: a stamp card with 10 stamps shaped like gelato cones, where the 10th gelato is free; tapping "Add a stamp" fills the next one. Find us: the illustrated map and the opening hours. Add a bottom tab bar to move between Home, Flavours, Rewards and Find us. Every button should work.
```

Prompt xin một prototype cỡ điện thoại với năm màn hình, và với từng màn hình, nó nói chuyện gì xảy ra khi bạn chạm vào. Phía trên màn hình Home, anh bấm play và chạm qua từng màn như một khách hàng (demo trong video đăng ngày 20/10/2026). Có Home, Flavours, một trang riêng cho từng vị với nút "Add to favourites", một thẻ tích điểm (reward stamp card) mà ly gelato thứ 10 được miễn phí, và Find us với bản đồ và giờ mở cửa.

Theo anh (video đăng ngày 20/10/2026), viết rõ từng lần chạm sẽ cho bạn một prototype thật sự bấm được, thay vì những bức ảnh chụp màn hình. Làm xong, nó trông như một app dùng được thật.

![Màn hình Your stamp card với 3 of 10 tem hình cone và nút Add a stamp, cạnh màn Pick your flavours](https://homus.dev/photos/b0aapjYhQUI-1229.jpg)

Màn "Your stamp card": "3 of 10", mười ô tem hình cone, ô thứ 10 ghi "FREE", dòng "6 more stamps until your free gelato." và nút "+ Add a stamp"; bên cạnh là màn "Pick your flavours" (demo trong video đăng ngày 20/10/2026).

Claude Design cho thẻ tích điểm bắt đầu sẵn với ba tem để nó không trông trống trơn (demo trong video đăng ngày 20/10/2026). Và chính chỗ đó giúp anh phát hiện ra một vấn đề, ở phần tiếp theo.

## 16. Vá lỗ hổng stamp card và làm link mở thẳng vào app

Vấn đề là nút "Add a stamp" cho phép khách tự thêm tem cho mình và nhận một ly gelato miễn phí mà không mua gì cả (demo trong video đăng ngày 20/10/2026). Anh nhờ Claude đổi nút đó thành một nút "Show my code" mở ra một mã QR lớn. Trong một app thật, khách đưa mã ra và tiệm quét. Trong prototype, chạm vào mã thay cho việc quét và thêm tem kế tiếp.

Cách anh vá luồng tích điểm trong prototype (demo trong video đăng ngày 20/10/2026).

Và cứ thế, Claude sửa xong vấn đề (demo trong video đăng ngày 20/10/2026). Trên màn hình, câu trả lời của Claude mô tả màn mã: một mã QR lớn trong thẻ trắng với đám mây Nuvola ở giữa, dòng "Show this at the counter to get your stamp", số tem đang có và nút quay lại; nó cũng ghi mã QR chỉ là hình vẽ cho prototype, camera điện thoại không quét được, và nó bỏ luôn nút "Start a new card" vì đó là một việc khác khách có thể tự làm.

Tới lúc làm một link mở được app. Để chia sẻ, anh nhờ Claude cho link mở thẳng vào màn Home, toàn màn hình, và trên máy tính thì hiện app ở cỡ điện thoại giữa màn hình. Theo anh (video đăng ngày 20/10/2026), nếu không làm vậy, link sẽ mở cả canvas với mọi màn hình đặt cạnh nhau, quá nhỏ trên điện thoại. Tin nhắn trên màn hình:

```
I want to share this app as a link that people open on their phones or on a computer. Make the link open straight onto the Home screen, full screen and ready to tap, instead of showing the whole canvas. On a computer, show the app at phone size in the middle of the screen.
```

Để chia sẻ, anh chọn "Anyone with the link", giống lần trước.

## 17. Handoff sang Claude Code và một app chạy thật

Để build nó thành app thật, anh nhờ Claude Design đóng gói toàn bộ prototype thành một handoff cho Claude Code. Anh dán prompt sau và bấm generate (demo trong video đăng ngày 20/10/2026):

```
Package this whole prototype as a handoff for Claude Code, with all screens, styles and how every button should work, so I can build it as a real app.
```

Claude đưa cho anh một file zip, với các thư mục assets, data, design, docs, reference và screenshots, cộng hai file: `CLAUDE.md`, theo anh là bản brief để build mà Claude Code đọc trước tiên, và `README.md` (demo trong video đăng ngày 20/10/2026). Anh tải về, chuột phải và chọn "Extract All".

Rồi ở góc trên bên trái của app Claude, anh bấm biểu tượng code để mở Claude Code (theo cách app chạy trong video đăng ngày 20/10/2026). Anh bấm "no folder", chọn thư mục vừa giải nén, và bấm "trust workspace" để nó đọc và ghi file trong đó. Tiếp theo, anh dán tin nhắn mở đầu lấy từ README của handoff, tin nhắn bảo Claude Code đọc `CLAUDE.md` và hỏi các câu hỏi của nó trước khi build bất cứ thứ gì.

![Claude Code hỏi câu 1/3 về nền tảng: Installable web app (PWA) hoặc Native iOS + Android](https://homus.dev/photos/b0aapjYhQUI-1403.jpg)

Claude Code báo đã đọc brief, năm tài liệu, prototype, token, các file dữ liệu và 15 screenshot, rồi hỏi câu "1/3": build app cho nền tảng nào, với hai lựa chọn "Installable web app (PWA)" và "Native iOS + Android" (React Native với Expo) (demo trong video đăng ngày 20/10/2026).

Anh nói Claude Code hỏi bốn câu, từng câu một; trên màn hình, ô câu hỏi ghi "1/3" và liệt kê ba câu (demo trong video đăng ngày 20/10/2026). Về nền tảng, anh chọn một installable web app, vì theo anh đó là một link chạy được trên mọi điện thoại hay máy tính, thêm được vào màn hình chính, và không cần tài khoản App Store. Các câu còn lại xoay quanh cách tem được thêm ở một quầy thật. Vì tiệm là tiệm giả định, anh để chúng ở trạng thái chưa quyết, nên tem chỉ lưu trên điện thoại.

Theo anh (video đăng ngày 20/10/2026), trả lời mấy câu đó trước là thứ ngăn Claude Code phải đoán. Claude Code tóm tắt kế hoạch, anh xác nhận, và nó build app. Anh dặn: nếu nó báo thiếu Node.js hay bất kỳ thành phần nào khác, cứ để nó tự cài. Khi xong, app chạy trong trình duyệt mặc định của bạn (theo video đăng ngày 20/10/2026).

Và giờ anh có một app chạy được, không chỉ là một bản mock-up (demo trong video đăng ngày 20/10/2026). Bạn chạm qua được các màn hình, dùng thẻ tích điểm, và thử toàn bộ trải nghiệm như một khách hàng.

Toàn bộ chuỗi trong video đăng ngày 20/10/2026: phong cách của landing page đi qua design system sang bài đăng, deck và app.

Anh tóm lại (video đăng ngày 20/10/2026): một prompt và một bức ảnh làm ra landing page, và phong cách của nó được mang sang bài đăng, deck và app. Theo anh, design system là thứ tiết kiệm thời gian nhiều nhất ("saved the most time"), nhờ giữ thương hiệu nhất quán. Anh dặn hãy tự thử mọi thứ trước khi chia sẻ, và tất cả những gì bạn cần để bắt đầu là một prompt tốt và một bức ảnh. Anh cảm ơn mọi người đã xem.

## Nguồn và liên kết

- Tên gốc: The Only Claude Design Tutorial You Need in 2026
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=b0aapjYhQUI](https://www.youtube.com/watch?v=b0aapjYhQUI)

- Kênh YouTube Creating with Conor (Creating with Conor): [youtube.com/channel/UC-TCNuRc61HZTjYY81qRuew](https://www.youtube.com/channel/UC-TCNuRc61HZTjYY81qRuew)

- Trang sản phẩm Claude Design của Anthropic (đọc ngày 26/10/2026; ghi việc dựng theo design system, xuất PowerPoint, PDF, HTML và gửi sang app như Canva): [claude.com/product/claude-design](https://claude.com/product/claude-design)

- Tài liệu Claude Code, trang tổng quan (đọc ngày 26/10/2026): [code.claude.com/docs/en/overview](https://code.claude.com/docs/en/overview)

Nguồn: https://homus.dev/talks/the-only-claude-design-tutorial-you-need-in-2026 · cập nhật 2026-10-26