Cách trưởng bộ phận thiết kế của Claude Code build bằng AI [YouTube]

• Trình diễn workflow thực chiến về cách dùng Claude Code trong phát triển sản phẩm thực tế bằng cách trực tiếp thêm tính năng autocomplete vào Excalidraw
• Dù là phần trình bày của một nhà thiết kế, nội dung gần như là workflow của lập trình viên, xoay quanh CLI: chạy song song nhiều phiên Claude bằng worktree, tạo prototype tính năng, kiểm chứng trên trình duyệt và đẩy lên PR
• Điểm cốt lõi là không dùng AI chỉ như công cụ viết code thay người, mà đưa nó vào toàn bộ pipeline phát triển sản phẩm: khám phá ý tưởng → so sánh phương án triển khai → tự kiểm chứng → viết PR → phản ánh review → hỗ trợ merge
• Điều hữu ích với nhà thiết kế là bài nói thừa nhận giới hạn hiện tại của Claude trong việc đưa ra phán đoán thiết kế, nhưng vẫn cho thấy cách tăng cả tốc độ ra quyết định thiết kế lẫn kiểm soát chất lượng bằng cách nhanh chóng tạo nhiều phương án triển khai và review qua PR có kèm screenshot·GIF
• Điều hữu ích với lập trình viên là có thể thấy các pattern cụ thể để gắn Claude Code vào repo thật và luồng cộng tác thực tế, như /prototype, loop, chế độ cấp quyền tự động, tự kiểm thử dựa trên Chrome, dọn code·review·tự động hóa merge PR
• Đặc biệt, góc nhìn “không phải cứ ai cũng có thể build thì mọi thứ đều nên được deploy” là rất quan trọng; trong thời đại AI, khi nhiều người hơn có thể tạo ra code, cần mở rộng kiểm chứng, review, sự tham gia của thiết kế và tiêu chuẩn phát hành thành các hệ thống tự động hóa
• Cuối cùng, video này không chỉ nói về cách nhà thiết kế code bằng AI, mà là một ví dụ về cách nhà thiết kế và lập trình viên dùng AI ở giữa để thử nghiệm nhanh hơn mà vẫn giữ được chất lượng sản phẩm

---

Bối cảnh bài nói và diễn giả

• Meaghan Choi, lead designer của Claude Code
• Đã thiết kế sản phẩm CLI từ trước khi áp dụng AI, từng tham gia thiết kế Claude CLI và tự mô tả mình là một "CLI die-hard"
• Cô cho biết nhân viên Anthropic luôn có quyền truy cập vào công cụ và dùng nó suốt cả ngày, nên có một bầu không khí liên tục tìm kiếm cách làm việc tối ưu hơn
• Ứng dụng desktop dễ tiếp cận hơn, và cũng nói rõ rằng mọi thao tác trong demo đều có thể làm y hệt trên desktop app
  • CLI là sở thích cá nhân của diễn giả, không phải cách mà người xem buộc phải làm theo

Thiết lập môi trường làm việc song song, tốc độ cao

• worktree

  • Nếu chạy nhiều Claude cùng lúc trong local repository, chúng có thể ghi đè công việc của nhau và gây xung đột
  • worktree tạo các bản sao tách biệt của repository để có thể làm nhiều việc song song
    • Khi kỹ sư mở 4–5 Claude cùng lúc, tức là họ đã nhân bản repository kiểu repo1·repo2 hoặc dùng worktree
    • Khi chạy claude --worktree, nó tự động checkout branch mới nên dễ quản lý hơn và được khuyến nghị

• Opus 1M · fast mode

  • Diễn giả luôn dùng Opus 1 triệu context và fast mode, nhưng quyền truy cập có thể bị giới hạn tùy tổ chức
  • Đây là cấu hình để đẩy nhanh demo 15 phút, và cô giải thích là có khác biệt tốc độ đôi chút

• auto mode

  • Nhân viên Anthropic luôn dùng auto mode, như một lựa chọn thay thế cho chế độ quyền hạn thấp
  • classifier sẽ phát hiện hành động nguy hiểm, nên công việc nhanh hơn nhiều vì không phải lặp lại việc xác nhận "Yes, accept"

• Loop

  • Loop là prompt tiêu chuẩn mang nghĩa "tiếp tục cho đến khi xong", khiến tác vụ được lặp lại cho tới khi hoàn tất

Prompt và prototype skill

• Chỉ với một prompt đơn giản là "muốn thêm autocomplete", cô yêu cầu thêm tính năng đó vào Excalidraw mà không cần spec thiết kế

• prototype skill

  • Một slash prototype skill do cô tự tạo bằng cách nhờ Claude viết, tạo mặc định 5 (n) phương án triển khai cho một tính năng, preview bằng file HTML rồi lặp tiếp
    • Cô nhấn mạnh skill không được viết thủ công mà được tạo bằng prompt, nói rằng "ngày nay không còn ai viết skill bằng tay nữa"
  • Cô yêu cầu Claude trước tiên tự chọn một phương án và giải thích lý do, và nói rằng xem kết quả này khá thú vị
  • Cô thêm "cho phép nghiên cứu online"; nếu là codebase production thì sẽ yêu cầu tham chiếu Slack·Google Docs·lịch sử thảo luận·BigQuery cùng mọi nguồn khác
  • Sau khi triển khai phương án tốt nhất, kiểm chứng và khớp style, cô yêu cầu tạo PR có kèm screenshot
    • Từ đó, quy trình chuyển từ xem transcript sang review PR có chứa bản ghi lại tính năng đã được triển khai
  • Trong demo, sau khi lắng nghe ý kiến khán giả về nhiều phương án autocomplete cho tab do Claude đề xuất, cô chọn phương án số 2

