Claude Design 2 HOUR COURSE (Beginner to Pro)

Claude design là một công cụ thiết kế AI mạnh mẽ của Anthropic, giúp người dùng tạo ra các tài sản hình ảnh nhất quán, chuyên nghiệp (trang web, video, prototype) chỉ bằng ngôn ngữ tự nhiên.
Công cụ này hoạt động trên mô hình thị giác Open 4.7 tiên tiến và có khả năng xây dựng các Hệ thống thiết kế để đảm bảo nhận diện thương hiệu đồng bộ.
Để tối ưu chi phí và sử dụng hiệu quả, người dùng cần quản lý giới hạn phiên và token bằng cách thực hiện các bước lên ý tưởng bên ngoài Claude design trước khi tiến hành xây dựng.

Giới thiệu về Claude design

Claude design là một trong những công cụ thiết kế mạnh mẽ nhất mà tôi từng sử dụng, bởi vì nó giúp mọi thứ trở nên nhất quán, có thương hiệu và chuyên nghiệp một cách đáng kinh ngạc, và tất cả những gì bạn phải làm là sử dụng ngôn ngữ tự nhiên của mình. Trong masterclass này, tôi sẽ hướng dẫn bạn từ một người mới bắt đầu hoàn toàn – có thể bạn chưa bao giờ mở Claude design trước đây – trở thành một chuyên gia có thể phát triển trang web, video, bản demo ứng dụng, nguyên mẫu (prototype) hoặc bất cứ điều gì bạn muốn làm với Claude design.

Quy trình xây dựng thương hiệu với Claude design

Tôi sẽ chỉ cho các bạn toàn bộ quy trình làm việc thực tế của tôi khi nghĩ ra một công ty, xây dựng bộ nhận diện thương hiệu (branding), tạo logo, thiết lập nguyên tắc, và sau đó tạo một bài thuyết trình kêu gọi đầu tư (pitch deck), một trang web, một nguyên mẫu ứng dụng di động (mobile app prototype) và một video ra mắt (launch video). Chúng ta sẽ thực hiện tất cả những điều này từng bước một trong Claude design, và nó cực kỳ đơn giản, cũng như rất thú vị.

Tối ưu hóa việc sử dụng và tận dụng Claude design

Xuyên suốt video, tôi cũng sẽ nói về cách bạn thực sự tận dụng tối đa giá trị và làm thế nào để đảm bảo bạn không dùng hết giới hạn phiên (session limit) Claude design quá nhanh. Tôi đã mày mò với công cụ này mỗi ngày kể từ khi nó ra mắt, và tôi sẽ chỉ cho các bạn mọi thứ tôi biết về cách tận dụng nó tối đa. Có mốc thời gian (timestamps) ở phía dưới. Hãy nhớ lưu lại video này để bạn có thể quay lại và chuyển đến bất cứ phần nào khi cần, và bây giờ, chúng ta đừng lãng phí thời gian nữa, hãy bắt đầu ngay video này.

Claude design là gì?

Claude design là một sản phẩm riêng biệt trong hệ sinh thái Anthropic, giống như Claude chat, Claude Code. Đây là một ứng dụng khác được thiết kế đặc biệt để mọi người làm việc trên các tác vụ thiết kế, cho dù đó là trang web, bộ trang trình bày (slide decks) hay nguyên mẫu. Nhiều người khi công cụ này được phát hành đã gọi nó là "kẻ hủy diệt Figma". Bạn có thể chia sẻ hệ thống thiết kế (design systems) giữa các nhóm, bạn có thể xuất các thiết kế từ Claude design sang Claude Code, Canva hoặc dưới dạng file nén (Zips) hay HTML. Vì vậy, chúng ta sẽ đi sâu vào tất cả những điều đó hôm nay.

Cấu trúc khóa học: Các giai đoạn chính

Chúng ta sẽ xem xét ba "hành động" khác nhau. Chúng ta sẽ bắt đầu với "Nền tảng" (Foundations), xem xét những gì đang thực sự diễn ra bên trong Claude design, thiết lập ban đầu. Sau đó, chúng ta sẽ thực hiện một số "Xây dựng" (Builds) – tôi sẽ thực hiện một số kịch bản thực tế. Về cơ bản, chúng ta sẽ cùng nhau xây dựng một thương hiệu. Tôi sẽ chỉ cho các bạn cách tôi lên ý tưởng cho một thương hiệu và doanh nghiệp mới, sau đó tôi đã sử dụng kết hợp Claude design và một số công cụ khác để thực sự đưa thương hiệu đó vào cuộc sống.

Chúng ta sẽ tìm hiểu một số thói quen rất quan trọng và cách bạn có thể tận dụng tối đa Claude design mà không làm hết giới hạn phiên của mình. Vì điều quan trọng cần lưu ý về Claude design là nó có giới hạn riêng biệt so với Claude hoặc Claude Code thông thường của bạn. Bạn có thể thấy chúng ta có phiên hiện tại, tất cả các mô hình, chỉ Sonnet, và sau đó chúng ta có giới hạn riêng cho Claude design. Vì vậy, chúng ta phải thực sự cẩn thận vì chúng ta không muốn lãng phí nó nếu chúng ta không sử dụng nó một cách hiệu quả. Tôi cũng sẽ nói rất nhiều về điều đó trong masterclass này. Và sau đó, chúng ta sẽ nói về những gì tiếp theo. Nhưng điều này sẽ thực sự thú vị. Tôi sẽ đưa các bạn vào một hành trình trọn vẹn, như tôi đã nói, về việc xây dựng một thương hiệu.

Sức mạnh của Claude design và mô hình Open 4.7

Để bắt đầu, Claude design là gì và Open 4.7 là gì? Đây là bài blog phát hành của Anthropic về Claude design vào ngày 17 tháng 4 năm 2026: "Hôm nay, chúng tôi ra mắt Claude design, một sản phẩm mới của Anthropic Labs cho phép bạn cộng tác với Claude để tạo ra các tác phẩm hình ảnh chất lượng cao như thiết kế, nguyên mẫu, bộ trang trình bày, tài liệu một trang (one-pagers) và hơn thế nữa." Và bạn thậm chí có thể sử dụng nó để tạo hoạt ảnh và video, điều mà tôi sẽ cho bạn thấy hôm nay.

Nó thực sự mạnh mẽ. Nó cũng được hỗ trợ bởi mô hình thị giác (vision model) mạnh mẽ nhất của họ, đó là mô hình mới nhất của họ, Claude Open 4.7. Và một lần nữa, bạn không bắt đầu từ con số không, vì bạn có thể nhập các tài sản thương hiệu, trang web và ứng dụng hiện có của mình. Và bạn có thể tạo hệ thống thiết kế xung quanh những thứ đó để mọi thứ bạn xây dựng trong tương lai đều mang dấu ấn thương hiệu với màu sắc, kiểu chữ (font) và mọi thứ.

Cộng tác với Claude để tạo ra tác phẩm hình ảnh chất lượng cao, một bề mặt thiết kế được hỗ trợ bởi mô hình thị giác. Và điều này thực sự thú vị vì công cụ này gần như được cung cấp bởi Open 4.7. Bạn có khả năng trong Claude design để chuyển đổi mô hình bạn sử dụng, điều mà tôi cũng sẽ nói đến, vì bạn muốn có một chút chiến lược. Nhưng Open 4.7 có thị giác tốt nhất. Và Claude design làm một điều thực sự thú vị là nó về cơ bản xác thực, và nó nhìn và sử dụng "mắt" của mình để xem những gì đang diễn ra trên trang để đảm bảo rằng nó không làm hỏng bất cứ điều gì.

Claude design được phát hành gần như ngay sau khi Open 4.7 được phát hành, điều này khá thú vị. Và rõ ràng, nếu bạn sử dụng Open 4.7, nó tiêu thụ token nhanh hơn. Nó đắt hơn việc sử dụng mô hình như Sonnet hoặc Haiku, vì vậy bạn phải có chiến lược ở đó. Và điều khá thú vị là Krieger đã rời Figma gần như ngay trước khi Claude design được công bố. Và Krieger từng là thành viên hội đồng quản trị của Figma và hiện là Giám đốc sản phẩm (CPO) của Anthropic. Vì vậy, điều đó cũng khá thú vị để suy nghĩ về việc các công cụ này đang hướng tới đâu.

Yêu cầu sử dụng Claude design

Để sử dụng Claude design, bạn phải sử dụng gói trả phí. Nó có sẵn cho người dùng gói Pro, gói Max, và các gói dành cho nhóm và doanh nghiệp. Vì vậy, nếu bạn đang sử dụng gói miễn phí, bạn sẽ phải nâng cấp để thử nghiệm Claude design. Bạn cũng sẽ nhận được nhiều mức sử dụng hơn khi gói của bạn tăng lên. Vì vậy, nếu bạn trả nhiều tiền hơn mỗi tháng, bạn sẽ nhận được nhiều mức sử dụng Claude design hơn như bạn có thể thấy ở đây.

Tôi khá chắc chắn rằng đây là một chu kỳ đặt lại hàng tuần. Vì vậy, nếu bạn đạt đến giới hạn, bạn phải đợi cho đến khi nó đặt lại hoặc bạn có thể mua thêm mức sử dụng bổ sung, điều này sẽ được trừ vào số dư tài khoản thực tế của bạn. Và như bạn có thể thấy, tôi đã sử dụng rất nhiều mức sử dụng bổ sung này bởi vì nếu bạn không cẩn thận, bạn sẽ đạt đến giới hạn khá nhanh. Nhưng điều đó đã giúp tôi học được cách quản lý giới hạn đó tốt hơn. Vì vậy, tôi sẽ chia sẻ tất cả những điều đó với các bạn hôm nay.

Bắt đầu với Claude design: Giao diện và tạo dự án

OK, bây giờ, hãy mở Claude design và bắt đầu xây dựng một thương hiệu. Tôi sẽ cho các bạn thấy những gì tôi đã làm. Nếu bạn đang ở cuộc trò chuyện thông thường của mình trong Claude trên nền tảng web, bạn sẽ thấy tất cả chúng ta ở đây ở phía bên trái. Chúng ta có nút nhỏ này ghi là "design". Đó là những gì bạn sẽ muốn nhấp vào, hoặc bạn có thể chỉ cần tìm kiếm Claude design trên Google. Và điều đó sẽ hiển thị một ứng dụng riêng biệt, trông như thế này. Và đây là loại giao diện mà chúng ta sẽ làm việc cho Claude design.

Bây giờ, một vài điều bạn sẽ nhận thấy. Có một cái gì đó ở phía bên trái, đó là cách bạn khởi chạy một dự án mới. Bạn có thể thấy rằng chúng ta có nguyên mẫu. Chúng ta có thể chọn giữa khung sườn (wireframe) và độ trung thực cao (high fidelity). Chúng ta có thể tạo bộ trang trình bày (slide decks). Chúng ta có các mẫu (templates) khác nhau hoặc các loại khác. Ở phía bên phải, chúng ta có tất cả các thiết kế hoặc hệ thống thiết kế trước đây mà tôi đã xây dựng. Chúng ta cũng có một loạt các ví dụ để xem qua. Vì vậy, organic loaders. Chúng ta có thể lấy cảm hứng từ đó. Chúng ta có thể xem truyền phát văn bản (text streaming). Chúng ta có thể xem những thứ như quả cầu (globe) và một số bộ đổ bóng (shaders). Vì vậy, có những cách ở đây để về cơ bản chỉ sử dụng câu lệnh (prompt) này và đưa nó vào một dự án mà bạn muốn làm việc. Và sau đó, tất nhiên, bạn có thể xem các hệ thống thiết kế của mình, điều mà chúng ta cũng sẽ nói đến.

Tầm quan trọng của Hệ thống thiết kế (Design Systems)

Đây là điều đầu tiên mà tôi muốn các bạn làm khi bạn truy cập Claude design. Xây dựng một hệ thống thiết kế khá tốn nhiều token. Nhưng về lâu dài, nó sẽ giúp bạn tiết kiệm chi phí. Bởi vì sau đó, mọi thứ bạn xây dựng, ví dụ, hệ thống thiết kế AI Automation Society của tôi, mọi thứ tôi xây dựng sẽ có thương hiệu này. Logo, kiểu chữ, màu sắc. Nhưng bạn không muốn xây dựng một cách điên cuồng như năm hệ thống thiết kế khác nhau. Bạn chỉ muốn bắt đầu với một cái và sau đó lặp lại từ đó.

Nếu tôi mở hệ thống thiết kế này thật nhanh để cho các bạn xem, trong đó có mọi thứ về giao diện người dùng (UI) của tôi, thương hiệu của tôi. Vì vậy, nó có trang web của tôi. Nó có thể xem qua các kiểu chữ, màu sắc, cách nút bấm của chúng tôi, cách biểu ngữ nhỏ của chúng tôi. Và nó biết mọi thứ về trang web này. Và nó đã sử dụng điều này để về cơ bản tạo ra kiểu chữ. Vì vậy, nó biết thương hiệu của chúng tôi. Nó biết khi nào nên sử dụng màu chính (primary), khi nào nên sử dụng màu phụ (secondary). Nó cũng biết màu sắc. Vì vậy, điểm nhấn và gradient là màu trung tính. Cũng như các màu chính của chúng tôi. Nó hiểu khoảng cách. Vì vậy, chúng ta có những vệt sáng nhỏ phía sau nút bấm. Chúng ta cũng thích có kích thước khác nhau và các loại hình dạng khác nhau. Và tương tự với các thành phần (components), điều mà tôi nghĩ là tuyệt vời. Hãy nhìn xem, nó có tất cả các huy hiệu này. Nó có tất cả các thẻ này. Nó hiểu nút bấm của chúng ta nên trông như thế nào, thẻ của chúng ta nên trông như thế nào. Nó hiểu tất cả những điều này. Và tất cả điều này được dịch sang trang web, video, bộ trang trình bày, trang đích (landing pages) của chúng ta, bất cứ thứ gì chúng ta muốn xây dựng.

Lợi ích của việc chia sẻ Hệ thống thiết kế

Bây giờ, chúng ta không cần phải lặp lại điều này. Và đó là lý do tại sao điều này lại tuyệt vời đến vậy. Bởi vì điều này có thể được chia sẻ giữa các nhóm của bạn. Nếu bạn có, nếu bạn đang sử dụng gói dành cho nhóm, mọi người trong tổ chức của bạn sẽ có thể truy cập hệ thống thiết kế này, điều đó có nghĩa là hình ảnh nhất quán, cho dù đó là nội bộ hay bên ngoài, bài đăng LinkedIn, bất kể đó là gì, nó sẽ luôn nhất quán, điều này rất quan trọng.

Bạn cũng có thể tải xuống cái này dưới dạng file nén, PDF, HTML. Và bạn có thể đưa nó vào Claude Code, hoặc bạn có thể đưa nó vào Canva, hoặc bạn thậm chí có thể đưa nó cho mô hình hình ảnh mới của ChatGPT, bất cứ điều gì bạn muốn làm với nó, bạn có thể lấy cái này và đưa nó đến một nơi khác. Vì vậy, đó là lý do tại sao đây là điều đầu tiên tôi muốn bạn làm khi bạn truy cập Claude design.

Cách xây dựng Hệ thống thiết kế

Vậy hãy để tôi chỉ cho các bạn cách chúng ta sẽ thiết lập điều này. Điều tôi đã làm ở đây là, đối với hệ thống thiết kế AI Automation Society của tôi, điều đó dễ dàng vì tôi đã có một thương hiệu sẵn có. Tôi có thể cung cấp cho nó logo của mình, tôi có thể cung cấp cho nó kho lưu trữ GitHub của trang web của tôi và URL trang web của tôi, và nó có thể thu thập tất cả những thứ chúng tôi đã có sẵn và biến nó thành một hệ thống thiết kế thương hiệu.

Bây giờ, nếu bạn không ở trong tình huống đó và bạn đang bắt đầu từ đầu, thì mọi chuyện hơi khác một chút vì bạn phải tìm ra, OK, hệ thống thiết kế của tôi là gì? Màu sắc của chúng tôi là gì, kiểu chữ của chúng tôi là gì, và cảm giác là gì? Vì vậy, đó là loại kịch bản mà chúng ta sẽ trải qua hôm nay.

Động não thương hiệu bên ngoài Claude design để tiết kiệm chi phí

Vậy điều tôi đã làm là tôi đã vào Claude và tôi nói, này, tôi cần tạo một thương hiệu. Tôi đang thực hiện một dự án nơi tôi sẽ tạo một thương hiệu mới và chúng ta sẽ tạo một, bạn biết đấy, như một bài thuyết trình kêu gọi đầu tư, một logo, nguyên tắc thương hiệu, trang web, tất cả những thứ này. Vì vậy, hãy giúp tôi tìm ra một ý tưởng thương hiệu tốt mà tôi có thể sử dụng để nó cảm thấy nhất quán. Vì vậy, đây về cơ bản chỉ là tôi động não với Claude. Và lý do tôi làm điều này trong chat là, một lần nữa, bởi vì chúng ta không muốn đốt hết giới hạn Claude design của mình. Chúng ta chỉ muốn sử dụng Claude design khi chúng ta thực sự sẵn sàng. Khi chúng ta có một ý tưởng và chúng ta sẵn sàng tiến hành với kế hoạch đó. Vì vậy, đừng bao giờ động não trong Claude design. Nó không có ý nghĩa gì cả. Bạn sẽ có nhiều mức sử dụng hơn ở đây.

Dù sao, nó bắt đầu phác thảo, nó hỏi tôi một vài câu hỏi và nó bắt đầu đưa cho tôi một vài ý tưởng về việc, bạn biết đấy, kiểu chữ sẽ trông như thế nào và logo có thể trông như thế nào và, bạn biết đấy, cảm giác và màu sắc. Vì vậy, nó đưa cho tôi một vài ý tưởng và tôi thích cái này. Vì vậy, tôi nói, OK, tuyệt vời. Hãy tiếp tục với Tally và hãy xây dựng thêm thương hiệu này. Vì vậy, tôi nói, OK, hãy tiếp tục với Tally. Tôi muốn bạn xây dựng một thương hiệu xung quanh điều này. Sản phẩm chúng ta đang bán là gì? Ai là đối tượng khách hàng? Sứ mệnh là gì? Lời đề nghị là gì? Và tôi chỉ nói, hãy tìm ra tất cả những điều đó cho tôi.

Lên ý tưởng và Phát triển Khái niệm Thương hiệu với Claude

Rõ ràng, bạn sẽ phải đầu tư nhiều hơn một chút nếu bạn đang xây dựng một doanh nghiệp thực sự hoặc nếu bạn đã có một project đang triển khai. Nhưng đây chỉ là tôi đang cho các bạn thấy cách chúng ta có thể ideate (lên ý tưởng) với Claude. Và những gì nó đã làm là tạo ra toàn bộ khái niệm thương hiệu này. Nó đã tạo ra sản phẩm, đối tượng, một số avatar, sứ mệnh, định vị, các trụ cột thương hiệu, giọng điệu và phong cách. Rất nhiều thứ mang tính khái niệm về thương hiệu và lời hứa. Nhưng sau đó, nó cũng đi sâu vào một số thứ quan trọng như nhận diện hình ảnh. Chúng ta có một bảng màu với bốn màu chính và điều này thực sự quan trọng để cung cấp cho design system (hệ thống thiết kế) của chúng ta. Nó cũng đi vào phần typography (kiểu chữ). Đó là phông chữ chính cũng như phông chữ phụ và một số logic khác, chẳng hạn như cách chúng ta xây dựng hệ thống phân cấp trong phần giới thiệu chính và những thứ tương tự. Vì vậy, nếu tôi đưa khái niệm này cho Claude design, nó sẽ xây dựng một trang web thực sự rất đẹp cho chúng ta chỉ trong một lần duy nhất vì nó đã có rất nhiều thông tin ngay tại đây.

Ý tưởng Logo và Hướng dẫn Thương hiệu thu nhỏ

Và sau khi nó tạo ra điều đó, tôi nói, "Được rồi, hãy cùng lên ý tưởng cho logo nữa." Vậy, làm thế nào để nó phù hợp với tổng thể không khí? Và nó đã cho tôi một vài lựa chọn khác nhau. Nó đưa cho tôi hình chữ thập này với ba hoặc, xin lỗi, bốn vạch và sau đó là vạch thứ năm và văn bản. Nó cũng cho tôi một vài biến thể khác. Cuối cùng, tôi đã nói rằng tôi thích logo này, nhưng tôi thích có chấm xanh lá cây, dấu chấm xanh lá cây ở cuối từ. Vì vậy, về cơ bản, tôi đã kết hợp giữa cái này và cái kia. Và sau đó, tôi về cơ bản đã yêu cầu một typography đầy đủ, gần giống như một mini brand guidelines (hướng dẫn thương hiệu thu nhỏ). Vì vậy, nó đã cho chúng ta logo này, nó đã cho chúng ta typography này và nó chỉ cho chúng ta thấy điều này có thể trông như thế nào. Vì vậy, thương hiệu thực sự đang bắt đầu trở nên sống động hơn một chút và chúng ta có lẽ đang ở một vị trí tốt hơn nhiều để thực sự tạo ra một design system từ điều này vào thời điểm hiện tại.

Tạo Hệ thống Thiết kế trong Claude Design

Quay lại Claude design, tôi sẽ nhấp vào design systems (hệ thống thiết kế) ở trên và tôi sẽ nhấp vào "tạo một design system mới". Bây giờ, nhanh chóng, chỉ để có ngữ cảnh, hãy xem chúng ta đang ở đâu về mức sử dụng. Vì vậy, trong Claude design, chúng ta đang ở mức 4% mức sử dụng của mình và tôi đang dùng gói 20X max với giá 200 đô la một tháng. Hãy xem việc tạo design system này sẽ tiêu tốn bao nhiêu trong mức sử dụng design của chúng ta. Nó sẽ không nhiều bằng việc bạn nhập hàng loạt codebase vì bạn có thể liên kết các thư mục, file và GitHub repos. Vì vậy, càng nhập nhiều ngay bây giờ, bạn sẽ càng tốn nhiều mức sử dụng, rõ ràng. Nhưng dù sao, hãy xem điều này sẽ làm gì. Vì vậy, tên công ty và phần giới thiệu. Tên công ty là Tally, và hãy xem phần giới thiệu của chúng ta sẽ là gì. Tôi có lẽ sẽ lấy sứ mệnh của công ty, vì vậy tôi sẽ lấy phần này. Được rồi. Chúng ta chưa có GitHub repo nào vào lúc này, chúng ta không có mã nào. Chúng ta có một số assets (tài sản) để nhập, vì vậy tôi sẽ thêm logo Tally và tôi cũng muốn thêm file này. Vì vậy, tôi thực sự sẽ tải xuống dưới dạng, hy vọng là markdown, vâng. Vậy là chúng ta có khái niệm thương hiệu của mình. Và bạn cũng có thể thấy nếu bạn đã có một project Figma mà bạn muốn chuyển sang, bạn có thể nhập nó ngay tại đây. Vì vậy, bất kỳ ghi chú nào khác, hiện tại chúng ta sẽ để như thế này. Tôi nghĩ điều duy nhất chúng ta có thể muốn lưu ý là chúng ta chưa xây dựng một trang web, vì vậy chúng ta không biết các nút và field (trường) của chúng ta sẽ trông như thế nào. Vì vậy, nếu bạn muốn thêm bất kỳ ghi chú nào về điều đó, bạn có thể làm. Vì vậy, tôi sẽ thêm một câu ngắn gọn. Tôi sẽ nói, "Khi chúng ta xây dựng các assets như một trang web hoặc những thứ tương tự, tôi muốn các nút phải trông rất hiện đại. Tôi muốn chúng có một chút glow (phát sáng) phía sau và tôi chỉ muốn nó trông rất tinh tế." Bây giờ, đó không phải là một câu lệnh thực sự tốt. Nó khá mơ hồ, nhưng chỉ là thêm một chút ngữ cảnh ở đó. Và hãy nhấp vào "tiếp tục để tạo". Việc này sẽ mất khoảng năm phút, vì vậy tôi sẽ nhấp "tạo" và tôi sẽ quay lại với các bạn sau khi chúng ta hoàn thành.

Ứng dụng mô hình hình ảnh GPT-2 của ChatGPT trong thiết kế

Thực ra, tôi đã nói dối. Trong khi cái này đang tải, tôi muốn cho các bạn xem một điều khác mà các bạn có thể làm. Mô hình hình ảnh GPT-2 mới của ChatGPT, Image 2, thực sự rất tốt. Bạn có thể lấy một số thông tin từ đây và một số màu sắc cùng những thứ mà chúng ta đã xây dựng. Và bạn cũng có thể ideate (lên ý tưởng) với ChatGPT một chút để xem những hình ảnh hoặc logo đó có thể trông như thế nào. Vì vậy, tôi về cơ bản đã nói, "Này, tôi cần một logo chuyên nghiệp và tối giản cho thương hiệu này." Tôi đã nói thương hiệu đó là gì. Tôi đã nói một chút về đối tượng và bảng màu. Và nó đã cho tôi phiên bản đầu tiên này, khá tuyệt. Bạn biết đấy, chúng ta có dấu xanh nhỏ ở đó. Và sau đó tôi cũng yêu cầu một cái dựa trên icon (biểu tượng). Và nó đã cho tôi cái này. Vì vậy, tôi không thích cái này. Tôi thực sự chỉ thích các dấu gạch tally mà Claude ban đầu đã đưa ra, nhưng đó là một điều khác cần suy nghĩ là mô hình hình ảnh GPT-2 khá tốt trong việc giúp bạn xây dựng một số thứ này.

Và tôi cũng sẽ cho các bạn xem một thứ khác, mà chúng ta sẽ quay lại sau khi chúng ta đã xây dựng trang web của mình với thương hiệu này. Nhưng tôi thực sự vừa xây dựng brand guidelines (hướng dẫn thương hiệu) của mình cho AI Automation Society bằng mô hình hình ảnh GPT-2. Vì vậy, tôi đã cung cấp cho nó logo và tôi nói, "Này, đây về cơ bản là thương hiệu của chúng ta. Đây là một số biến thể. Đây là bảng màu của chúng ta. Đây là typography của chúng ta." Và nó đã tạo ra cái này cho tôi. Và nó thực sự tốt. Đây là phiên bản chính thức mà chúng ta đang sử dụng nội bộ. Tuy nhiên, bạn có thể thấy nó đã làm hỏng một số phông chữ. Mặc dù nó khá tốt với văn bản nói chung. Ồ, bạn có thể thấy, tất cả các phông chữ khác đều ổn. Nhưng vì nó đang cố gắng kéo phông chữ Roberto Manno và Montserrat, nó đã làm hỏng một chút. Vì vậy, ngay cả khi tôi nói, "Này, bạn biết đấy, cái đó không hoạt động" và tôi đã cố gắng yêu cầu nó làm lại. Nó vẫn không hoạt động. Và thành thật mà nói, tôi đã nghĩ, "Bạn biết đấy, không sao cả. Tôi sẽ chỉ đưa cái này vào Canva và tôi sẽ lấy các phông chữ và tự đặt vào." Vì vậy, không phải là vấn đề lớn. Nó có thể gặp khó khăn với một số phông chữ nhất định. Nhưng về mặt khoảng cách và mọi thứ nó đã làm ở đây, cái này trông rất tốt. Vì vậy, như tôi đã nói, chúng ta sẽ làm một cái như thế này với Tally, với thương hiệu mà chúng ta đang xây dựng ngay bây giờ, một chút sau trong video này. Vì vậy, đừng hoảng sợ nếu bạn nghĩ, "Làm thế nào để làm điều này? Tôi muốn làm điều này." Nó sẽ đơn giản và tôi sẽ chỉ cho bạn. Được rồi, nhưng nhìn lại design system của chúng ta, chúng ta có một số thứ để xem ở đây.

Đánh giá và Phản hồi về Hệ thống Thiết kế

