Hướng dẫn Claude Code cho designer

AI dark 02/04/2026 14:42 13

Nghe bài viết:

Tôi không phải developer. Nhưng tôi đã build 3 app và ship chúng chỉ trong 2 tuần.

Designer biết vibe coding có thể ship nhanh gấp 10 lần. Và kiếm tiền nhiều gấp 10 lần. ⭐️ Học vibe coding với Claude Code & Cursor → từ Figma đến prototype hoàn chỉnh chỉ với $249 thay vì $599 hôm nay. Bao gồm 3 khóa học mới như Figma MCP, iOS Apps, và hơn thế nữa. Không cần nền tảng lập trình.

Chào mọi người,

Claude Code là kỹ năng có đòn bẩy lớn nhất bạn có thể học trong năm nay.

Bạn không nên bỏ lỡ điều này. Vì vậy tôi đã viết một hướng dẫn đầy đủ cho bạn.

Để bạn có bối cảnh...

Tôi đã build website cá nhân, kèm chatbot AI trả lời câu hỏi về công việc của mình, chỉ trong 48 giờ. Ba ngày sau, tôi tiếp tục ship một công cụ growth design.

Tôi không phải developer. Tôi là designer. Một năm trước, tôi không thể viết nổi một dòng code nếu không có engineer. Giờ thì tôi deploy sản phẩm vào cuối tuần.

Vẫn là cùng một người, chỉ khác công cụ (không còn dùng Figma nữa)!

Đây là hướng dẫn đầy đủ để sử dụng Claude Code cho designer → từng bước, từng lệnh cụ thể.

Claude Code cho designer

Claude Code là gì?

Claude Code là một coding agent. Bạn chỉ cần đưa instruction bằng tiếng Anh tự nhiên, nó sẽ viết code cho bạn. Bạn prompt: “Tạo một landing page với hero section, ba feature card và footer.” → nó thực thi.

Hoặc kiểu như: “Thêm widget chat AI trả lời câu hỏi về portfolio của tôi.” → nó thực thi. Bạn không cần hiểu syntax. Bạn chỉ cần hiểu mình đang build cái gì.

Theo quan điểm cá nhân, nó thậm chí còn tốt hơn Cursor hay bất kỳ công cụ nào khác ở thời điểm hiện tại.

Những thứ tôi đã build

⭐️ Project 1: Game Tetris

Phần này thực sự điên rồ: tôi build một game Tetris chỉ bằng Figma MCP kết nối với FigJam, sau đó đưa sang Claude Code. Tôi không hề tự thiết kế hay viết một dòng code nào.

Không đùa đâu, tôi thật sự sốc (xem reaction của tôi ở giây thứ 7). 😂

⭐️ Project 2: Công cụ growth design

Một công cụ nội bộ để phân tích metrics và đề xuất experiment design. Có database, authentication người dùng, recommendation bằng AI. 3 ngày. Sản phẩm chạy thật. Public trên internet.

Điên thật, hiện đã có hơn 500 người dùng!

Giờ thì bắt đầu nhé.

Bước 1: Cài đặt Claude Code

Trên Mac: Mở Terminal (tìm “Terminal” bằng Spotlight) và chạy:

npm install -g @anthropic-ai/claude-code

Nếu bạn chưa có npm, hãy cài Node.js tại https://nodejs.org

Kiểm tra cài đặt: Gõ:

claude

Claude Code sẽ khởi động. Bạn sẽ thấy một giao diện text nơi bạn có thể bắt đầu nhập instruction.

Image

Bước 2: Các lệnh terminal cơ bản

Claude Code chạy trong terminal. Đây là những gì bạn cần biết:

claude                    # Mở Claude Code
cd folder-name            # Đi vào thư mục
cd ..                     # Quay lại thư mục trước
ls                        # Liệt kê file (Mac)
dir                       # Liệt kê file (Windows)
pwd                       # Xem vị trí hiện tại (Mac)

Chỉ vậy thôi. Bạn không cần thêm gì để bắt đầu.

Bước 3: Tạo project đầu tiên

Tạo thư mục project:

mkdir my-portfolio
cd my-portfolio
claude

Giờ bạn đang ở trong Claude Code, bên trong project.

Luôn bắt đầu bằng plan (cực kỳ quan trọng):

Trước khi viết code, hãy yêu cầu một plan:

Tôi muốn build một website portfolio cá nhân với:
- Hero section có tên và tagline
- Section dự án với 4 project gần nhất
- Section about với bio
- Section contact với link Twitter và LinkedIn

Hãy research cách tốt nhất để build và tạo file plan.md bao gồm:
1. Tech stack đề xuất
2. Cấu trúc file
3. Design considerations
4. Kế hoạch triển khai từng bước

Claude Code sẽ tạo file plan.md. Hãy mở và review.

Điều chỉnh (cực kỳ quan trọng):

Trong plan, đổi tech stack sang HTML/CSS thuần thay vì React. Giữ mọi thứ đơn giản.

Triển khai:

Triển khai project theo plan.md. Bắt đầu với HTML, sau đó thêm CSS.

Bạn sẽ thấy file xuất hiện: index.html, styles.css, images/.

