Cách tôi xây dựng lại trang đích của mình trong 4 giờ với Claude

@DhravyaShah
TIẾNG ANH3 tháng trước · 15 thg 4, 2026
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah chia sẻ quy trình làm việc của mình để xây dựng lại trang đích của Supermemory trong bốn giờ bằng cách sử dụng Claude Code, các kỹ năng hoạt họa SVG tùy chỉnh và tích hợp ngữ cảnh AI để bỏ qua sự chậm trễ từ các công ty thiết kế truyền thống.

Tốc độ lặp là điều quan trọng nhất đối với các startup. Phiên bản đầu tiên của trang landing page của chúng tôi được xây dựng bởi một trong những công ty thiết kế hàng đầu. Sau đó, chúng tôi xây dựng lại nó sau vài tháng - lần này là một công ty khác.

Những thay đổi lớn này diễn ra xuyên suốt các giai đoạn khác nhau trong hành trình của supermemory, khi sản phẩm, thương hiệu và nhiều thứ khác của chúng tôi liên tục phát triển, chúng tôi cũng liên tục cải tiến cách truyền tải thông điệp trong marketing.

Các công ty thiết kế thực sự rất xuất sắc! Họ đã mang đến rất nhiều giá trị về thương hiệu và nhận diện cho thương hiệu supermemory ngày nay. Tôi thực sự biết ơn họ vì tất cả sự giúp đỡ cho đến nay.

Tuy nhiên, tôi có một vấn đề duy nhất.

Tốc độ lặp.

Thời thế đã thay đổi. Thực sự - Nếu bạn không còn là AI native nữa, bạn sẽ không thể thành công.

Dhravya Shah - inline image

Vòng lặp phản hồi

Một trong những lần đó, tôi hỏi công ty thiết kế: Tiến độ của dự án này là bao lâu?

Tôi đã mong đợi vài ngày - hoặc một tuần. Nhưng, họ quay lại với một kế hoạch lớn với nhiều tầng công việc - 2 tuần để hình dung nó sẽ trông như thế nào, 1 tuần sau đó để triển khai, v.v.

Toàn bộ dự án sẽ mất hàng tháng trời, và sau đó trang landing page sẽ nằm trên framer. Những thứ khác? App, thiết kế console - chúng tôi phải tự triển khai thiết kế của họ sau khi họ hoàn thành.

Lời nguyền của no code

Trước khi Claude Code trở nên tốt như bây giờ, trang landing page của chúng tôi hoàn toàn nằm trên framer - Được duy trì hoàn toàn bởi những người thực sự thiết kế nó. Họ có gu thẩm mỹ, và rõ ràng là rất nhiều công sức và nỗ lực đã được đầu tư vào đó. Nhưng, bất kỳ thay đổi nào cũng cần những người biết framer để thực hiện.

Nó trở thành một lời nguyền thực sự. Việc thêm các trang marketing, blog, v.v. trở nên rất đau đầu. Trang web tải quá nhiều javascript hoặc không tốt cho SEO hoặc các hiệu ứng hoạt hình làm nghẽn trình duyệt - Và chúng tôi chỉ còn cách yêu cầu họ cải thiện.

Và chúng tôi thực sự không biết chính xác cách cải thiện nó - Thật khó cho chúng tôi (vì lúc đó mọi người ở supermemory đều là developer) để thực hiện các bài kiểm tra A/B hoặc tìm ra cách truyền tải thông điệp tốt nhất, hoặc cải thiện nội dung. Bên cạnh việc trả tiền cho các nhà thiết kế, chúng tôi còn trả hàng nghìn đô la mỗi năm cho Framer. Đối với bất kỳ thay đổi nào, tôi không thể chỉ yêu cầu agent của mình thực hiện. Tôi phải nói với họ, một cách chi tiết, cách thực hiện. và sau đó làm việc với họ một cách lặp đi lặp lại cho đến khi nó phù hợp với chúng tôi.

Tôi quyết định loại bỏ tất cả. kệ nó. Tôi sẽ tự làm trang landing page.

Thiết kế tuyệt vời với Claude Code

Tôi không phải là nhà thiết kế. Nhưng bạn nên xem thử https://supermemory.ai - Nó được xây dựng chỉ trong 4 giờ với Claude Code.

Đúng vậy. Tôi bắt đầu bằng cách hỏi Claude chính xác những gì chúng tôi nên truyền tải đến người dùng và tìm ra nội dung.

Toàn bộ quá trình này chỉ là một phiên duy nhất của Claude Opus 4.6 1M.

Chuẩn bị các kỹ năng.

