Xây dựng website cuộn độc đáo với Scrollcraft và Claude Code

Scrollcraft là gì?

Scrollcraft là một skill của Claude Code để xây dựng các website cao cấp, điều khiển bằng thao tác cuộn, đồng thời duy trì tiêu chuẩn nhất quán về chất lượng thiết kế. Skill này xem tương tác, định hướng hình ảnh, kiểu chữ, khoảng cách, màu sắc, chiều sâu và việc kiểm tra là các phần của cùng một quy trình.

Thay vì liên tục tạo ra một chuỗi quen thuộc gồm hero, các thẻ tính năng, lời chứng thực và các phần kêu gọi hành động, Scrollcraft bắt đầu bằng việc chọn một ngữ pháp trang. Ngữ pháp đó quyết định trải nghiệm chuyển động ra sao, được điều hướng như thế nào và cần tránh những mô thức quen thuộc nào.

Skill này có thể cho video chạy theo từng khung hình khi người đọc cuộn, ghim các cảnh trong lúc một lập luận được triển khai, di chuyển các thanh ngang, ghép tiêu đề theo từng dòng, chuyển đổi nền trang và phản hồi chuyển động của con trỏ. Mỗi bản dựng cũng phải giới thiệu một tương tác đặc trưng được thiết kế riêng cho chính website đó.

Cách Scrollcraft giữ cho các bản dựng khác biệt

Scrollcraft cung cấp tám ngữ pháp trang loại trừ lẫn nhau:

• Filmic one-shot: Một bài trình bày điện ảnh liền mạch.
• Chaptered editorial: Một chuỗi chương biên tập có cấu trúc.
• Live surface: Một bề mặt phản hồi được điều khiển bởi tương tác.
• Continuous world: Một sân khấu cố định duy nhất, không có ranh giới phần hiển thị.
• Typographic poster: Một bố cục chủ yếu được dẫn dắt bằng kiểu chữ.
• Gallery: Một trải nghiệm được tổ chức xoay quanh các tác phẩm thị giác.
• Split stage: Một bài trình bày phân chia với các khu vực nội dung được phối hợp.
• Rhythmic cutlist: Một chuỗi được định hình bằng những nhịp cắt hình ảnh có chủ đích.

Đây không phải là những theme có thể thay thế cho nhau. Mỗi ngữ pháp yêu cầu một số lựa chọn cấu trúc và cấm những lựa chọn khác, qua đó giảm khả năng các dự án riêng biệt âm thầm hội tụ về cùng một bộ khung.

PERKFORM thể hiện hướng tiếp cận điện ảnh, lấy sản phẩm làm trọng tâm. Trang sử dụng cách trình bày one-shot và những cú cắt mạnh sang các nền đảo màu tràn viền, thay vì dựa vào một chuỗi phần thông thường.

Fallowbank cho thấy cùng một skill có thể tạo ra cách xử lý phim tài liệu tiết chế, sử dụng nội dung như nhãn bảo tàng phủ trên ảnh và kết thúc bằng dòng chữ chạy thay vì một nút bấm tiêu chuẩn.

Cổng kiểm tra dấu vân tay

Sau dự án đầu tiên, mỗi bản dựng mới sẽ được so sánh với các sản phẩm trước đó của bạn. Nó phải khác biệt ở ít nhất bốn trong sáu khía cạnh: ngữ pháp, điều hướng, hero, hình dạng hồi, đoạn kết và chuyển động đặc trưng. Nếu không đạt, kế hoạch phải thay đổi thay vì làm yếu hoặc viết lại bản ghi.

Bản dựng đầu tiên không cần vượt qua dấu vân tay hiện có vì sổ đăng ký bắt đầu ở trạng thái trống. Đây là chủ ý thiết kế: cổng kiểm tra nhằm ngăn bạn lặp lại chính sản phẩm của mình.

Tiêu chuẩn thiết kế và tương tác

Trước khi xác định từng hồi riêng lẻ, Scrollcraft tạo ra một đường cong cảm xúc. Mỗi hồi được gán một cảm xúc mong muốn và một nguyên nhân hiển thị trên màn hình. Nếu hai hồi liền kề tạo ra cùng một cảm giác, một trong hai có thể là không cần thiết.

Sau đó, trang được tổ chức xoay quanh một cao trào được thiết kế có chủ đích. Khoảnh khắc đó nhận được ngân sách tài sản lớn nhất, đủ khoảng lặng trước khi diễn ra và đủ quãng cuộn. Cách này áp dụng trực tiếp quy tắc cao trào-kết thúc thay vì xem mọi phần đều có mức độ kịch tính như nhau.