Vì vậy, Claude vẫn đang hoạt động, nhưng bạn có thể bắt đầu đưa ra feedback (phản hồi). Nó đang thiếu các phông chữ của thương hiệu, điều này hoàn toàn bình thường. Bạn có thể tải chúng lên nếu muốn, nhưng nó cũng sẽ có thể tự lấy chúng ra. Như bạn có thể thấy ở đây, nó có type (kiểu chữ). Nhưng chúng ta thấy brand mark (dấu hiệu thương hiệu). Vì vậy, chúng ta có dấu hiệu, từ và tagline (khẩu hiệu). Bạn có thể thấy điều này đã bị sai lệch một chút. Tally lẽ ra phải trải dài trên cả bốn. Claude design đã hoạt động kém một cách đáng kinh ngạc với logo. Vì một lý do nào đó, nó lại, như thể nó cố gắng thay đổi chúng một chút, điều này rõ ràng là không hay. Vì vậy, tôi sẽ nói không, cái đó cần chỉnh sửa. Logo không xuất hiện như lẽ ra phải thế. Tôi đã thả một file PNG của một logo và bạn chỉ nên giữ nguyên nó. Không có lý do gì để thay đổi điều đó. Đó là một chút feedback tôi sẽ thực hiện. Tôi cũng sẽ nói mọi thứ khác đều ổn, màu sắc và phông chữ đều tốt, nhưng logo icon (biểu tượng logo) không chính xác. Vì vậy, chúng ta sẽ gửi điều đó. Tương tự ở đây. Ý tôi là, tất cả những cái này, từ góc độ color scheme (phối màu), tôi không bận tâm, nhưng nó trông không đúng. Và đây là điều mà, như tôi đã nói, Claude design đã làm tệ một cách đáng kinh ngạc. Feedback tương tự ở đây. Logo đã bị thay đổi. Màu sắc trông tốt, nhưng logo không thể bị thay đổi so với file PNG gốc mà tôi đã cung cấp cho bạn. Tôi cũng sẽ gửi feedback đó. Xem này, cái này trông tốt. Đây là logo thực tế mà tôi tin rằng chúng ta đã tải lên. Vì vậy, tôi sẽ nói cái này trông tốt. Những cái này cũng trông tốt. Tuyệt vời. Và tôi thích cách cái này trông. Vì vậy, về cơ bản, bạn sẽ tiếp tục xem xét design system này để đảm bảo rằng tất cả chúng đều trông tuyệt vời và đúng theo cách bạn thực sự muốn thương hiệu của mình trông như thế nào. Và chắc chắn hãy dành thời gian ở đây, bởi vì như tôi đã nói, đây sẽ là design.md của bạn, spec (đặc tả kỹ thuật) của bạn cho mọi thứ bạn xây dựng trong tương lai. Video, promo (quảng cáo), landing pages (trang đích), mọi thứ. Vì vậy, cái này trông tốt hơn nhiều. Tôi bắt đầu tự tin hơn vào những gì chúng ta đang xây dựng với design system này. Vì vậy, tôi sẽ tiếp tục phê duyệt hoặc đưa ra feedback và tôi sẽ quay lại với các bạn sau khi chúng ta có design system hoàn chỉnh.

Hoàn thiện, Xuất bản và Kiểm tra Mức sử dụng

Được rồi, vậy là chúng ta đã gần như hoàn thành tất cả những điều này. Và điều bạn sẽ nhận thấy ở đây là ở phía bên trái, chúng ta có thể thấy Claude đang xác minh. Và đây là lúc nó thực sự xem xét những gì nó đã xây dựng để đảm bảo mọi thứ đều ổn. Như bạn có thể thấy, nó đang duyệt qua các yếu tố khác nhau. Bây giờ, đây là để chúng ta xem xét. Vì vậy, ở đây nó thậm chí còn mock up (tạo mô phỏng) một landing page (trang đích) có thể trông như thế nào. Và bạn có thể thấy tất cả những điều này đều rất đúng với thương hiệu. Chúng ta có logo dựa trên văn bản ở trên cùng bên trái. Và chúng ta có thể cuộn xuống để xem cách nó sử dụng các màu khác nhau của chúng ta với những thẻ nhỏ và những thứ tương tự. Tôi nghĩ điều này thực sự rất hay. Tôi thích cách nó trông. Tôi sẽ nói là "trông tốt". Và tôi thích bản xem trước ứng dụng di động này. Cái đó cũng trông tốt. Và những gì nó đã làm là tạo ra một loạt những thứ khác nhau này. Vì vậy, rõ ràng là tiếp thị của chúng ta cho UI kit (bộ công cụ giao diện người dùng) của chúng ta, phải không? Nhưng nó đã xem xét và cũng nghĩ về các nút, điều mà tôi thấy rất tuyệt. Chúng ta có những nút khác nhau mà nó có thể sử dụng và cách chúng nổi bật khi bạn di chuyển chuột qua hoặc khi bạn nhấp, nó có một chút drop shadow (đổ bóng) với glow (phát sáng). Chúng ta cũng có các input fields (trường nhập liệu) này. Chúng ta có các icon (biểu tượng) ở phía dưới. Chúng ta có những cái mà nó sẽ sử dụng. Vì vậy, bây giờ chúng ta chỉ có một số yếu tố thực sự thú vị mà chúng ta luôn có thể nhất quán với thương hiệu của mình. Vì vậy, tất cả những điều này đều trông tốt. Và tôi sẽ nói rằng chúng ta có thể tiếp tục.

Vì vậy, tôi đã xuất bản cái này. Tôi có thể đặt nó làm mặc định nếu tôi muốn. Tôi sẽ không làm điều đó ngay bây giờ. Nhưng chúng ta có thể tiếp tục và bây giờ sử dụng design system này để xây dựng bất cứ thứ gì chúng ta muốn. Bạn cũng có thể nhấp vào design files (tệp thiết kế) ở trên cùng. Và đây là nơi chúng ta có thể thấy các assets khác nhau. Như những thứ chúng ta đã tải lên, các bản xem trước khác nhau mà nó đã tạo và các tài liệu khác nhau. Và đây là những gì chúng ta có thể export (xuất) nếu chúng ta muốn đưa một design system vào và thực sự cung cấp nó cho một Claude Code project, chúng ta có thể đưa nó cho Claude Code. Và sau đó nó cũng có thể sử dụng cùng một design system. Vì vậy, đó là điểm mà điều này siêu mạnh mẽ.

Được rồi, vậy bây giờ nếu chúng ta quay lại màn hình chính, bạn sẽ nhận thấy nếu chúng ta muốn tạo một project mới, chúng ta có thể nhấp vào Tally design system của chúng ta thay vì AI Automation Society design system. Chúng ta cũng có thể không sử dụng cái nào nếu muốn, nhưng đó là lý do tại sao chúng ta vừa xây dựng cái Tally. Nhưng nhanh chóng, hãy đi đến phần usage (mức sử dụng) của tôi. Chúng ta đang ở mức 10%. Vì vậy, trên gói Max 200 đô la một tháng, design system đó đã chiếm khoảng 6% giới hạn phiên của tôi. Bây giờ, điều đó thực sự không quá tệ. Nếu bạn đang dùng gói Pro, rõ ràng nó sẽ tốn nhiều hơn. Nhưng hãy nhớ rằng, chúng ta đã không cung cấp cho nó quá nhiều. Nếu bạn cung cấp cho nó toàn bộ codebase hoặc repo để tìm kiếm và scrape (thu thập), nó sẽ tốn nhiều hơn. Vì vậy, hãy chọn lọc những gì bạn cung cấp cho Claude design của mình. Bạn đã thấy nó hoạt động tốt như thế nào chỉ với markdown và một ý tưởng khá mơ hồ. Vì vậy, nó thực sự chỉ cần các yếu tố chính, như màu sắc, logo, typography.

Để giúp bạn dễ dàng tham khảo về quản lý token hoặc đặt câu lệnh mà không cần xem lại video nhiều lần, tôi đã tổng hợp tất cả thông tin này vào một tài liệu PDF hướng dẫn tài nguyên rất đơn giản. Nếu bạn muốn truy cập tài liệu hướng dẫn miễn phí này, hãy truy cập cộng đồng free school của tôi. Liên kết nằm trong phần mô tả. Hẹn gặp các bạn ở đó. Giờ thì chúng ta hãy quay lại video.

Xây dựng hệ thống thiết kế và hành trình dự án

Và nếu bạn đã có các nút và những thứ tương tự, bạn thực sự không cần phải cung cấp toàn bộ kho lưu trữ GitHub trừ khi có thông tin thực sự quan trọng trong đó. Vì vậy, hãy cân nhắc điều đó khi bạn xây dựng hệ thống thiết kế của mình.

Được rồi, chúng ta đã bắt đầu xây dựng thương hiệu của mình, phải không? Chúng ta lấy một ý tưởng từ Claude, chúng ta động não, chúng ta lên ý tưởng một chút, chúng ta tạo logo, chúng ta tạo tất cả những thứ đó, và bây giờ chúng ta về cơ bản có một hệ thống thiết kế. Chúng ta có một design MD mà chúng ta có thể xuất đi bất cứ đâu và một design MD mà chúng ta có thể sử dụng cho bất kỳ dự án nào trong tương lai.

Vì vậy, chúng ta hãy bắt đầu ở đây. Chúng ta muốn xây dựng cái gì trước? Chà, chúng ta sẽ đi qua toàn bộ hành trình. Chúng ta sẽ bắt đầu với một bài thuyết trình gọi vốn và sau đó chúng ta sẽ chuyển sang một trang đích sản phẩm. Và sau đó chúng ta sẽ xây dựng một nguyên mẫu ứng dụng di động và cuối cùng chúng ta sẽ ra mắt với một video ra mắt, tất cả sẽ đúng với thương hiệu. Và trong suốt video này, chúng ta sẽ thực sự làm cho thương hiệu này trở nên sống động bằng cách xây dựng tất cả các yếu tố này trong Claude Design.

Tài liệu hướng dẫn và bắt đầu với bài thuyết trình gọi vốn

Nhanh chóng thôi các bạn, tôi biết chúng ta đang xem xét rất nhiều thông tin trong video này. Vì vậy, điều tôi muốn làm là phân tích tất cả những điều này thành một tài liệu PDF hướng dẫn tài nguyên rất đơn giản mà các bạn có thể sử dụng, và bằng cách đó, các bạn có thể tham khảo nó sau này nếu cần xem lại một số điều tôi đã nói về quản lý token hoặc đặt câu lệnh, thay vì phải tua lại video mỗi lần. Vì vậy, nếu bạn muốn truy cập tài liệu hướng dẫn tài nguyên hoàn toàn miễn phí đó, hãy truy cập cộng đồng free school của tôi. Liên kết cho việc đó nằm trong phần mô tả. Tôi sẽ gặp các bạn ở đó.

Và bây giờ hãy quay lại video. Vậy, hãy bắt đầu với bài thuyết trình gọi vốn của chúng ta. Tôi sẽ mở Claude Design này và tôi sẽ đi đến phần slide deck. Tôi sẽ đảm bảo sử dụng hệ thống thiết kế Tally và tôi sẽ gọi đây là Tally, ơ, Tally Pitch Deck. Và chúng ta sẽ nhấp vào tạo.

Giao diện Claude Design và chuẩn bị nội dung

Hiện tại, ở đây, chúng ta có gì? Chúng ta về cơ bản có một giao diện dễ sử dụng. Ở phía bên phải, chúng ta có phần xem trước. Chúng ta cũng có thể xem tệp của mình. Chúng ta có thể thực hiện phác thảo. Và phía bên trái là nơi chúng ta sẽ trò chuyện với Trí tuệ nhân tạo (AI) hoặc chúng ta sẽ để lại bình luận và những thứ tương tự. Chúng ta sẽ thả tệp vào, những thứ như vậy.

Vì vậy, điều thực sự thú vị cho trường hợp sử dụng này là tất cả những gì tôi sẽ làm là tôi sẽ thả tệp Markdown ý tưởng thương hiệu vào, mà nếu các bạn nhớ, về cơ bản chỉ là tài liệu Markdown mà chúng ta đã xem trước đó mà Claude đã tạo ra, và nó có tất cả thông tin về doanh nghiệp và sứ mệnh cũng như hình đại diện. Và tất cả thông tin này thực sự là tất cả những gì tôi cần để tạo bài thuyết trình gọi vốn này. Và nếu nó có bất kỳ câu hỏi nào, đó là điều hay, Claude Design cũng sẽ cải tiến cùng bạn và nó sẽ hỏi bạn những điều để đảm bảo rằng nó hiểu mục tiêu cuối cùng của bạn.

Tối ưu hóa quy trình với Claude và Claude Design

Một điều tôi có thể đề xuất là nếu bạn không rõ ràng về những gì bạn muốn truyền đạt trong bài thuyết trình gọi vốn của mình, thì đừng lãng phí thời gian động não ở đây. Hãy đến Claude và động não trong môi trường này. Hãy nói: "Này, tôi muốn xây dựng một bài thuyết trình gọi vốn. Đây là một chút thông tin về doanh nghiệp của tôi. Hãy giúp tôi bố trí bài thuyết trình gọi vốn này. Giúp tôi hiểu cấu trúc của nó." Và sau đó lấy tệp đó hoặc sao chép và dán bất cứ điều gì nó cung cấp cho bạn ở đó và sau đó đưa nó trở lại Claude Design và tiếp tục với việc tạo ra thực tế.

Vì vậy, bạn có thể thấy các đầu vào nhỏ ở đây là để tạo một bài thuyết trình. Chúng ta có hệ thống thiết kế Tally và chúng ta cũng có tệp Markdown ý tưởng thương hiệu Tally.

Tuy nhiên, tôi nhận ra rằng trước khi tôi thực sự đưa điều này cho Claude Design, tôi có thể muốn nghiên cứu thị trường thêm một chút. Vì vậy, tôi sẽ mở Claude một lần nữa. Tôi sẽ vào cuộc trò chuyện này nơi chúng ta đã có tất cả ngữ cảnh này và tôi sẽ chỉ yêu cầu nó giúp tôi cấu trúc điều đó.

Định hình cấu trúc và nghiên cứu thị trường với Claude

Vậy bây giờ với Tally, tôi muốn tạo một bài thuyết trình gọi vốn cho một buổi thuyết trình cho nhà đầu tư. Và tôi muốn về cơ bản giải thích Tally là gì và tại sao tôi tin tưởng vào nó, đồng thời xem xét thị trường và xem tại sao đó là một khoản đầu tư tốt và tại sao mọi người có thể muốn tham gia vào đội ngũ Tally và tầm nhìn mà chúng ta đang thúc đẩy. Chúng ta muốn họ bị thuyết phục. Vì vậy, với thông số kỹ thuật ý tưởng thương hiệu mà bạn đã có cho tôi, hãy xây dựng dựa trên đó với một cấu trúc bài thuyết trình gọi vốn và cũng nghiên cứu về thị trường và chiến lược để thực sự đưa Tally đến một nơi mà nó bắt đầu thu hút nhiều người dùng.

Vì vậy, nó bắt đầu thực hiện một số nghiên cứu cho tôi, điều này thật tuyệt, nhưng sau đó nó thực sự nói rằng nó muốn thực sự xây dựng bài thuyết trình, vì vậy tôi phải dừng nó lại. Tôi nói: "Bạn không cần phải xây dựng bài thuyết trình. Chỉ cần cho tôi dàn ý Markdown để tôi có thể đưa nghiên cứu này vào Claude Design và sau đó nó có thể làm điều đó." Vì vậy, tôi muốn các bạn suy nghĩ về Trí tuệ nhân tạo (AI) như một công cụ chuyên biệt. Và ngay cả khi bạn đang sử dụng Trí tuệ nhân tạo (AI) nghĩa là Claude, làm thế nào bạn có thể có một cuộc trò chuyện riêng cho mỗi loại yêu cầu riêng lẻ? Làm thế nào bạn có thể làm cho mỗi phiên chuyên biệt và cụ thể nhất có thể để mang lại cho bạn kết quả đầu ra tốt hơn? Bởi vì trong trường hợp này, chúng ta đang sử dụng Claude ngay bây giờ để nghiên cứu và để tạo dàn ý Markdown, nhưng sau đó chúng ta sẽ đưa điều đó vào thiết kế để thực sự thực hiện thiết kế. Tôi nghĩ ngay cả ngoài phạm vi của khóa học chuyên sâu hôm nay, đó chỉ là một tư duy thực sự quan trọng khi bạn sử dụng công cụ Trí tuệ nhân tạo (AI).

Dàn ý bài thuyết trình và hiệu quả làm việc

Được rồi, vậy bây giờ chúng ta đã có dàn ý bài thuyết trình gọi vốn của mình. Điều này khá toàn diện. Có rất nhiều slide ở đây và tôi sẽ chỉ sao chép nó. Và bây giờ điều tuyệt vời là đó về cơ bản là công việc nặng nhọc. Vì vậy, ý tưởng là hy vọng điều đó sẽ làm cho Claude Design không sử dụng hết giới hạn phiên của chúng ta nhiều như nó sẽ làm nếu chúng ta chỉ thả vào: "Này, hãy xây dựng cho tôi một bài thuyết trình gọi vốn."

Tôi đã thả vào cho bạn một tệp Markdown ý tưởng thương hiệu Tally và nó chỉ có một số thông tin tổng quan về doanh nghiệp Tally của chúng ta và sứ mệnh cũng như định vị. Và tôi cũng sẽ dán vào một số thông tin về cách chúng ta muốn cấu trúc bài thuyết trình gọi vốn này. Bạn không cần phải tuân theo nó một cách máy móc, nhưng có rất nhiều nghiên cứu và thông tin quan trọng trong đó mà tôi muốn bạn sử dụng trong bài thuyết trình gọi vốn này như thể chúng ta đang cố gắng thuyết phục các nhà đầu tư rót vốn vào doanh nghiệp của chúng ta.

Sức mạnh của Glido và lựa chọn mô hình AI

Vì vậy, khi tôi dán những thứ đó vào, nó xuất hiện dưới dạng văn bản ngay tại đây. Vì vậy, tôi sẽ chỉ làm rõ 372 dòng văn bản đã dán mà bạn thấy là thông tin về cấu trúc bài thuyết trình gọi vốn. Vì vậy, tôi sẽ gửi cái này đi và chúng ta sẽ xem chúng ta nhận được gì. Nếu các bạn tò mò về cách tôi có thể chỉ nói và văn bản xuất hiện, hãy xem công cụ trong phần mô tả. Tôi đang sử dụng một công cụ có tên Glido và tôi thực sự là một phần của đội ngũ Glido bây giờ vì nó nhanh hơn đáng kể và riêng tư hơn Whisper, và tôi nghĩ có rất nhiều những khía cạnh mang tính tác nhân mà chúng ta sẽ làm với nó, điều mà tôi rất hào hứng. Vì vậy, chắc chắn hãy kiểm tra Glido. Hỗ trợ Windows sẽ có rất, rất sớm.

Trong khi tất cả điều này đang chạy, tôi cũng muốn nhanh chóng thu hút sự chú ý của bạn đến những thứ dưới đây. Đây là nơi bạn có thể thay đổi mô hình. Bạn có thể thấy theo mặc định, bạn sẽ sử dụng Opus 4.7. Bạn có thể chuyển về Opus 4.6. Bạn thậm chí có thể sử dụng Opus 3, tôi không nghĩ mình sẽ dùng, nhưng bạn cũng có thể chuyển sang Haiku và Sonnet.

Chiến lược lựa chọn mô hình cho các giai đoạn khác nhau

Và vì vậy, trong phần lớn thời gian, khi chúng ta thực hiện lập kế hoạch ban đầu và bắt đầu, tôi sẽ gần như luôn sử dụng Opus 4.7 ở đây. Khi tôi có thể thực hiện một số điều chỉnh nhỏ và phản hồi sau này, đó là lúc tôi sẽ giảm mức độ của mô hình xuống Sonnet hoặc Haiku cho các lần lặp lại nhỏ và những thứ khác. Nhưng đặc biệt là khi bạn đã thực sự nắm vững cách bạn có hệ thống thiết kế của mình và cách bạn muốn các trang đích hoặc bài thuyết trình của mình được xây dựng, bạn rất có thể đạt đến một điểm mà bạn chỉ sử dụng Sonnet mọi lúc.

Khi bạn cảm thấy thoải mái với quy trình và với kết quả đầu ra mà bạn đang nhận được, đặc biệt nếu bạn đang sử dụng Claude ở phía trước để thực sự giúp đỡ về chiến lược vì bạn có thể sử dụng Opus ở đây và bạn có thể tìm ra dàn ý của những gì bạn muốn. Và sau đó chỉ cần nói: "Này, Sonnet bên trong Claude Design, hãy lấy thông tin này và chỉ cần đưa nó lên một bài thuyết trình cho tôi." Và đó là cách bạn sẽ có thể mở rộng giới hạn của mình xa hơn rất nhiều.

Đánh giá và điều chỉnh bài thuyết trình gọi vốn

Được rồi, cái này đã hoàn thành. Tôi đã thực hiện một vòng phản hồi, nhưng tôi muốn chỉ cho các bạn lý do tại sao và tôi muốn chỉ cho các bạn một số điều quan trọng khác.

Đây là câu lệnh của chúng ta. Nó bắt đầu đọc mọi thứ và đi sâu vào, phải không? Nó lên kế hoạch cấu trúc và sau đó điều gì đã xảy ra là nó bắt đầu xây dựng nó và nó có thể xác minh và xem xét mọi thứ. Vì vậy, bạn có thể thấy ở đây, nó nói rằng kiểm tra tác nhân xác minh đã hoàn tất. Điều đó có nghĩa là nó đang xem xét từng slide trực quan để xem điều gì đã xảy ra và nó nói: "Được rồi, hãy sửa slide sáu vì có lỗi này và hãy sửa slide mười vì lỗi này." Sau đó nó sửa chúng và bạn có thể thấy rằng nó đã có thể chạy tác nhân xác minh.

Tuy nhiên, tôi đã có một chút phản hồi để đưa ra. Vì vậy, tôi nói: "Này, logo sai ở đây, vân vân và vân vân." Và một lần nữa, nó có thể xem xét mọi thứ. Vì vậy, nó đã chụp ảnh màn hình, xem xét nó và sau đó nó có thể sửa nó. Điều đó thực sự, thực sự tuyệt vời.

Khám phá nội dung bài thuyết trình Tally

Nhưng bây giờ hãy cùng xem những gì chúng ta đã nhận được. Chúng ta có Tally, money on the level. Chúng ta có nền nền màu xanh navy đẹp mắt với phông chữ thông thường ở đây và logo. Vậy hãy tiếp tục. Tôi sẽ sử dụng các phím mũi tên ở đây. Hầu hết các ứng dụng tài chính muốn thay đổi bạn. Tally chỉ cho bạn thấy điều gì đang xảy ra, được chứ? Và bạn có thể thấy ở phía dưới bên trái, chúng ta có logo, cả biểu tượng và văn bản, điều này khá đẹp. Các bài giảng về danh mục, mọi người không muốn một bài giảng, họ muốn một bức tranh rõ ràng, 20 triệu người dùng Mint đang hoạt động ở đỉnh điểm, các lựa chọn thay thế cạnh tranh nhiều hơn, nhiều Trí tuệ nhân tạo (AI) hơn, nhiều tính năng hơn, nhiều huấn luyện hơn. Và khoảng 50% người dùng ứng dụng Fintech bỏ ứng dụng trong năm đầu tiên của họ.

Sau đó, nó nói về một số xu hướng hội tụ. Nó nói về ba điều: kết nối tài khoản ngân hàng của bạn, nhận Tổng hợp Chủ nhật của bạn, kiểm tra khả năng chi trả. Báo cáo hàng tuần là sản phẩm. Vì vậy, có một loại ứng dụng di động ở đây. Mỗi tuần một lần vào sáng Chủ nhật, bạn nhận được loại báo cáo thú vị này. Và như bạn có thể thấy, nó đang đi qua bài thuyết trình. Rõ ràng chúng ta không muốn cái này quá nhiều chữ vì đây là một bài thuyết trình gọi vốn. Sẽ có người thuyết trình về tất cả những nội dung này nên chúng ta không muốn nó quá gây xao nhãng. Nhưng nó đang mang lại cảm giác rất đúng với thương hiệu. Mọi thứ đều nhất quán với phông chữ của chúng ta, màu sắc của chúng ta, logo của chúng ta, những thứ như vậy.

Thông tin chi tiết về thị trường, chiến lược và tương lai

Và sau đó chúng ta đi vào một số thứ khác mà Claude Design có thể sẽ không tự làm được. Đây là một số nghiên cứu mà Claude thông thường đã có thể kéo vào cho chúng ta. Vì vậy, những điều về thị trường và khoảng trống. Và về cơ bản, đây là nơi bạn bắt đầu thuyết phục các nhà đầu tư rót vốn. Tôi nghĩ slide này thực sự rất đẹp. Một diễn giải trực quan thực sự đẹp về nơi Tally giải quyết một khoảng trống mà các công cụ hiện tại khác không giải quyết được.

Và tôi không nói rằng đây là chiến lược ra mắt tốt nhất cho một sản phẩm SaaS. Tôi không nói rằng điều này thậm chí là chính xác 100% vì tôi chưa xác thực điều này. Tôi vừa xây dựng thương hiệu này trong khoảng 10 phút qua. Nhưng đây là những gì nó có thể bắt đầu làm. Nó có thể bắt đầu kể một câu chuyện cho bạn. 8 đô la một tháng, một gói, không phân cấp. Làm thế nào chúng ta đạt được điều đó. Vì vậy, giai đoạn một, giai đoạn hai và giai đoạn ba trong vòng ba năm. Và từ phiên bản thử nghiệm (beta) đến 3 triệu đô la ARR ngay tại đây. Vì vậy, như bạn có thể thấy, đây là nơi bạn cũng sẽ đặt một số thông tin về người sáng lập. Chúng ta đã thay đổi logo ở đây. Chúng ta có một số nhân sự được tuyển dụng khác đang được lên kế hoạch. Và vâng, đối với bản nháp đầu tiên, tôi nghĩ rằng điều này thực sự, thực sự tốt. Rõ ràng điều bạn làm ở đây bây giờ là bạn sẽ bắt đầu cải tiến một chút.

Có nhiều cách để chúng ta có thể cải tiến. Chúng ta có thể nhấp vào chỉnh sửa. Và điều đó sẽ cho phép chúng ta thực sự chỉnh sửa mọi thứ. Vì vậy, tôi có thể không muốn gọi đây là nhà thiết kế sáng lập. Có lẽ chúng ta chỉ muốn gọi đây là nhà thiết kế đồ họa sáng lập.

Chỉnh Sửa Trực Tiếp và Công Cụ Vẽ

Tôi có thể thực hiện điều đó. Điều quan trọng ở đây là khi bạn thực hiện các thay đổi này, Claude sẽ áp dụng chúng. Nhưng điều này giúp bạn cụ thể hơn về các thay đổi của mình và sẽ tiết kiệm phiên làm việc cũng như token về lâu dài. Bởi vì nếu bạn muốn đưa ra câu lệnh tất cả những điều này bằng ngôn ngữ tự nhiên, bạn có thể làm được, điều đó thật tuyệt vời, nhưng có nhiều chỗ cho lỗi hơn. Ngược lại, ở đây, chúng ta có thể nhấp vào chính xác phần tử cụ thể mà chúng ta muốn. Chúng ta có thể thay đổi kích thước, thay đổi màu sắc. Và chúng ta có thể cụ thể hơn bằng cách thực hiện các chỉnh sửa thực tế.

Điều khác chúng ta có thể làm là sử dụng công cụ vẽ. Giả sử chúng ta không muốn, tôi không biết, có thể chúng ta muốn logo này lớn hơn. Vì vậy, tôi sẽ vẽ một vòng tròn quanh nó. Và sau đó tôi chỉ cần gõ và nói: "Tôi muốn cái này lớn hơn". Và sau đó tôi có thể gửi đi. Và điều đó sẽ tiêm cái bản vẽ đó vào. Ồ, nó nói không thể chụp được. Chuyện gì đã xảy ra? Được rồi, để tôi thử lại. Tôi có thể khoanh tròn logo ở dưới đây. Bạn không thể nhìn thấy nó vì cái này che mất. Và sau đó tôi chỉ cần nói: "Tôi muốn cái này lớn hơn". Và khi tôi gửi đi, về cơ bản nó tiêm ảnh chụp màn hình đó vào cuộc trò chuyện ngay đây. Và vì vậy, nó biết tôi vừa khoanh tròn cái gì. Và nó nhìn thấy bình luận tôi để lại. Thật không may, có một chút lỗi ở đây. Và bây giờ chúng ta sẽ thực sự thực hiện thay đổi đó. Vì vậy, nó nói: "Người dùng đã khoanh tròn dấu gạch nhỏ bên trong, thú vị." Được rồi, vậy là điều đó thực sự không hoạt động. Có vẻ như, vâng, điều đó không hoạt động ở đây. Công cụ vẽ có thể hơi có lỗi ngay bây giờ. Hãy nhớ rằng, đây là phiên bản xem trước nghiên cứu. Vì vậy, bạn có thể thấy một lỗi như vậy. Trong quá khứ, tôi đã sử dụng công cụ vẽ và nó hoạt động tốt. Nhưng đó chỉ là một ví dụ khác về việc có lẽ bạn thậm chí không cần vẽ, bởi vì nếu đó là một phần tử cụ thể, chỉ cần làm nổi bật nó. Nếu tôi muốn cái này lớn hơn, tại sao tôi không chỉ lấy cái này và tự làm cho nó lớn hơn? Công cụ vẽ có lẽ hữu ích hơn cho những thứ không thực sự có thẻ div hoặc phần tử thực tế.