Dựa trên kế hoạch của mình, tôi biết rằng tôi muốn Claude thực hiện các hiệu ứng hoạt hình SVG thực sự tốt. Tôi lùng sục internet để tìm các khóa học hoạt hình SVG tốt nhất, ghi chép lại, và tạo thành một kỹ năng từ những kiến thức tốt nhất. Kỹ năng này không lớn, nhưng nó đủ để đảm bảo nền tảng vững chắc.

Một subagent đã chuẩn bị kỹ năng này. https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

Tương tự, tôi chuẩn bị các kỹ năng cơ bản cần thiết cho tất cả những thứ mà tôi biết mình muốn một nhà thiết kế biết.

Dhravya Shah - inline image

Phần này, ví dụ, được thực hiện hoàn toàn bằng các hiệu ứng hoạt hình SVG.

Xây dựng công cụ.

Đối với nhiều hình ảnh trực quan, tôi biết mình sẽ cần một số thư viện - Cụ thể là cho hoạt hình Ascii art và các hiệu ứng pixel hóa.

Vì vậy, tôi đã gửi hai subagent để tìm ra cách tốt nhất để thực hiện các hiệu ứng hoạt hình này trên web, một cách hiệu quả, và xây dựng một package từ đó để không làm rối phần thiết kế chính.

Claude tự động tạo một package, đưa nó lên Github của tôi tại đây - https://github.com/dhravya/landing-effects và thậm chí còn ghi lại và thêm các GIF để hiển thị các hiệu ứng hoạt hình sẽ trông như thế nào.

Dhravya Shah - inline image
Dhravya Shah - inline image

Khép kín vòng lặp với bộ nhớ tốt

Trong suốt phiên làm việc, tôi đảm bảo rằng Claude thực sự nhìn và suy nghĩ về giao diện này trông như thế nào. Nó cũng biết tất cả các yêu cầu kinh doanh, những gì nhóm của chúng tôi quan tâm và những gì người dùng của chúng tôi đang yêu cầu, vì tôi đang sử dụng plugin Supermemory Claude code.

Chúng tôi đã đưa tất cả các bản ghi khách hàng và cuộc họp nhóm vào supermemory nội bộ của nhóm mình, và các phiên coding cũng nhận được điều tương tự. Bởi vì Claude đã biết mọi thứ về những gì chúng tôi làm và chúng tôi là ai, nó đã có thể đưa ra một ngôn ngữ và chiến lược thiết kế giúp tăng tỷ lệ chuyển đổi của chúng tôi lên 40%. https://github.com/supermemoryai/claude-supermemory

Phần chính không chỉ là bộ nhớ tốt cho Claude - supermemory làm điều đó rất tốt. Phần chính là thực tế rằng bộ nhớ và ngữ cảnh này được thu thập không chỉ từ các phiên coding mà còn từ cuộc sống hàng ngày của chúng tôi, các cuộc trò chuyện trên claude.ai, các agent openclaw của nhóm, và nhiều hơn nữa.

Tính hoàn chỉnh

Tôi yêu cầu nó phân tích toàn bộ trang về hiệu suất và SEO - và nó đã làm được.

Dhravya Shah - inline image

Nó có thể trông hơi vibe coded - Và điều đó ổn với tôi. Tôi biết rằng tôi có thể lặp đi lặp lại để đạt đến sự tuyệt vời thay vì chờ đợi hàng tháng trời để ra mắt bất cứ thứ gì.

AI native - kết nối nó với một background agent

Chúng tôi chỉ có 4 nhân viên toàn thời gian xây dựng supermemory. Chỉ có vậy. Và điều đó bao gồm cả tôi - một founder solo.

Một trong số họ, là người không có chuyên môn kỹ thuật, có thể thực hiện tất cả công việc trên các trang landing page, một cách tự động, với một background agent.

Dhravya Shah - inline image

Điều đó có nghĩa là mọi người trong nhóm bây giờ đều là nhà thiết kế, chỉ với đủ số vòng lặp.

Chúng ta đang sống trong một thời kỳ điên rồ. Hầu hết công việc thiết kế có thể (và nên) được thực hiện bởi nhóm khi chúng ta đang tìm hiểu mọi thứ.

Thiết kế chắc chắn rất quan trọng cho sản phẩm - Nhưng hầu hết mọi người có lẽ đang trả quá nhiều tiền cho nó.

Viết lại trong YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
Dành cho nhà sáng tạo

Biến Markdown của bạn thành bài viết 𝕏 gọn gàng

Khi bạn đăng bài viết dài của riêng mình, việc định dạng hình ảnh, bảng và khối mã cho 𝕏 rất mệt mỏi. YouMind biến cả bản nháp Markdown thành một bài viết 𝕏 gọn gàng, sẵn sàng để đăng.

Thử Markdown sang 𝕏

Thêm pattern để giải mã

Bài viết viral gần đây

Khám phá thêm bài viết viral