3 nguyên tắc trong công việc

• Phần lớn LLM, bao gồm cả Claude, hiện vẫn yếu về thiết kế, vì vậy con người vẫn phải tiếp tục can thiệp vào craft và việc ra quyết định
  • Đây có thể không phải giới hạn vĩnh viễn, nhưng workflow hiện tại được xây dựng trên tiền đề rằng "con người quyết định thứ gì sẽ đi vào sản phẩm"
• Nên tự động hóa coding nhưng cũng phải giao cả công việc không phải coding cho Claude, nếu không thì chưa phải cách dùng được tự động hóa tối đa
• Không phải cứ ai cũng có thể ship thì mọi thứ đều nên được ship, và khi ai cũng có thể push vào production thì cần một hệ thống có khả năng mở rộng

Tự động hóa công việc không phải coding

• Claude in the web (cloud)

  • Dùng để xử lý thường trực hàng trăm chỉnh sửa polish nhỏ phát hiện trong app mà không cần mở phiên riêng
  • Khi kỹ sư phàn nàn rằng có quá nhiều chỉnh sửa, cô yêu cầu squash thành một PR
    • Các thay đổi CSS nhỏ đôi khi còn được tự động chấp nhận mà không cần review, hữu ích để giữ độ hoàn thiện của sản phẩm

• Tự động hóa merge PR

  • Gần như mọi thành viên đều luôn chạy Claude để hỗ trợ merge PR, và diễn giả nói rằng bản thân không còn trực tiếp can dự vào CI hay giai đoạn ngay trước khi merge nữa
  • simplify·code review là các lệnh nội bộ trong repository để dọn dẹp (prune) codebase; với các team kỹ thuật dùng AI cũng sẽ có công cụ tương tự
  • commit push PR là lệnh chạy hàng loạt các kiểm tra nội bộ
  • Lệnh review các PR đang mở và đẩy chúng tới giai đoạn hoàn tất được tích hợp sẵn trong skill
    • Nó liên kết với Slack để tự động DM reviewer code hoặc người on-call; điểm mấu chốt là sự tích hợp của cả bộ công cụ

• Claude in Chrome

  • Claude tự mở Chrome để kiểm thử hành vi, và được khuyến nghị là cách tốt nhất để tự kiểm chứng các thay đổi frontend
  • Luồng làm việc là ghi lại screenshot thành một chuỗi GIF, đăng lên rồi mở PR

• Routine theo lịch (Claude code work)

  • Một tác vụ theo lịch sẽ quét mọi thay đổi frontend trên tất cả repository
  • Nó rà qua Slack·Google Meet transcript·Google Docs để kiểm tra xem nhà thiết kế có tham gia hay không; nếu không thì sẽ gắn cờ
  • Nếu không có sự tham gia, nó review thiết kế và soạn nháp một PR thiết kế từ góc nhìn đối nghịch (adversarial design), rồi DM cho kỹ sư đó và yêu cầu cộng tác với nhà thiết kế
    • Vì Claude còn yếu về thiết kế nên chức năng DM hiện đang bị tắt, điều này gắn với nguyên tắc số 1 (LLM hiện vẫn yếu về thiết kế)
  • Chiến lược là đẩy tự động hóa không chỉ tới bước kế tiếp mà tới bước sau của bước kế tiếp, để có thể áp dụng ngay khi model kế tiếp ra mắt

Vì sao hữu ích với nhà thiết kế và lập trình viên

• Mục tiêu của bài nói tự thân là nâng level công việc của người dùng Claude Code, và công khai chính những cách làm đang được ưa chuộng trong nội bộ Anthropic
• Từ góc nhìn lập trình viên, bài nói đưa ra các lệnh và thao tác cụ thể giúp tăng trực tiếp tốc độ công việc hằng ngày như làm song song bằng worktree, loại bỏ lặp xác nhận bằng auto mode, tự động hóa merge PR·CI
  • Các công cụ như simplify hay code review dùng trong bài nói có bản tương đương ở các team kỹ thuật dùng AI, nên cô khuyên hãy hỏi đối tác kỹ thuật để tận dụng
• Từ góc nhìn nhà thiết kế, bài nói khẳng định rõ lập trường rằng với tiền đề LLM hiện vẫn yếu về thiết kế, con người phải tiếp tục là chủ thể của craft và quyết định, còn tự động hóa chỉ đóng vai trò hỗ trợ
  • Cách tiếp cận bảo vệ chất lượng thiết kế bằng hệ thống được thể hiện qua các routine theo lịch phát hiện và gắn cờ các thay đổi frontend được ship mà không có sự tham gia của nhà thiết kế