Vì vậy, giả sử chúng ta muốn đến slide cuối cùng. Và giả sử nền này là chuyển màu hoặc cái gì đó. Có thể có một gradient rất lạ, gradient quá tối ở đây. Và tôi sẽ khoanh tròn cái này và nói: "Này, bạn có thể làm cho phần này sáng hơn một chút không?" Đó có lẽ là một trường hợp sử dụng tốt hơn cho công cụ vẽ so với việc vẽ xung quanh một phần tử thực tế đã tồn tại. Và điều thú vị ở đây là, mỗi dấu gạch này là một thành phần riêng lẻ mà chúng ta có thể thay đổi, điều này khá thú vị. Tôi có thể thay đổi màu sắc của riêng cái này nếu tôi muốn. Vì vậy, điều đó khá hay. Tôi sẽ không làm điều đó. Tôi muốn đảm bảo mình không thực hiện thay đổi đó, nhưng điều đó khá tuyệt. Bây giờ, điều đó hơi khó chịu. Thật không may, không có nút đặt lại. Cũng không có hoàn tác. Vì vậy, nếu tôi muốn thay đổi cái này trở lại, tôi sẽ phải lấy màu sắc thực tế từ đó và đưa vào đây, sau đó thay đổi nó. Và bây giờ tôi có thể chỉnh sửa điều đó và nó sẽ sửa lỗi, nhưng điều đó hơi phức tạp. Tôi nghĩ chắc chắn phải có nút hoàn tác. Hoặc có lẽ tôi chỉ đang bỏ lỡ nó.

Tùy Chỉnh Thiết Kế (Tweaks)

Và sau đó chúng ta có khả năng thêm tweaks, điều này khá tuyệt. Điều này về cơ bản có nghĩa là chúng ta có thể thay đổi cách các slide thực sự trông như thế nào. Và chúng ta có thể làm điều này thay vì câu lệnh. Chúng ta chỉ có thể làm điều đó trong một giao diện. Để tôi cho bạn xem. Cái này trông rất đẹp. Tuy nhiên, có một số slide có thể cảm thấy hơi nhạt nhẽo. Vì vậy, tôi có thể muốn thêm một chút màu sắc, hoặc chỉ một chút phong cách thương hiệu của chúng tôi. Vậy bạn có thể cho tôi một vài tweaks khác nhau mà tôi có thể thử cho toàn bộ bộ slide này không? Và điều tôi thích về điều này là có những lúc, nếu bạn không quá sáng tạo, bạn có thể cảm thấy bế tắc. Nhưng điều bạn có thể làm là bạn có thể để Claude design trở thành người sáng tạo. Bạn có thể nói: "Này, hãy cho tôi một loạt tweaks. Hãy để tôi thử nghiệm với mọi thứ." Và điều đó sẽ cho phép bạn thực sự tìm ra điều bạn thích hoặc không thích.

Được rồi, bây giờ chúng ta có các tweaks của mình, nghĩa là tôi có thể nhấp vào nút chuyển đổi này và chúng ta thấy một số thứ khác nhau mà chúng ta có thể thay đổi. Vì vậy, điều đầu tiên chúng ta sẽ xem xét là trang bìa. Chúng ta có thể thay đổi nó từ mặc định sang bold mark, điều đó có nghĩa là cái này sẽ lớn hơn. Và cái đó sẽ lớn hơn. Chúng ta cũng có thể chọn word mark only, điều đó sẽ cho chúng ta cái này. Và tôi thành thật mà nói, tôi thích bold mark. Vì vậy, đây là mặc định. Tôi thích cách nó lớn hơn một chút như vậy. Bây giờ hãy xem chúng ta còn có gì khác. Chúng ta có kết cấu của nền. Vì vậy, chúng ta có thể chọn dot grid, mà thành thật mà nói, tôi không thực sự thấy. Tôi nghĩ các chấm chỉ là, chúng rất, rất nhạt. Chúng ta cũng có thể chọn hairline, trông giống như nền giấy kẻ ô. Tôi không biết các bạn có nhìn thấy không. Chúng ta có kiểu lưới đó, thêm một chút kết cấu, điều đó rất hay. Nhưng điều tôi thích nhất thành thật mà nói là warm haze này, nơi chúng ta có một chút màu xanh lá cây ở đây, một chút màu cam. Và tôi nghĩ cái này trông rất, rất đẹp. Nó mang lại cho nó thêm chiều sâu. Và tôi không biết liệu tôi có nghĩ đến việc câu lệnh Claude design để làm điều này không. Vì vậy, đây là một trong những tình huống mà, đặc biệt đằng sau ứng dụng này, tôi nghĩ rằng warm haze này trông thực sự, thực sự đẹp.

Chúng ta cũng có một điểm nhấn, vì vậy chúng ta có thể chọn vivid green, trông có vẻ như nó chỉ thay đổi. Tất cả những gì tôi thấy là cái này. Nếu tôi chọn mặc định, cái đó sẽ biến mất. Vivid green thêm cái dấu hash mark nhỏ đó hoặc bất cứ thứ gì được gọi, m-dash. Tôi không biết. Warm, tôi không thực sự thấy nó đang làm gì. Có lẽ chúng ta phải chuyển sang một trang khác để xem warm sẽ làm gì. Vì vậy, bạn chắc chắn phải nhấp qua để xem điều gì đang thực sự xảy ra, hoặc bạn cũng có thể hỏi Claude design. Nhưng tôi thích vivid green. Vì vậy, chúng ta sẽ giữ cái đó. Và sau đó chúng ta có slide chrome. Nó có thể là mặc định, nó có thể là tối giản, hoặc nó có thể là nhấn mạnh. Và tôi thực sự chỉ thấy sự khác biệt ở đây. Vì vậy, số slide ở trên cùng bên trái, tối giản sẽ loại bỏ nó và nhấn mạnh làm cho nó có màu tối hơn một chút. Và tôi nghĩ vì lý do này, chúng ta muốn để cái này ở mặc định. Tôi thích nó là mặc định. Vì vậy, tất nhiên có những tweaks khác chúng ta có thể thêm. Nhưng bây giờ, đây là tình hình. Và tôi thích cách chúng ta có thể thử nghiệm với một vài thứ khác nhau và xem điều chúng ta thích.

Hoàn Tất Bài Thuyết Trình và Chuyển Sang Dự Án Mới

Tại thời điểm này, giả sử chúng ta hài lòng với nội dung. Chúng ta hài lòng với cách nó trông. Chúng ta sẽ tiến hành và có thể trình bày nó ngay từ đây hoặc chúng ta có thể mời đồng đội của mình tham gia. Chúng ta có thể nhân đôi nó. Chúng ta có thể tạo mẫu. Chúng ta có thể xuất nó. Chúng ta có thể đưa nó cho Claude Code. Bất cứ điều gì chúng ta muốn làm bây giờ với bài thuyết trình kinh doanh này, chúng ta đều có thể làm.

Được rồi, đó là dự án đầu tiên chúng ta đã thực hiện cùng nhau. Đó là bài thuyết trình kinh doanh của startup. Bây giờ, giả sử điều chúng ta cần là một trang đích sản phẩm. Chúng ta sẽ xây dựng một trang đích một trang đơn giản cho sản phẩm này. Nhưng rất nhanh, trước khi chúng ta làm điều đó, tôi muốn kiểm tra nhanh mức sử dụng. Hãy xem chúng ta đang ở đâu với mức sử dụng Claude design sau khi thiết lập thiết kế và xây dựng bài thuyết trình kinh doanh này. Chúng ta hiện đã sử dụng 32%. Vì vậy, hãy nhớ điều đó. Nhưng điều chúng ta sẽ làm bây giờ là chúng ta sẽ xây dựng một trang đích. Và tin tốt một lần nữa là chúng ta đã có hầu hết những gì chúng ta cần vì chúng ta có toàn bộ hướng dẫn ý tưởng thương hiệu này. Và đây về cơ bản sẽ là rất nhiều nội dung đi vào trang web của chúng ta. Vì vậy, hãy quay lại Claude design. Chúng ta sẽ bắt đầu một nguyên mẫu mới.

Thiết Kế Bố Cục Sườn Cho Trang Đích

Và điều tôi muốn cho các bạn thấy là cách thiết kế bố cục sườn hoạt động. Vì vậy, tôi sẽ nhấp vào bố cục sườn. Tôi sẽ thay đổi cái này thành hệ thống thiết kế tally của chúng tôi. Và tôi sẽ gọi cái này là bản nháp trang đích. Bởi vì điều chúng ta sẽ làm ở đây là trước khi chúng ta bắt đầu thiết kế và thực sự xây dựng trang web của mình, chúng ta sẽ thực hiện một bố cục sườn để xem tổng quan các cách tiếp cận, các phong cách khác nhau mà chúng ta có thể áp dụng. Vì vậy, tôi sẽ nhấp vào tạo. Và chúng ta sẽ bắt đầu câu lệnh cái này về những gì chúng ta muốn. Vì vậy, tôi sẽ làm điều tương tự một lần nữa, nơi tôi thả ý tưởng thương hiệu vào. Và tôi sẽ bắt đầu lên ý tưởng ở đây. Tôi sẽ nói: "Chúng ta có một sản phẩm tên là tally. Và đó là hệ thống thiết kế mà bạn đang xem. Tôi cũng vừa thả tệp markdown ý tưởng thương hiệu của chúng tôi vào, nó được đính kèm ngay đó. Và mục đích của dự án này là một dự án bố cục sườn. Tôi muốn bạn cung cấp cho tôi một loạt ý tưởng khác nhau, một loạt bản nháp về cách trang đích của chúng tôi có thể được thiết lập. Chúng ta có thể sẽ có một phần hero. Chúng ta sẽ có một số thông số kỹ thuật. Chúng ta sẽ có bảng giá của chúng tôi. Chúng ta sẽ có một số lời chứng thực. Bạn có thể điền tất cả những thứ này bằng dữ liệu giả. Mục đích của điều này ngay bây giờ là giúp tôi tìm ra chủ đề, phong cách. Trang web nên mang lại cảm giác như thế nào? Nó nên trông như thế nào? Chúng ta đang thu hút ai? Hành trình của trang web là gì? Các màu sắc khác nhau là gì? Bạn biết đấy, chế độ tối hay chế độ sáng? Hoặc làm thế nào để chúng ta làm cho nó cảm thấy hiện đại? Làm thế nào để chúng ta làm cho nó cảm thấy đúng phong cách thương hiệu? Vì vậy, điều tôi muốn chỉ là một vài ý tưởng khác nhau để chúng ta thực sự có thể đưa bố cục sườn này vào một dự án khác để xây dựng trang đích của chúng tôi."

Bước này không hoàn toàn quan trọng. Nếu chúng ta thả tất cả những điều này vào một dự án độ chi tiết cao thông thường và nói: "Này, hãy xây dựng cho tôi một trang web," tôi rất tự tin rằng nó sẽ trông tuyệt vời. Và tôi rất tự tin rằng chúng ta có thể lấy các tweaks và thay đổi nó theo cách chúng ta muốn. Nhưng đôi khi thật tuyệt khi có thể nhìn vào rất nhiều ý tưởng khác nhau. Có lẽ cũng khi chúng ta đang làm điều gì đó như xây dựng một ứng dụng di động, chúng ta cũng muốn làm điều gì đó tương tự. Và điều hay ở đây là nó sẽ hỏi chúng ta rất nhiều câu hỏi. Vậy tôi nên phác thảo bao nhiêu ý tưởng riêng biệt? Chúng ta hãy chọn ba. Độ chi tiết bố cục sườn. Đây là giai đoạn tiền thiết kế. Bạn muốn chúng thô sơ đến mức nào? Phong cách phác thảo, vẽ tay, bố cục sườn gọn gàng, độ chi tiết trung bình, hay hỗn hợp? Tôi sẽ chọn độ chi tiết trung bình. Tôi nghĩ rằng điều đó sẽ cho chúng ta cảm giác tốt hơn. Bạn nên khám phá những phong cách và hướng nào? Tôi sẽ trình bày ít nhất ba. Tôi sẽ chỉ nói "tự quyết định cho tôi". Tôi không muốn đưa ra đầu vào ở đó. Tôi muốn nó sáng tạo. Sau đó, nó cũng hỏi sáng hay tối. Chúng ta sẽ chọn chủ yếu sáng với một ý tưởng tối. Điều gì đại diện cho hình ảnh, ảnh chụp màn hình ứng dụng? Tôi sẽ chỉ nói "tự quyết định cho tôi" một lần nữa. Và ngoài tất cả những điều này, chúng ta còn muốn gì khác? Có lẽ Câu hỏi thường gặp, có lẽ, vâng, chắc chắn. Ghi chú của người sáng lập, một bảng so sánh sẽ rất tuyệt. Và một mẫu dữ liệu quyền riêng tư hàng tuần. Vâng, chắc chắn, tất cả những thứ này đều tốt. Vì vậy, bạn có thể thấy điều này đang giúp chúng ta tinh chỉnh mục tiêu của mình.

Tất nhiên, bạn có thể thực hiện phần tạo bản nháp này trong một cuộc trò chuyện Claude thông thường. Không có gì sai với điều đó. Nó sẽ làm điều gì đó rất giống với những gì chúng ta đã làm trước đó, phải không? Nơi nó đang cho tôi những bản nháp khác nhau và cho chúng ta những trực quan hóa khác nhau về những gì chúng ta có thể làm. Và thành thật mà nói, từ góc độ token, đó là lựa chọn tốt hơn của bạn. Nhưng tôi thực sự chỉ muốn cho các bạn thấy bố cục sườn này có thể trông như thế nào. Và đối với phần còn lại của những thứ này, tôi thành thật mà nói sẽ chỉ nói "tự quyết định cho tôi" cho tất cả chúng. Vì vậy, chúng ta có thể xem những gì chúng ta sẽ nhận được với đầu vào tối thiểu. Vì vậy, tôi sẽ gửi cái này đi và hãy xem chúng ta nhận được gì.

Kết Quả Thiết Kế Bố Cục Sườn

Được rồi, cái này đã hoàn thành. Chúng ta có ba phong cách khác nhau. Chúng ta có honest mirror. Chúng ta có receipt ledger. Và chúng ta có quiet night. Vì vậy, điều này về cơ bản cho chúng ta một bảng, giống như Figma. Hoặc thậm chí như một Google stitch mà chúng ta có thể phóng to, di chuyển, và bình luận về mọi thứ, chỉnh sửa mọi thứ. Vì vậy, hãy xem cái đầu tiên này. Chúng ta có nền màu xương nhạt. Chúng ta có một phần hero lớn. Thành thật mà nói, giao diện này hơi kì lạ một chút. Bạn thấy nếu tôi mở nó ra toàn màn hình. Tôi có thể đi vào đó một chút.

Phân tích Thiết kế Ban Đầu

Bởi vì giờ đây tôi thực sự có thể cuộn xuống và xem toàn bộ hành trình những gì đang diễn ra trên trang này. Vậy nên, việc xem xét theo cách đó thực sự tốt hơn rất nhiều. Đây là phiên bản đầu tiên. Chúng ta có thể thấy phần giới thiệu chính (hero section), phần hàng tuần. Chúng ta có thể thấy phạm vi và bảng so sánh (comparison table) với các sản phẩm khác, điều này khá thú vị. Và sau đó có vẻ như có một ghi chú từ nhóm, tất cả những thứ tương tự.

Và sau đó nếu chúng ta chuyển sang cái cuối cùng, đây là phiên bản dark mode (chế độ tối). Phiên bản này trông rất giống với phiên bản đầu tiên, ngoại trừ, tôi nghĩ, sự khác biệt duy nhất thực sự là dark mode. Ý tôi là, tôi nghĩ có một vài thay đổi khác. Nhưng về cơ bản, đây là thứ mà chúng ta có thể đưa vào phần tiếp theo để xây dựng landing page (trang đích) của mình.

Hãy xem có gì ở đây. Chúng ta có các lựa chọn: chế độ màu sắc là "light bone" hoặc "dark navy". Chúng ta có một loại giọng văn khác nhau, cho dù đó là biên tập (editorial), tài liệu (documentation) hay tài chính công nghệ hiện đại (modern fintech). Chúng ta có hình ảnh, độ dài trang và các đối tượng mục tiêu khác nhau mà chúng ta đang hướng tới. Nếu các bạn nhớ trong đặc tả ban đầu của chúng ta ở đây, chúng ta có hai loại đối tượng mục tiêu khác nhau. Chúng ta có SAM và sau đó chúng ta cũng có freelance Frankie. Vì vậy, khá thú vị khi nó có thể tính đến điều đó. Và nó cho chúng ta thấy trang web nào đang thu hút đối tượng nào trong số các avatar của chúng ta. Cái này có thể cảm thấy giáo điều. Nó có thể cảm thấy lạnh lùng. Cái này có thể cảm thấy chung chung. Vì vậy, chúng ta có thể tiếp tục lặp lại ở đây và chọn một trong số này mà chúng ta thích để chuyển sang phần tiếp theo là thực sự xây dựng một landing page cho chúng ta.

Thành thật mà nói, đối với trường hợp sử dụng cụ thể này, tôi nghĩ đó có lẽ là sự lãng phí session limit (giới hạn phiên) của tôi. Tôi nghĩ có lẽ việc này sẽ tốt hơn nếu thực hiện wireframe (khung sườn) để lập kế hoạch cho một full funnel (phễu chuyển đổi hoàn chỉnh), ví dụ như trang một, trang hai, trang ba, và bạn thực sự hình dung ra hành trình. Tôi nghĩ điều đó có thể hữu ích hơn. Tôi cũng nghĩ nếu bạn đang thiết kế một desktop app (ứng dụng máy tính để bàn) thực tế hoặc một mobile app (ứng dụng di động), thì việc tạo wireframe cũng có thể tốt hơn. Chúng ta đã sử dụng nó để giúp tìm ra một số khía cạnh của branding (xây dựng thương hiệu) cho các logo (biểu tượng) và packaging (bao bì) khác nhau. Vì vậy, điều đó khá hữu ích. Nhưng khi nói đến việc chỉ thiết kế một landing page, tôi nghĩ bạn có lẽ nên thực hiện nó với high fidelity (độ chi tiết cao) ngay lập tức. Nhưng tôi chỉ muốn cho các bạn thấy khái niệm đó.

Xuất HTML và Bắt Đầu Lại

Vì vậy, những gì tôi đã làm là tôi chỉ xuất cái này dưới dạng HTML. Nếu tôi mở cái này lên, hãy xem nó trông như thế nào trong HTML. Về cơ bản, nó chỉ cung cấp cho chúng ta chính xác thứ đó mà chúng ta có thể cuộn qua và xem. Tôi tự hỏi liệu nó có cho phép chúng ta mở nó lên không. Vâng, về cơ bản, chúng ta có project (dự án) này dưới dạng HTML.

Nhưng dù sao, những gì tôi sẽ làm bây giờ là chúng ta sẽ bắt đầu lại từ đầu. Vì vậy, tôi sẽ chuyển sang một cái mới. Chúng ta sẽ làm với Tally. Chúng ta sẽ làm high fidelity. Và đây sẽ là landing page của Tally. Vậy là lãng phí thời gian. Đó là sự lãng phí session của tôi. Hãy xem chúng ta đã sử dụng bao nhiêu ở đây. Nó đã sử dụng 41. Tôi nghĩ trước đây chúng ta ở mức 34. Vì vậy, nó đã sử dụng khoảng 7%. Chắc chắn là lãng phí 7% session của tôi. Nhưng tôi vui vì tôi vẫn cho các bạn thấy điều đó.

Thêm Yếu Tố Động và Phác Thảo Thiết Kế

Được rồi, vậy hãy tạo landing page này. Bây giờ, điều tôi muốn làm ở đây, và điều tôi sẽ cho các bạn thấy là một thứ khá thú vị. Tôi muốn thêm một yếu tố động (animated element) nhỏ vào nền. Vì vậy, tôi đã lấy logo của chúng ta và tôi đã đến Cling. Và tôi đã tạo một video. Tôi đã cho nó một start frame (khung bắt đầu) là nền "bone" trống, end frame (khung kết thúc) là logo của chúng ta. Và sau đó tôi về cơ bản đã nói rằng tôi muốn tạo hoạt ảnh cho điều này. Vì vậy, tôi nói, bạn biết đấy, tôi sẽ không đọc câu lệnh này. Nhưng nếu các bạn muốn đọc nó, tôi sẽ từ từ cuộn qua ở đây để các bạn có thể xem. Nhưng về cơ bản, những gì chúng ta nhận được là kết quả này, nơi logo thực tế dường như đang được vẽ bằng tay. Và sau đó dấu tally (tally mark) chạy ngang qua.

Vì vậy, tôi nghĩ điều này sẽ rất hay nếu có ở phía bên phải của phần hero section, chỉ phát lặp lại vô tận (endless loop) trong nền. Vì vậy, tôi đã tải xuống cái này. Và chúng ta sẽ đảm bảo rằng điều đó được triển khai vào phần này của trang web. Vì vậy, những gì tôi sẽ làm là tôi sẽ vào phần tải xuống của mình. Tôi sẽ lấy hoạt ảnh đó và tôi sẽ đặt nó vào đây. Các bạn có thể thấy nó được đính kèm dưới dạng tallyanimation.mp4. Nó lẽ ra đã có quyền truy cập vào các logo của chúng ta và mọi thứ khác mà chúng ta cần. Tôi cũng sẽ cung cấp cho nó tài liệu brand concept doc vì tài liệu đó có một số thông tin quan trọng về vị trí và giá cả.

Nhưng trước khi chúng ta thực sự xây dựng điều này, tôi muốn làm một điều. Tôi muốn tạo một bản phác thảo (sketch). Vì vậy, tôi sẽ nhấp vào new sketch. Tôi sẽ lấy một hình vuông và tôi sẽ chỉ tạo một landing page tổng thể có tỷ lệ 16:9. Đây là trang tổng thể. Đây là landing page của chúng ta. Và lý do tôi làm điều này là vì tôi muốn căn chỉnh với Claude về cách nó sẽ hoạt động trước khi nó thực sự bắt đầu cố gắng xây dựng. Bởi vì những gì tôi muốn làm là các bạn đã xem video này, phải không? Nó là một, tôi nghĩ đó là tỷ lệ khung hình (aspect ratio) vuông, như 1:1. Vì vậy, tôi muốn cái này xuất hiện trên phần hero section, nhưng tôi không muốn nó bị che bởi văn bản. Vì vậy, những gì tôi sẽ làm là cố gắng hết sức để tạo tỷ lệ 1:1. Và bên trong đó, tôi sẽ đánh dấu đây là tallyanimation.mp4, đó là những gì hiển thị ở phía bên trái ngay tại đó.

Và sau đó, chúng ta sẽ lấy một hình vuông khác. Và chúng ta có thể làm cho cái này màu xanh lá cây. Và đây thực sự sẽ là phần văn bản hero. Vì vậy, tôi có thể dán nhãn đây là văn bản hero. Và có lẽ, nếu tôi làm thêm một văn bản phụ hero. Và sau đó, điều tôi cũng có thể làm là chúng ta có lẽ muốn có một thanh điều hướng (nav bar) ở phía trên. Vì vậy, tôi sẽ chỉ lấy màu cam và tôi sẽ làm điều này. Và tôi sẽ lấy thêm một văn bản. Và tôi sẽ chỉ nói như logo có thể ở góc trên bên trái. Và sau đó có lẽ chúng ta có các phần điều hướng (nav sections). Và sau đó có lẽ ở phía bên phải, chúng ta có một nút kêu gọi hành động (call to action) ở đây. Vậy là bây giờ tôi có thể đưa ra một dàn ý thô tốt hơn về những gì chúng ta muốn. Và bản phác thảo đang được tham chiếu ở đây ngay tại đó. Sketch, bạn biết đấy, ngày 29 tháng 4 năm 2026, khăn giấy, vân vân.

Gửi Câu Lệnh và Nhận Phản Hồi Ban Đầu từ Claude

Tại thời điểm này, tôi cảm thấy thoải mái hơn khi đưa cho nó một kế hoạch mà nó có thể thực hiện "một lần ăn". Vì vậy, tôi sẽ bắt đầu nói ở đây. Được rồi. Chúng ta muốn thiết kế một landing page cho Tally, đó là sản phẩm của chúng ta. Tôi đã cung cấp cho bạn một bản phác thảo (sketch) đính kèm trong cuộc trò chuyện này. Và đó là cách tôi hình dung phần hero section này sẽ trông như thế nào cho trang web của chúng ta. Tôi hình dung một thanh điều hướng (nav bar) ở phía trên. Tôi hình dung văn bản hero và văn bản phụ hero ở phía bên trái màn hình. Và tôi hình dung tallyanimation.mp4 ở phía bên phải của phần hero section.

Nhưng điều quan trọng là màu nền của hoạt ảnh tally là màu "bone". Vì vậy, tôi muốn toàn bộ nền của trang web có màu "bone" ít nhất cho phần hero section. Để nó trông tự nhiên và liền mạch hòa vào phần còn lại của hero section. Vì vậy, chúng ta cũng sẽ có văn bản hero. Chúng ta sẽ có văn bản phụ hero. Và sau đó khi chúng ta cuộn xuống, tôi muốn bạn thiết kế các phần khác của trang web này bằng cách sử dụng tally design system (hệ thống thiết kế Tally) và sử dụng tệp markdown ý tưởng thương hiệu Tally (Tally brand concept markdown file) mà tôi đã cung cấp cho bạn. Bạn có thể điền tất cả những điều này bằng mock data (dữ liệu giả lập) vào lúc này. Và nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi.

Vậy đó là những gì tôi sẽ làm cho câu lệnh ban đầu. Chúng ta sẽ gửi nó đi. Chúng ta đang sử dụng Opus 4.7. Và tôi sẽ kiểm tra lại với các bạn khi chúng ta nhận được bất kỳ câu hỏi nào hoặc nếu chúng ta có một bản thử nghiệm ban đầu (POC).

Đánh Giá Thiết Kế Đầu Tiên của Claude

Được rồi. Đây là những gì chúng ta có. Tôi nghĩ nó trông khá đẹp. Tôi có thể nhận thấy rằng màu nền không hoàn toàn khớp với màu nền video. Nó hơi lệch một chút, nhưng phần lớn là không tệ. Những gì chúng ta có thể làm là chúng ta thực sự có thể đảm bảo lấy các mã màu (text codes) chính xác và khớp chúng nếu chúng ta muốn nó thực sự liền mạch. Nhưng với lần thử đầu tiên, khái niệm này, tôi thích ý tưởng có hoạt ảnh này. Và nó đã đúng dựa trên bản phác thảo của tôi. Bạn biết đấy, văn bản hero, văn bản phụ, chúng ta có video ở đây. Chúng ta có thanh điều hướng (nav bar) với logo, điều hướng và các nút kêu gọi hành động (CTA) ở đây. Vì vậy, tất cả trông rất đẹp.

Khi chúng ta cuộn xuống, chúng ta bắt đầu thấy một số yếu tố mà Claude đã tự thiết kế mà không cần tôi yêu cầu. Vì vậy, chúng ta có những thứ như: kết nối qua một kế hoạch, mã hóa 256-bit (256-bit encryption), quyền truy cập chỉ đọc (read-only access), không bán lại dữ liệu, iOS và Android. Một số điều hay mà chúng ta muốn có trên một biểu ngữ trượt (sliding banner). Chúng ta có bốn bước. Không có bước nào là bài tập về nhà. Vì vậy, chúng ta có thể thấy ngân hàng đã kết nối. Tôi thích cách nó hiển thị thời gian cài đặt trung bình. Thật dễ dàng để thực sự cắm và cài đặt những thứ này. Tôi thực sự thích với ví dụ hàng tuần, chúng ta có thể thấy nó nói như Chủ nhật ngày 27, nhưng khi chúng ta cuộn, cái này vẫn cố định, nhưng cái kia tiếp tục di chuyển. Và điều đó mang lại cảm giác động (dynamic feel) mà tôi thực sự thích. Bạn cũng có thể thấy rằng nó đang thêm điểm nhấn màu xanh lá (green accent) của chúng ta, điều này rất đẹp.