Xem trước local:

npx serve

Mở http://localhost:3000 trên trình duyệt.

Bước 4: Lặp lại prompt để cải thiện

Đây là nơi designer có lợi thế. Bạn đã quen với việc feedback.

Styling:

Làm hero full-height (100vh). Căn giữa text theo chiều dọc.
Section project đang chật. Tăng padding giữa các card — ít nhất 32px.
Thêm hover effect nhẹ cho card: scale nhẹ và thêm shadow.
Đổi font sang Inter từ Google Fonts.

Responsive:

Làm responsive.
Trên mobile, xếp card theo chiều dọc.

Navigation chuyển thành hamburger menu dưới 768px.

Functionality:

Thêm smooth scroll khi click navigation.
Thêm contact form gửi email bằng Formspree.

Debug: Mỗi prompt → code thay đổi → refresh trình duyệt. Vòng lặp rất nhanh.

Bước 5: Commit (lưu) lên GitHub

Tạo tài khoản GitHub: Truy cập https://github.com và đăng ký (miễn phí).

Tạo repository:

  1. Đặt tên (ví dụ: my-portfolio)

  2. Chọn Public hoặc Private

  3. Không cần README

  4. Nhấn Create repository

Sao chép URL repository.

Kết nối và push:

Trong Claude Code:

Khởi tạo git và kết nối với repository GitHub của tôi:

https://github.com/yourusername/my-portfolio.git

Hoặc làm thủ công:

git init
git remote add origin https://github.com/yourusername/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin main

Tạo tài liệu:

Tạo file README.md giải thích project là gì và cách chạy local.

Bước 6: Deploy (đưa lên internet)

Cách đơn giản nhất: sử dụng Vercel

Truy cập https://vercel.com và đăng nhập bằng GitHub.

Nhấn “Add New” → “Project”

Chọn repository của bạn (my-portfolio)

Nhấn Deploy

Xong. Website của bạn đã live trên internet.

Bạn sẽ nhận được một URL như:

https://my-portfolio.vercel.app

Mỗi lần bạn push code lên GitHub → Vercel sẽ tự động update site.

Bước 7: Thêm AI vào sản phẩm của bạn

Đây là lúc mọi thứ trở nên thú vị.

Bạn có thể thêm AI vào bất kỳ sản phẩm nào chỉ với prompt.

Ví dụ:

Thêm một AI chat widget vào website của tôi.
Nó cần:
- Trả lời câu hỏi về portfolio của tôi
- Sử dụng nội dung từ file about.txt
- Giao diện giống ChatGPT
- Hiển thị ở góc dưới bên phải

Claude Code sẽ:

  • Tạo UI chat

  • Kết nối API AI

  • Xử lý logic

  • Load dữ liệu từ file của bạn

Bạn chỉ cần refine bằng prompt tiếp theo.

Nâng cấp:

Làm cho chatbot trả lời giống giọng văn của tôi hơn.
Thêm loading animation khi AI đang trả lời.
Lưu lịch sử chat.

Bước 8: Cách prompt hiệu quả (rất quan trọng)

Chất lượng output phụ thuộc vào prompt của bạn.

Nguyên tắc:

  • Cụ thể

  • Rõ ràng

  • Có context

Prompt tệ:

Làm đẹp hơn

Prompt tốt:

Làm UI hiện đại hơn:
- Sử dụng spacing rộng hơn
- Font sans-serif (Inter)
- Border radius 12px
- Shadow nhẹ cho card
- Màu nền sáng, sạch

Prompt nâng cao:

Refactor code để:
- Tách component rõ ràng
- Dễ maintain hơn
- Tuân theo best practices
- Không thay đổi UI hiện tại

Bước 9: Sửa lỗi (debug)

Bạn không cần biết code để debug.

Cách làm:

Tôi gặp lỗi:
[Paste error message]

Hãy giải thích lỗi này và fix nó.

Hoặc:

Trang không load CSS.
Hãy kiểm tra và sửa.

Claude Code sẽ đọc code và sửa cho bạn.

Mẹo:

  • Luôn paste error message

  • Mô tả hành vi bạn thấy

  • Mô tả hành vi bạn mong muốn

Bước 10: Tư duy đúng khi dùng Claude Code

Bạn không còn là người viết code.

Bạn là:

  • Product manager

  • Designer

  • Director

Bạn:

  • Định nghĩa vấn đề

  • Đưa ra yêu cầu

  • Review output

  • Iterate

Không cần:

  • Học syntax

  • Nhớ framework

  • Viết code thủ công

Cần:

  • Tư duy hệ thống

  • Khả năng mô tả rõ ràng

  • Gu thiết kế

Kết luận

Claude Code đang thay đổi hoàn toàn cách chúng ta build sản phẩm.

Designer không còn bị giới hạn bởi việc “không biết code”.

Bạn có thể:

  • Build sản phẩm

  • Test ý tưởng

  • Ship nhanh

  • Kiếm tiền

Tất cả chỉ với prompt.

Đây không phải tương lai.

Đây là hiện tại.

Hãy bắt đầu build.

cc1-260402151317

#AI #AI Tools #AI Coding #Claude Code #AI Development