Quy tắc chế tác

• Kiểu chữ: Không quá hai họ phông chữ, tracking được kiểm soát, độ dài dòng từ 45 đến 75 ký tự và chiều cao dòng được điều chỉnh theo độ dài dòng.
• Khoảng cách: Thang cơ sở 4px, khoảng cách phía trên tiêu đề lớn hơn phía dưới và phần đệm linh hoạt của các phần thích ứng với màn hình nhỏ hơn.
• Màu sắc: Sáu vai trò màu và một màu nhấn, văn bản phụ được nhuộm màu, không dùng đen tuyệt đối và hỗ trợ các cú cắt có chủ đích giữa nền sáng và tối.
• Chiều sâu: Bóng lệch, ánh sáng cạnh, tỷ lệ và độ mờ, chồng lớp cùng hiệu ứng hạt được xem là những công cụ riêng biệt.
• Tuân thủ thương hiệu: Các quy tắc từ bộ nhận diện thương hiệu được cung cấp sẽ ghi đè mặc định của Scrollcraft, bao gồm những hạn chế cấm các kỹ thuật mà skill này có thể lựa chọn nếu không có quy tắc đó.

Skill này cũng từ chối các lối tắt thiết kế phổ biến do AI tạo ra, bao gồm lưới thẻ tính năng giống hệt nhau, bộ đếm mang tính trang trí, chỉ dẫn cuộn chung chung, văn bản chuyển màu, số liệu bịa đặt, bảng điều khiển giả, gradient tím kiểu AI và bảng màu thương hiệu thủ công mặc định gồm kem và đồng thau.

Cài đặt plugin Claude Code

Thêm marketplace của plugin, sau đó cài đặt plugin thiết kế:

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Nếu Claude Code báo Run /reload-plugins to activate., hãy chạy lệnh đó trước khi tiếp tục.

Bạn có thể gọi trực tiếp Scrollcraft bằng:

/nateherk-design:scrollcraft

Bạn cũng có thể sử dụng skill bằng cách mô tả website điều khiển bằng thao tác cuộn mà bạn muốn trong Claude Code. Lệnh trực tiếp hữu ích khi bạn muốn bắt đầu quy trình một cách rõ ràng.

Phát triển mà không cần cài đặt

Để kiểm tra hoặc sửa đổi kho lưu trữ skill cục bộ mà không cài đặt dưới dạng plugin, hãy khởi chạy Claude Code cùng thư mục plugin:

claude --plugin-dir ./plugins/nateherk-design

Kiểm tra yêu cầu

Scrollcraft phụ thuộc vào một số công cụ cục bộ. Hãy xác nhận các công cụ này trước khi bắt đầu xây dựng:

• Node.js 18 trở lên: Bắt buộc đối với tất cả tập lệnh đi kèm.
• Bản dựng ffmpeg đầy đủ: Dùng để mã hóa các đoạn clip, giúp chúng tua đúng cách thay vì phát bình thường. Các bản dựng đã lược bỏ thành phần có thể thiếu những bộ lọc thiết yếu như scale.
• playwright-core và Chrome: Dùng trong bước xác minh dựa trên trình duyệt.
• KIE_AI_API_KEY: Tùy chọn và chỉ cần khi tạo tài nguyên. Các dự án sử dụng ảnh hoặc cảnh quay của riêng bạn không cần khóa này.

Cài đặt playwright-core bên trong thư mục build để việc phân giải mô-đun diễn ra từ đúng vị trí:

npm i playwright-core

Nếu Scrollcraft không thể tìm đúng tệp thực thi, SCROLLCRAFT_FFMPEG và SCROLLCRAFT_CHROME có thể ghi đè các vị trí tìm kiếm của nó.

Scrollcraft chỉ được sử dụng cho các bản build hoàn chỉnh trên Windows. Các tập lệnh của công cụ tìm kiếm những vị trí phổ biến trên Windows, macOS và Linux, nhưng README không khẳng định rằng đã có bản build nào được hoàn thành trên macOS.

Chạy kiểm tra trước và tạo workspace

Chạy tập lệnh chẩn đoán trước mọi thao tác khác. Tập lệnh này báo cáo các phần phụ thuộc bị thiếu hoặc không tương thích, vốn có thể gây ra những lỗi gây hiểu nhầm về sau.

node scripts/doctor.mjs