Và khi chúng ta tiếp tục cuộn xuống, chúng ta nhận được nhiều điểm nhấn màu xanh lá hơn, chúng ta nhận được nhiều nội dung văn bản (copy) hơn ở đây. Tôi nghĩ sẽ rất hay nếu thay đổi màu sắc. Giống như nếu cái này màu xanh navy và sau đó cái này màu "bone" và sau đó cái này lại màu xanh navy, chỉ để tạo cảm giác có cấu trúc hơn. Nhưng tôi thích cách cái màu xanh navy này trông, kiểu như vậy, phải không? Tôi thích sự khác biệt ở đó. Và tôi thích nút kêu gọi hành động (call to action) này với logo thực tế và nút này nổi bật rất đẹp. Vì vậy, với lần thử đầu tiên, tôi nghĩ rằng cái này trông thực sự, thực sự tốt. Bây giờ, điều tương tự tôi sẽ làm ở đây là nói, này, tôi thích cái này. Hãy cho tôi một loạt các điều chỉnh nhỏ (tweaks). Hãy thử nghiệm một vài thứ.

Các Điều Chỉnh Thiết Kế

Được rồi, chúng ta đã nhận được các điều chỉnh này. Bây giờ, tôi sẽ phóng to cái này thêm một chút. Tôi đoán tôi sẽ làm đến mức này, nhưng lý do tôi không làm vậy là vì trước đó tôi đã phóng to đến mức này và video đã di chuyển xuống dưới. Vậy hãy làm 125%.

Nhưng dù sao, chúng ta có thể làm một số điều chỉnh về tông màu (tone). Hiện tại, nền có tông ấm để phù hợp với video. Chúng ta cũng có thể chuyển sang tông tối. Và rõ ràng điều đó sẽ thay đổi video. Đó là lý do tại sao tôi không muốn làm điều đó. Vì vậy, chúng ta sẽ quay lại tông ấm cho họa tiết (texture). Chúng ta có thể chọn "subtle noise" (nhiễu tinh tế). Tôi không thực sự thấy quá nhiều thay đổi ở đó. Nó quá tinh tế. Chúng ta có thể chọn "dot grid" (lưới chấm). Một lần nữa, tôi không chắc mình thấy sự thay đổi nhiều ở đó. Chúng ta có thể chọn "ledger lines" (đường kẻ sổ). Tôi chắc chắn thấy những "ledger lines" đó. Và điều thú vị là, nếu bạn có thể nhận ra, nó trông không giống như chúng được cố định vào một phần. Chúng giống như một đường kẻ sổ tuyệt đối, điều này tạo thêm nhiều chiều sâu 3D, tôi nghĩ điều đó khá hay. Chúng ta cũng có thể chọn "graph paper" (giấy kẻ ô) hoặc "paper fiber" (vân giấy). Tôi khá thích "paper fiber". Và điều đó thực sự cho thấy chiều sâu. Được rồi, vâng, hãy nói rằng tôi thích "paper fiber".

Cường độ họa tiết (texture strength). Được rồi, đây là nơi chúng ta có thể làm cho nó mạnh hơn hoặc yếu hơn. Vì vậy, nếu tôi quay lại "dot grid", bây giờ chúng ta chắc chắn có thể thấy chấm. Thực ra, bạn biết không? Tôi có thể thích chấm hơn. Tôi thích nền chấm mạnh. Vì vậy, chúng ta sẽ giữ cái đó. Chúng ta có thể thêm một vignette (hiệu ứng tối góc). Tôi không thực sự nghĩ rằng chúng ta cần điều đó.

Được rồi, đối với bố cục phần hero (hero layout), chúng ta có thể chọn "split" (chia đôi). Chúng ta có thể chọn "stacked" (xếp chồng). Chúng ta có thể chọn "video left" (video bên trái). Tôi không thích cái đó. Chúng ta sẽ giữ "split". Phông chữ tiêu đề (headline font) chúng ta có thể chọn, không, tôi thích kiểu sans. Kích thước tiêu đề (headline size) chúng ta có thể thay đổi. Chúng ta có thể thay đổi văn bản ngay tại đây. "Money on the level" hoặc nó có thể chỉ là "Money. Yay." Chúng ta có thể thay đổi khung video (video frame). Không có, đường viền mảnh (hairline border), dấu góc (corner ticks), tấm thẻ (card plate). Tôi sẽ để cái này là "flush" (liền mạch). Tôi nghĩ rằng trông đó là đẹp nhất. "Ornament dot" (chấm trang trí). "Ornament dot" là gì? Hãy tắt nó đi. Được rồi, "ornament dot", về bản chất nó chỉ là một chú thích về những gì chúng ta đang thấy. Tôi sẽ để đó. Chúng ta cũng có thể điều chỉnh điểm nhấn (accent). Vì vậy, đối với những màu sắc ở đây, nếu tôi thay đổi cái này thành một màu khác, nó sẽ thay đổi cái đó. Tuy nhiên, tôi thích màu mặc định. Vì vậy, tôi không chắc liệu tôi có thể lấy được chính xác màu đó không, nó ở ngay đó. Chúng ta có thể thay đổi cường độ (intensity), dấu tally (tally mark), hình mờ (watermark).

Tinh chỉnh và Trình bày Trang web

Giả sử watermark sẽ ở đâu đó phía dưới, tôi đã tìm thấy nó ngay đây. Khá thú vị! Bạn có thể thấy khi cuộn xuống, watermark này xuất hiện ở nền. Tôi nghĩ điều đó thật tuyệt vời. Tôi sẽ giữ các số thứ tự. Vì vậy, tôi giả định mỗi phần có một số nào đó ở đây. Bạn có thể thấy số ba, và nó được bật hoặc tắt. Tôi sẽ giữ nó bật. Sau đó, chúng ta có thể thay đổi các phần. Ví dụ, nếu tôi tắt phần "Sample weekly", nó sẽ loại bỏ hoàn toàn phần đó. Nhưng tất cả các phần khác tôi đều thích. Đó là những tweak chúng ta có thể thực hiện. Nếu muốn nhiều hơn, chúng ta có thể yêu cầu thêm. Nhưng tôi nghĩ đây trông rất ổn cho lần thử nghiệm đầu tiên (first pass).

Tôi sẽ nhấp vào "present" (trình bày) và thực hiện trong tab này để chúng ta có trải nghiệm toàn màn hình. Hiện tại có một khoảng trống nhỏ ở đây. Tôi nghĩ nó nên phẳng hơn như thế này, nhưng đó sẽ là một sửa đổi rất dễ dàng. Chúng ta có thể chỉnh sửa hoặc vẽ và iterate để làm cho nó tốt hơn. Nhưng vâng, tôi thích cảm giác của nó. Với về cơ bản là một câu lệnh "một phát", có thể là hai hoặc ba lần iterate, chúng ta đã có một kết quả rất tốt. Nó phù hợp với thương hiệu, khớp với pitch deck của chúng ta, khớp với brand guidelines. Và bất cứ khi nào chúng ta muốn tạo một sub page (trang con) khác, hoặc một promotion (khuyến mãi) cụ thể, hoặc một landing page (trang đích) khác, chúng ta đều có thể giữ được style này. Tôi thực sự thích watermark này, cách nó chỉ xuất hiện trên nền đó. Nếu chúng ta chuyển sang màu xanh navy, chúng ta sẽ không thấy nó, nhưng nó sẽ quay lại ngay. Tôi nghĩ điều đó tạo thêm rất nhiều chiều sâu và texture mà tôi thực sự thích trên website.

Tùy chọn Triển khai và Lưu trữ

Tại thời điểm này, nếu chúng ta muốn lấy bản thiết kế này và đẩy lên live domain của mình, về cơ bản chúng ta sẽ xuất nó sang Claude Code. Chúng ta chỉ cần sao chép command này vào Claude Code, sau đó đẩy lên GitHub của chúng ta và sau đó đẩy vào RoCEL. Hoặc chúng ta có thể chỉ xuất nó dưới dạng HTML hoặc tải xuống product này dưới dạng zip và đưa lên RoCEL hoặc bất cứ nơi nào chúng ta muốn host nó. Theo cách chúng ta muốn. Tôi sẽ không chỉ cho các bạn điều đó ngay bây giờ. Sau này trong video này, sẽ có một phần mà chúng ta thực hiện một full build (xây dựng hoàn chỉnh) khác và chúng ta thực sự đưa nó vào Claude Code và đẩy nó lên. Vì vậy, nếu bạn muốn xem cách nó hoạt động ngay bây giờ, chỉ cần tua đến phần đó và sau đó bạn có thể quay lại. Nhưng có rất nhiều thứ khác nhau bạn có thể làm ở đây với loại website này.

Ví dụ Website và Nguồn Cảm hứng Thiết kế

Video mà bạn sẽ xem sau, tôi thực sự xây dựng live build của website này, nó cũng tương tự, phải không? Chúng ta có một animated video (video hoạt hình) ở phía bên phải này, bạn có thể thấy điều đó. Và sau đó chúng ta cuộn xuống và nhận được các element (phần tử) khác nhau phù hợp với thương hiệu của chúng ta. Và sau đó tôi cũng xây dựng website này, cùng một cảm giác, phải không? Và cái này được xây dựng một lần nữa trong Claude Design. Và sau đó chúng ta cũng làm cái này, mà tôi đã iterate một chút, nhưng tôi đã có thể sử dụng Claude Design để đưa một video vào nền. Và cái này có hiệu ứng parallax scrolling (cuộn thị sai) hơn là endless loop (vòng lặp vô tận). Và nó đơn giản như việc nói: "Này, tôi muốn video này ở nền. Tôi muốn nó có hiệu ứng parallax scrolling. Tôi muốn nó mượt mà khi người dùng cuộn xuống hoặc cuộn lên. Video nên phát theo thứ tự đó." Và chúng ta cũng có những 3D dynamic sort of glass morphism cards (thẻ thiết kế kính động 3D) này.

Và tôi đã có thể lấy một số inspiration (nguồn cảm hứng) cho tất cả những thứ này từ một vài site khác nhau mà tôi muốn giới thiệu nhanh cho các bạn. Vì vậy, cái đầu tiên là motion sites. Cái này có rất nhiều background và element thú vị được animated (hoạt hình). Và đây thực sự là cái chính xác tôi đã lấy inspiration từ cho website của AI Automation Society của tôi. Và bạn thực sự có thể chỉ cần sao chép câu lệnh và đưa câu lệnh đó cho Claude Design và nó sẽ recreate (tạo lại) nó cho bạn. Vì vậy, tôi có thể đã sao chép câu lệnh này và nói: "Này, hãy xây dựng website này cho tôi nhưng sử dụng tally design spec của chúng tôi" và nó sẽ thực hiện. Nó sẽ rất tuyệt vời. Rõ ràng chúng ta sẽ phải cung cấp một background video để phát. Nó có thể đã làm điều đó. Và sau đó cũng có rất nhiều site khác mà bạn có thể sử dụng để lấy inspiration.

Cũng có các site khác như godly.website mà về cơ bản có thêm inspiration khi cuộn. Cũng có thứ gì đó như awards với 3 chữ W. Có rất nhiều site khác nhau bạn có thể sử dụng để lấy inspiration. Và sau đó, khi bạn thực sự muốn chi tiết hơn, bạn có thể sử dụng thứ gì đó như 21st.dev có rất nhiều components. Vì vậy, nếu tôi vào components, chúng ta có thể thấy rằng chúng ta có announcements (thông báo). Và bạn có thể lấy một element (phần tử) riêng lẻ bằng cách sao chép câu lệnh và đưa vào website của mình. Bạn cũng có thể lấy một số animated backgrounds (hình nền động) như những viên thuốc này hoặc như background path đó hoặc những animations (hoạt ảnh) và thứ khác nhau này. Bạn cũng có thể lấy border (viền) và button (nút) và những thứ khác mà bạn muốn đưa vào. Vì vậy, một lần nữa, tất cả những thứ này sẽ tốt cho bạn để lấy một số inspiration. Và phần thú vị nhất về tất cả điều này, agente coding và AI website building, là tất cả chúng về cơ bản chỉ là câu lệnh. Bạn có thể sao chép chúng và đặt trực tiếp vào site của riêng bạn. Vì vậy, chắc chắn hãy xem một số site này và thử nghiệm cách chúng hoạt động.

Tạo Hướng dẫn Thương hiệu (Brand Guidelines)

Được rồi, nhanh chóng, trước khi chúng ta chuyển sang phần tiếp theo, đó là xây dựng một prototype (nguyên mẫu) ứng dụng di động, hãy nhanh chóng xây dựng một brand guidelines (hướng dẫn thương hiệu) cho thương hiệu này. Dự án này được đào tạo sâu rộng trên website và guidelines của chúng ta. Vì vậy, điều tôi sẽ nói là: "Bạn có thể vui lòng xuất một phiên bản text-based (dựa trên văn bản) của những brand guidelines này không?" Vì vậy, chúng ta có thể bao gồm những thứ như logo, spacing (khoảng cách), fonts (phông chữ), colors (màu sắc) và typography (kiểu chữ), và cụ thể nhất có thể về cách các button (nút) được thiết kế, cách các accent (điểm nhấn) hoạt động. Hãy cung cấp cho tôi một text breakdown (bảng phân tích văn bản) đầy đủ về mọi thứ quan trọng cần biết về guidelines cho thiết kế khi nói đến thương hiệu cụ thể này.

Lý do tôi làm điều này là vì tôi muốn có thể lấy những guidelines bằng văn bản này và đưa chúng cho OpenAI, GPT image-to để nó tạo ra một trong những tài liệu brand guideline docs mà bạn đã thấy trước đó, giống như khi chúng ta làm điều này cho AI Automation Society. Bây giờ, điều bạn có thể làm nếu không muốn làm điều này trong giới hạn design session của mình, điều này có lẽ là khôn ngoan, là xuất nó dưới dạng zip hoặc HTML hoặc xuất theo một cách nào đó để bạn có thể thấy tất cả các element (phần tử) riêng lẻ. Bởi vì như bạn biết trong các file (tệp), đây là tất cả mọi thứ. Đây là những gì chúng ta cần để tạo ra brand guidelines thực sự. Vì vậy, nếu bạn xuất cái này dưới dạng zip và sau đó bạn có Claude phân tích nó hoặc bạn có OpenAI phân tích nó và sau đó biến nó thành một design guidelines PDF (tài liệu PDF hướng dẫn thiết kế), điều đó cũng sẽ hiệu quả. Nhưng vì mục đích demo, tôi sẽ làm điều này hoàn toàn bằng natural language (ngôn ngữ tự nhiên) chỉ vì bây giờ nó nhanh hơn một chút. Và hãy cùng xem nhanh cập nhật Claude Design usage. Chúng ta đã sử dụng 51% cho đến nay sau các demo đầu tiên mà chúng ta đã thực hiện hôm nay trong video này.

Đánh giá Hướng dẫn Thương hiệu đã Tạo

Được rồi. Kết quả trả về là một bản phân tích khá lớn ở đây. Hãy để tôi cuộn lên trên cùng và sao chép. Bạn có thể thấy điều này rất, rất toàn diện. Nó thực sự không bỏ qua bất cứ điều gì. Tôi sẽ sao chép tất cả cái này. Tôi sẽ mang nó sang ChatGPT. Tôi sẽ nhấp vào "create image" (tạo ảnh) và dán nó vào. Sau đó, tôi cũng sẽ lấy logo tally, phiên bản icon (biểu tượng), nằm ngay đó. Và tôi đang lấy phiên bản text-based của logo. Và vâng, tôi nghĩ chúng ta sẽ ổn. Tôi chỉ sẽ nói: "Tôi đã đính kèm hai logo, phiên bản icon và phiên bản text, và sau đó tôi đã đính kèm brand guidelines bằng văn bản." Và điều tôi muốn bạn làm là tạo cho tôi về cơ bản một one-pager (tài liệu một trang) cho tally brand guidelines. Vì vậy, tôi sẽ gửi yêu cầu đó và hy vọng chúng ta nhận được một cái gì đó hoàn chỉnh ngay lần đầu mà không cần phải chỉnh sửa. Nhưng nếu chúng ta phải chỉnh sửa một số thứ về font, đó không phải là vấn đề lớn.

Được rồi. Đây là những gì chúng ta nhận được cho Tally. Bạn có thể thấy nó quyết định làm theo chiều dọc thay vì, vâng, chiều dọc thay vì chiều ngang, điều này hoàn toàn ổn. Nếu chúng ta muốn thay đổi nó thành landscape (chế độ ngang), chúng ta có thể. Tôi không nhất thiết phải làm điều đó ngay bây giờ. Vì vậy, hãy cùng xem xét điều này. Chúng ta có logo ở phía trên. Chúng ta có icon, chúng ta có word mark (nhãn hiệu từ ngữ), tên, chúng ta có logo ở đây với spacing (khoảng cách), tất cả đều trông tốt. Cho đến nay khi tôi xem xét tất cả các văn bản, không có gì có vẻ sai. Tôi thích cách nó có những lời "don't" (không được làm). Nó nói "don't recolor" (không tô màu lại), "don't remove the period" (không xóa dấu chấm), "don't do this" (không làm điều này), "don't rotate" (không xoay), "don't do that" (không làm điều kia). Chúng ta có tất cả các yếu tố về color scheme (bảng màu). Vì vậy, bone (màu xương), chúng ta có navy (xanh hải quân), chúng ta có green signals (tín hiệu xanh lá). Nó cũng cung cấp cho chúng ta một số yếu tố mapping khác nhau ở đây. Chúng ta có typography (kiểu chữ), tất cả đều trông tốt, tôi nghĩ. Berkeley Mono, free substitute (thay thế miễn phí). Có lẽ có một lỗi nhỏ ngay đó, nhưng nó không quá tệ. Và chúng ta cũng có secondary font (phông chữ phụ) này, tất cả đều trông tốt. Chúng ta có spacing và layout (bố cục) và chúng ta có UI (giao diện người dùng) và icon ngay đó.

Vì vậy, bạn có thể không thích điều này, bạn có thể muốn iterate thêm một chút, nhưng tôi nghĩ điều này khá đáng kinh ngạc khi bạn có thể tạo ra nó nhanh chóng như vậy. Nếu bạn cần thực hiện một số custom tweaks (điều chỉnh tùy chỉnh), bạn có thể đưa cái này vào Canva và thay đổi một vài thứ. Hoặc tất nhiên ngay tại đây, bạn có thể nói: "Này, tôi muốn cái này ít chữ hơn" hoặc "làm nó theo landscape" hoặc bất cứ điều gì bạn muốn làm ở đây, nhưng image model này thực sự rất tốt trong việc xây dựng những thứ như thế này. Và bạn có thể hỏi: "Được rồi, vậy tại sao tôi phải làm điều đó nếu tôi đã có design system của mình trong Claude Design?" Và đó là một câu hỏi hay vì bạn có thể xuất design system và bạn có thể đưa nó cho Claude Code hoặc thậm chí CodeX hoặc bất cứ thứ gì bạn muốn. Nhưng có lẽ đôi khi chỉ cần có một tài liệu one page nội bộ mà bạn có thể xem và lấy một số inspiration từ đó, hoặc thậm chí có thể bạn cần gửi nó cho một external vendor (nhà cung cấp bên ngoài) hoặc một designer (nhà thiết kế) hoặc một cái gì đó tương tự. Vì vậy, thật tốt khi có nó và nó cũng chỉ mất khoảng hai phút, vậy tại sao không?

Lên ý tưởng Nguyên mẫu Ứng dụng Di động

Nhưng hãy cùng chuyển sang phần tiếp theo này. Vậy điều chúng ta sẽ làm bây giờ là chúng ta đã làm một pitch deck. Chúng ta đã tạo landing page của mình và bây giờ chúng ta muốn xây dựng một prototype của ứng dụng di động. Vì vậy, đây là một kịch bản khác mà tôi sẽ thực hiện việc brainstorming bên trong Claude thực tế thay vì trong Claude Design. Vì vậy, tôi đã nói đúng như thế này: "Hãy cung cấp cho tôi một full spec (đặc tả đầy đủ) cho một ứng dụng di động. Tôi muốn đây là một requirement doc (tài liệu yêu cầu) và tôi muốn biến yêu cầu dựa trên văn bản này thành một high fidelity breakdown (phân tích chi tiết độ chân thực cao) sống động về cách ứng dụng sẽ trông và cảm nhận."

Vì vậy, nó cung cấp cho chúng ta tất cả thông tin này. Bạn có thể thấy đây là một tài liệu khổng lồ, rất lớn. Ý tôi là, cái này khá lớn. Nó khá toàn diện. Tôi giả định rằng điều này sẽ có rất nhiều data (dữ liệu). Bây giờ, điều này sẽ sử dụng nhiều input tokens hơn ở đầu vào để Claude Design xử lý nó. Nhưng tôi nghĩ rằng nó đáng giá vì những input tokens đó không đắt bằng Claude xuất tokens và đi sai hướng. Vì vậy, chúng ta sẽ bỏ qua wireframe trong trường hợp này. Chúng ta sẽ đi high fidelity. Chúng ta sẽ gọi đây là Tally app layout. Thực ra chúng ta sẽ chỉ gọi là Tally app design và tôi cũng sẽ đảm bảo nói rằng đây là cho ứng dụng di động, không phải cho ứng dụng máy tính để bàn. Chúng ta sẽ đảm bảo chuyển design system của mình sang Tally design system. Và hãy cùng bắt đầu. Vì vậy, trước hết tôi sẽ chỉ dán toàn bộ spec đó, có 804 dòng. Và tôi nghĩ về cơ bản là vậy. Ý tôi là, tôi nghĩ tôi sẽ chỉ nói: "Tôi vừa gửi cho bạn 804 dòng spec của một ứng dụng di động. Và bạn đã có quyền truy cập vào Tally design system của chúng ta. Hãy xây dựng cái này."

Câu hỏi từ Claude và Thiết kế Mockup Ban đầu

Nếu bạn có bất kỳ câu hỏi nào về điều này, hãy cứ hỏi. Nếu không, tôi sẽ kiểm tra lại với bạn khi bạn hoàn thành. Đó là kỹ năng Thiết kế câu lệnh (Prompt Engineering) tuyệt vời mà các bạn vừa chứng kiến hoặc nghe. Và bây giờ tôi sẽ kiểm tra lại với các bạn khi có điều gì thú vị xảy ra. Được rồi, Claude có một số câu hỏi cho chúng ta. Tôi nên xây dựng bao nhiêu phần của đặc tả kỹ thuật (spec)? Tôi nghĩ là nên làm tất cả các màn hình. Vâng, cứ làm tất cả các màn hình đi. Định dạng bài thuyết trình, khung thiết kế (design canvas), tất cả các màn hình được bố trí bên ngoài và các khung iOS. Tôi thích điều đó. Ứng dụng này nên có tính tương tác đến mức nào? Vâng, điều này sẽ có tính tương tác. Các biến thể và điều chỉnh: nút chuyển đổi chế độ sáng và tối (light and dark mode toggle), hai đến ba bố cục khác nhau, các biến thể của mọi thứ. Vâng, chúng ta sẽ làm nhiều cái đó. Liệu ask sheet có nên thực sự "suy nghĩ"? Tại sao nó lại dựa vào ngôn ngữ tự nhiên của Claude để đưa ra câu trả lời thực tế? Tôi có thể kết nối nó để gọi Claude với ngữ cảnh (context) về một người dùng giả hoặc chỉ mã hóa cứng (hard code) các câu trả lời thông minh cho các chip gợi ý. Chúng ta sẽ mã hóa cứng mọi thứ bây giờ. Nhưng điều này hay vì nó gợi ý cho bạn về những gì có thể xảy ra khi bạn thực sự xây dựng phần backend của ứng dụng này. Dữ liệu giả nên cảm giác thực đến mức nào? Chúng ta sẽ chỉ chọn "hợp lý" là được. Bao nhiêu thông tin chi tiết (insights) trên báo cáo hàng tuần là tốt? Ba là ổn. Xử lý hình ảnh biểu đồ dòng chảy (flow chart visual treatment). Tôi nghĩ các bạn hiểu các điểm chính về cách hoạt động của nó. Nó sẽ giúp có được tầm nhìn rất rõ ràng trước khi bắt đầu xây dựng.

Đánh giá và Phản hồi về Thiết kế

Được rồi, cái này vừa mới quay lại. Bạn có thể thấy tác nhân (agent) vẫn đang kiểm tra và xác minh để đảm bảo mọi thứ đều ổn. Nhưng chúng ta đã hoàn thành tất cả các tác vụ này. Hãy để tôi di chuyển sang đây và thu nhỏ một chút. Chúng ta có thể xem những gì chúng ta có trên bảng (board) này. Bạn có thể thấy đây là một bản mô phỏng (mockup) hoàn chỉnh của tất cả các loại cảnh và phần khác nhau mà chúng ta sẽ có trong ứng dụng này. Điều thú vị khác là bạn có thể thấy tác nhân xác minh (verifier agent) dường như đã tìm thấy điều gì đó và đang sửa chữa nó. Hãy tiếp tục xem xét cái này. Mỗi thành phần (component) riêng lẻ này, chúng ta có thể di chuyển xung quanh. Có vẻ như chúng ta cũng có thể mở chúng ra toàn màn hình nếu muốn cuộn xuống và bạn có thể thấy chúng có tính tương tác. Tôi biết điều này có thể hơi khó. Hãy thực sự mở cái này ra toàn màn hình trong tab này. Điều thực sự thú vị là khi chúng ta mở chúng ra, chúng ta không chỉ có thể nhìn mà còn có thể nhấp vào các nút. Bạn có thể thấy chúng ta có thể vào đây và gõ. Chúng ta có thể sử dụng nút này để hỏi về những gì chúng ta có thể chi trả, điều này khá hay. Chúng ta có thể mở một trong những khoản chi phí này và chúng ta có thể thấy các yếu tố thiết kế khác nhau trong toàn bộ ứng dụng và cách nó sẽ thực sự hoạt động. Chúng ta có thể đánh dấu điều này là tiền mặt (cache). Chúng ta có thể ẩn khỏi tổng số. Điều này khá hay. Chúng ta cũng có thể chuyển đổi giữa các phần khác nhau. Đây là trang chủ, đây là luồng (flow). Chúng ta có thể thấy những cái này hiện chưa thực sự hoạt động, nhưng đó là cách các nút sẽ hoạt động. Chúng ta có thể mở rộng tất cả những thứ này, điều đó thực sự tuyệt vời. Chúng ta cũng có chế độ tối (dark mode) và sau đó chúng ta cũng có một cái đã mở trên báo cáo hàng tuần. Hãy xem chúng ta còn gì ở đây. Chúng ta có luồng giới thiệu (onboarding flow). Tôi không biết có quá nhiều thứ để cuộn qua ở đây không, nhưng về cơ bản, bạn bắt đầu bằng cách nhìn nhận trung thực về tiền bạc của mình và sau đó bạn kết nối tài khoản ngân hàng và sau đó có ba câu hỏi nhanh để trả lời. Như bạn có thể thấy ở đây, một thông báo mỗi tuần. Bạn có thể cho phép thông báo. Điều đó trông thực sự đẹp với một chút đổ bóng (drop shadow). Sau đó, nó về cơ bản bắt đầu sắp xếp mọi thứ và thiết lập ứng dụng của bạn. Nó cũng cung cấp cho tôi một số biến thể cho phần hero thực tế. Điều bạn sẽ nhận thấy ở đây là ứng dụng khá nhạt nhẽo. Nó về cơ bản là màu xương (bone color) xuyên suốt, điều mà tôi không thực sự thích. Nó có một cảm giác được trau chuốt đẹp mắt và các yếu tố trông ổn, nhưng tôi không thích cách toàn bộ trang web (site) cảm thấy nhạt nhẽo và khô khan. Điều này siêu hay. Tất cả các yếu tố khác nhau mà nó có thể hiển thị cho chúng ta trên ứng dụng này, đặc biệt là khi chúng ta về cơ bản chỉ đưa cho nó một câu lệnh (prompt). Nó thậm chí còn cho chúng ta thấy các thông báo sẽ trông như thế nào trên thiết bị iOS của họ. Chúng ta có thể thấy một số thay đổi chế độ tối khác ở đây.

