# Hướng dẫn Claude Code trọn bộ cho designer

[Made by Caro](https://homus.dev/speakers/made-by-caro) · [Made by Caro](https://homus.dev/orgs/made-by-caro)

> Designer cài Claude Code, nối Figma và Paper qua MCP, biến bản thiết kế thành web có animation, bình luận, rồi đưa lên Vercel kèm domain.

Topics: Workflow, Coding Agents, AI UX

Canonical: https://homus.dev/talks/the-ultimate-designers-guide-to-claude-code

## 1. Sáu phần để một designer dùng Claude Code như dân pro

Caro, người làm kênh Made by Caro, mở video bằng một lời hứa: đây là hướng dẫn sáu bước để trở thành dân pro khi dùng Claude Code cho công việc thiết kế, kể cả khi bạn chưa từng dùng nó lần nào (video đăng ngày 12/10/2026).

Chị kể rằng sáu tháng trước (tính từ lúc đăng video ngày 12/10/2026), chị cũng đang ở đúng chỗ mà có lẽ bạn đang đứng. Một designer giỏi, ngày ngày thấy mọi người trên mạng xã hội nói về Claude Code mà không biết bắt đầu từ đâu. Chị kẹt ở giao diện chat, lo lắng vì không biết gì về code, và trên hết là sợ bị bỏ lại phía sau.

Giờ thì chị đã build được những thứ chị chưa bao giờ nghĩ mình làm nổi với Claude Code, và chị tin bạn cũng làm được. Vì thế video này là bản cập nhật của "Ultimate Designer's Guide to Claude Code", gom mọi thứ chị đã học và thật sự dùng mỗi ngày, cộng thêm vài mẹo và thông tin mà chị nói chưa thấy ở tutorial nào khác (theo lời chị trong video đăng ngày 12/10/2026).

![Sáu ô xem trước các phần của video: Basics & Theory, Installing Claude, Baby Steps, Using Figma, Level Pro, Making It Live](https://homus.dev/photos/yEY1jJ7rQ3k-0003.jpg)

Sáu phần của video hiện thành sáu ô: Basics & Theory, Installing Claude, Baby Steps, Using Figma, Level Pro và Making It Live, mỗi ô là một cảnh rút từ phần đó (video đăng ngày 12/10/2026).

Video được chia làm sáu phần, và bạn có thể nhảy tới phần nào tuỳ thích. Phần đầu là kiến thức nền và lý thuyết. Caro nói ai cũng đã nghe về Claude Code; nếu bạn đang xem video này, có lẽ đó là thứ bạn thấy khắp nơi dạo này (lời chị lúc đăng video ngày 12/10/2026). Nhưng vì đây là tutorial cho người mới, chị sẽ đi lại từ những điều cơ bản nhất về Claude.

## 2. Claude Code 101: Claude, Claude Code và terminal

"Chào mừng tới Claude Code 101", Caro nói. Câu hỏi đầu tiên: Claude Code là gì? Theo cách chị giới thiệu trong video đăng ngày 12/10/2026, đây là một trợ lý trí tuệ nhân tạo do Anthropic tạo ra. Các tính năng chính của nó là viết, code và phân tích file. Nó không tạo ảnh; muốn tạo ảnh thì bạn sang ChatGPT hoặc Gemini, những nơi chị nói có image model rất tốt.

Rồi tới phần chị gọi là quan trọng: Claude khác Claude Code thế nào. Theo slide của chị (video đăng ngày 12/10/2026), Claude là một trợ lý chat chạy trên web, còn Claude Code là một công cụ terminal chuyên dụng, truy cập, đọc và sửa file trực tiếp trên máy tính của bạn.

![Slide so sánh Claude (Web-based chat assistant) và Claude Code (Specialized terminal tool)](https://homus.dev/photos/yEY1jJ7rQ3k-0123.jpg)

Slide so sánh của Caro (video đăng ngày 12/10/2026): bên trái là Claude, "Web-based chat assistant"; bên phải là Claude Code, "Specialized terminal tool that directly accesses, reads, and edits files on your computer".

Nói theo kiểu con người hơn: Claude là cái giao diện chat mà chúng ta đã trò chuyện từ năm 2022. Còn Claude Code thì giao diện trông đáng sợ hơn, và với chị lúc đầu đúng là vậy, nhưng thực ra không đáng sợ chút nào. Chị nói giờ đây nó là thứ chị yêu và dùng mỗi ngày trong đời (theo lời chị, video đăng ngày 12/10/2026).

Muốn hiểu Claude Code là gì thì phải hiểu terminal là gì. Terminal là chương trình cho phép bạn điều khiển máy tính bằng lệnh thay vì bấm chuột. Về cơ bản nó gửi chỉ dẫn tới hệ điều hành của máy, có thể mở, di chuyển, sửa file và làm rất nhiều thứ khác nữa. Nhưng đừng lo, chúng ta sẽ không tự làm việc đó. Claude mới là người làm, vì như chị đã nói, nó là một công cụ terminal chuyên dụng. Và đó là lý do theo chị nó mạnh đến vậy (video đăng ngày 12/10/2026).

Caro thừa nhận lý thuyết đơn thuần thì hơi chán, có khi còn rối, và gần như chẳng dạy được gì. Nên chị chuyển ngay sang cài đặt.

## 3. Cài Claude Code theo trang docs

Caro dùng trang docs Quickstart của Claude Code, về cơ bản là hướng dẫn cài đặt, nhưng chị sẽ cài cùng người xem nên không cần lo. Bước đầu tiên trên trang là mở terminal: gõ "terminal" vào ô tìm kiếm là nó hiện ra. Máy tính nào cũng có một terminal, chỉ cần tìm (video đăng ngày 12/10/2026).

Trước khi đi tiếp, chị có một lưu ý nhỏ: muốn dùng Claude Code thì bạn cần một gói subscription của Claude. Chị khuyên gói Pro, vì đó là gói chị đang dùng và theo chị là quá đủ cho mọi thứ làm trong video (tính đến video đăng ngày 12/10/2026).

![Trang Quickstart của Claude Code Docs, mục Step 1: Install Claude Code với lệnh cho macOS, Linux, WSL](https://homus.dev/photos/yEY1jJ7rQ3k-0303.jpg)

Trang Quickstart của Claude Code Docs mà Caro dùng (video đăng ngày 12/10/2026): mục "Step 1: Install Claude Code", tab Native Install (Recommended), và lệnh cho macOS, Linux, WSL. Bên dưới còn có lệnh cho Windows PowerShell.

Có subscription rồi thì quay lại trang docs. Bước một là cài Claude Code. Caro copy lệnh cho macOS vì chị dùng Mac; nếu bạn dùng Windows PowerShell hay Windows CMD thì trang có lệnh riêng cho từng loại. Chị mở terminal lần nữa, dán lệnh vào và bấm Enter. Lệnh chị copy, như trên màn hình (video đăng ngày 12/10/2026):

```
curl -fsSL https://claude.ai/install.sh | bash
```

Theo Caro (video đăng ngày 12/10/2026), cài đặt mất khoảng một tới hai phút, chỉ việc chờ. Terminal báo Claude Code đã cài thành công. Để chắc chắn thêm lần nữa, chị copy lệnh kiểm tra phiên bản trên trang docs và dán vào terminal; nó in ra phiên bản Claude Code đang dùng, và giờ bạn biết chắc Claude Code đã nằm trên máy:

```
claude --version
```

## 4. Đăng nhập, cho Claude vào đúng folder và tạo file đầu tiên

Bước hai là đăng nhập vào tài khoản. Caro gõ `claude` trong terminal. Vì đây là lần đầu mở, nó hỏi bạn về phần setup, hoặc cứ để auto. Chị dùng Claude bằng subscription nên chọn lựa chọn đầu tiên, và nó yêu cầu đăng nhập. Chị đã đăng nhập sẵn nên chỉ cần bấm authorize. Quay lại terminal, bấm Enter, Enter lần nữa, chọn "yes" để dùng các thiết lập được recommend; tới câu hỏi về việc tin tưởng, chị tin máy của mình nên chọn yes. Vậy là đã ở bên trong Claude Code (demo trong video đăng ngày 12/10/2026).

```
claude
```

Chị biết giao diện này trông không giống giao diện chat quen thuộc, nhưng về bản chất là như nhau: gõ thử "hello" và nó trả lời (demo trong video đăng ngày 12/10/2026). Vậy là có thể sang bước tiếp theo.

Tới bài học đầu tiên. Nhớ chuyện Claude sống bên trong máy tính của bạn chứ? Máy của bạn chắc có cả đống file, và không phải lúc nào ta cũng muốn Claude ở trong toàn bộ máy. Nếu bạn muốn thì cũng được. Nhưng thường khi bắt đầu một project, việc đầu tiên là tạo một folder cho project đó. Caro đã tạo sẵn một folder tên "claude_test", nằm bên trong một loạt folder khác trên máy (video đăng ngày 12/10/2026).

Câu hỏi là làm sao để Claude chỉ đi vào đúng folder này. Có hai cách, chị gọi là cách "hardcore" và cách dễ hơn, nhưng cả hai đều khá dễ, và chị cho xem cả hai (video đăng ngày 12/10/2026):

- **Cách hardcore:** mở một cửa sổ terminal thường, không có Claude. Copy đường dẫn (path) của folder. Trong terminal gõ `cd`, một lệnh terminal để đi tới folder, dán path vào rồi Enter. Giờ bạn đang ở trong folder đó; gõ `claude` và nó mở Claude ngay trong folder ấy để bắt đầu tạo thứ gì đó (video đăng ngày 12/10/2026).

- **Cách dễ hơn, cách chị dùng:** đứng trong folder, bấm chuột phải, chọn mở trong terminal. Terminal mở sẵn tại folder đó, gõ `claude` là xong. Rất dễ (demo trong video đăng ngày 12/10/2026).

Hai đường vào cùng một chỗ: Claude Code chạy bên trong folder project, không đi lang thang khắp máy (video đăng ngày 12/10/2026).

Khi đã ở trong folder, bạn có thể bảo Claude đọc mọi thứ bên trong và làm gì đó với chúng. Folder này còn trống, nên Caro tạo file đầu tiên bằng một yêu cầu đơn giản. Câu chị gõ, như trên màn hình (video đăng ngày 12/10/2026):

```
create a txt file where you explain anything you can do for me
```

Nó tạo ngay file đó trong folder (demo trong video đăng ngày 12/10/2026). Trên màn hình, Claude báo đã tạo `what_claude_can_do.txt` trong folder `claude_test`, chia những gì nó giúp được thành 10 nhóm. Caro mở file ra: một file txt bình thường, chỉ là chữ, kể ra mọi thứ nó làm được.

![File what_claude_can_do.txt mở trong Quick Look, liệt kê các mục Write and edit code, Understand and explain, Run commands on your computer](https://homus.dev/photos/yEY1jJ7rQ3k-0707.jpg)

File `what_claude_can_do.txt` mà Claude Code vừa tạo trong folder `claude_test` (demo trong video đăng ngày 12/10/2026): "WHAT CLAUDE CODE CAN DO FOR YOU", rồi các nhóm như viết và sửa code, giải thích code, chạy lệnh trên máy, tạo tài liệu và file.

Nhưng chuyện không dừng ở đây. Theo Caro (video đăng ngày 12/10/2026), bạn có thể bảo nó sửa, chỉnh, tạo bất kỳ loại file nào: một file PDF, một file HTML, gì cũng được. "Tôi biết nghe thì sáo rỗng, nhưng trí tưởng tượng của bạn đúng nghĩa là giới hạn duy nhất."

## 5. Bài 2: token và usage

Chị biết đoạn vừa rồi rất hào hứng, nhưng trước khi đi tiếp là bài học thứ hai: vài khái niệm quan trọng để không bắt đầu code một cách mù quáng. Có cả đống khái niệm về AI; Caro chỉ chọn những khái niệm thực sự giúp chị hiểu vibe coding và làm nó hiệu quả hơn. Đó là bốn từ: token, usage, model và context window. Có thể bạn đã nghe, có thể bạn đã lờ mờ biết chúng là gì. Chị không khuyến khích, nhưng nếu muốn bỏ qua lý thuyết thì bạn có thể tua qua đoạn này (video đăng ngày 12/10/2026).

**Token** là đơn vị văn bản cơ bản mà AI đọc và viết. Điều quan trọng cần hiểu, theo Caro (video đăng ngày 12/10/2026): số token bạn có là có hạn, tuỳ vào gói subscription. Nếu bạn prompt hàng giờ liền và làm những việc phức tạp, token nhiều khả năng sẽ hết, và bạn phải chờ tới khi giới hạn được reset.

**Usage** là bạn còn bao nhiêu token và đã dùng bao nhiêu. Xem cái này rất dễ: quay lại Claude Code và gõ `/usage`. Trên màn hình của Caro, nó cho thấy chị đã dùng 8% subscription trong phiên hiện tại, và phiên sẽ reset lúc 7:40 tối, tức vài tiếng nữa. "Vậy là tôi đang ổn về usage" (demo trong video đăng ngày 12/10/2026).

```
/usage
```

Bốn khái niệm Caro chọn dạy trước khi vibe code, kèm lệnh đi cùng mỗi khái niệm trong demo của chị (video đăng ngày 12/10/2026).

## 6. Model, context window và file CLAUDE.md

Khái niệm quan trọng tiếp theo là **model**. Theo Caro trong video đăng ngày 12/10/2026, Claude có nhiều model: Haiku, Sonnet, Opus và Fable. Chị nói Fable không dùng được trong gói subscription, chỉ dùng được qua API, nhưng đừng lo, ta không cần tới nó. Ta có thể dùng Opus, một model rất tốt và sẽ tuyệt vời cho mọi thứ làm trong video.

Điều cần hiểu, theo cách chị trình bày (video đăng ngày 12/10/2026): Fable thông minh hơn Opus, Opus thông minh hơn Sonnet, Sonnet thông minh hơn Haiku. Nhưng ngược lại, Haiku dùng ít token hơn Sonnet, Sonnet dùng ít token hơn Opus, và Opus dùng ít token hơn Fable. Nên phải dùng chúng một cách khôn ngoan: việc rất phức tạp thì có thể dùng Opus; còn chỉ cần, ví dụ, dịch vài từ thì dùng cả Haiku cũng được. Chị kể mình hay đổi qua lại giữa Sonnet và Opus, vì theo chị đó là hai model rất tốt, có thể kết hợp trong mọi project.

![Cửa sổ Claude Code ghi Opus 5.5 · Claude Pro, bên dưới là dòng chữ Haiku < Sonnet < Opus < Fable](https://homus.dev/photos/yEY1jJ7rQ3k-1003.jpg)

Phiên Claude Code của Caro (video đăng ngày 12/10/2026) ghi "Opus 5.5 · Claude Pro"; trên bảng phía sau là thứ tự chị dùng để giải thích độ thông minh: "Haiku < Sonnet < Opus < Fable", và tiêu đề kế tiếp, "Context Window".

Muốn đổi model, gõ `/model` và chọn trong danh sách. Caro nói model tốt nhất lúc đó là Opus 5.5 (theo chị, tính đến video đăng ngày 12/10/2026), nhưng với một việc đơn giản hơn chị có thể chọn Sonnet. Chọn xong, chị biết phiên Claude Code này đang chạy Sonnet.

```
/model
```

Cuối cùng là **context window**: số token tối đa mà AI có thể nhớ trong một cuộc hội thoại. Theo Caro (video đăng ngày 12/10/2026), đó là lý do khi bạn đã nói chuyện với AI quá lâu, nó bắt đầu có cảm giác hơi "ngốc", bắt đầu quên thứ này, bịa ra thứ khác. Để tránh chuyện đó, bạn nên clear cuộc hội thoại càng thường càng tốt. Để clear, quay lại đây và gõ clear, nó xoá sạch mọi thứ.

```
/clear
```

Cũng vì vậy mà chị khuyên: ngay đầu mỗi project, hãy bảo Claude tạo một file chứa context của project. Chị làm luôn, giải thích rằng markdown giống file txt nhưng "xịn hơn một chút". Ví dụ project là một app về chó. Câu chị gõ, như trên màn hình (video đăng ngày 12/10/2026):

```
create a markdown file with the context of this project> an app about dogs
```

Bấm Enter và ta thấy Claude tạo file. Vậy là đã có một file với chút context, sau này chỉnh tiếp được (demo trong video đăng ngày 12/10/2026). Khi bắt đầu thấy nó "ngốc" đi, ta clear cuộc hội thoại; khi muốn làm tiếp, chỉ cần bảo nó đọc file project context (gọi bằng `@` tên file) rồi tiếp tục project. Bạn không phải viết lại context mỗi lần mở chat mới; chỉ cần một file context và bảo nó đọc đi đọc lại.

Mẹo cuối trước khi đi tiếp: hãy đặt tên file context này là `CLAUDE.md`. Caro bảo Claude đổi tên file thành CLAUDE.md. Theo chị (video đăng ngày 12/10/2026), làm vậy thì Claude luôn đọc file này, ở mọi cuộc chat, mà bạn không cần nhắc tới; nó như một master file mà Claude luôn tính tới. Còn nếu muốn, bạn vẫn có thể đặt tên gì cũng được, rồi gõ `@` và tham chiếu tới file đó.

## 7. Nối Claude với Figma qua MCP

Hiểu logic này rồi thì cuối cùng cũng tới lúc nối Claude với Figma. Caro nối qua MCP. Theo lời chị (video đăng ngày 12/10/2026), MCP là Model Context Protocol, giống một cây cầu cho phép bạn nối các app với Claude. Ở đây ta nối Figma với Claude, và chị nói việc này khá dễ: ta chỉ cần bảo Claude tự làm.

Chị bảo Claude kết nối với Figma MCP, tự tìm cách làm, rồi nối vào trang Figma này. Trong Figma, chị mở phần chia sẻ, đặt quyền để ai cũng sửa được, copy link và dán vào Claude. Chị định chờ vài phút để nó kết nối, nhưng nó làm khá nhanh (demo trong video đăng ngày 12/10/2026).

Để kiểm tra đã kết nối chưa, chị vẽ một hình vuông nhỏ trong file Figma và hỏi Claude nó thấy gì trong file này. Lúc đầu nó chưa thấy. Claude chỉ cách: phải khởi động lại Claude Code, chạy `/mcp`, chọn Figma rồi bấm cho phép truy cập (demo trong video đăng ngày 12/10/2026). "Ta làm thôi, đừng lo, khá dễ."

Để khởi động lại, Caro gõ `exit`, quay lại terminal, gõ `claude` lần nữa, rồi gõ `/mcp`. Figma nằm đó, chị bấm Enter. Với chị, nó đã được xác thực và kết nối sẵn; chị đoán vì chị đã dùng trước đây nên nó được tích sẵn. Với bạn có thể chưa, khi đó nó chỉ hỏi bạn vài quyền là dùng được (theo Caro, video đăng ngày 12/10/2026).

```
exit
```

```
/mcp
```

![Lệnh /mcp trong Claude Code hiển thị Figma MCP Server: Status connected, Auth authenticated, Tools 40 tools; bên phải là file Figma Claude Code Guide với Rectangle 1](https://homus.dev/photos/yEY1jJ7rQ3k-1423.jpg)

Màn hình `/mcp` trong demo (video đăng ngày 12/10/2026): Figma MCP Server ở trạng thái connected và authenticated, URL `https://mcp.figma.com/mcp`, 40 tools, kèm các lựa chọn View tools, Re-authenticate, Reconnect, Disable. Bên phải là file Figma "Claude Code Guide" chỉ có "Rectangle 1".

Chị dán lại link và xem nó có vào được không. Lần này nó đã vào được file Figma: Claude báo đã mở link, file gần như trống, chỉ có "Rectangle 1". "Đúng rồi", Caro xác nhận (demo trong video đăng ngày 12/10/2026).

Nhớ lúc nãy chị bảo nó tạo file CLAUDE.md với context của một app về chó chứ? Như chị đã nói, nó luôn đọc file đó, nên Claude còn hỏi có muốn nó thiết kế luôn app về chó không. Chị không làm app đó trong video này, vì chị có kế hoạch khác (video đăng ngày 12/10/2026).

## 8. Bảo Claude thiết kế từ con số không

Trước hết, chị bảo nó làm một thứ đơn giản. Claude đã nối với file Figma, và theo chị nó có thể làm gần như mọi thứ (lời chị trong video đăng ngày 12/10/2026). Caro bảo nó tạo mockup cho một landing page về một video YouTube, và tạo design system với variables và tokens. "Xem nó làm gì nào."

Màn hình chuyển sang một tấm thẻ "One hour later" ("một tiếng sau"), rồi chị nói thật: đã gần bốn phút trôi qua, và nó đã làm xong mọi thứ ta yêu cầu (theo số đo của Caro, video đăng ngày 12/10/2026). Chị phóng to cửa sổ.

Và nó thực sự đã tạo một design system với màu, màu nhấn (accent), tokens, typography, spacing, radius, cùng với trang web ta đã yêu cầu: một landing page có tiêu đề, subtitle, các nút, video, phần features, footer, đủ cả. Mọi thứ đều có variables của nó (demo trong video đăng ngày 12/10/2026).

![Landing page Learn Claude Code in one sitting do Claude tạo trong Figma, với nút Watch on YouTube và khung video](https://homus.dev/photos/yEY1jJ7rQ3k-1643.jpg)

Landing page mà Claude dựng trong Figma từ một câu yêu cầu (demo trong video đăng ngày 12/10/2026): tiêu đề "Learn Claude Code in one sitting", hai nút "Watch on YouTube" và "Jump to chapters", khung video lớn; trong Layers có "Design System" và "Landing Page / Desktop".

"Tuyệt", chị nói. Theo nhận xét của Caro (video đăng ngày 12/10/2026), trong bốn phút nó đã làm thứ mà một designer có lẽ phải mất cỡ một ngày.

## 9. Lợi thế của designer: đưa Claude bản thiết kế của chính mình

Nhưng có một điều Caro không thích: nó trông hơi cẩu thả, khá đơn giản, nhìn là biết làm bằng AI. Chị nói không phải là tệ, làm landing page thì vẫn dùng được. Nhưng theo chị (video đăng ngày 12/10/2026), lợi thế không công bằng (unfair advantage) của designer chúng ta là ta biết thiết kế, nên bảo Claude thiết kế một thứ từ số không thì chị thấy hơi nhàm. Vì vậy chị sẽ làm một việc khác.

Chị có một kế hoạch khá hay cho video này: dùng một file thiết kế mà chị tự thiết kế, hoàn toàn không có Claude, rồi đưa cho Claude để nó code. Theo chị, đây mới thật sự là cách dùng Claude tốt nhất (ý kiến của Caro, video đăng ngày 12/10/2026). Người ta hay nói AI sẽ thay thế designer, nhưng theo một cách nào đó, ta cũng có thể thay thế kỹ sư, vì chị không biết code, nhưng chị có thể bảo Claude code giúp, biến nó thành thật, làm nó responsive và làm nó chạy được.

Tức là dùng khả năng của Claude để bổ sung cho khả năng của chính mình. Chị đã thiết kế sẵn một trang web mà chị thấy khá ổn, khá đẹp. Giờ chị sẽ bảo Claude thêm animation cho vài thứ: có thể là nhân vật này, làm cho nó chạy được; vài animation hay ho, ví dụ khi hover vào các tấm ảnh thì chúng bật lên. "Tôi cũng chưa biết nữa. Ta sẽ làm vài thứ thú vị." (video đăng ngày 12/10/2026)

Chị cũng giải thích bản thiết kế này là gì: nó là một bản hướng dẫn cho chính video này, về cơ bản là video này dưới dạng một kiểu blog, một trang web.

Kế hoạch là: code trang đó, làm vài animation, rồi đưa nó lên mạng, gắn domain, hosting, để ai có link cũng vào được. Bước đầu lẽ ra là đưa link Figma cho Claude, nhưng chị nói thực ra ta sẽ không làm vậy, vì có cách tốt hơn (video đăng ngày 12/10/2026).

## 10. Vì sao Caro chuyển bản thiết kế sang Paper

Lý do, theo Caro trong video đăng ngày 12/10/2026: Figma được xây trên WebGL, thứ mà chị mô tả là khó cho Claude đọc. Còn Paper, một app khác, là một app rất hay và rất giống Figma nên bạn sẽ không khó làm quen. Theo chị, Paper được xây trên HTML, nên Claude đọc dễ hơn nhiều, truy cập được bản thiết kế của bạn và làm ra kết quả pixel perfect hơn nữa.

Luồng Caro dùng: copy thiết kế từ Figma, dán vào Paper, rồi để Claude Code đọc Paper qua MCP (video đăng ngày 12/10/2026).

Giờ chị luôn làm thế này: chọn bản thiết kế trong Figma, Command C, rồi Command V sang Paper. Nó dán vào gần như y nguyên. Theo những gì chị thấy trong demo (video đăng ngày 12/10/2026), vẫn có vài chỗ không giống hẳn. Ví dụ typography bị đổi: chị đang dùng font Figma Hand mà chị rất thích, và Paper không có Figma Hand. Nó cũng làm lệch vài chi tiết, nên chị tự sửa lại những chỗ Paper làm hỏng. Sửa xong, chị thấy giờ đã khá giống bản Figma.

## 11. Nối Paper qua MCP và biến thiết kế thành HTML

Quy trình lặp lại như với Figma. Caro copy link file Paper, chỉnh để ai có link cũng truy cập được, quay lại terminal và bảo Claude kết nối với Paper MCP rồi truy cập file này. Claude tự tra cách kết nối với Paper MCP và làm. Chị dặn có thể ta phải khởi động lại Claude lần nữa, "nhưng sẽ đáng, tôi hứa". (video đăng ngày 12/10/2026)

Đúng là phải làm lại như lúc trước: gõ `exit`, mở lại `claude`, gõ `/mcp`. Lần này nó báo đã kết nối; chị bấm Escape để thoát màn hình đó (demo trong video đăng ngày 12/10/2026).

Chị dán lại link, và Claude kể ra những gì đang có trong file: một trang với một artboard tên "MacBook Pro 14". Rồi chị nói cho nó điều chị muốn làm: code trang web này, tạo một file HTML từ nó, làm pixel perfect hết mức có thể. Câu chị đang gõ trên màn hình bắt đầu bằng "I want you to code this website. Create an html with it, make it as pixel perfect". (video đăng ngày 12/10/2026)

![Claude Code mô tả file Paper Kind orchard: một artboard MacBook Pro 14 – 3, 1512 × 7086, 12 section, khoảng 457 node, các font Instrument Serif, Instrument Sans và IBM Plex Mono](https://homus.dev/photos/yEY1jJ7rQ3k-2143.jpg)

Sau khi dán link Paper (demo trong video đăng ngày 12/10/2026), Claude báo đã gọi Paper ba lần và mô tả file: một artboard "MacBook Pro 14" – 3" cỡ 1512 × 7086, landing page dài với 12 section và khoảng 457 node, font Instrument Serif, Instrument Sans và IBM Plex Mono, chưa có design token nào. Nó hỏi muốn làm gì, gợi ý cả "Implement it as code".

"Nhìn xem đẹp chưa", chị nói khi thấy nó bắt đầu chạy, nghĩa là nó đã hoạt động; chỉ cần chờ vài phút. Theo số đo hiện trên màn hình của Caro (video đăng ngày 12/10/2026), nó xong sau 2 phút 18 giây. Chị nói mình hơi sợ vì nó làm quá nhanh.

Trong folder giờ có file `index.html`. "Tới giờ phút của sự thật", chị bấm đúp để mở. Các phần tương tác chưa chạy, vì chị chưa bảo nó làm cho chúng chạy, nhưng về cơ bản trang giống hệt bản thiết kế: một file HTML có mọi thứ chị muốn (demo trong video đăng ngày 12/10/2026). Trong phần tổng kết, Claude còn liệt kê những điều cần biết, ví dụ trang được dựng cố định cho chiều rộng 1512px và chưa responsive, còn form thì vẫn tĩnh: các checkbox của hợp đồng, ô tên và ô bình luận chưa làm gì cả.

## 12. Ô điền tên, checkbox và bảy kiểu animation ký hợp đồng

Bước tiếp theo là thêm vài animation thú vị. Caro giải thích ý tưởng của trang: người vào trang sẽ phải "ký" một bản hợp đồng, hợp đồng giả thôi, nhưng chị thấy vui. Họ viết tên mình ở đây, nên chỗ này phải là một ô nhập liệu tương tác được, và nút ký hợp đồng phải có một animation hay ho. Chị làm hai bước này trước.

Chị quay lại Claude, cảm ơn nó, rồi nói bước tiếp theo là làm phần này tương tác được, kèm một ảnh chụp màn hình. Chị muốn phần "write your name here" tương tác được để mọi người thật sự viết tên vào. Chữ ở đó nên xám hơn (chị nhớ đã làm nó xám trong file Figma, có lẽ chưa sang được file Paper) để mọi người nhận ra là có thể viết vào, và có thể đậm hơn một chút, semibold là được. Chị cũng muốn các checkbox hoạt động. Đoạn đầu câu chị gõ trên màn hình là: "Great thank you! Now, the next step is to make this part interactive [Image #1] I want the [write your name here] part to be interactive, so people can actually write their name, it should be grayer". (video đăng ngày 12/10/2026)

Gửi đi, chờ vài giây. Claude báo đã xong; chị refresh trang, kéo xuống, và giờ chị thật sự gõ được tên mình và bấm được các checkbox (demo trong video đăng ngày 12/10/2026). "Tuyệt!"

Giờ chỉ còn thiếu phần ký hợp đồng. Ở bước này Caro muốn làm một thứ hay ho, và chị nói sẽ cho xem ngay. Chị muốn làm animation ký hợp đồng, một animation thật hay, nhưng chưa biết làm gì, nên chị bảo Claude nghĩ ý tưởng giúp. Chị đưa nó ảnh chụp phần đó và bảo tạo một HTML artifact mới, tức một file HTML riêng, tách khỏi file chính, với tối thiểu sáu lựa chọn animation hay ho cho việc ký hợp đồng này, có kèm component, để chị chọn cái nào sẽ đưa vào trang. Đoạn đầu câu chị gõ: "I want to make an animation of signing contract. A very cool animation. [Image #2] Create a new html artifact with minimum 6 options of cool animations of signing this". Trang hướng dẫn chị dựng trong video (đọc ngày 25/10/2026) gọi cách làm này là dùng HTML như một "playground" để thử ý tưởng.

Chờ một chút, file HTML mới đã xong và tự mở ra. Ở đó có ô điền tên, chị gõ thử một cái tên khác và nó hiện đúng tên đó trong các animation. Không phải sáu mà có bảy cách ký hợp đồng (demo trong video đăng ngày 12/10/2026). Chị lần lượt xem từng cái và nhận xét:

- **Ink signature**: "Không biết mình có thích không", chị chưa chắc về typography, nhưng cũng được (demo trong video đăng ngày 12/10/2026).

- **Wax seal** (con dấu sáp): "Cái này hay đấy, tôi thích cái này" (demo trong video đăng ngày 12/10/2026).

- **Confetti burst**: chị cũng thích, có thể dùng cho việc khác sau (demo trong video đăng ngày 12/10/2026).

- **Hold to sign** (nhấn giữ để ký): khá cơ bản, bình thường, có lẽ trang trọng hơn một chút (demo trong video đăng ngày 12/10/2026).

- **Morph to check**: cũng khá bình thường (demo trong video đăng ngày 12/10/2026).

- **Mascot approves** (linh vật duyệt): "Cái này dễ thương. Tôi thích" (demo trong video đăng ngày 12/10/2026).

- **Committed** (con dấu "COMMITTED"): khá hay (demo trong video đăng ngày 12/10/2026).

![Claude Code liệt kê bảy animation: Ink signature, Wax seal, Confetti burst, Hold to sign, Morph to check, Mascot approves, Rubber stamp](https://homus.dev/photos/yEY1jJ7rQ3k-2723.jpg)

Bên cạnh trang "Sign the contract, seven ways", Claude giải thích bảy lựa chọn (demo trong video đăng ngày 12/10/2026): Ink signature, Wax seal, Confetti burst, Hold to sign, Morph to check, Mascot approves và Rubber stamp với con dấu COMMITTED. Nó bảo chọn số để đưa vào `index.html`, có thể kết hợp hai cái, và lưu file ở `contract-animations.html`.

## 13. Con dấu sáp và những tương tác còn lại

Nhưng cái chị thích nhất là con dấu sáp. Chị chọn nó, vì trang này không phải một trang web nghiêm túc lắm nên có thể chơi vui một chút. Chị quay lại Claude và bảo: "Tôi muốn animation wax seal được implement." (video đăng ngày 12/10/2026)

Theo Caro, đây chỉ là một cái nhìn tổng quan về những gì bạn làm được với Claude: bạn có thể làm cả đống animation mà chị sẽ không làm nổi trên Figma; với chị, làm được cái này trên Figma sẽ mất nhiều ngày. Còn ở đây, chị ước lượng chỉ mất khoảng 10 phút (theo lời chị, video đăng ngày 12/10/2026). "Tôi thấy thế khá là hay."

Xong rồi. Chị muốn xem khi đưa vào trang thì trông thế nào, vì biết đâu lại kỳ. Chị refresh trang, bấm ký hợp đồng. "À, tên tôi chứ." Chị gõ tên mình, Carolina, rồi ký. Chị thấy khá hay; có thể cần chỉnh kích thước chỗ này chỗ kia, nhưng nhìn chung ổn (demo trong video đăng ngày 12/10/2026). Từ đây ta có thể tiếp tục làm cả đống animation, tương tác và chức năng "pro" với Claude Code.

Tới lúc này đã có ba tương tác: ô tên, các checkbox và nút ký hợp đồng. Ta có thể làm tiếp như vậy cho cả trang. Thực ra chị đã lên kế hoạch cho vài cái:

- hover vào một nút thì hiện ảnh cover của video YouTube;

- một kiểu trò chơi khủng long (dino game) với nhân vật Claude nhỏ (video đăng ngày 12/10/2026);

- animation chữ ký (đã làm);

- hover hoặc bấm vào các tấm ảnh thì chúng bật ra một chút;

- nút để copy các lệnh terminal trên trang;

- bình luận được, lưu bình luận, và khi bình luận thì có confetti bung ra.

Chị còn lên kế hoạch vài thứ khác nữa, nhưng nếu làm hết thì video sẽ dài tới bốn tiếng. Nên chị chọn làm phần bình luận, để mọi người thấy có thể thêm cả loạt chức năng vào một trang web thế nào; theo chị đây là phần phức tạp nhất trong số đó. Những cái còn lại chị sẽ tự làm và để luôn trên trang, vì bạn đã biết cách: chỉ cần prompt, bảo nó đưa ra nhiều lựa chọn, chọn cái bạn thích rồi làm. Chị nói thực ra không khó, chỉ cần prompt như chị đã chỉ (video đăng ngày 12/10/2026).

## 14. Phần bình luận: chức năng cần backend

Mục tiêu của phần bình luận: người vào trang web này có thể thật sự thêm một bình luận, đổi icon, ghi tên mình và xem bình luận của người khác. Caro nói việc này cần cả đống code mà chị sẽ không bao giờ tự làm nổi, vì nó còn cần một kiểu backend nào đó. Chị không chắc có làm được không, nhưng nghĩ là được vì nó không quá phức tạp. Và như chính bản hợp đồng trên trang ghi, ta phải giả định mọi thứ có thể chạy trước khi giả định là không (video đăng ngày 12/10/2026).

Chị chụp màn hình phần đó, quay lại Claude và nói mình muốn phần bình luận này hoạt động. Câu chị gõ, như trên màn hình (video đăng ngày 12/10/2026):

```
[Image #3] I want this comment section to work. So i want people to be able to edit their icon, comment something, put their name (if they signed the contract their name should already appear), Also, the comments should be saved, so if a user comments something the comment has to be saved on the page so other people can see the comment.
```

Theo Caro, bạn phải nói với Claude thật rõ ràng. Chị nói mình đã nói chữ "comment" nhiều quá tới mức chữ đó bắt đầu nghe lạ, và xin lỗi vì không chắc dùng "comments" có đúng không vì tiếng Anh không phải tiếng mẹ đẻ của chị, "nhưng Claude sẽ hiểu". Chị bấm Enter (video đăng ngày 12/10/2026).

Lần này có một thứ mới: Claude đưa ra các lựa chọn. Bình luận chia sẻ giữa các khách truy cập cần được lưu ở đâu đó, và nó hỏi trang này sẽ được host ở đâu (demo trong video đăng ngày 12/10/2026).

![Claude Code hỏi Storage: Comments shared between visitors need somewhere to be stored. Where will this page be hosted? với ba lựa chọn](https://homus.dev/photos/yEY1jJ7rQ3k-3223.jpg)

Câu hỏi "Storage" của Claude trong demo (video đăng ngày 12/10/2026): bình luận cần chỗ lưu, trang sẽ được host ở đâu? Ba lựa chọn: publish thành Claude artifact có database dùng chung (Recommended), tự host kèm Firebase/Supabase, hoặc một server Node chạy local; thêm ô tự gõ và "Chat about this".

Chị chưa tới bước đó, nhưng đã định host trang trên Vercel, chỉ không biết có chạy được không. Nên chị nói thẳng với Claude: tôi định host trên Vercel nhưng không biết có chạy được ở đó không. Theo chị, chị thường không biết rất nhiều thứ, nên chị cứ nói cho nó điều mình giả định, và nó sẽ cho biết có được hay không (video đăng ngày 12/10/2026).

## 15. Hosting trên Vercel và tạo database lần đầu

Claude trả lời. Caro đọc trên màn hình: nó đã bỏ ba bình luận mẫu, chị thấy ổn. Server giữ 200 bình luận mới nhất (demo trong video đăng ngày 12/10/2026). Chị nói: vậy là chỉ 200 người đầu tiên được bình luận. Và ta phải deploy nó.

Hosting và domain vốn thuộc bước tiếp theo, đưa trang web lên mạng, nên chị giải thích nhanh và dễ hiểu. Ta sẽ host trên Vercel. Hosting giống như thuê một phần của internet để trang web của bạn sống ở đó. Có rất nhiều nơi để host; Caro nói nơi chị thích nhất là Vercel vì chị thích thiết kế của họ và thích đội ngũ của họ, những người chị thấy rất tuyệt (cảm nhận của chị, video đăng ngày 12/10/2026). Nhưng còn nhiều nơi khác như Netlify, GitHub Pages. Ở đây ta dùng Vercel, và chỉ việc bảo Claude làm: "Làm đi."

Claude mở ra một cửa sổ để xác thực thiết bị. Chị không biết phải làm gì, nên bấm cho phép truy cập, nghĩ là chẳng có gì khủng khiếp xảy ra. Đóng tab, quay lại, chọn yes để cài (demo trong video đăng ngày 12/10/2026).

Rồi một trang tạo database hiện ra. Chị chưa bao giờ tạo database, "nên cái này mới với bạn và cũng mới với tôi", và bạn sẽ thấy chị làm trực tiếp. Chị biết có một gói miễn phí và chưa muốn trả tiền, nên chị nói mình hơi rối, không biết làm gì; những lúc như vậy chị chỉ chụp màn hình và nhờ Claude giúp. Câu chị gửi kèm ảnh trên màn hình là "help idk what to do". (video đăng ngày 12/10/2026)

Claude hướng dẫn: để nguyên region, để trống read regions, tắt eviction. Nó nói nhà cung cấp database (Upstash) thường có gói Free bên dưới danh sách, hãy chọn nó rồi bấm Continue. Chị tìm nhưng không chọn được; chị không chắc có gói free thật không, nghĩ là không có. Theo màn hình lúc đó (video đăng ngày 12/10/2026), nếu không có Free thì Claude gợi ý gói Pay As You Go, tính $0.20 cho mỗi 100.000 commands, với một ô bình luận dùng rất ít thì tối đa vài cent mỗi tháng, và khuyên tránh các gói cố định bắt đầu từ $10 một tháng. Chị chọn gói trả theo mức dùng đó.

Kiến trúc phần bình luận trong demo: trang host trên Vercel, bình luận lưu vào một database Upstash Redis tạo qua Vercel (video đăng ngày 12/10/2026).

Tiếp theo phải thêm thẻ thanh toán. "Hy vọng nó không lấy hết tiền của tôi. Tôi làm vì các bạn đấy." Chị trả tiền rồi quay lại. Giờ chị tạo database, đặt tên; chị nghĩ tới "claude guide" rồi chọn "claude design comments". Chị bấm tạo, và nói sẽ kiểm tra sau xem có giới hạn chi tiêu hay gì không, giờ cứ tạo cho mục đích của video. Database đã được tạo (demo trong video đăng ngày 12/10/2026).

## 16. Lộn xộn nhưng chạy được: bình luận được lưu cho mọi người

Caro không chắc có được cho xem mấy thông tin trên trang đó không, chị nghĩ là không, nên chị chỉ gửi ảnh cho Claude và hỏi bước tiếp theo. Chị biết đoạn này hơi lộn xộn, nhưng chị nghĩ cho mọi người thấy là hay. Theo chị, vibe coding khi không biết code, khi là một designer, lúc nào cũng có thể hơi lộn xộn; đó không phải một quá trình thẳng tắp. Bạn phải hỏi nhiều, tìm kiếm, học thứ mới. Chị thấy như vậy thực ra rất hay; bạn chỉ cần cứ thử, thử mãi (video đăng ngày 12/10/2026).

Claude nói chị đang ở gói pay-as-you-go và phải nối nó vào project. Chị thấy có dấu tích, nên nghĩ là đã nối rồi. Chị không chắc, nên hỏi luôn Claude có tự làm được không; theo chị, đôi khi Claude làm được gần như mọi thứ, và lúc đó chị đang rối quá (video đăng ngày 12/10/2026).

Claude báo: trang đã live và bình luận giờ đã lưu cho mọi người. "Tôi nghĩ giờ nó chạy rồi." Nó còn đăng một bình luận thử (demo trong video đăng ngày 12/10/2026). Caro kiểm tra: trang chưa responsive, còn cả đống thứ phải xem lại sau, nhưng tạm ổn. Bình luận thử hiện ra. Chị bấm "edit icon" và đổi icon được, "khá hay đấy". Chị chọn màu hồng, viết "Vibecoding is great!", ghi tên mình, rồi gửi.

![Trang claudetest-pied.vercel.app với phần Anything you wanna say?, bình luận của Carolina Vibecoding is great! và bình luận test api check; bên phải là terminal Claude Code](https://homus.dev/photos/yEY1jJ7rQ3k-3843.jpg)

Phần bình luận chạy trên bản live ở Vercel (demo trong video đăng ngày 12/10/2026): ô "Anything you wanna say?", bình luận "Vibecoding is great!" của Carolina và bình luận thử "api check" do Claude đăng. Trong terminal, Claude báo trang đã live và bình luận được lưu cho mọi người.

Chị tải lại trang: bình luận vẫn còn đó. "Tuyệt. Nó chạy." Vậy là bạn làm được cả một phần bình luận. "Mọi thứ đều có thể. Bạn cứ làm thôi" (lời Caro, video đăng ngày 12/10/2026).

## 17. Making it live: Git và GitHub

Caro biết phần vừa rồi khá dài, nên chuyển sang phần cuối: đưa project lên mạng. Chị thừa nhận bản Designer's Guide này đã hơi lộn xộn dần qua các bước, nhất là ở phần bình luận, vì chị định dạy hosting ở phần sau mà nó lại tới sớm hơn. Nhưng chị vẫn dạy lại, để bạn có nó trong đầu và học theo cách có tổ chức hơn.

Kế hoạch cho phần cuối, có tên "Making it live", là dạy Git, GitHub, hosting và domain, đi lần lượt từ đầu tới cuối. Chắc bạn muốn khoe những thiết kế này với bạn bè designer và cho họ xem bạn đã làm gì, nên có vài bước phải làm. Bước đầu là lưu project. Ở đây ta đã lưu theo một kiểu rồi, nhưng có cách tốt hơn. Chị gõ `/clear` trước.

Thứ đó gọi là **Git**. Như chị ghi trong sổ tay hiện trên màn hình, Git là một công cụ phần mềm chạy local trên terminal của bạn, nghĩa là Claude chạy được nó, bạn không phải tự chạy. Theo Caro (video đăng ngày 12/10/2026), nó rất hữu ích vì khi bạn làm hỏng gì đó, có thể Claude không nhớ rõ, và nếu quay lại thì có khi không còn như cũ.

Git tạo ra những checkpoint, để bạn quay lại bất cứ lúc nào cần, kể cả khi đã đi xa cả nghìn bước. Ta làm việc đó bằng một commit, tức hành động lưu. Để mọi thứ dễ nhất, bạn chỉ cần bảo Claude tạo một commit. Theo chị, việc này không tốn nhiều token nên đừng lo (video đăng ngày 12/10/2026).

```
make a commit
```

Claude chạy `git status` và báo thư mục này chưa phải một git repository nên chưa có gì để commit, rồi hỏi có muốn nó chạy `git init`, stage file và tạo commit đầu tiên không. "Đúng vậy", Caro nói, nó phải chạy phần mềm Git, nên chị chọn yes. Vậy là đã lưu (demo trong video đăng ngày 12/10/2026). Chị nói đó là việc bạn nên làm khi bắt đầu mỗi project.

Bốn bước Caro dạy ở phần cuối: lưu bằng Git, đẩy lên GitHub, host trang, rồi gắn domain.

Nhưng commit đó mới chỉ lưu trên Git trên máy. Chắc bạn đã nghe về **GitHub**: một nền tảng web lưu các commit và toàn bộ project của bạn online. Vì vậy, kể cả khi máy tính bị trộm, bạn vẫn làm tiếp project trên một máy mới. Ta sẽ nối với GitHub; chị chỉ nói với Claude kiểu như "nối với GitHub và lưu các commit lên đó". Claude báo commit đã lên GitHub, ở một link riêng. "Tuyệt!" (demo trong video đăng ngày 12/10/2026).

## 18. Hosting, mua domain và thử thách cuối video

Thứ ba chị muốn dạy là **hosting**, cái ta đã làm. Như đã nói, hosting giống như thuê một khoảng trên một server luôn bật, ngày nào, tuần nào cũng bật, để mọi người truy cập trang web của bạn 24/7. Ta có thể làm qua Vercel, Netlify hay vài nơi khác; chị dùng Vercel như đã nói. Thực ra ta đã làm xong, nhưng chị thử xem chuyện gì xảy ra nếu bảo nó làm lại. Câu chị gõ trên màn hình (video đăng ngày 12/10/2026):

```
host this website index.html on vercel
```

Chị đoán nó sẽ nói trang đã được host rồi, còn nếu chưa thì nó sẽ host luôn. Đúng vậy: project đã được nối với Vercel (demo trong video đăng ngày 12/10/2026). Nghĩa là trang đã nằm ở link này, và nếu bạn gõ link đó vào bất kỳ trình duyệt nào, trang web sẽ hiện ra.

Nhưng chị không thích cái domain `claudetest-pied.vercel.app`. Nên ta sẽ mua một domain. Đây là bước thêm, không bắt buộc, nhưng chị chỉ cách mua và cách nối. Chị mua ngay trên Vercel. Chị đã muốn cái tên này từ lâu, đã lưu sẵn, nên giờ mua luôn (video đăng ngày 12/10/2026).

![Trang Vercel Domains tìm madebycaro.co, giá $29.99, madebycaro.com Unavailable](https://homus.dev/photos/yEY1jJ7rQ3k-4323.jpg)

Trang Vercel Domains khi Caro tìm "madebycaro.co" (màn hình trong video đăng ngày 12/10/2026): madebycaro.co có giá $29.99 và đã được đánh dấu lưu, madebycaro.com không còn, kèm các đuôi khác như .cool, .coach.

Có domain rồi, "tuyệt quá, cuối cùng cũng có". Chị nghĩ có lẽ chỉ cần bảo Claude nối nó vào. Chị nói với Claude rằng đã mua domain madebycaro.co trên Vercel, hãy nối nó với trang web. Claude báo đã làm xong; chị copy domain, tìm thử trên trình duyệt, và trang đã live (demo trong video đăng ngày 12/10/2026). Ta đã đi từ một file Figma toàn pixel tới một trang web thật, đã được code, có chức năng, có animation. "Tuyệt vời."

Caro nói chị sẽ còn sửa vài chỗ, thêm vài animation và chức năng, và ghi lại tất cả ngay trên chính trang web đó. "Và nhớ là: bạn cứ làm thôi."

Lời cuối là một thử thách: hãy build một thứ gì đó và chia sẻ bên dưới, vì theo chị, bắt tay làm là cách duy nhất để bạn thật sự học. Chị sẽ trả lời câu hỏi trong phần bình luận. "Hẹn gặp lại ở video sau."

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

- Tên gốc: The ULTIMATE Designer’s Guide to Claude Code
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=yEY1jJ7rQ3k](https://www.youtube.com/watch?v=yEY1jJ7rQ3k)

- Kênh YouTube Made by Caro (Made by Caro): [youtube.com/channel/UCJDxylDXJCKWGMxDlLnApfQ](https://www.youtube.com/channel/UCJDxylDXJCKWGMxDlLnApfQ)

- Claude Code Docs, Quickstart: trang Caro dùng để cài Claude Code, gồm lệnh cài cho macOS/Linux/WSL và Windows, `claude --version` và bước đăng nhập (đọc ngày 25/10/2026): [code.claude.com/docs/en/quickstart](https://code.claude.com/docs/en/quickstart)

- Paper, app thiết kế Caro dùng thay Figma để Claude đọc bản thiết kế (đọc ngày 25/10/2026): [paper.design](https://paper.design)

- Vercel, nơi Caro host trang và mua domain trong video: [vercel.com](https://vercel.com) (video đăng ngày 12/10/2026)

- Netlify, một nơi hosting khác Caro nhắc tới: [netlify.com](https://www.netlify.com)

- GitHub Pages, một nơi hosting khác Caro nhắc tới: [pages.github.com](https://pages.github.com)

- Trang web Caro dựng trong video, bản live (đọc ngày 25/10/2026): [madebycaro.co](https://madebycaro.co)

Nguồn: https://homus.dev/talks/the-ultimate-designers-guide-to-claude-code · cập nhật 2026-10-25