Kiểm tra này đặc biệt quan trọng vì một tệp nhị phân ffmpeg đã bị lược bỏ có thể báo bộ lọc bị thiếu dưới dạng lỗi cú pháp, muxer WebP bị thiếu có thể trông như vấn đề về tên tệp, và playwright-core có thể được phân giải từ sai thư mục.

Sau khi kiểm tra trước hoàn tất, hãy tạo workspace cùng sổ đăng ký fingerprint trống:

node scripts/workspace.mjs --ensure

Cách chọn workspace

Scrollcraft phân giải workspace theo thứ tự sau và dừng ở kết quả khớp đầu tiên:

1. Đường dẫn được lưu trong SCROLLCRAFT_HOME.
2. Workspace được chỉ định bởi tệp .scrollcraft.json gần nhất, tìm thấy khi lần ngược lên từ thư mục hiện tại.
3. Thư mục scrollcraft bên dưới thư mục gốc của dự án.

Tệp cấu hình workspace có dạng sau:

{ "workspace": "path/to/builds" }

Các bản build được ghi vào <workspace>/builds/<name>/, còn sổ đăng ký fingerprint được lưu tại <workspace>/FINGERPRINTS.md.

Tạo dự án đầu tiên

Sau khi plugin hoạt động và workspace tồn tại, hãy gọi Scrollcraft:

/nateherk-design:scrollcraft

Mô tả trang web, chủ đề của trang, các tài nguyên bạn có và mọi quy tắc thương hiệu áp dụng. Bạn có thể chọn cách tạo tài nguyên khi đã cấu hình KIE_AI_API_KEY, hoặc sử dụng ảnh và cảnh quay của riêng mình mà không phát sinh chi phí tạo. Sử dụng tài nguyên có sẵn là một quy trình chính thức, không phải phương án dự phòng.

Skill này tuân theo một quy trình bao gồm phỏng vấn, chọn ngữ pháp, chấm điểm ý tưởng, xây dựng trang và xác minh kết quả. Các tài liệu tham chiếu cũng định nghĩa đường cong cảm xúc, thiết bị cuộn, cách xây dựng thế giới liên tục, định hướng nghệ thuật, chuẩn bị tài nguyên và các tiêu chuẩn thiết kế.

Tôn trọng ngữ pháp đã chọn

Đừng xem ngữ pháp đã chọn là một thiết lập sẵn về hình ảnh. Chẳng hạn, một dự án thế giới liên tục phải vận hành như một sân khấu cố định duy nhất, không có đường nối giữa các phần. Một dự án biên tập theo chương tuân theo cấu trúc và mô hình điều hướng khác. Việc trộn lẫn các mẫu bắt buộc của chúng sẽ làm suy yếu cơ chế giúp các dự án giữ được sự khác biệt.

Lên kế hoạch cho một chuyển động đặc trưng

Mỗi trang web phải có một tương tác được thiết kế riêng, chỉ tồn tại trong dự án đó. Chỉ đổi màu một vùng spotlight đơn giản là chưa đủ. Chuyển động này phải xuất phát từ chủ đề và trải nghiệm, thay vì được thêm vào như một chi tiết trang trí chung chung.

Sử dụng engine đúng cách

Quy tắc triển khai quan trọng nhất là không bao giờ chỉnh sửa engine theo từng dự án. Engine cung cấp cơ chế được chia sẻ giữa các bản build, không phải trình tạo trang có thể cấu hình.

Với mỗi dự án:

1. Tạo theme cho engine bằng sáu token màu và không quá hai phông chữ.
2. Viết HTML ngữ nghĩa dành riêng cho trang web.
3. Sử dụng thuộc tính tùy chỉnh --sc-p do engine công bố để điều khiển hành vi được thiết kế riêng.
4. Giữ bố cục và tương tác dành riêng cho dự án bên ngoài engine dùng chung.

Tránh xây dựng toàn bộ trang tại thời gian chạy từ một đối tượng cấu hình. Theo triết lý thiết kế của Scrollcraft, chính sự trừu tượng hóa đó khiến các trang được tạo bằng cùng một hệ thống trông giống nhau.

Hiểu bước xác minh

Scrollcraft sử dụng trình duyệt không giao diện để kiểm tra trang đã hoàn thiện ở mọi vị trí cuộn. Với các trải nghiệm dựa trên video, công cụ chờ đầu phát ổn định trước khi đánh giá khung hình.

Quy trình xác minh báo cáo:

• Cuộn chết: Khoảng cách cuộn nhưng không làm thay đổi bất kỳ yếu tố nào hiển thị trên màn hình.
• Tín hiệu chưa hoàn tất: Văn bản hoặc tín hiệu khác không bao giờ đạt độ mờ hoàn toàn.
• Lỗi tương phản khi tổng hợp: Độ tương phản được kiểm tra theo từng dòng dựa trên khung hình sáng nhất hiển thị phía dưới, với hướng kiểm tra được chọn cho văn bản sáng trên nền tối hoặc văn bản tối trên nền sáng.
• Clip chưa giải mã: Video vẫn bị kẹt ở khung hình poster và nếu không có kiểm tra này, có thể trông như một bộ phim được tạm dừng có chủ ý.

Quy trình này cũng tạo một bảng liên lạc để con người đánh giá. Các kiểm tra tự động có thể xác nhận trang hoạt động, nhưng không thể xác định trải nghiệm có ý nghĩa hay tạo hiệu quả cảm xúc hay không.

Mẹo quy trình nâng cao

Giữ sổ đăng ký fingerprint trung thực

Không điền sẵn registry từ các ví dụ đi kèm. Tệp EXAMPLES.md của repository minh họa diện mạo của một registry đã được điền và những dạng cấu trúc thường bị trùng lặp, nhưng đây không phải là một tập hợp ràng buộc. Hãy ghi lại các dự án của riêng bạn và thiết kế lại mọi khái niệm mới không đáp ứng yêu cầu tính độc nhất bốn trên sáu.

Phân bổ tài nguyên cho một cao trào

Đừng cố khiến mọi cảnh đều có cường độ như nhau. Dành tài nguyên mạnh nhất, khoảng cuộn dài nhất và phần dẫn nhập rõ ràng nhất cho một cao trào duy nhất. Nhiều cao trào cạnh tranh sẽ làm suy yếu đường cong tổng thể.

Chủ động thiết kế nhịp điệu thích ứng

Sử dụng nền tảng khoảng cách 4px mà không chuyển nguyên các khoảng trống cỡ desktop sang điện thoại. Giữ rõ mối quan hệ giữa các tiêu đề, duy trì độ dài dòng dễ đọc và cải thiện khả năng đọc của văn bản sáng trên nền tối bằng nhiều điều chỉnh hơn một thay đổi màu sắc đơn lẻ.

Ưu tiên ghi đè để chẩn đoán thay vì phỏng đoán

Nếu phát hiện sai bản cài đặt ffmpeg hoặc Chrome, hãy đặt SCROLLCRAFT_FFMPEG hoặc SCROLLCRAFT_CHROME một cách tường minh. Sau đó chạy lại doctor.mjs thay vì gỡ lỗi riêng lẻ các lỗi mã hóa hoặc lỗi trình duyệt xuất hiện về sau.

Đọc lịch sử dự án

Tệp CHANGELOG.md của repository ghi lại những lỗi xảy ra trong quá trình build cùng quy tắc thiết kế hoặc kỹ thuật được tạo ra để phản hồi. Tệp này hữu ích như một nguồn bài học vận hành, thay vì chỉ là lịch sử tính năng.

Những hạn chế cần cân nhắc

• Các bản build hoàn chỉnh mới chỉ được chạy trên Windows, dù các script có tìm kiếm những vị trí phổ biến trên các nền tảng khác.
• Video được tạo có thể phát sinh chi phí đáng kể, đặc biệt với một chuyến bay qua thế giới liên tục gồm nhiều chặng.
• Skill này có chủ kiến rõ ràng và có thể từ chối những bố cục, bảng màu quen thuộc hoặc một cao trào được định nghĩa yếu.
• Việc xác minh tự động không thể đánh giá liệu trang hoàn thiện có ý nghĩa hay không, vì vậy contact sheet vẫn cần được con người xem xét.

Kết luận

Scrollcraft kết hợp một engine tương tác cuộn với quy trình thiết kế có kỷ luật. Hãy bắt đầu bằng cách cài plugin Claude Code, chạy kiểm tra trước khi thực thi và tạo workspace. Sau đó chọn một ngữ pháp, xác định đường cong cảm xúc cùng một cao trào, tạo một chuyển động đặc trưng độc đáo và để quá trình xác minh phát hiện các vấn đề cơ học. Giữ nguyên engine dùng chung để cấu trúc ngữ nghĩa và định hướng nghệ thuật của từng dự án vẫn thực sự khác biệt.