Tinh chỉnh Thiết kế và Sửa lỗi

Một lần nữa, tôi thực sự sẽ dựa nhiều vào sự sáng tạo của Claude Design và tính năng Điều chỉnh (Tweaks). Tôi nghĩ rằng những cái này trông rất đẹp. Từ góc độ cấu trúc, tôi thích chúng, nhưng điều tôi nhận thấy khi cuộn xuống là nó rất nhạt nhẽo. Phần giới thiệu (onboarding) cảm thấy rất khô khan. Các biến thể trang chủ của phần hero, mọi thứ đều rất đơn điệu (màu xương). Không có nhiều điểm nhấn. Không có nhiều chiều sâu. Nó không cảm thấy năng động. Bạn có thể nâng cấp cái này một chút không? Thực hiện một số thay đổi được trau chuốt. Thêm một số kết cấu (texture) và cung cấp cho tôi một loạt thứ mà chúng ta có thể điều chỉnh để thử nghiệm với những gì chúng ta muốn thiết kế cuối cùng của ứng dụng này trông như thế nào.

Tuyệt vời. Chúng ta có một vài thứ để thử nghiệm ở đây về mặt điều chỉnh. Hãy bắt đầu với màu nhấn (accent color). Chúng ta rõ ràng có màu xanh lá cây là màu chính. Chúng ta cũng có thể chọn Tera, Amber, Indigo, Rose. Tôi nghĩ màu xanh lá cây có lẽ phù hợp nhất với màu nhấn. Chúng ta sẽ giữ màu xanh lá cây đó. Chúng ta có thể sử dụng các điểm nhấn nhiều hơn: Quiet, medium hoặc loud. Tôi nghĩ tôi thích medium (vừa phải). Nó có một chút chuyển màu (gradient) trong văn bản. Chúng ta có thể thêm một số kết cấu nữa, dù là giấy hay hạt. Tỷ lệ phần hero (Hero scale) có thể được tăng hoặc giảm. Tôi nghĩ lớn là được. Tôi thực sự thích dấu kiểm (tally mark). Bạn có thể thấy ngay đây ở nền, chúng ta có dấu kiểm. Nó không thực sự được căn chỉnh đúng cách. Nó nên được dịch chuyển sang một chút nữa. Tôi nghĩ điều đó sẽ trông đẹp hơn, điều mà chúng ta rõ ràng có thể điều chỉnh. Kiểu thẻ (card style): nổi (lifted), phẳng (flat) hoặc giấy (paper). Hãy đến một nơi mà chúng ta thực sự có thể nhìn thấy những thẻ đó. Tôi tìm thấy một cái nói về các thẻ ngay đây. Những cái này có thể là phẳng, nổi hoặc giấy. Thực ra hơi khó để nhận ra sự khác biệt như vậy. Bạn có thể thấy sự khác biệt khi thu nhỏ một chút. Tôi chắc chắn thích nổi. Đăng ký (Subscriptions) có thể là đơn giản (plain) ở đây hoặc là một thanh (bar). Tôi thích thanh hơn. Có rất nhiều thứ nhỏ mà chúng ta có thể điều chỉnh. Ngoài ra, giả sử chúng ta muốn thay đổi một vài thứ, cụ thể hơn một chút. Tôi sẽ thử lại chức năng vẽ (draw function). Tôi sẽ vẽ ngay tại đây. Về cơ bản, chỉ cần nói rằng thời gian và pin iPhone đang che mất một phần giao diện người dùng (UI), điều này không tốt. Đó là một trong những trường hợp mà tôi không nghĩ đây là một yếu tố cụ thể mà chúng ta có thể chỉnh sửa hoặc di chuyển và kéo. Hy vọng sử dụng chức năng vẽ ở đây sẽ hoạt động tốt hơn. Bạn có thể thấy điều này đã được áp dụng với vòng tròn của chúng ta ở đó. Nhưng tôi đoán nó thực sự đã thiết kế những yếu tố này như một phần của bản mô phỏng này, nhưng nó không nhận ra rằng chúng có lẽ không nên chồng chéo lên nhau, điều này thú vị. Điều khác là hình mờ (watermark). Tôi thực sự thích cái này, nhưng nó cảm giác như nó đang bị lệch khỏi mép trang. Tôi cũng sẽ đưa ra phản hồi về điều đó. Họ thực sự cần sửa lỗi này khi bạn vẽ và bạn bắt đầu gõ để đưa ra phản hồi. Bạn không thể nhìn thấy ghi chú thực tế. Nó bị kẹt ở đó và khá khó chịu. Tôi vừa thực hiện một vài điều chỉnh. Bạn có thể thấy nó đã có thể khắc phục vấn đề này ngay đây. Nó cũng đã sửa logo và dịch chuyển nó sang trái một chút. Bạn chắc chắn có thể thấy rằng sau lần lặp lại (iteration) đầu tiên đó, nó đã được làm mới một chút. Phần giới thiệu, tôi nghĩ, trông đẹp hơn. Nó có thêm một chút chiều sâu và cảm giác được trau chuốt hơn, nhưng vẫn còn một chặng đường dài phải đi. Sẽ mất hơn 30 phút để thực sự thiết kế một ứng dụng hoàn chỉnh. Tôi sẽ không thể cho các bạn xem điều đó trong lớp học chuyên sâu (masterclass) này bởi vì lặp lại là chìa khóa. Bởi vì ngay cả khi bạn bắt đầu phát triển phần backend và thực sự đưa 500 đến 1000 người dùng đầu tiên sử dụng, bạn vẫn sẽ thực hiện các thay đổi. Bạn vẫn sẽ nhận được phản hồi và thay đổi mọi thứ. Ví dụ, nếu tôi nhấp vào đây thông qua cài đặt (settings), trước hết, tôi không thích biểu tượng (icon) đó cho cài đặt. Tôi không biết tại sao nó không phải là một bánh răng. Ngoài ra, những thứ này đang xuất hiện sai. Chúng đều vượt quá giới hạn (out of bounds). Nút chuyển đổi (toggle) vượt quá giới hạn. Văn bản (text) vượt quá giới hạn. Có rất nhiều lỗi nhỏ và những thứ tương tự mà chúng ta vẫn sẽ cần phải sửa. Bạn nghĩ về bao nhiêu ngữ cảnh mà chúng ta vừa đưa vào Claude Design, hơn 800 dòng. Chúng ta nhận được điều này để bắt đầu. Bây giờ chúng ta chỉ cần thực sự dành thời gian để kiểm thử chất lượng (QA) và thực hiện những thay đổi đó. Điều này thực sự bắt đầu mang lại sức sống cho một thứ gì đó. Nếu bạn nghĩ về nơi chúng ta bắt đầu ở đầu video này, chúng ta về cơ bản chỉ có một ý tưởng rất, rất mơ hồ. Bây giờ chúng ta có bản giới thiệu dự án (pitch deck), trang web của chúng ta, và chúng ta đang bắt đầu biến khái niệm ứng dụng thành hiện thực. Ngoài ra, thành thật mà nói, hầu hết ứng dụng, tôi nghĩ rằng chế độ tối trông đẹp hơn. Tôi nghĩ rằng màu xanh lá cây ở đây năng động hơn và tôi nghĩ rằng các bóng đổ (shadows) và hình mờ (watermark) và tôi nghĩ rằng các yếu tố khác sẽ thực sự xuất hiện một cách thẩm mỹ hơn trong suốt phần còn lại của ứng dụng. Từ đây, tôi có lẽ sẽ lấy những khái niệm chế độ tối này và tôi sẽ tiếp tục lặp lại trên phiên bản ứng dụng này. Đây là một ví dụ tốt khác cho thấy Claude Design có thể cung cấp cho bạn tất cả các bản mô phỏng khác nhau trên một bảng như thế nào.

Các Dự án Trước đây với Claude Design và Giới thiệu Hyperframes

Hãy thực hiện một kiểm tra nhanh khác về mức sử dụng thực tế của chúng ta ở đây. Sau tất cả những gì chúng ta đã làm cho đến nay, chúng ta đã sử dụng 85% giới hạn Claude Design của chúng ta. Hãy để tôi đưa các bạn đi qua một hành trình khác một cách nhanh chóng về những gì tôi đã làm khi lần đầu tiên sử dụng Claude Design. Tôi đã xây dựng hệ thống thiết kế (design system) cho AI Automation Society và sau đó nó đã giúp tôi xây dựng trang web AIIS. Từ đó, tôi giả vờ, điều gì sẽ xảy ra nếu chúng ta có một chương trình khuyến mãi cho một loại workshop tác nhân (agent type) đầu tiên? Sau đó, tôi đã sử dụng đặc tả thiết kế (design spec) đó và cung cấp cho nó một số thông tin về chương trình khuyến mãi này, đây là một chương trình khuyến mãi giả, nhưng tôi đã cung cấp thông tin và nó đã xây dựng cho tôi trang đích (landing page) này, trông giống hệt như trang web của chúng tôi, điều này thật tuyệt vời. Tôi nghĩ nếu tôi không phóng to, chúng tôi đã nghe thấy nó sẽ định dạng tốt hơn một chút, nhưng sau đó chúng ta có trang đích này, trông giống hệt như trang web của chúng tôi. Sau đó, tôi nghĩ, được rồi, tuyệt vời. Chúng ta có thể làm gì khác ở đây? Hãy thực sự tạo một video ra mắt (release video) cho chương trình khuyến mãi này. Sau đó, tôi đã đưa nó vào đây và xem chúng ta nhận được gì nếu tôi bắt đầu cái này từ đầu. Điều này thực sự ấn tượng. Về hoạt ảnh (animations), chúng ta có đồ họa chuyển động (motion graphics). Điều gì sẽ xảy ra nếu bạn có thể xây dựng một tác nhân vào cuối tuần này? Tác nhân AI đầu tiên của bạn, thanh (bar) xuất hiện một cách hoạt hình. Có một banner cuộn (scrolling banner) ở phía dưới. Những cái này tải vào rất đẹp. Chúng ta cũng có hoạt ảnh kiểu terminal (terminal style animation) nhỏ này, siêu hay. Chúng ta thấy văn bản xuất hiện và chúng ta thấy tất cả các hoạt ảnh và yếu tố này xuất hiện. Tất cả điều này thực sự, nó có tất cả ngữ cảnh của trang web, vì vậy nó có thể làm cho cái này chính xác. Ngoài ra, đây chắc chắn là điều bạn có thể đăng lên các mạng xã hội (socials) của mình để quảng bá chương trình khuyến mãi này. Điều chúng ta sẽ làm bây giờ là điều thứ tư và cuối cùng mà chúng ta đang thực hiện đối với bản dựng trực tiếp (live build) này là chúng ta sẽ tạo một video ra mắt cho Tally. Khi tôi làm cái mà các bạn vừa thấy, tất cả những gì tôi làm là tôi chỉ yêu cầu nó làm và nó chỉ tạo hoạt ảnh cho HTML. Điều chúng ta có thể làm để làm cho điều này tốt hơn nữa là chúng ta có thể sử dụng một thứ gọi là hyperframes, mà tôi thực sự đã làm rất nhiều video về nó trên kênh của tôi cho đến nay, Claude Code và Hyperframes, để tạo hoạt ảnh trông như thế này. Về cơ bản, chỉ cần có thể sử dụng Trí tuệ nhân tạo (AI) để viết HTML và sau đó có nó được hoạt hình và có thể kết xuất (rendered). Ví dụ, video ra mắt này từ Hagen, người đã tạo ra Hyperframes, được xây dựng trong Claude Design bằng cách sử dụng Hyperframes. Nếu chúng ta chỉ cần nhấp qua đây, bạn có thể thấy cách nó có thể tạo hoạt ảnh cho các thứ. Thật tuyệt vời. Tất cả những gì chúng ta phải làm là lấy kỹ năng (skill) này ngay đây, mà tôi sẽ liên kết trong phần mô tả của video này. Tôi sẽ tải xuống tệp thô (raw file) này.

Tạo Video Ra Mắt Bằng Claude Design

Thao tác này sẽ tải xuống dưới dạng Markdown. Bạn có thể thấy Claude Design Hyperframes. Chúng ta sẽ vào Claude Design. Tôi sẽ mở một dự án mới, nhấp vào 'From Template' (Từ mẫu) và sau đó nhấp vào 'Animation' (Hoạt hình). Đây sẽ là video ra mắt Tally Launch Video và chúng ta sẽ thay đổi hệ thống thiết kế, tất nhiên, thành Tally Design System và tạo nó. Bây giờ, tôi sẽ lấy skill đó, tức là tệp Markdown đó, và về cơ bản tôi sẽ nói rằng mục tiêu của dự án này là tạo một hoạt hình. Tôi muốn bạn tạo một video ra mắt cho Tally. Bạn có Tally Design System. Tôi cũng sẽ cung cấp cho bạn Tally brand concept mà tôi vừa đưa vào dưới dạng một tệp Markdown khác. Sau đó, bạn có tệp Markdown Claude Design Hyperframes sẽ hướng dẫn bạn cách thực sự tạo đồ họa chuyển động (motion graphics) và hiển thị video hoạt hình này. Đó là những gì chúng ta đang hướng tới, một video phong cảnh (landscape video). Chúng ta hy vọng có khoảng 20 đến 30 giây thông tin với nhịp độ nhanh. Mục tiêu cuối cùng là công bố Tally, công bố chức năng của nó và ở cuối, một lời kêu gọi hành động lớn (call to action) để mọi người đăng ký và bắt đầu dùng thử miễn phí. Đó là những gì tôi muốn bạn làm ở đây. Đó là câu lệnh của tôi và tôi sẽ gửi nó đi. Chúng ta sẽ xem liệu có bất kỳ câu hỏi nào không, nhưng nếu không, tôi sẽ chỉ cho các bạn xem đầu ra hoàn chỉnh và trông nó như thế nào.

Cải Thiện Video: Từ Nhạt Nhẽo Đến Hấp Dẫn

Chúng ta có một video dài 25 giây. Hãy xem nhanh nào. Tally: tiền ở mức ổn định. Không budget, không mục tiêu, không phong bì. Không coach, không streak, không pep talk. Nó chỉ cho bạn thấy điều gì đã xảy ra. Một hoạt ảnh swirl-out nhỏ. Tôi thích điều đó hàng tuần. Tôi có thể mua một chiếc áo khoác 400 đô la không? Có, nhưng sẽ eo hẹp, tiền thuê nhà đến hạn trong tám ngày, 8 đô la mỗi tháng hoặc 72 đô la một năm. Tally. Hay đấy. Tôi thích CTA ở cuối. Rõ ràng là nó mang đậm dấu ấn thương hiệu nhưng lại rất nhạt nhẽo. Nó không thực sự hấp dẫn. Tôi ước có nhiều dynamic elements (yếu tố động) hơn và Claude Design với Hyperframes sẽ có thể làm cho mọi thứ trở nên linh hoạt hơn một chút. Chắc chắn chúng ta sẽ thực hiện một số iterations (lần lặp) ở đây. Logic của tất cả những điều này đều tốt nhưng hãy làm cho nó có nhịp độ nhanh hơn. Hãy giữ sự chú ý của khán giả. Hãy làm cho nó hấp dẫn. Hãy thêm một số elements (yếu tố) nhất định, nhiều animations (hoạt ảnh) hơn, nhiều motion graphics (đồ họa chuyển động) hơn. Nên có nhiều thứ diễn ra trên màn hình hơn là chỉ một vài gạch đầu dòng xuất hiện. Điều đó thật nhàm chán. Hãy kể một câu chuyện ở đây. Hãy làm cho điều này trở nên thú vị. Đây là một ngày trọng đại. Chúng ta đang ra mắt một ứng dụng và chúng ta đang mời mọi người tham gia vào hành trình. Đó là điều tôi nghĩ rất hay về tất cả những thứ này: Với tư cách là con người, chúng ta rất giỏi trong việc biết mình muốn gì và biết khi nào mình không thích điều gì đó, nhưng chúng ta không phải lúc nào cũng biết phương tiện để đạt được điều đó. Những gì bạn vừa thấy tôi làm giống như tôi đang nói chuyện với một video editor (biên tập viên video) là con người hoặc ai đó tương tự. Tôi đang nói mục tiêu cuối cùng và tôi chỉ hy vọng rằng Claude Opus 4.7 có thể hiểu và dịch yêu cầu của tôi về 'hấp dẫn hơn', 'kể một câu chuyện'. Tôi hy vọng rằng nó có thể dịch những ý tưởng mơ hồ, cấp cao đó, vốn mang tính cảm xúc hơn một chút, thành một thứ gì đó khách quan, thành mã thực tế mà chúng ta có thể hiển thị (render) ra. Hãy xem chúng ta nhận được gì. Tác nhân vẫn đang xác minh, nhưng hãy cùng xem qua.

Wow. Điều đó đã tốt hơn rất nhiều rồi. Thật tuyệt vời. Tôi thích điều đó. Một ứng dụng không cố gắng thay đổi bạn. Nó chỉ cho bạn thấy điều gì đã xảy ra. Rất hay. Tôi thích hiệu ứng fade out (mờ dần) đó. Tôi vẫn thích cảnh này. Tôi có thể mua một chiếc áo khoác 400 đô la không? Có. Điều đó hấp dẫn hơn rất nhiều. Tìm thấy một vài thứ bạn đã quên. OK. Có một chút vấn đề về pacing (nhịp độ) với một số nội dung này. Nó rất nhanh nhưng nhìn chung. Điều đó tốt hơn rất nhiều. Một vấn đề nhỏ, nhỏ khác là nó cứ làm cái kiểu này với logo. Nếu các bạn thấy ở cuối, logo đó không đúng. Nó cứ làm thế này với Tally. Đó là một trong những lỗi lớn mà tôi nhận thấy với Claude Design cho đến nay. Nó làm hỏng logo. May mắn thay với logo AIS của tôi, nó chỉ là các chữ cái AIS và nó không bao giờ làm hỏng điều đó. Nhưng nếu logo của bạn giống một icon hơn và có một số chi tiết tinh tế như dấu gạch chéo này, nó có thể làm hỏng. Điều này khá khó chịu. Nhưng thông thường khi bạn sửa nó, nó có thể khắc phục được. Nhưng nó sử dụng nhiều token hơn để làm điều đó. Nhưng ý tôi là vào thời điểm này, bạn có thể tưởng tượng và nghĩ xem bạn sẽ mất bao lâu để giao việc này cho một designer (nhà thiết kế) hoặc để bạn tự mình animate (tạo hoạt ảnh)? Điều đó thật đáng kinh ngạc. Và tất cả những gì tôi phải làm là nói, 'kể cho tôi một câu chuyện'. Vì vậy, tôi thích điều này. Và vào thời điểm này, bạn làm gì? Bạn không thể thực sự export (xuất) cái này. Bạn không thể render (kết xuất) nó ngay tại đây dưới dạng MP4. Nhưng bạn có các lựa chọn. Bạn có thể giao nó cho Claude Code. Và Claude Code có thể render nó. Bạn có thể làm điều tương tự với một zip file (tệp nén) hoặc HTML. Nhưng đối với một video dài khoảng 25 giây, bạn cũng có thể chỉ cần làm cho nó toàn màn hình và sau đó screen record (quay màn hình) nó. Đó cũng là một lựa chọn bạn có. Vì vậy, tôi chắc chắn rằng tại một thời điểm nào đó, họ sẽ thêm chức năng native MP4 render (kết xuất MP4 gốc) vào nền tảng này. Nhưng hiện tại, bạn có một vài lựa chọn khác nếu bạn thực sự muốn sử dụng video. Nhưng tôi hoàn toàn yêu thích vài giây đầu tiên đó. Tôi yêu thích hoạt ảnh đó. Đó chắc chắn là một scroll stopper.

Tối Ưu Hóa Chi Phí và Tận Dụng HyperFrames

Bây giờ, một điều khá quan trọng khác cần lưu ý là cách Claude thực sự sử dụng token của bạn. Ngay tại đây bạn có thể thấy nó nói, 'Bắt đầu một cuộc trò chuyện mới để tiết kiệm 110.000 token ngữ cảnh.' Điều này sử dụng rate limits (giới hạn tốc độ) của bạn hiệu quả hơn. Vì vậy, nếu bạn muốn tiếp tục iterating (lặp lại) và iterating và iterating, có lẽ sẽ thông minh hơn nếu export (xuất) HTML đó và mở một dự án mới rồi tiếp tục thực hiện một số chỉnh sửa ở đó. Bởi vì chúng ta đã nói chuyện rất nhiều ở đây, điều này sẽ làm ô nhiễm cửa sổ ngữ cảnh này và nó sẽ khiến chúng ta sử dụng ngày càng nhiều sessions (phiên) của mình. Vì vậy, đó chỉ là điều bạn muốn ghi nhớ. Nếu bạn đang có kế hoạch iterating trên một dự án nhất định lặp đi lặp lại và gửi thêm messages (tin nhắn) và thêm messages và thêm messages, đó cũng sẽ là một lý do tại sao mọi người thấy rằng họ chỉ chạy hết limit (giới hạn) của mình trong khoảng 20 phút hoặc gì đó.

Và tôi muốn cho các bạn thấy một điều khác thực sự thú vị. Chúng ta đang sử dụng một công cụ gọi là HyperFrames, đúng không? Vậy thì HyperFrames là một loại framework (khung công việc) mà chúng ta vừa cung cấp cho Claude Design để hiểu cách tạo các HTML graphics (đồ họa HTML) và những thứ tương tự. Không có HyperFrames, Claude Design vẫn có thể làm được điều đó. Đừng hiểu lầm tôi. Nhưng nó dường như có rất nhiều elements (yếu tố) và làm cho nó tốt hơn một chút. Vì vậy, HyperFrames có một catalog (danh mục) thực sự thú vị, nơi bạn có thể xem qua các thứ khác nhau và bạn có thể chỉ cần sao chép mã vào Claude Design. Vì vậy, chúng ta có một follow notification (thông báo theo dõi). Chúng ta có một Mac OS notification (thông báo Mac OS). Chúng ta có tất cả những thứ này. Chúng ta có các transitions (chuyển tiếp) khác nhau như chromatic radial split (tách xuyên tâm màu sắc). Chúng ta có cross warp morph (biến hình chéo). Chúng ta có glitch (lỗi hiển thị). Chúng ta có tất cả các elements (yếu tố) khác nhau này mà chúng ta có thể đưa vào. Và điều thực sự thú vị là Claude Design có thể search the web (tìm kiếm trên web) và nó có thể xem GitHub repo (kho lưu trữ GitHub) và nó có thể làm những việc như vậy.

Vì vậy, những gì tôi đã làm là tôi đã kéo cái này được gọi là app showcase (trưng bày ứng dụng) nơi chúng ta có ba mobile phones (điện thoại di động) khác nhau xuất hiện và có một loại animation (hoạt ảnh) nào đó trong mỗi chiếc. Và tất cả những gì tôi thực sự đã làm là tôi đã lấy URL của trang web chính xác này, trang chúng ta đang xem. Tôi đã cung cấp cho Claude và nó đã fetched (truy xuất) nó. Vì vậy, nó đã xem trang đó. Nó đã browsed (duyệt) GitHub repo và nó đã có thể kéo những elements (yếu tố) đó vào và sau đó tôi đã bảo nó thêm một scene (cảnh) khác vào video này. Nếu các bạn nhớ, trước đây là 25 giây; bây giờ, là 30 giây. Vì vậy, nó đã đến và iterated (lặp lại) cách mà điện thoại cần đi vào đó. Tôi đã phải câu lệnh nó thêm một lần nữa để sửa nó. Nhưng bây giờ nếu chúng ta đi khoảng nửa chừng và tôi sẽ phát cái này, hãy xem scene (cảnh) mới này mà chúng ta vừa có với các mobile phones (điện thoại di động). Ngay tại đây, 'your money in your pocket' (tiền của bạn trong túi), tất cả những chiếc điện thoại đó đều animate (tạo hoạt ảnh) và chúng ta có một chút bounce (nảy) với một glow (ánh sáng). Vì vậy, đó chỉ là một animation thực sự đẹp và một scene thực sự thú vị mà tôi có thể thêm vào đây siêu dễ dàng vì tôi có thể leverage (tận dụng) một trong những catalogs (danh mục) đã tồn tại. Ngay cả khi tôi không sao chép mã đó hoặc URL và để Claude Design kéo nó, thì catalog đó vẫn có rất nhiều điều tốt để inspiration (truyền cảm hứng). Vì vậy, tôi chắc chắn muốn cho các bạn thấy rằng Claude Design có thể fetch pages (truy xuất trang), có thể search the web (tìm kiếm trên web) và catalog đó có một số gems (viên ngọc quý) khá hay ở trong đó.

Các Chiến Lược Hiệu Quả Khi Làm Việc Với AI

Vậy là chúng ta đã có video ra mắt của mình. Tôi thề là tôi không hề lên kế hoạch trước, nhưng bốn builds đó, bao gồm cả việc thiết lập một design MD hoặc hệ thống thiết kế, đã chiếm khoảng 95% Claude Design của tôi. Vì vậy, gần như đã hoàn tất, chúng ta vẫn có thể tiến khá xa. Thực ra, không có gì trong số đó được polished (hoàn thiện) một cách hoàn hảo đến mức chúng ta có thể đưa vào sử dụng ngay, nhưng nó chỉ cho bạn một ý tưởng nhỏ về việc điều đó sẽ đưa bạn đi xa đến đâu. Nhưng ý tôi là trong vài giờ qua, chúng ta đã có thể bắt đầu từ con số không tuyệt đối. Một ý tưởng rất thô sơ về một thương hiệu và chúng ta đã biến nó thành một concept (khái niệm) thực tế, một business idea (ý tưởng kinh doanh) thực tế, một logo, brand guidelines (nguyên tắc thương hiệu), một design spec (thông số kỹ thuật thiết kế). Chúng ta đã xây dựng một pitch deck (bản thuyết trình gọi vốn), chúng ta đã xây dựng một landing page (trang đích), chúng ta đã xây dựng một mobile app prototype (nguyên mẫu ứng dụng di động) và chúng ta đã xây dựng một video ra mắt, tất cả bằng natural language (ngôn ngữ tự nhiên) của chúng ta bên trong Claude Design.

Bây giờ từ đây, tôi muốn nói thêm điều gì nữa? Đó là bốn moves (bước) có tác dụng compound (tích lũy):

Reference (Tham chiếu), đừng describe (mô tả). Vì vậy, hãy cung cấp screenshots (ảnh chụp màn hình) thực tế của mọi thứ, đưa ra advice (lời khuyên) cụ thể, bạn biết đấy, làm nổi bật các elements (yếu tố) bạn muốn thay đổi, tự mình thực hiện các changes (thay đổi), draw (vẽ) mọi thứ, thêm các tweaks (chỉnh sửa nhỏ). Việc câu lệnh của bạn càng specific (cụ thể) càng tốt sẽ giúp ích cho bạn, và đó cũng là lý do tại sao việc thực hiện nhiều planning (lập kế hoạch) của bạn bên trong Claude thông thường và sau đó đưa refined plan (kế hoạch tinh chỉnh) đó vào Claude Design sẽ giúp ích cho bạn rất nhiều.
Đừng sử dụng defaults (mặc định). Bạn biết đấy, đó là nơi bạn nhận được AI Slop (sản phẩm AI kém chất lượng), và đó là lý do tại sao chúng ta có những thứ như, bạn biết đấy, front end design (thiết kế giao diện người dùng) trong Claude, chúng ta có tất cả những thứ khác mà chúng ta có thể làm, nhưng nếu bạn không đưa vào spin (phong cách) riêng của mình cho copy (nội dung), hệ thống thiết kế của riêng bạn, thì nó sẽ cảm thấy generic (chung chung) hơn rất nhiều.
Làm hệ thống thiết kế trước. Đừng xây dựng năm cái, mà hãy xây dựng một cái, xây dựng nó thật tốt và chia sẻ nó với team (nhóm) của bạn để mọi thứ cảm thấy consistent (nhất quán). Bạn rõ ràng có thể iterate (lặp lại) trên điều đó. Nếu sau này bạn có một loại button (nút) khác mà bạn muốn thay đổi, chỉ cần thay đổi nó trong hệ thống thiết kế của bạn. Nếu bạn kết thúc việc thay đổi logo hoặc colors (màu sắc) của mình, chỉ cần thay đổi nó.
Iterate in chunks (Lặp lại từng phần). Tôi thấy tốt nhất là nếu bạn cố gắng làm cho Claude thực hiện khoảng năm changes (thay đổi) trong một câu lệnh, nó sẽ mất dấu những thứ đó, và nó không làm tốt công việc. Vì vậy, iterate one feature (lặp lại một tính năng) tại một thời điểm.

