Tôi muốn tạo wireframe chất lượng cao ngay lập tức.
Lần này, tôi đã tổng hợp những prompt như vậy thành một hướng dẫn duy nhất.
Việc dạy Claude các quy tắc wireframe sẽ giúp bạn tiết kiệm đáng kể thời gian.
Mục lục
- Đăng ký dưới dạng quy tắc "Kỹ năng"
- Prompt copy-paste
- Giải thích từng quy tắc
- Đối với trang web nhiều trang, hãy sử dụng Claude Code
Đăng ký dưới dạng quy tắc "Kỹ năng"
Khi bạn dán prompt, Claude sẽ chuẩn bị một tệp cho kỹ năng đó. Sau khi đăng ký, bạn chỉ cần nói "tạo wireframe" từ lần sau.
- Chuyển "Prompt copy-paste" sau đây cho Claude và một tệp ZIP sẽ được tạo.
- Nhấn "Nút Lưu" hiển thị trong chat.
Điều này giúp loại bỏ việc phải dán prompt mỗi lần.
*Tính năng Kỹ năng có sẵn trong các gói trả phí như Pro và Max.
Prompt copy-paste
Dán nội dung sau vào chat Claude để bắt đầu đăng ký Kỹ năng (đăng ký để ghi nhớ dưới dạng quy tắc).
Chỉ cần làm theo hướng dẫn trong chat và nhấn ✔️ Nút Lưu.
Sau đây là prompt wireframe. Vui lòng biến nó thành một kỹ năng.
Tạo wireframe bằng HTML. Vui lòng tuân theo tất cả các quy tắc dưới đây.
[Bố cục] ・Tạo bố cục dễ hiểu ngay từ cái nhìn đầu tiên mà không tạo cảm giác nặng nề khi đọc. ・Tạo bố cục tinh tế, hiện đại và tối giản. ・Tận dụng tốt toàn bộ trang cho lề và sự cân bằng. ・Sử dụng phông chữ Noto Sans JP và làm cho nó hơi nhỏ.
[Thiết kế] ・Chỉ sử dụng màu "trắng, đen và xám". ・Giữ nền cơ bản là màu trắng. Không tạo các trang hoàn toàn màu đen. ・Không sử dụng bất kỳ chữ tiếng Anh, đường kẻ, bóng đổ hoặc trang trí không cần thiết nào. ・Sử dụng hộp màu xám cho các phần cần sơ đồ hoặc hình ảnh. ・Sử dụng phiên bản miễn phí của "Font Awesome" cho các biểu tượng.
[Viết lách] ・Giữ mỗi câu tương đối ngắn. Sử dụng dấu phẩy ít nhất một lần mỗi câu. ・Ngắt đoạn sau mỗi 1-2 câu. ・Sử dụng Hiragana cho Kanji ở những nơi cảm thấy tự nhiên (ví dụ: đổi 行う thành おこなう). ・Sử dụng dấu ngoặc 「」 cho tên hoặc lời thoại bạn muốn nhấn mạnh. ・Sửa bất kỳ lỗi chính tả hoặc ký tự bị thiếu và thống nhất giọng văn thành lịch sự (Desu/Masu).
Giải thích từng quy tắc
Dành cho những ai muốn biết chi tiết về các quy tắc.
1. Bố cục và Thiết kế
"Bố cục dễ hiểu" sắp xếp mức độ ưu tiên của thông tin. Bằng cách giới hạn màu sắc ở "trắng, đen và xám," thiết kế sẽ không bị mất kiểm soát.
https://x.com/hiroho150cm/status/2061576024878633393
2. Biểu tượng
Việc chỉ định "Font Awesome" cho các biểu tượng cải thiện đáng kể giao diện.
https://x.com/hiroho150cm/status/2062376294688387540
3. Tạo bằng HTML
Sử dụng HTML giúp việc tạo và chỉnh sửa diễn ra suôn sẻ.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Viết lách
Khả năng đọc đủ cao để bạn có thể sử dụng văn bản bên trong như hiện tại.
https://x.com/hiroho150cm/status/2063750350776287429
Đối với trang web nhiều trang, hãy sử dụng Claude Code
Cho đến nay, điều này liên quan đến các LP (trang đơn). Đối với các trang web nhiều trang, chúng tôi thay đổi cách tiếp cận.
Bản xem trước chat không xử lý tốt việc chuyển đổi giữa nhiều tệp HTML. Do đó, chúng tôi sử dụng "Claude Code."
Chuẩn bị một thư mục trên màn hình của bạn và quản lý mọi thứ bên trong nó. Bằng cách đó, Claude Code có thể chỉnh sửa nhiều tệp HTML một cách chính xác.
https://x.com/hiroho150cm/status/2065267853922898022
Tôi chia sẻ các kỹ thuật tiết kiệm thời gian cho sản xuất web và định hướng bằng cách sử dụng Claude.
Tôi sẽ tiếp tục cung cấp thông tin hữu ích, vì vậy hãy theo dõi tôi nếu bạn thích.