Giới Hạn Sử Dụng và Lựa Chọn Mô Hình AI

Vậy hãy nói về một số limits (giới hạn). Chuyện gì đang xảy ra ở đây? Rõ ràng, bạn trả càng nhiều tiền, bạn càng có nhiều usage (lượt sử dụng). Vì vậy, nếu bạn đã sử dụng gói Pro hoặc Max 5X, và bạn đang cố gắng làm theo chính xác những gì tôi đã làm trong masterclass (khóa học chuyên sâu) này, bạn sẽ đạt limit của mình nhanh hơn nhiều so với tôi vì tôi đang sử dụng gói 200 đô la một tháng. Bây giờ, rất nhiều người đang phàn nàn về việc họ tiêu tốn limits của mình nhanh như thế nào. Đây là những gì một số người đang nói: 'Tôi đã đốt 80% weekly pro budget (ngân sách chuyên nghiệp hàng tuần) của mình trên một webpage (trang web).' '95% quota (hạn mức) của tôi đã hết sau một lần design system iteration (lặp lại hệ thống thiết kế).' Và vâng, tôi phải thừa nhận, usage (lượt sử dụng) ít hơn nhiều so với tôi hy vọng. Nhưng có rất nhiều điều để thử, rất nhiều levers (đòn bẩy) để kéo. Tôi đã nói về rất nhiều điều này trong suốt video, bạn biết đấy, nói về những điều nhỏ nhặt mà chúng ta có thể làm. Tôi cũng không biết tại sao cái này lại đề cập đến tôi. Tôi không tweet (đăng tweet) điều đó. Nhưng dù sao, đó là rất nhiều tips (mẹo) mà tôi đã trình bày. Và tôi thậm chí còn chưa cho các bạn thấy cách bạn có thể switch the model (chuyển đổi mô hình). Bạn biết đấy, chúng ta chưa làm gì ngoài Opus 4.7 cho đến nay. Bạn chắc chắn có thể thử nghiệm với Sonnet và Haiku để thực hiện những tweaks (chỉnh sửa nhỏ) nữa.

Bây giờ, tôi sắp chuyển sang một segment (phân đoạn) khác, nơi tôi sẽ thực hiện một live build (xây dựng trực tiếp) khác và nói về một số điều khác nữa.

Tối ưu Hóa Việc Sử Dụng `Claude Design`

Cuối cùng, chúng ta sẽ đi sâu hơn vào cách để kéo dài phiên làm việc của bạn. Tuy nhiên, phần lớn những gì tôi đã trình bày chỉ là sự thay đổi tư duy: Claude Design là một cách sử dụng riêng biệt. Do đó, bạn chỉ nên sử dụng Claude Design nếu bạn thực sự cần nó.

Vậy khi nào không nên sử dụng Claude Design? Nếu công việc của bạn nằm trong những trường hợp sau, bạn có thể chỉ đang đốt cháy quota của mình một cách lãng phí. Đây là một số điều tôi đã liệt kê. Nhưng tôi cũng nghĩ rằng, khi Claude Design đã được sử dụng hết, bạn có thể chuyển sang Claude Code (tất nhiên rồi). Bởi vì bạn có thể lấy spec thiết kế đó, đưa vào Claude Code và giờ đây bạn đang sử dụng một phiên làm việc khác. Vì vậy, bạn thậm chí không sử dụng đến bất kỳ giới hạn nào của Claude Design.

Đôi khi, bạn có thể gặp trường hợp có điều gì đó thực sự dễ dàng hơn để lặp lại một cách thủ công. Ví dụ, giả sử đây là một static site, hoặc bạn đang cố gắng tạo một loại áp phích hoặc PDF. Nếu bạn phải vật lộn với Claude Code để làm cho logo trông đúng, tại sao không làm điều đó trong Canva? Tại sao không chỉ thay thế nó trong Canva vì nó có thể mất của bạn năm giây? Trong khi đó, ở đây, nó có thể mất của bạn vài phút và nó cũng sẽ tiêu tốn token. AI rất tuyệt và bạn muốn sử dụng nó, nhưng đôi khi làm thủ công lại dễ dàng và nhanh hơn. Và nếu bạn đến một điểm mà bạn đã có thể export nó sang PowerPoint để điều chỉnh hoặc export sang Figma hoặc Canva, thì cứ làm đi.

Từ đây, điều tôi muốn các bạn suy nghĩ là Claude Design phù hợp với quy trình làm việc của bạn khi nào và bạn đã có những element nào có thể sử dụng Claude Design để làm cho tốt hơn hoặc nhất quán hơn? Hãy chọn một sản phẩm thực tế mà bạn muốn phát hành, viết design.md hoặc design guideline của riêng bạn. Và sau khi bạn đã thực hiện một số lần lặp lại trong Claude Design, hãy đưa nó đến một nơi khác: đưa nó đến Claude Code, đưa nó đến Figma, hoặc bất cứ điều gì bạn muốn làm.

Xây Dựng Dự Án Website Minh Họa

Phần cuối cùng này mà chúng ta sắp bắt đầu sẽ là một live build khác. Nhưng lần này, ở cuối, chúng ta thực sự sẽ đưa nó vào Claude Code. Chúng ta sẽ đồng bộ hóa nó với một GitHub repo và chúng ta sẽ tự động đồng bộ hóa nó với Vercel để chúng ta có thể đặt nó trên một domain thực. Vì vậy, từ góc độ thiết kế, nó rất giống với những gì chúng ta đã làm trong, bạn biết đấy, trước đó trong video này, nhưng ở cuối, chúng ta đang thêm một số element bổ sung nếu bạn muốn biến những thứ này thành phiên bản trực tiếp. Và sau đó, một lần nữa, tôi sẽ đề cập đến một số điều khác về cách làm cho phiên của bạn kéo dài hơn. Vì vậy, tôi sẽ gặp các bạn ở phần tiếp theo này.

Chuyển Đổi Website Bằng `Claude Design`

Chỉ trong 20 phút, tôi đã có thể biến trang web AI Automation Society của mình từ phiên bản cũ sang phiên bản mới này. Giờ đây, khi tôi bắt đầu cuộn, chúng ta sẽ đi vào một hành trình. Chúng ta đi qua cảnh này nơi có những thẻ khác nhau hiện lên và bạn có thể thấy chúng hơi 3D, chúng interactive. Và khi chúng ta tiếp tục cuộn, chúng ta đang đi sâu hơn vào hành trình. Chúng ta có slide tiếp theo. Chúng ta tiếp tục ở đây. Chúng ta có element này: everything you need to master AI Automation. Và bạn có thể thấy rằng đây là một cảm giác interactive và polished hơn nhiều so với trước đây. Chúng ta có call to action cuối cùng để tham gia phong trào và bạn có thể thấy chúng ta đã trải qua một hành trình như sự phát triển của công nghệ, mà tôi nghĩ là siêu, siêu thú vị.

Và điều bạn sẽ nhận thấy là tôi đã có thể lấy brand feel, vibe, colors và tất cả copy. Và tôi đã có thể di chuyển nó sang một cách rất dễ dàng. Vì vậy, nó có tất cả thông tin quan trọng giống nhau, nhưng nó chỉ mang lại cảm giác interactive hơn nhiều. Và sau đó 20 phút, tôi đã có thể làm điều tương tự với trang web cá nhân của mình. Ở đây, bạn có thể thấy nó có một chút dark vibes, nó có một loạt statistics, nó có những điều khác nhau mà tôi đang làm. Và tôi chỉ biến đổi nó để nó năng động hơn một chút. Bạn có thể thấy tôi đang ngồi trên một hòn đảo nổi giữa không gian và tôi đang làm việc trên máy tính. Nhưng khi chúng ta cuộn xuống, chúng ta có các element tương tự. Chúng ta có copy tương tự, chúng ta có feel tương tự. Nhưng giờ đây nó có chiều sâu hơn nhiều và nó chỉ mang lại cảm giác polished hơn nhiều.

Vì vậy, những gì tôi sẽ cho các bạn thấy hôm nay là cách chúng ta thiết lập các trang web như thế này bằng cách sử dụng Claude Design. Bạn có thể có các element khác nhau, chúng ta có thể có các feel khác nhau và mọi thứ được thiết kế theo cách hấp dẫn và chuyên nghiệp hơn rất nhiều. Và tôi đã thử rất nhiều thứ khác nhau ở đây. Bạn có thể thấy tôi đã sử dụng hết design quota của mình và tôi đã chi hơn 200 đô la cho việc sử dụng thêm chỉ để thử nghiệm những thứ này. Vì vậy, tôi không chỉ cho các bạn thấy các tips và tricks mà tôi đã học được, mà tôi cũng sẽ nói về một số điều quan trọng như làm thế nào để thực sự không làm cạn kiệt giới hạn của bạn nhanh hơn và làm thế nào để tận dụng tối đa những gì bạn đang làm ở đây. Tôi không muốn lãng phí bất kỳ thời gian nào hôm nay. Hãy đi thẳng vào video.

Quy Trình Tạo Website Từ Ý Tưởng Đến Triển Khai

Được rồi, vậy tôi sắp cho các bạn thấy mọi thứ bạn cần làm từng bước để biến một ý tưởng từ trong đầu bạn thành một trang web thực tế và deploy nó để những người khác có thể thực sự xem và truy cập nó.

Phát Triển Ý Tưởng Thương Hiệu Và Nội Dung

Được rồi, giả sử bạn muốn chuyển đổi một trang web. Tất cả những gì bạn thực sự muốn làm là nếu trang này có một codebase nào đó trong GitHub hoặc Claude Code hoặc bất cứ nơi nào nó thực sự tồn tại, bạn có thể chỉ cần lấy GitHub repo đó hoặc bạn có thể lấy thư mục với tất cả các content và chỉ cần đưa nó cho Claude Design. Đó là một trong những phương pháp đầu tiên. Phương pháp khác là nếu bạn chỉ có một ý tưởng và nếu bạn chỉ cần xây dựng một trang web từ đầu thì sao?

Vậy, hãy để tôi cho bạn thấy những gì tôi đang làm ở đây trong Claude Chat thực tế để cung cấp cho chúng ta một ví dụ để cùng nhau xây dựng hôm nay. Vì vậy, tôi đã nói: "Tôi muốn xây dựng một trang web bằng Claude Design và tôi đang tìm kiếm một số cảm hứng về loại trang web mà tôi nên xây dựng. Sản phẩm hoặc dịch vụ mà chúng ta đang cung cấp là gì và hero section cùng với copy thực tế nên trông như thế nào? Hãy giúp tôi xây dựng một thương hiệu và tôi sẽ cung cấp spec cho việc này."

Vì vậy, nó đã đưa ra ý tưởng về một loại đồ uống giúp thư giãn buổi tối, một muỗng magnesium glycinate, v.v., nhưng tên thương hiệu là Lull và nó cung cấp cho tôi positioning về voice, visual identity và trang web nên trông như thế nào. Thật tuyệt vời. Và sau đó tôi quay lại và nói: "Tuyệt, tôi muốn tạo một video sẽ phát ở chế độ nền của hero section và nó sẽ lặp lại vô tận. Tôi cần video phù hợp với vibe và tôi muốn nó có wow factor để khi mọi người truy cập trang web, họ sẽ nói: 'Ồ, thật chuyên nghiệp.' Sẽ không có bất kỳ text nào, nhưng nó cũng nên có không gian nơi chúng ta có thể chèn một block cho hero text và subtext."

Tạo Video Nền Động Cho `Hero Section`

Vì vậy, những gì tôi đang yêu cầu là một image prompt cho nền và sau đó là một video prompt để tạo hoạt ảnh cho hình ảnh đó. Vì vậy, nó đã đưa ra một image prompt ngay tại đây. Về cơ bản, chủ đề, concept, là một chiếc cốc gốm màu tối với chất lỏng ấm bên trong và sau đó chỉ có hơi nước bốc lên ở chế độ nền, điều này sẽ tạo cảm giác dễ chịu và phù hợp với vibe của trà ngủ ngon hoặc bất cứ thứ gì mà loại đồ uống này được cho là.

Vì vậy, nó cung cấp cho tôi image prompt và tôi sẽ chuyển sang Key.ai. Tôi đang sử dụng Nano Banana 2. Vì vậy, tôi thả image prompt vào đây. Tôi đảm bảo rằng nó có tỉ lệ 16:9 và sau đó tôi nhận được hình ảnh này, như bạn có thể thấy, về cơ bản chỉ là một chiếc cốc với một loại chất lỏng nào đó. Đây là nơi chúng ta đặt hero text và subtext, điều này thật tuyệt và sau đó là hơi nước bốc lên. Và sau đó tôi lấy hình ảnh này và quay lại một tab khác trong Key và tôi chuyển đến CDance 2.0 và tôi đặt hình ảnh đó làm frame đầu tiên và frame cuối cùng, và tôi lấy prompt đó xuống đây cho video prompt để tạo hoạt ảnh cho hình ảnh. Điều quan trọng ở đây là camera không di chuyển. Về cơ bản, nó chỉ là một still frame hoặc một still video của loại cà phê này hoặc bất cứ thứ gì đang được tạo hoạt ảnh. Vì vậy, đây là giao diện của nó. Như bạn có thể thấy, nó chỉ bốc hơi và trông rất đẹp. Bây giờ hãy tưởng tượng đây là nền của một trang web khi bạn có text ở đây. Nó có thể trông khá đẹp.

Bắt Đầu Thiết Kế Trong `Claude Design`

Được rồi, bây giờ chúng ta có những element ban đầu đó. Tôi sẽ mở Claude Design và tôi sẽ tạo một prototype mới và chúng ta sẽ bắt đầu với một high-fidelity prototype. Tôi sẽ không sử dụng design system vì trong trường hợp này, chúng ta đang bắt đầu một thương hiệu mới của riêng mình và có thể chúng ta có thể xây dựng một design system xung quanh nó sau này. Hiện tại, tôi sẽ chỉ chọn không và chúng ta sẽ gọi đây là Lull Website vì đó là tên thương hiệu.

Vì vậy, tôi sẽ tạo ra một cái gì đó, nó sẽ hiển thị một interface nhỏ dễ thương. Nếu chúng ta muốn, chúng ta có thể bắt đầu với một sketch ở đây. Vì vậy, chúng ta thực sự có thể vào đây và nói, được rồi, đây sẽ là trang web của chúng ta. Đây là nơi tôi muốn một square khác. Đây là nơi chúng ta sẽ có video chính. Vì vậy, nó sẽ là nền của hero. Và tôi có thể vào đây và nói rằng đây là video nền của hero. Và sau đó chúng ta muốn một box khác ở đây, đó sẽ là hero text và subtext, hero text. Và sau đó tôi sẽ xuống đây và chỉ nói hero subtext. Chúng ta cũng có thể muốn một loại navbar nào đó ở trên cùng. Vì vậy, đây là, bạn biết đấy, logo có thể ở đây. Oops, đó không phải cách bạn viết logo. Và sau đó chúng ta cũng có thể có, bạn biết đấy, shop hoặc thứ gì đó tương tự. Và vì vậy đây chỉ là một cách để chúng ta có thể cùng Claude hiểu ý tưởng trực quan. Và sau đó, tất nhiên, bạn có thể thấy ở dưới đây, nó sẽ xem xét sketch. Vì vậy, hãy cứ giữ nguyên thế này hiện tại. Rõ ràng, nếu bạn có một tầm nhìn tốt hơn, bạn có thể dành thêm thời gian và sự chú ý cho việc này. Bạn cũng có thể bố trí phần còn lại của trang web của mình ở dưới đây. Và sau đó bạn có thể thêm notes và những thứ khác. Nhưng hiện tại, chúng ta hãy cứ để nó như vậy.

Tích Hợp Nội Dung Và Hướng Dẫn `Claude Design`

Và bây giờ điều tôi sẽ làm là kéo MP4 thực tế mà chúng ta đã lấy từ Seedance vào. Bạn có thể thấy rằng nó đang upload tệp và nó ở ngay đây. Đây là một video dài tám giây. Nó sẽ không cho phép bạn upload video dài 30 giây. Có một giới hạn và tôi tin rằng nó khoảng 30 hoặc 40 megabytes. Vì vậy, hãy ghi nhớ điều đó. Tôi đã thành công khi upload video 15 giây. Tôi đã thử video 20 giây và nó hoạt động, nhưng hãy ghi nhớ điều đó.

Bây giờ điều tôi muốn làm là Claude đã làm tất cả những công việc khó khăn cho chúng ta rồi. Bạn biết đấy, nếu tôi quay lại đây, nó về cơ bản đã cung cấp cho chúng ta thương hiệu và tất cả những thứ này với visual identity, các section khác nhau, footer. Và bạn có thể thấy rằng nó cũng có, bạn biết đấy, colors và những thứ khác. Vì vậy, tôi sẽ lấy cái này, tôi sẽ quay lại Claude Design và tôi sẽ dán nó vào. Và nó được dán vào như một sản phẩm nhỏ vì đó là một đoạn văn bản dài.

Vì vậy, bây giờ tôi chỉ giải thích những gì tôi muốn làm: "Này, Claude Design, tôi đã cung cấp cho bạn một vài thứ. Tôi có một sketch, đó về cơ bản là ý tưởng của tôi cho hero section. Sẽ có rất nhiều section nhỏ bên dưới mà bạn sẽ tự mình tìm ra nó nên trông như thế nào. Tôi đã cung cấp cho bạn sleep background.MP4. Đây là một video mà tôi muốn bạn phát lặp lại vô tận ở chế độ nền. Và bạn nên thấy rằng hero text sẽ ở phía bên trái so với video đó. Và sau đó tôi đã dán vào 23 dòng text, đó là một phần của brand identity, feel cho trang web và cách bạn nên viết copy. Và cứ tiếp tục viết tất cả copy bây giờ. Chúng ta có thể tweak sau." Được rồi. Vì vậy, tôi sẽ dán cái đó vào và gửi đi. Nếu các bạn tò mò về cách tôi đang thực hiện voice to text, hãy kiểm tra mô tả để biết công cụ. Nhân tiện, tôi đang sử dụng extra usage.

Tạo và Tối Ưu Thiết Kế Ban Đầu với Claude Opus 4.7

Hệ thống sẽ bắt đầu xây dựng thiết kế này, và nếu có bất kỳ câu hỏi cụ thể nào dành cho chúng ta, nó sẽ quay lại và hỏi. Nhưng hiện tại, có vẻ như nó sẽ tiếp tục chạy. Hãy nhớ rằng, hiện tại hệ thống đang sử dụng Claude Opus 4.7. Thành thật mà nói, trong giai đoạn lập kế hoạch, tôi thích sử dụng Opus 4.7. Nếu sau này chúng ta muốn thực hiện một số lần lặp và làm những việc khác, chúng ta có thể giảm mô hình AI xuống. Nhưng hãy nhớ rằng, điều này sẽ sử dụng Opus 4.7, đây là mô hình AI đắt nhất hiện đang công khai. Tuy nhiên, tôi thích cách chúng ta vẫn có cảm giác về Claude ở đây vì nó đang cho chúng ta biết nó đang nghĩ gì. Chúng ta có thể thấy nó đang làm gì, nó tạo ra các danh sách task cần làm. Vì vậy, rất dễ dàng để chúng ta kiểm tra tiến độ và vị trí của mình. Nó đang tạo một design system ở đây. Chúng ta có một bảng màu, chúng ta có văn bản ngay tại đây. Và thành thật mà nói, đây là best practice, đặc biệt khi bạn mới làm quen với Claude Design, chỉ cần quan sát những gì nó đang làm. Và hãy dừng nó lại nếu nó đang đi sai hướng. Bởi vì nếu nó đang đi sai hướng, nó sẽ xây dựng những thứ không mong muốn, và điều đó sẽ tiêu tốn rất nhiều session limit của bạn. Vì vậy, bạn nên dừng nó lại và refresh hoặc re-correct nó trước khi mất hết thời gian đó.

Nguồn Cảm Hứng Thiết Kế từ Motioncites.ai

Trong khi hệ thống đang chạy, tôi muốn cho các bạn xem cách tôi tìm được một số cảm hứng khác. Có một trang web rất thú vị tên là motioncites.ai. Cảm ơn Aiden, anh ấy đã giới thiệu trang này cho tôi và tôi nghĩ nó thật tuyệt vời. Cách trang này hoạt động là bạn có thể xem các hình nền và các trang web khác để lấy cảm hứng. Các bạn sẽ nhận thấy ở đây, nếu các bạn nhớ phiên bản AI Automation Society của tôi, trang web đó có một cảnh nền như thế này. Và khi chúng ta cuộn qua, chúng ta có những thẻ hình ảnh. Nó giống như một hành trình cho góc nhìn của người dùng cuối. Tôi đã lấy cảm hứng từ trang này. Nếu tôi mở trang này ra, bạn có thể thấy đây là một hành trình cuộn, nó có các yếu tố động 3D trong các thẻ. Và tôi đã có thể sao chép câu lệnh này và đưa nó cho Claude Design. Tôi đã nói, "Này, đây là một ý tưởng hay. Tôi muốn bạn thay thế hình nền bằng, à không phải hình nền, tôi muốn bạn thay thế video nền bằng video nền này" và tôi đã thả video của mình vào. Và tôi nói, "Tôi muốn bạn cập nhật tất cả văn bản và màu sắc thương hiệu cũng như cảm nhận cho thương hiệu của tôi." Sau đó, tôi đã cung cấp cho nó một design system. Đó là tất cả những gì tôi phải làm để biến AI Automation Society của mình thành như thế này. Và có rất nhiều mẫu khác. Hầu hết trong số này đều miễn phí. Tôi đang sử dụng gói trả phí, chỉ 99 đô la cho cả đời, khá tuyệt. Nhưng một số sẽ là premium, một số sẽ miễn phí. Nhưng như tôi đã nói, bạn chỉ cần tìm những cái bạn thích, những cái phù hợp với thương hiệu của bạn, nhấn copy, đưa cho Claude Design, và nó sẽ tạo lại. Sau đó, bạn có thể tweak (tinh chỉnh) từ đó.

Nếu tôi vào phần backgrounds, bạn có thể thấy có rất nhiều hình nền mà chúng ta có thể xem. Vì một lý do nào đó, hệ thống không nhận ra tôi là thành viên premium. Nhưng dù sao đi nữa, giả sử chúng ta thực sự thích hình nền này, tôi có thể sao chép nó. Và nếu tôi mở một tab mới và dán vào, về cơ bản nó chỉ cung cấp cho tôi animation đó, mà tôi rõ ràng có thể tải xuống và sau đó hiển thị phía sau văn bản trên trang web của mình, phía sau các section khác nhau trên trang web của mình. Với việc hầu hết các nội dung ở đây đều miễn phí, hãy truy cập motion sites và thử nghiệm. Nó sẽ mang lại cho bạn một số cảm hứng và có rất nhiều yếu tố thú vị trong đó mà bạn có thể sử dụng. Ví dụ, nếu các bạn nhớ dự án Nate Herk của tôi, tôi đang ngồi trên một hòn đảo nổi và đang làm việc gì đó, ai biết được. Và tôi đã lấy cảm hứng từ một số mẫu này. Bạn biết đấy, mẫu này là một abyss, mẫu kia là một người đang làm việc. Vì vậy, tôi không nhất thiết khuyên bạn chỉ sao chép các yếu tố này và đưa lên trang web của mình. Bạn chắc chắn có thể làm vậy. Nhưng đây là một cách hay để sáng tạo và tìm kiếm cảm hứng.

Đánh giá Iteration đầu tiên trong Claude Design

Chúng ta quay lại với Claude Design. Và những gì chúng ta có là lần lặp đầu tiên, trông nó thật tuyệt vời. Ví dụ, văn bản này, đoạn văn bản nhỏ này, mọi thứ đều rất phù hợp với thương hiệu. Chúng ta có thể thấy ở đây rằng khi chúng ta cuộn xuống, hình ảnh hơi động, hoặc xin lỗi, đó là hình ảnh. Tôi cứ nói hình ảnh. Video hơi động. Tôi nghĩ tất cả những điều này trông thật tuyệt vời. Nó rất phù hợp với thương hiệu. Chúng ta tiếp tục cuộn xuống và có thể thấy một số hình nền. Chúng ta có một số ngữ cảnh về sản phẩm, vấn đề mà nó giải quyết. Và điều này thật đáng kinh ngạc. Một lần nữa, tất cả những điều này đều được Claude tạo ra, ý tưởng, thiết kế, các câu lệnh (không phải hình ảnh và video thực tế, mà là các câu lệnh). Và tôi rất thích điều này.

Các Cơ Chế Lặp Lại và Phản Hồi Hiệu Quả

Điều thực sự tuyệt vời về tính năng này và là một cách tuyệt vời để tiết kiệm token là bạn có thể lặp lại ngay tại đây. Nếu bạn đưa câu lệnh này vào Claude Code, bạn có thể nhận được một cái gì đó trông giống như thế này. Nhưng để thực hiện các chỉnh sửa qua lại, bạn sẽ phải chụp một số ảnh màn hình lộn xộn hoặc bạn sẽ phải rất cụ thể. Nhưng ngay tại đây, chúng ta có thể thêm comment. Tôi có thể nhấp vào một cái gì đó và chúng ta có thể thay đổi cách nó hoạt động. Ví dụ, nút "how it works". Giả sử tôi muốn làm cho nó có màu khác, có thể là màu vàng. Hãy làm cho nút này có màu của dấu phẩy trong văn bản chính, tạo một điểm nhấn màu vàng. Và bây giờ tôi có thể nói, "Này, gửi cái này cho Claude," và nó nhận được các comment chính xác về yếu tố chính xác mà tôi đang đề cập. Vì vậy, nó sẽ không bị nhầm lẫn. Bạn cũng có thể chỉnh sửa trực tiếp. Vì vậy, nếu tôi đến đây và tôi nghĩ, "Được rồi, tôi không muốn cái m này trông rất AI," tôi có thể xóa nó và sau đó tôi có thể đóng nó lại. Và nó sẽ thực hiện thay đổi đó cho chúng ta vì tôi vừa có thể chỉnh sửa nó ngay tại đó. Vì vậy, tôi có thể thay đổi văn bản. Tôi thậm chí, các bạn đã nhận thấy, có thể thay đổi kích thước. Vì vậy, nếu tôi muốn tất cả những thứ này nhỏ hơn một chút, tôi có thể vào đây và chỉ cần nói, "Được rồi, làm cho nó 15" hoặc "làm cho nó 10" và nó sẽ thay đổi ngay lập tức. Và sau đó Claude chỉ cần thực hiện thay đổi cho chúng ta.

Bạn cũng có thể vẽ. Ví dụ, ở đây, giả sử tôi không thích cách video kết thúc quá đột ngột. Tôi có thể vẽ một vòng tròn xung quanh nó. Và sau đó tôi có thể gõ và chỉ nói, "Tôi không thích cách nó kết thúc quá đột ngột. Thêm một transition overlay hoặc gradient để nó cảm thấy mượt mà hơn." Và tôi gửi nó đi bằng cách nhấn send. Khi tôi làm điều đó, các comment nhỏ bị kẹt ở dưới đó nên đôi khi rất khó nhìn. Đó chỉ là một lỗi UI nhỏ. Một lần nữa, đây là bản xem trước nghiên cứu, vì vậy những lỗi nhỏ sẽ được khắc phục. Nhưng đó là một tính năng thực sự hay khi có thể vẽ.

Bạn có thể thấy rằng nút đó đã thay đổi màu sắc. Tôi thích điều đó. Mọi thứ khác mà chúng ta đã thay đổi đều đã được thay đổi. Và hy vọng bạn có thể thấy nó đã thêm một đường nhỏ ở đây. Vì vậy, đó không chính xác là điều tôi muốn. Tôi sẽ lặp lại một chút. Tôi hơi hy vọng vào một gradient transition. Nhưng dù sao đi nữa, ít nhất nó đã biết chính xác những gì tôi đang đề cập.

Khám phá Khả năng Thiết kế với Bảng Điều Chỉnh Tùy Chỉnh (Tweaks Panel)

Tại thời điểm này, chúng ta sẽ đọc qua tất cả nội dung và lặp lại. Và như tôi đã nói, tôi nghĩ rằng điều này trông khá ổn. Nhưng bây giờ nếu bạn không phải là người sáng tạo, bạn có thể tự hỏi, "Vậy tôi nên thêm gì đây?" Nếu bạn là người sáng tạo, bạn có thể sẽ có rất nhiều tính năng mà bạn muốn thêm. Và tại thời điểm đó, bạn sẽ lặp lại, thực hiện một số thay đổi, đưa ra một số câu lệnh. Nhưng giả sử bạn chỉ muốn biết những gì khác có thể thực hiện được. Và bạn muốn xem Claude có thể nghĩ ra điều gì. Hãy xem đây. Bạn vào đây. Đây là một lần lặp lại rất tuyệt vời. "Tôi muốn xem những gì khác có thể thực hiện được. Tôi muốn xem trang web này có thể được cải thiện như thế nào." Vì vậy, hãy thêm một loạt những thứ tôi có thể tweak và đặt chúng lên đó cho tôi, các màu sắc khác nhau, các slider khác nhau, các panel khác nhau, và chỉ cần cho tôi một loạt thứ để thử nghiệm. Và đây là một trong những lợi ích lớn nhất và những điều tôi yêu thích về Claude Design, ngay cả khi so sánh với các website builder khác, đó là chúng ta có tweaks panel này ở ngay đây. Hiện tại chúng ta không có gì. Nhưng nó sẽ thêm một loạt các tweak mà chúng ta có thể thử nghiệm trong thời gian thực. Và bằng cách đó, chúng ta có thể thấy, "Được rồi, tôi thích cái này. Tôi không thích cái kia lắm." Và nó đã giúp tôi cảm thấy sáng tạo hơn rất nhiều trong những lúc tôi thiếu cảm hứng.

Nói nhanh thôi các bạn, tôi biết chúng ta sẽ xem xét rất nhiều thông tin ngày hôm nay. Vì vậy, tôi sẽ đưa tất cả những gì chúng ta đang nói ở đây, tất cả những điều khác nhau cần ghi nhớ, vào một tài liệu tài nguyên miễn phí mà bạn có thể truy cập hoàn toàn miễn phí bằng cách tham gia cộng đồng trường học miễn phí của tôi. Như bạn có thể thấy, "Join the free community." Điều này sẽ đưa bạn đến AI Automation Society. Bạn sẽ vào classroom và bên trong all YouTube resources, bạn sẽ có thể tìm thấy mọi thứ, tài liệu mà tôi đang đề cập. Và tôi cũng sẽ bao gồm về cơ bản là tệp zip của trang web này. Nếu các bạn muốn giải nén và hiểu cách nó hoạt động và cách các scrolling animations hoạt động, bạn có thể tìm hiểu sâu vào nó và bạn có thể để Claude Code hoặc Claude Design tìm hiểu sâu vào nó. Nhưng nó thực sự khá đơn giản, như tôi đã nói, tôi về cơ bản chỉ nói, "Này, đây là video, nhưng thay vì chỉ phát nó, tôi muốn bạn chỉ liên kết mỗi khung hình với một vị trí cuộn để khi tôi cuộn xuống hoặc lên, video sẽ tua tới hoặc lùi lại." Dù sao đi nữa, hãy quay lại với video.

Các tweak của chúng ta đã có ở đây. Và bạn có thể thấy ở phía bên phải, chúng ta có rất nhiều thứ để thử nghiệm, điều này thật tuyệt vời. Vì vậy, hãy bắt đầu từ trên cùng. Chúng ta có một bảng màu (palette). Đây là mặc định. Chúng ta cũng có thể chuyển sang màu xanh lam hơn hoặc màu nâu hơn và màu xanh lá cây hơn hoặc bất kỳ màu nào. Tôi chắc rằng các bạn không thể nhận ra nhiều, nhưng các màu ở đây đang thay đổi. Bây giờ bạn có thể thấy nhiều hình nền đang thay đổi hơn. Chúng ta có thể có màu xanh lá cây. Chúng ta có thể có màu nâu hơn. Chúng ta có chế độ sáng ở đây. Vì vậy, điều này sẽ cho phép bạn thử nghiệm xem bạn nghĩ màu nào phù hợp nhất với thương hiệu. Và rõ ràng tôi không thích điều này vì phần chính trông kỳ lạ. Vì vậy, chúng ta có thể tweak điều đó. Tôi khá thích màu nâu. Nhưng dù sao đi nữa, còn gì nữa? Chúng ta có accent hue. Vì vậy, chúng ta có thể thay đổi điều này. Bạn thấy hue có màu vàng như thế nào không. Chúng ta có thể thay đổi điều này để xem những màu nào khác có thể trông đẹp với color scheme chính của chúng ta. Hiện tại, tôi thực sự thích mặc định, hơi hướng về màu đồng vàng. Vì vậy, chúng ta sẽ giữ nguyên như vậy. Chúng ta cũng có văn bản. Vì vậy, tôi có thể chuyển đổi điều này, hoặc xin lỗi, không phải văn bản, mà là font. Và tôi có thể thử nghiệm các font khác nhau để xem tôi thực sự thích gì. Và chúng ta có thể thấy những nơi khác nó thay đổi. Vì vậy, có vẻ như điều này đang thay đổi font chính ở khắp mọi nơi. Đây là một font phụ hơn, nhưng điều này đang thay đổi văn bản chính ở khắp mọi nơi. Chúng ta cũng có thể thấy headline slider. Vì vậy, điều này có thể làm cho nó lớn hơn hoặc nhỏ hơn. Chúng ta có thể thử nghiệm cách nó wrap và mọi thứ. Vì vậy, điều đó thật tuyệt. Headline có thể viết hoa tất cả. Nó có thể viết thường, điều mà tôi thực sự thích. Tôi sẽ giữ tất cả viết thường. Và sau đó chúng ta có thể thay đổi văn bản thực tế ngay tại đây, tất nhiên rồi. Hero layout chúng ta có thể thử nghiệm. Rõ ràng, tôi không muốn nó căn giữa. Chúng ta muốn nó căn trái vì chúng ta đã tạo video theo cách đó. Vì vậy, chúng ta sẽ giữ nguyên điều đó. Nhưng hy vọng các bạn đã bắt đầu hiểu những gì tôi đang nói bây giờ. Chúng ta có một loại overlay mà chúng ta có thể thử nghiệm. Chúng ta có video dim mà chúng ta có thể thử nghiệm. Tôi chắc rằng các bạn, thật không may, không thể thực sự nhìn thấy. Tôi ước rằng họ có thể di chuyển. Giống như tôi ước bạn có thể kéo tweak slider này đi bất cứ đâu, nhưng tôi chắc rằng điều đó sẽ đến.

Tùy chỉnh Giao diện và Tiết kiệm `Prompt`

Chúng ta có một cái gì đó gọi là section rhythm, mà tôi có lẽ phải cuộn xuống để xem đó là gì. Okay, về cơ bản, đây chỉ là khoảng cách giữa các section. Vì vậy, chúng ta có thể làm cho nó nhỏ hơn hoặc lớn hơn. Chúng ta có ritual card style. Tôi không chắc rituals ở đâu, đây rồi. Vậy là flat, bordered, hoặc big numerals. Tôi nghĩ tôi thích big numerals hơn. Vâng, tôi chắc là các bạn đã hiểu ý rồi. Chúng ta có thể thoải mái thử nghiệm với các tweaks. Và tất nhiên, chúng ta có thể nhấn reset, điều này sẽ đặt lại mọi thứ. Thực sự không có gì để mất ở đây. Việc thực hiện các tweaks và sau đó lưu những thay đổi đó sẽ giúp bạn tiết kiệm thời gian hơn. Và cũng tiết kiệm được session limit của bạn, hơn là nếu bạn chỉ trò chuyện qua lại với Claude vì tất cả chúng ta đều biết điều đó có thể diễn ra như thế nào nếu bạn chỉ gửi câu lệnh sau câu lệnh liên tục.

Cũng hãy nghĩ đến thực tế rằng nếu bạn đang làm điều này trong Claude Code và bạn có tất cả những tweaks này mà bạn muốn thử, thì về cơ bản nó giống như, "Này, tôi tự hỏi nó sẽ trông như thế nào nếu nền có màu xanh lam." Và sau đó bạn sẽ phải gửi câu lệnh. Claude Code sẽ thay đổi nền. Nó sẽ đặt trên một local host và sau đó bạn sẽ nhìn vào nó và nói, "Tôi thực sự không thích điều đó." Vì vậy, bạn sẽ phải quay trở lại phiên bản cũ. Và điều đó có thể là hai câu lệnh. Trong khi ở đây, chúng ta có thể xem rất nhiều thứ và thử nghiệm chúng theo cách không thực sự khiến chúng ta gửi thêm nhiều câu lệnh.

Bây giờ, một điều tôi nhận thấy là tôi không nghĩ có nút revert trong lovable. Bạn có thể chỉ cần quay lại các câu lệnh trước đó, điều này thật tuyệt. Tôi không thấy điều đó ở đây. Nhưng một lần nữa, khả năng thực hiện các tweaks này giúp chúng ta không phải thực hiện nhiều lần revert vì chúng ta có thể nói, "Hmm, tôi tự hỏi nó sẽ trông như thế nào nếu font được thay đổi. Tôi tự hỏi nó sẽ trông như thế nào nếu khoảng cách giữa các section nhỏ hơn." Và nếu bạn không thích, nó đơn giản là không làm điều đó. Vì vậy, khi bạn đã hài lòng với các tweaks, bạn chỉ cần tắt nó đi. Nếu bạn thực hiện bất kỳ thay đổi nào, nó sẽ tiếp tục thực hiện những thay đổi đó cho bạn.

Phát triển `Project` theo `Section`

Và điều tuyệt vời bây giờ là bạn đã có dự án này được thiết lập, dù bạn đang thực hiện điều này trong Claude Design hay trong Claude Code, bạn có thể tiếp tục lặp lại bởi vì bạn hiểu ý tưởng về cách tạo ra một yếu tố động như thế này? Hoặc làm thế nào để thực hiện một trong những thứ cuộn trang mà bạn chỉ cần bảo nó rằng khi bạn cuộn, bạn muốn nó phát các frame ngược hoặc xuôi?

Vậy giả sử chúng ta có điều này mà chúng ta yêu thích. Và có thể ở phía dưới, chúng ta muốn có một video ai đó đang ngủ. Điều đó sẽ thực sự rùng rợn. Nhưng bây giờ nếu bạn chỉ đơn giản chia website thành các section, vậy đây là section. Okay, tuyệt. Section một, chúng ta có thể làm gì với section một để làm cho nó trở nên thú vị? Có thể chúng ta chỉ cần thêm một nền động với những ngôi sao băng hoặc thứ gì đó tương tự. Và sau đó section ba, có thể chúng ta có một video động nhỏ về ai đó đang khuấy cà phê, bạn biết đấy?

Chúng ta có thể tiếp tục xem xét từng section một. Và như vậy nó không quá choáng ngợp. Tôi đã nghĩ, ôi chúa ơi, tôi phải xây dựng toàn bộ một website. Chỉ cần xem xét từng section một và sử dụng những nguyên tắc này, sử dụng Claude để giúp bạn nghĩ ra, okay, đối với section hai, giúp tôi tìm ra ngay tại đây, loại video nào tôi nên có hoặc loại yếu tố nào tôi nên có? Và sau đó, okay, tuyệt, tạo cho tôi các câu lệnh. Và sau đó tôi sẽ vào Key và tạo các hình ảnh, tôi sẽ tạo các video, và sau đó tôi sẽ đưa chúng trở lại Claude. Và bạn sẽ tiếp tục lặp lại. Và tôi nghĩ bạn sẽ thấy điều đó thực sự, thực sự thú vị. Bạn đã có những kiến thức cơ bản, bạn hiểu cách công cụ hoạt động, và bây giờ bạn tiếp tục.

Chuẩn bị `Project` để Triển khai

Nhưng bây giờ bạn đang ở thời điểm mà giả sử bạn đã hài lòng với website này. Bạn biết đấy, bạn cũng có thể nhấp vào present, bạn có thể mở nó ra, bạn có thể đảm bảo nó trông ổn, bạn có thể đảm bảo các nút đang liên kết đến đúng vị trí. Và sau đó bạn làm gì tiếp theo? Chà, điều chúng ta muốn làm là đưa cái này vào Claude Code để chúng ta có thể push nó vào một kho lưu trữ GitHub và để chúng ta có thể push kho lưu trữ GitHub đó lên Vercel.

Vì vậy, nếu điều đó hoàn toàn không có ý nghĩa gì đối với bạn, tôi sẽ giải thích tất cả. Vì vậy, đừng lo lắng, điều đầu tiên chúng ta sẽ làm là nhấp vào share. Và chúng ta sẽ tiếp tục tải xuống dự án này dưới dạng tệp zip hoặc thư mục zip. Vì vậy, tôi sẽ tải xuống dưới dạng zip. Bạn cũng có thể nhấp vào hand off to Claude Code, điều này sẽ cung cấp cho bạn một command. Bạn sẽ sao chép command này, đưa cho Claude Code, và sau đó nó sẽ có thể kéo mọi thứ vào. Sáng nay tôi đã gặp sự cố với command này. Nó đã báo lỗi 404. Vì vậy, nó đã hoạt động trong quá khứ. Điều này có lẽ sẽ hoạt động khi bạn xem video này. Nhưng đó cũng là một lựa chọn. Nhưng lựa chọn khác là bạn chỉ cần lấy tệp zip.

Làm việc với `Claude Code` và `GitHub`

Được rồi, đây là tệp zip đó. Tôi sẽ tiến hành giải nén tất cả. Và tôi thực sự muốn đặt cái này vào một thư mục. Vì vậy, tôi đã tạo một thư mục trên màn hình của mình và nó được gọi là Lull website. Vì vậy, tôi sẽ nhấp vào Lull website và tôi sẽ chọn thư mục đó để giải nén vào. Nghe có vẻ như tôi đang nói Lull website như thể website là một wrapper, giống như Lull website. Nhưng bây giờ chúng ta có Lull website. Và đây là thư mục mà chúng ta muốn mở bên trong Claude Code.

Vậy thì đây. Tôi đang sử dụng nó trong IDE VS Code. Và tôi sẽ tiếp tục mở dự án đó. Okay, bây giờ chúng ta đã ở đây, chúng ta sẽ mở Claude Code và bắt đầu. Về cơ bản, bạn có thể thấy ở đây chúng ta có video nền, chúng ta có scraps (là bản phác thảo của chúng ta), và chúng ta có các tệp tải lên, và chúng ta có HTML. Vì vậy, đây về cơ bản là dự án hoàn chỉnh của chúng ta từ Claude Design, nhưng bây giờ nó nằm bên trong Claude Code. Và tôi thực sự sẽ chỉ nói, "Này, đây là một dự án website cho thương hiệu của chúng ta tên là Lull. Tất cả những gì tôi muốn bạn làm là push cái này lên một kho lưu trữ GitHub, push nó lên một kho lưu trữ riêng tư, và đặt tên cho nó tùy ý bạn."

Và vì tôi đã sử dụng GitHub với Claude Code của mình, nó sẽ có thể push và tạo repo đó. Nhưng nếu bạn chưa bao giờ làm điều này trước đây, tất cả những gì bạn cần làm là truy cập GitHub.com. Việc tạo tài khoản là miễn phí. Bạn sẽ đăng nhập. Và sau đó về cơ bản bạn chỉ cần kết nối cái này với Claude Code của mình. Vì vậy, nếu bạn yêu cầu Claude Code kết nối, nó sẽ nói, "Chắc chắn rồi, hãy để tôi mở trang ủy quyền." Và bây giờ Claude Code có thể giao tiếp với GitHub của bạn, push các thay đổi, tạo kho lưu trữ, những thứ tương tự.

Triển khai `Website` lên `Vercel`

Và sau đó phần thứ hai của việc này là bạn sẽ cần tạo một tài khoản tại Vercel. Vì vậy, Vercel về cơ bản chỉ là một nơi để bạn host và deploy các ứng dụng web và website của mình. Vì vậy, nó sẽ trông như thế này. Và khi bạn đăng ký Vercel, bạn có thể đăng ký bằng tài khoản GitHub của mình, điều này làm cho nó cực kỳ dễ dàng, bởi vì sau đó bạn có thể chỉ cần sync một repo GitHub với Vercel. Bởi vì nếu bạn nghĩ về nó, khi bạn có một kho lưu trữ GitHub, tất cả những gì nó có về cơ bản là các thư mục và các tệp và mã. Và GitHub lưu trữ chúng. Vì vậy, điều bạn cần làm là bạn cần đưa mã đó lên web. Và đó là những gì Vercel làm.

Và đó là nó. Siêu dễ dàng. Tôi không phải làm gì cả. Nó nói website của bạn bây giờ là một repo GitHub. Tôi có thể theo dõi liên kết này để mở nó ra. Và đây là kho lưu trữ thực tế mà chúng ta vừa kéo từ Claude Design. Bây giờ thành thật mà nói, trước khi chúng ta push cái này, chúng ta có lẽ nên đảm bảo rằng nó hoạt động. Vì vậy, hãy đảm bảo rằng website thực sự hoạt động như mong đợi và mở nó trong một local host để tôi xem.

Bây giờ tôi thực sự vui vì tôi phải làm điều này bởi vì bạn sẽ nhận thấy tôi đã nói local host. Vậy điều đó có nghĩa là gì? Local host chỉ là một local host về cơ bản sẽ hiển thị website của chúng ta. Và vì vậy nếu điều này trả về thứ gì đó như local host 3000, nếu bạn cố gắng cung cấp URL đó cho ai đó, nó sẽ không mở ra cho họ. Nó sẽ mở ra bất cứ thứ gì họ đang chạy trên local host 3000 của riêng họ, có thể là không có gì. Tôi thực sự đã thấy một số tweet hài hước. Đó là một người mới bắt đầu sử dụng Claude Code nói, "Hãy nhìn web app tuyệt vời này mà tôi đã xây dựng!" và họ gửi URL local host và rõ ràng mọi người không thể mở nó.

Vậy đây là local host. Nó đã mở website của chúng ta. Bạn có thể thấy chúng ta có video đang phát. Chúng ta có tất cả văn bản xuất hiện động. Vì vậy, mọi thứ về cơ bản đang được chuyển từ Claude Design sang Claude Code một cách liền mạch, không có vấn đề gì. Và bây giờ điều này thực sự là một repo GitHub, hãy kết nối cái này với Vercel để đưa nó lên web để tôi thực sự có thể cung cấp cho bạn một URL và bạn có thể xem website của tôi.

Trở lại Vercel, các bạn sẽ bị sốc vì điều này dễ dàng đến mức nào. Bạn nhấp vào Add New. Bạn nhấp vào Add New Project. Và sau đó ngay tại đây, vì tôi đang đăng nhập bằng repo GitHub hoặc tài khoản GitHub của mình, tôi về cơ bản chỉ cần nhấp vào website này và tôi nói Import. Nó đang xem xét các dự án của tôi. Nó sẽ kéo dự án này vào. Và sau đó tôi về cơ bản chỉ nói Deploy. Điều này sẽ mất khoảng 60 giây và sau đó nó sẽ cung cấp cho chúng ta một URL thực tế cho website của chúng ta.

Bây giờ, phần thú vị về điều này là nếu bạn từng thực hiện thay đổi nào đó đối với site của mình, về cơ bản bạn hiện có một môi trường thử nghiệm và một môi trường thực tế. Vì vậy, nếu tôi đang ở trên local host của mình ở đây, bạn biết đấy, và tôi đang làm việc bên trong Claude Code và tôi đang làm mọi thứ, về cơ bản điều xảy ra là tôi có thể thực hiện các thay đổi và tôi có thể lặp lại, nhưng chỉ mình tôi mới thấy những thay đổi này. Ví dụ, nếu tôi muốn thay đổi nội dung hoặc nếu tôi muốn thay đổi video nền. Nhưng sau đó khi chúng ta đã hài lòng với những thay đổi đó, tôi quay lại đây và tôi nói, "Này, Claude Code, push tất cả những thay đổi này lên GitHub." Và sau đó khi các thay đổi đến GitHub và chúng đến đây, Vercel tự động lấy chúng và deploy chúng lên site trực tiếp. Vì vậy, bạn có một sự tách biệt rất rõ ràng giữa những gì bạn đang thực hành và những thay đổi bạn có thể muốn thực hiện. Và sau đó nói, "Này, tuyệt, chúng ta thích cái này. Push nó công khai và sau đó Vercel sẽ lấy nó." Và sau đó nó sẽ trực tuyến sau khoảng 30 giây.

Dù sao đi nữa, chúc mừng. Bạn vừa deploy một dự án mới trên Vercel. Tôi sẽ tiếp tục nhấp vào Continue to the Dashboard. Và bây giờ chúng ta có một domain thực tế. Vì vậy, đây là, bạn biết đấy, lull-website.vercel.app. Và nếu tôi mở cái này ra, à ha. Okay. Khi tôi mở cái này ra, nó nói 404 Not Found.

Xử lý Lỗi Triển khai trên `Vercel`

Vậy chúng ta làm gì ở đây? Bạn quay lại Claude Code và bạn nói, "Tôi vừa push cái đó lên GitHub và sau đó tôi sync nó với Vercel để host nó trên web. Và khi tôi mở nó ra, nó đã báo thông báo lỗi này. Điều này có nghĩa là gì? Làm thế nào để tôi khắc phục điều này? Bạn có cần thêm thông tin gì từ tôi để thực sự giúp tôi khắc phục điều này không?" Claude đã có thể tìm ra nguyên nhân ngay lập tức: Vercel mặc định phục vụ nội dung này từ thư mục gốc của repo của bạn, nhưng repo lại có một đường dẫn khác. Đó là lý do tại sao nó không tìm thấy gì. Vì vậy, cách khắc phục là nó cần đổi tên thư mục lull-website thành index.html.

Và sau đó nhìn xem, nó đã push những thay đổi đó lên GitHub. Vì vậy, nếu bây giờ tôi truy cập repo GitHub, đó là cái này, và tôi làm mới nó, chúng ta sẽ thấy ở đây rằng chúng ta có hai commit, điều đó có nghĩa là chúng ta đã thực hiện hai lần push khác nhau. Vì vậy, chúng ta đã thực hiện một thay đổi. Và sau đó điều gì sẽ xảy ra nếu tôi quay lại Vercel, vậy thì ở đây, bạn đã có thể thấy website hiện đang được render đúng cách. Và nếu tôi cũng nhấp vào Deployments, chúng ta có thể thấy một lần nữa rằng chúng ta có một thay đổi đã được thực hiện một phút trước, đó là đổi tên thành index.html.

Vì vậy, bây giờ tôi có thể nhấp vào domain này, và tôi có thể thấy rằng chúng ta thực sự có site thực sự của mình giống hệt như cách chúng ta đã thấy trên local host của mình. Và mọi thứ sẽ hiển thị đúng cách vì chúng ta đã thực hiện bản sửa lỗi đó. Bây giờ một điều nhanh chóng khác tôi muốn nói đến khi thực sự deploy site của bạn là bạn đã xây dựng cái này để được tối ưu hóa cho laptop hoặc cho máy tính.

Tối ưu hóa cho thiết bị di động với Claude design và Claude Code

Khi bạn truy cập trang web của mình trên localhost trước khi triển khai và nhấn F12 hoặc mở developer console, bạn có thể nhấp vào nút này để chuyển sang chế độ xem di động (mobile view). Đây là những gì chúng ta sẽ thấy nếu tôi mở trang web trên thiết bị di động, và rõ ràng là nó không tốt. Vì vậy, bạn cần quay lại và iterate một chút, sau đó yêu cầu Claude Code tối ưu hóa cho thiết bị di động. Có thể chúng ta muốn video (tôi cứ nói là hình ảnh, nhưng ý tôi là video) nằm ở phía dưới thay vì ở vị trí hiện tại, hoặc có thể chúng ta chỉ muốn phông chữ được hiển thị trên một dòng và sau đó có thêm nội dung ở phía dưới. Đó là điều cần suy nghĩ. Bạn cần cân nhắc xem giao diện sẽ trông như thế nào khi xem trên thiết bị di động so với máy tính hoặc thậm chí là máy tính bảng. Tóm lại, Claude design và Claude Code không tự động tối ưu hóa cho thiết bị di động, nhưng nếu bạn yêu cầu nó tối ưu hóa, nó chắc chắn sẽ giúp bạn tìm ra cách để tái cấu trúc. Và bạn có thể thực hiện tất cả những điều đó mà không làm ảnh hưởng đến cách nó xuất hiện trên phiên bản web trên máy tính của bạn. Đây chỉ là một điều khác tôi muốn đảm bảo các bạn nắm được. Bạn có thể thấy ở đây chúng ta đang sử dụng tên miền .verse cell.app. Nếu bạn muốn thay đổi điều này, bạn chỉ cần sử dụng tên miền tùy chỉnh của riêng mình. Việc này mất khoảng năm phút và bạn có thể nói chuyện với Claude để tìm hiểu cách thực hiện. Nó siêu đơn giản, nhưng bây giờ hãy đi sâu vào một số nội dung khác và tìm hiểu kỹ hơn về cách tận dụng tối đa Claude design.

Claude design: Một sản phẩm chuyên biệt

Claude design là một sản phẩm riêng biệt. Nó mang lại cảm giác giống như cách họ đã thực hiện với Claude Code. Cách họ đóng gói các quy trình làm việc và chức năng khác nhau thành một cái gì đó dễ tiếp cận hơn, bởi vì mọi thứ mà Claude design làm, bạn có thể dễ dàng thực hiện trong Claude Code, nhưng không phải ai cũng muốn. Và họ đang giữ tất cả điều này trong cùng một môi trường. Nó được xây dựng dựa trên Claude Opus 4.7, có khả năng thị giác tiên tiến hơn nhiều so với các mô hình AI trước đây, nhưng tất nhiên, mô hình Opus 4.7 đi kèm với một chút chi phí. Vì vậy, hãy ghi nhớ điều đó. Bạn có thể xây dựng các prototype, tạo slides, thiết kế landing pages, animated promos và rất nhiều thứ khác với design. Rõ ràng hôm nay, chúng ta chủ yếu xem xét các website, nhưng có rất nhiều điều bạn có thể làm. Và để sử dụng nó, bạn phải sử dụng gói trả phí, không thể sử dụng gói miễn phí.

Hạn mức sử dụng và cách tối ưu token

Trước hết, Claude design có hạn mức hàng tuần riêng. Nếu tôi quay lại phần usage, bạn có thể thấy bạn có một session hiện tại cho gói của mình. Bạn có tất cả các model, chỉ Sonnet, và bạn có Claude design usage của riêng mình. Và đây là thứ tôi đã tiêu thụ khá nhanh. Vậy burn rate trông như thế nào? Mọi người đã phàn nàn rằng session của họ bị tiêu thụ rất nhanh. Vì vậy, nếu bạn trả 20 đô la một tháng, sau một website lớn và một design system lớn, bạn có thể gần như đã hết hạn mức. Nếu bạn sử dụng gói tối đa gấp năm lần, thì bạn sẽ có khoảng bốn đến năm câu lệnh nghiêm túc và bạn có thể nhanh chóng đạt đến giới hạn. Và nếu bạn sử dụng gói 20x, gói tôi đang dùng, tôi đã có thể xây dựng một vài video project và một vài website khác nhau. Sau đó, tôi bắt đầu gần hết giới hạn của mình. Vậy điều gì thực sự làm cạn kiệt giới hạn của bạn nhanh nhất? Có một vài điều. Trước hết, nếu bạn làm mọi thứ với 4.7, thì rõ ràng bạn sẽ tiêu thụ nhiều token hơn so với khi bạn sử dụng Sonnet hoặc thậm chí Haiku cho một số thay đổi rất nhỏ.

Các phương pháp hay nhất để giảm tiêu thụ token

Cá nhân tôi chưa tự mình thực hiện điều này. Tôi chưa thực sự thử làm wireframe. Tôi luôn bắt đầu với high fidelity. Nhưng tôi đã thấy một số người trên X nói rằng nếu bạn làm wireframe trước, bạn có thể chuyển đổi tốt hơn sang high fidelity với ít iteration hơn. Và điều đó rõ ràng là hợp lý. Ý tôi là, nếu bạn đang ở trong Claude Code, tôi luôn nói về việc giai đoạn lập kế hoạch (planning phase) quan trọng như thế nào. Vì vậy, hãy làm rõ ý tưởng của bạn, cung cấp càng nhiều ngữ cảnh càng tốt ngay từ đầu dưới dạng một bản sketch, và, bạn biết đấy, có thể giống như bản Claude spec mà chúng ta đã thấy trước đó trong ví dụ thực tế (live example). Thông tin này đã giúp Claude design xây dựng những gì chúng ta muốn ngay từ lần thử đầu tiên dễ dàng hơn nhiều, thay vì phải iterate quá nhiều. Bởi vì đó là nơi bạn sẽ đốt rất nhiều token. Ngoài ra, việc thiết lập một design system mà không có URL nói chung, mặc dù design system sẽ tiêu thụ rất nhiều tài nguyên.

Hệ thống thiết kế (Design System) và khả năng xuất nhập

Nếu tôi quay lại ứng dụng và vào phần tạo một design system, nó cho phép bạn thiết lập một hệ thống cho thương hiệu của mình. Bạn có thể nhập tên, một GitHub repo, các thư mục, tệp, logo và assets khác, và nó sẽ tạo cho bạn một template để nếu bạn muốn tạo bất cứ thứ gì – video, slides, website – bạn có thể tạo nó với thương hiệu đó. Ví dụ, tôi đã tạo một cái với AI Automation Society, đó là những gì bạn thấy ở đây. Vì vậy, mỗi khi tôi sử dụng design system này, nó sẽ tạo mọi thứ với kiểu chữ, màu sắc, nền, phối màu đó, tất cả những thứ tương tự. Khi bạn tạo một design system, một khi bạn đã nhập tất cả thông tin này, nó phải ingest (tiêu hóa) nó và tạo ra spec thực tế đó. Và điều này có thể tiêu tốn một lượng token đáng kể vì nó sẽ mất khoảng 10 đến 15 phút.

Điều thú vị là nếu bạn thực sự export cái này, bạn có thể đưa nó vào Claude Code và bạn có thể nhận được tất cả giá trị đó ngay lập tức. Nếu bạn vào design system của mình, bạn có thể thấy loại thông tin có trong đó, bạn có thể iterate trên đó. Nhưng bạn cũng có thể chia sẻ điều này với nhóm của mình, hoặc bạn cũng có thể tải xuống (download) dưới dạng tệp zip. Và sau đó bạn có thể cung cấp tệp zip đó cho Claude Code, giống như chúng ta đã làm trước đó. Và bây giờ bạn có thể nói, "Này, đây là design system cho AI Automation Society. Giúp tôi xây dựng một số thứ khác." Và bạn cũng có thể làm điều đó trong Claude Code. Nó thực sự không có gì mới. Toàn bộ khái niệm về việc có một design system hoặc một design MD không phải là một khái niệm mới. Chỉ là cách nó được đóng gói ở đây trong Claude design làm cho nó dễ dàng hơn rất nhiều.

Quản lý ngữ cảnh và vòng lặp iteration

Và tất nhiên, như tôi đã cho các bạn thấy, khả năng chỉnh sửa mọi thứ trên canvas, chúng ta đã nói về điều này, phải không? Việc ở trong một project và sử dụng các chỉnh sửa nhỏ (tweaks), sử dụng các bình luận và chỉnh sửa sẽ chính xác hơn. Và nó sẽ giúp Claude có một ý tưởng tốt hơn về những gì bạn thực sự muốn thay đổi. Vì vậy, nó sẽ không đi sai đường và lãng phí thời gian và session của bạn.

Và sau đó hãy nghĩ đến việc bạn có thể gặp phải những cuộc trò chuyện rất, rất dài. Tôi chưa chứng minh điều này một cách chắc chắn, nhưng dựa trên cách Claude sử dụng token, những gì tôi nhận thấy là nếu bạn đang ở trong một project và nó trở nên rất, rất dài mà bạn vẫn chưa đạt được điều mình muốn, có thể bạn nên export cái này và sau đó mở một session mới. Bạn sẽ không thực sự bắt đầu lại từ đầu (square one). Bạn đang iterate dựa trên một thứ đã được xây dựng và bạn đang thực hiện một số thay đổi, nhưng bây giờ bạn có ngữ cảnh mới vì tất cả điều này có thể bắt đầu làm ô nhiễm cửa sổ ngữ cảnh (context window) và nó có thể dẫn đến một số lỗi (rot) và có thể dẫn đến các token không được cache và sau đó bạn về cơ bản chỉ xử lý chúng lại. Vì vậy, đó là điều cần ghi nhớ. Bạn cũng có thể vào đây và gõ /clear và nó sẽ nói, "Đã xóa (cleared), chúng tôi sẵn sàng cho hướng dẫn tiếp theo (next instruction)." Đó cũng là một điều khác để thử nghiệm, nhưng tôi không thể nói chắc chắn rằng điều đó thực sự xóa tất cả những thứ này khỏi cửa sổ ngữ cảnh. Tôi chưa thấy chắc chắn về điều đó.

Các phương pháp hay nhất để tối ưu chi phí và giới hạn

Vì vậy, các phương pháp hay nhất để kéo dài giới hạn. Chúng ta đã nói rất nhiều về điều đó. Tôi vừa chỉ cho các bạn cách xuất tệp zip khi bạn nén project thực tế của mình hoặc một design system. Chúng ta đã nói về model theo giai đoạn. Vì vậy, có thể bạn có thể sử dụng Opus 4.7 ở giai đoạn đầu để lập kế hoạch một chút hoặc khi bạn cần những thay đổi thực sự lớn, nhưng hãy chuyển sang Sonnet 4.6. Tôi đã sử dụng Sonnet 4.6 cho rất nhiều bản dựng khác nhau và nó có thể tạo ra video, tạo animations và tạo slide decks và nó hoạt động rất tốt. Tôi nghĩ rằng cuối cùng, Sonnet 4.6 thực sự tốt. Và nếu bạn siêu rõ ràng và siêu cụ thể về những gì bạn muốn, thì bạn có thể hoàn thành rất nhiều việc với Sonnet 4.6. Vì vậy, nó chắc chắn đáng để thử nghiệm.

Mẹo prompt hiệu quả và các tùy chọn xuất

Và sau đó là một số mẹo nhanh khác: một chiều kích hình ảnh (visual dimension) cho mỗi câu lệnh. Vì vậy, đừng cố gắng đưa vào một câu lệnh lớn (mega prompt) với nội dung kiểu "này, thay đổi XYZ, ABC, DEF và G". Tôi biết một số người có thể không đồng ý với điều này vì đôi khi trong Claude Code bạn muốn gửi một câu lệnh lớn để nó có thể tạo danh sách việc cần làm (to-do list) và bắt đầu iterate. Nhưng những gì tôi nhận thấy ở đây là khi tôi yêu cầu nhiều thay đổi lớn khác nhau trong một câu lệnh, nó chỉ thực hiện tốt một hoặc hai trong số chúng và phần còn lại thì bị bỏ qua. Vì vậy, tôi đã tìm thấy nhiều thành công hơn. Và khi tôi nói về việc hiệu quả với câu lệnh của mình, tôi đã tìm thấy nhiều thành công hơn khi thực hiện một thay đổi lớn chính cho mỗi câu lệnh.

Cũng tốt khi sử dụng các phủ định. Vì vậy, hãy nói cho nó biết bạn không muốn gì. Hãy nói cho nó biết nếu bạn không muốn những phông chữ này hoặc nếu bạn không muốn những phối màu này để sau này bạn không phải chỉnh sửa lại. Bạn cũng có thể tham chiếu những thứ thực tế. Ví dụ, nói "linear 2023 với mật độ cao hơn" thay vì chỉ nói "này, làm cho nó sạch sẽ" hoặc "làm cho nó tối giản". Rõ ràng là chỉ ra và bình luận về mọi thứ, vẽ trên mọi thứ và sau đó yêu cầu prototypes, flows, demos.

Và tất nhiên, bạn có thể xuất toàn bộ HTML đó. Bạn có thể xuất nó sang Figma. Bạn có thể xuất nó sang Canva. Bạn có thể xuất nó sang PowerPoint. Bạn có thể lấy nó ra khỏi đó và sau đó thực hiện các chỉnh sửa cần thiết nếu bạn không thực sự cần sử dụng Claude design cho những việc mà bạn có thể làm khá dễ dàng và nhanh chóng bằng tay.

Hạn chế về tải lên tệp và chiến lược chuyển đổi giữa Claude design và Claude Code

Một số điều khác cần lưu ý là tải lên tệp (file uploads). Tôi đã có thể tải lên các tệp MP4 như các bạn đã thấy. Tôi đã có thể chỉnh sửa một số video, nhưng có một giới hạn. Và tôi nghĩ nó có thể là 30 megabyte. Nó có thể là 40, hoặc có thể nhiều hơn một chút. Nhưng nếu bạn cố gắng tải lên một video dài năm phút, có lẽ nó sẽ không cho phép bạn. Cũng có thể chỉ là một lỗi vì đây là bản xem trước nghiên cứu (research preview) và vì mọi người đều đang sử dụng nó. Hầu hết, bạn có thể tải lên nhiều assets khác nhau. Và càng nhiều thứ bạn có thể tải lên ngay lập tức, nó càng có nhiều ngữ cảnh và bạn càng ít phải lặp lại chính mình và khắc phục mọi thứ.

Và đây chỉ là một số hạn chế nhanh khác cần lưu ý. Tôi sẽ không đọc hết tất cả những điều này vì tôi cảm thấy mình đã đề cập đến rất nhiều điều trong số đó rồi. Nhưng hãy tạm dừng nhanh nếu bạn muốn xem điều này. Và như tôi đã nói, tài liệu miễn phí (free doc) mà tôi sẽ chia sẻ trong cộng đồng cũng sẽ có rất nhiều nội dung kiểu này.

Được rồi, vậy là xong cho ngày hôm nay. Bây giờ điều bạn có thể làm tiếp theo là xem video này ở trên, nơi tôi nói về các thủ thuật website khác và cụ thể là trong Claude Code, bởi vì điều có thể xảy ra là nếu bạn tiêu hết giới hạn của mình trong Claude design, nhưng bạn muốn tiếp tục hoặc bất cứ điều gì bạn muốn tiếp tục xây dựng, chỉ cần làm theo những gì tôi đã chỉ cho bạn: xuất project Claude design của bạn, đưa nó vào Claude Code. Và bây giờ bạn có thể tiếp tục làm việc trên Claude Code vì bạn có nhiều quyền sử dụng hơn, sau đó chỉ cần chờ cho đến khi quyền sử dụng của bạn được đặt lại trên design và sau đó đưa nó trở lại design. Nhưng đó là tất cả cho buổi masterclass hôm nay. Tôi hy vọng các bạn thích và nếu có, vui lòng thích nó. Nó giúp tôi rất nhiều. Đừng quên tham gia cộng đồng trường học miễn phí của tôi nếu bạn muốn xem hướng dẫn tài nguyên từ video này cũng như mọi tài nguyên miễn phí khác mà tôi từng chia sẻ trên YouTube. Một lần nữa, đó là hoàn toàn miễn phí để tham gia.

Lời kết và kêu gọi hành động

Vì vậy, nếu thông tin này hữu ích, hãy cân nhắc đăng ký kênh và xem thêm nhiều video khác trên kênh của tôi, nơi tôi phân tích các chủ đề tương tự. Như thường lệ, tôi cảm ơn các bạn đã theo dõi đến cuối video và hẹn gặp lại tất cả các bạn trong video tiếp theo. Cảm ơn mọi người.

TL;DR

Claude design là một công cụ thiết kế AI mạnh mẽ của Anthropic, giúp người dùng tạo ra các tài sản hình ảnh nhất quán, chuyên nghiệp (trang web, video, prototype) chỉ bằng ngôn ngữ tự nhiên.
Công cụ này hoạt động trên mô hình thị giác Open 4.7 tiên tiến và có khả năng xây dựng các Hệ thống thiết kế để đảm bảo nhận diện thương hiệu đồng bộ.
Để tối ưu chi phí và sử dụng hiệu quả, người dùng cần quản lý giới hạn phiên và token bằng cách thực hiện các bước lên ý tưởng bên ngoài Claude design trước khi tiến hành xây dựng.

Điểm chính

Truy cập Claude design thông qua nút "design" trên nền tảng web của Claude hoặc tìm kiếm trực tiếp để mở ứng dụng riêng biệt.
Ưu tiên xây dựng một "Hệ thống thiết kế" (Design System) ngay từ đầu để đảm bảo tính nhất quán về thương hiệu và tiết kiệm token về lâu dài.
Để tiết kiệm giới hạn phiên và token trong Claude design, hãy thực hiện các bước lên ý tưởng và động não về thương hiệu (ví dụ: logo, màu sắc, kiểu chữ) trong Claude Chat trước khi chuyển sang Claude design.
Cung cấp đầy đủ thông tin khi tạo Hệ thống thiết kế, bao gồm tên công ty, sứ mệnh, URL trang web, kho lưu trữ GitHub hoặc mô tả chi tiết về phong cách và các thành phần mong muốn.
Hệ thống thiết kế có thể được chia sẻ giữa các nhóm (với gói Team) và xuất ra nhiều định dạng (Zip, HTML, PDF) để tích hợp với các công cụ khác như Claude Code, Canva.
Claude design yêu cầu gói trả phí (Pro, Max, Team/Enterprise); giới hạn sử dụng khác biệt và tăng lên theo cấp độ gói, đặt lại hàng tuần hoặc có thể mua thêm.
Khi xây dựng các tài sản thực tế (trang web, nút, trường), hãy cụ thể hóa các yêu cầu về kiểu dáng (ví dụ: nút hiện đại, có hiệu ứng phát sáng nhẹ) để AI tạo ra kết quả chính xác hơn.

Từ vựng

Claude design — Công cụ thiết kế AI
Design Systems — Hệ thống thiết kế
Prototype — Nguyên mẫu
Session Limit / Token Limit — Giới hạn phiên / Giới hạn token
Vision Model — Mô hình thị giác
Branding / Brand Identity — Bộ nhận diện thương hiệu
Ideate / Brainstorm — Lên ý tưởng / Động não
Typography — Kiểu chữ
Pitch Deck — Bài thuyết trình kêu gọi đầu tư
Workflow — Quy trình làm việc

Nội dung chi tiết

Giới thiệu về Claude design

Quy trình xây dựng thương hiệu với Claude design

Tối ưu hóa việc sử dụng và tận dụng Claude design

Claude design là gì?

Cấu trúc khóa học: Các giai đoạn chính

Sức mạnh của Claude design và mô hình Open 4.7

Yêu cầu sử dụng Claude design

Bắt đầu với Claude design: Giao diện và tạo dự án

Tầm quan trọng của Hệ thống thiết kế (Design Systems)

Lợi ích của việc chia sẻ Hệ thống thiết kế

Cách xây dựng Hệ thống thiết kế

Động não thương hiệu bên ngoài Claude design để tiết kiệm chi phí

Lên ý tưởng và Phát triển Khái niệm Thương hiệu với Claude

Ý tưởng Logo và Hướng dẫn Thương hiệu thu nhỏ

Tạo Hệ thống Thiết kế trong Claude Design

Ứng dụng mô hình hình ảnh GPT-2 của ChatGPT trong thiết kế

Đánh giá và Phản hồi về Hệ thống Thiết kế

Hoàn thiện, Xuất bản và Kiểm tra Mức sử dụng

Xây dựng hệ thống thiết kế và hành trình dự án

Tài liệu hướng dẫn và bắt đầu với bài thuyết trình gọi vốn

Giao diện Claude Design và chuẩn bị nội dung

Tối ưu hóa quy trình với Claude và Claude Design

Định hình cấu trúc và nghiên cứu thị trường với Claude

Dàn ý bài thuyết trình và hiệu quả làm việc

Sức mạnh của Glido và lựa chọn mô hình AI

Chiến lược lựa chọn mô hình cho các giai đoạn khác nhau

Đánh giá và điều chỉnh bài thuyết trình gọi vốn

Khám phá nội dung bài thuyết trình Tally

Thông tin chi tiết về thị trường, chiến lược và tương lai

Chỉnh Sửa Trực Tiếp và Công Cụ Vẽ

Tùy Chỉnh Thiết Kế (Tweaks)

Hoàn Tất Bài Thuyết Trình và Chuyển Sang Dự Án Mới

Thiết Kế Bố Cục Sườn Cho Trang Đích

Kết Quả Thiết Kế Bố Cục Sườn

Phân tích Thiết kế Ban Đầu

Xuất HTML và Bắt Đầu Lại

Thêm Yếu Tố Động và Phác Thảo Thiết Kế

Gửi Câu Lệnh và Nhận Phản Hồi Ban Đầu từ Claude

Đánh Giá Thiết Kế Đầu Tiên của Claude

Các Điều Chỉnh Thiết Kế

Tinh chỉnh và Trình bày Trang web

Tùy chọn Triển khai và Lưu trữ

Ví dụ Website và Nguồn Cảm hứng Thiết kế

Tạo Hướng dẫn Thương hiệu (Brand Guidelines)

Đánh giá Hướng dẫn Thương hiệu đã Tạo

Lên ý tưởng Nguyên mẫu Ứng dụng Di động

Câu hỏi từ Claude và Thiết kế Mockup Ban đầu

Đánh giá và Phản hồi về Thiết kế

Tinh chỉnh Thiết kế và Sửa lỗi

Các Dự án Trước đây với Claude Design và Giới thiệu Hyperframes

Tạo Video Ra Mắt Bằng Claude Design

Cải Thiện Video: Từ Nhạt Nhẽo Đến Hấp Dẫn

Tối Ưu Hóa Chi Phí và Tận Dụng HyperFrames

Các Chiến Lược Hiệu Quả Khi Làm Việc Với AI

Bây giờ từ đây, tôi muốn nói thêm điều gì nữa? Đó là bốn moves (bước) có tác dụng compound (tích lũy):

Reference (Tham chiếu), đừng describe (mô tả). Vì vậy, hãy cung cấp screenshots (ảnh chụp màn hình) thực tế của mọi thứ, đưa ra advice (lời khuyên) cụ thể, bạn biết đấy, làm nổi bật các elements (yếu tố) bạn muốn thay đổi, tự mình thực hiện các changes (thay đổi), draw (vẽ) mọi thứ, thêm các tweaks (chỉnh sửa nhỏ). Việc câu lệnh của bạn càng specific (cụ thể) càng tốt sẽ giúp ích cho bạn, và đó cũng là lý do tại sao việc thực hiện nhiều planning (lập kế hoạch) của bạn bên trong Claude thông thường và sau đó đưa refined plan (kế hoạch tinh chỉnh) đó vào Claude Design sẽ giúp ích cho bạn rất nhiều.
Đừng sử dụng defaults (mặc định). Bạn biết đấy, đó là nơi bạn nhận được AI Slop (sản phẩm AI kém chất lượng), và đó là lý do tại sao chúng ta có những thứ như, bạn biết đấy, front end design (thiết kế giao diện người dùng) trong Claude, chúng ta có tất cả những thứ khác mà chúng ta có thể làm, nhưng nếu bạn không đưa vào spin (phong cách) riêng của mình cho copy (nội dung), hệ thống thiết kế của riêng bạn, thì nó sẽ cảm thấy generic (chung chung) hơn rất nhiều.
Làm hệ thống thiết kế trước. Đừng xây dựng năm cái, mà hãy xây dựng một cái, xây dựng nó thật tốt và chia sẻ nó với team (nhóm) của bạn để mọi thứ cảm thấy consistent (nhất quán). Bạn rõ ràng có thể iterate (lặp lại) trên điều đó. Nếu sau này bạn có một loại button (nút) khác mà bạn muốn thay đổi, chỉ cần thay đổi nó trong hệ thống thiết kế của bạn. Nếu bạn kết thúc việc thay đổi logo hoặc colors (màu sắc) của mình, chỉ cần thay đổi nó.
Iterate in chunks (Lặp lại từng phần). Tôi thấy tốt nhất là nếu bạn cố gắng làm cho Claude thực hiện khoảng năm changes (thay đổi) trong một câu lệnh, nó sẽ mất dấu những thứ đó, và nó không làm tốt công việc. Vì vậy, iterate one feature (lặp lại một tính năng) tại một thời điểm.

Giới Hạn Sử Dụng và Lựa Chọn Mô Hình AI

Tối ưu Hóa Việc Sử Dụng `Claude Design`

Xây Dựng Dự Án Website Minh Họa

Chuyển Đổi Website Bằng `Claude Design`

Quy Trình Tạo Website Từ Ý Tưởng Đến Triển Khai

Phát Triển Ý Tưởng Thương Hiệu Và Nội Dung

Tạo Video Nền Động Cho `Hero Section`

Bắt Đầu Thiết Kế Trong `Claude Design`

Tích Hợp Nội Dung Và Hướng Dẫn `Claude Design`

Tạo và Tối Ưu Thiết Kế Ban Đầu với Claude Opus 4.7

Nguồn Cảm Hứng Thiết Kế từ Motioncites.ai

Đánh giá Iteration đầu tiên trong Claude Design

Các Cơ Chế Lặp Lại và Phản Hồi Hiệu Quả

Khám phá Khả năng Thiết kế với Bảng Điều Chỉnh Tùy Chỉnh (Tweaks Panel)

Tùy chỉnh Giao diện và Tiết kiệm `Prompt`

Phát triển `Project` theo `Section`

Chuẩn bị `Project` để Triển khai

Làm việc với `Claude Code` và `GitHub`

Triển khai `Website` lên `Vercel`

Xử lý Lỗi Triển khai trên `Vercel`

Tối ưu hóa cho thiết bị di động với Claude design và Claude Code

Claude design: Một sản phẩm chuyên biệt

Hạn mức sử dụng và cách tối ưu token

Các phương pháp hay nhất để giảm tiêu thụ token

Hệ thống thiết kế (Design System) và khả năng xuất nhập

Quản lý ngữ cảnh và vòng lặp iteration

Các phương pháp hay nhất để tối ưu chi phí và giới hạn

Mẹo prompt hiệu quả và các tùy chọn xuất

Hạn chế về tải lên tệp và chiến lược chuyển đổi giữa Claude design và Claude Code

Lời kết và kêu gọi hành động

Góp ý / Báo lỗiPhát hiện sai sót hoặc có ý tưởng cải thiện?

Giới thiệu về Claude design

Quy trình xây dựng thương hiệu với Claude design

Tối ưu hóa việc sử dụng và tận dụng Claude design

Claude design là gì?

Cấu trúc khóa học: Các giai đoạn chính

Sức mạnh của Claude design và mô hình Open 4.7

Yêu cầu sử dụng Claude design

Bắt đầu với Claude design: Giao diện và tạo dự án

Tầm quan trọng của Hệ thống thiết kế (Design Systems)

Lợi ích của việc chia sẻ Hệ thống thiết kế

Cách xây dựng Hệ thống thiết kế

Động não thương hiệu bên ngoài Claude design để tiết kiệm chi phí

Lên ý tưởng và Phát triển Khái niệm Thương hiệu với Claude

Ý tưởng Logo và Hướng dẫn Thương hiệu thu nhỏ

Tạo Hệ thống Thiết kế trong Claude Design

Ứng dụng mô hình hình ảnh GPT-2 của ChatGPT trong thiết kế

Đánh giá và Phản hồi về Hệ thống Thiết kế

Hoàn thiện, Xuất bản và Kiểm tra Mức sử dụng

Xây dựng hệ thống thiết kế và hành trình dự án

Tài liệu hướng dẫn và bắt đầu với bài thuyết trình gọi vốn

Giao diện Claude Design và chuẩn bị nội dung

Tối ưu hóa quy trình với Claude và Claude Design

Định hình cấu trúc và nghiên cứu thị trường với Claude

Dàn ý bài thuyết trình và hiệu quả làm việc

Sức mạnh của Glido và lựa chọn mô hình AI

Chiến lược lựa chọn mô hình cho các giai đoạn khác nhau

Đánh giá và điều chỉnh bài thuyết trình gọi vốn

Khám phá nội dung bài thuyết trình Tally

Thông tin chi tiết về thị trường, chiến lược và tương lai

Chỉnh Sửa Trực Tiếp và Công Cụ Vẽ

Tùy Chỉnh Thiết Kế (Tweaks)

Hoàn Tất Bài Thuyết Trình và Chuyển Sang Dự Án Mới

Thiết Kế Bố Cục Sườn Cho Trang Đích

Kết Quả Thiết Kế Bố Cục Sườn

Phân tích Thiết kế Ban Đầu

Xuất HTML và Bắt Đầu Lại

Thêm Yếu Tố Động và Phác Thảo Thiết Kế

Gửi Câu Lệnh và Nhận Phản Hồi Ban Đầu từ Claude

Đánh Giá Thiết Kế Đầu Tiên của Claude

Các Điều Chỉnh Thiết Kế

Tinh chỉnh và Trình bày Trang web

Tùy chọn Triển khai và Lưu trữ

Ví dụ Website và Nguồn Cảm hứng Thiết kế

Tạo Hướng dẫn Thương hiệu (Brand Guidelines)

Đánh giá Hướng dẫn Thương hiệu đã Tạo

Lên ý tưởng Nguyên mẫu Ứng dụng Di động

Câu hỏi từ Claude và Thiết kế Mockup Ban đầu

Đánh giá và Phản hồi về Thiết kế

Tinh chỉnh Thiết kế và Sửa lỗi

Các Dự án Trước đây với Claude Design và Giới thiệu Hyperframes

Tạo Video Ra Mắt Bằng Claude Design

Cải Thiện Video: Từ Nhạt Nhẽo Đến Hấp Dẫn

Tối Ưu Hóa Chi Phí và Tận Dụng HyperFrames

Các Chiến Lược Hiệu Quả Khi Làm Việc Với AI

Giới Hạn Sử Dụng và Lựa Chọn Mô Hình AI

Tối ưu Hóa Việc Sử Dụng Claude Design

Xây Dựng Dự Án Website Minh Họa

Chuyển Đổi Website Bằng Claude Design

Quy Trình Tạo Website Từ Ý Tưởng Đến Triển Khai

Phát Triển Ý Tưởng Thương Hiệu Và Nội Dung

Tạo Video Nền Động Cho Hero Section

Bắt Đầu Thiết Kế Trong Claude Design

Tích Hợp Nội Dung Và Hướng Dẫn Claude Design

Tạo và Tối Ưu Thiết Kế Ban Đầu với Claude Opus 4.7

Nguồn Cảm Hứng Thiết Kế từ Motioncites.ai

Đánh giá Iteration đầu tiên trong Claude Design

Các Cơ Chế Lặp Lại và Phản Hồi Hiệu Quả

Khám phá Khả năng Thiết kế với Bảng Điều Chỉnh Tùy Chỉnh (Tweaks Panel)

Tùy chỉnh Giao diện và Tiết kiệm Prompt

Phát triển Project theo Section

Chuẩn bị Project để Triển khai

Làm việc với Claude Code và GitHub

Triển khai Website lên Vercel

Xử lý Lỗi Triển khai trên Vercel

Tối ưu hóa cho thiết bị di động với Claude design và Claude Code

Claude design: Một sản phẩm chuyên biệt

Hạn mức sử dụng và cách tối ưu token

Các phương pháp hay nhất để giảm tiêu thụ token

Hệ thống thiết kế (Design System) và khả năng xuất nhập

Quản lý ngữ cảnh và vòng lặp iteration

Tối ưu Hóa Việc Sử Dụng `Claude Design`

Chuyển Đổi Website Bằng `Claude Design`

Tạo Video Nền Động Cho `Hero Section`

Bắt Đầu Thiết Kế Trong `Claude Design`

Tích Hợp Nội Dung Và Hướng Dẫn `Claude Design`

Tùy chỉnh Giao diện và Tiết kiệm `Prompt`

Phát triển `Project` theo `Section`

Chuẩn bị `Project` để Triển khai

Làm việc với `Claude Code` và `GitHub`

Triển khai `Website` lên `Vercel`

Xử lý Lỗi Triển khai trên `Vercel`

Tối ưu Hóa Việc Sử Dụng `Claude Design`

Chuyển Đổi Website Bằng `Claude Design`

Tạo Video Nền Động Cho `Hero Section`