Định hướng thiết kế — để agent lo phần sản xuất
Bạn đặt ra hệ thống và tiêu chuẩn; agent kết xuất các màn hình, các trạng thái, các biến thể, các bản dựng độ trung thực cao. Bớt đẩy hình chữ nhật, thêm việc quyết định thế nào là tốt.
Tóm lại một câu
Open Design là trợ lý sản xuất không bao giờ biết mệt: bạn định nghĩa hệ thống thiết kế và phán định gu thẩm mỹ; agent tạo ra phần còn lại, đúng hệ thống, trong repo của bạn.
Cách một nhà thiết kế dùng Open Design
- 01
Mã hóa hệ thống của bạn
Biến thương hiệu của bạn thành một DESIGN.md — thang kiểu chữ, màu sắc, khoảng cách, thành phần, giọng điệu. Đây là nguồn chân lý mà agent tuân theo.
- 02
Tạo phần đuôi dài
Mọi màn hình, trạng thái và biến thể mà lẽ ra bạn phải dựng bằng tay — agent kết xuất chúng đúng hệ thống, nên 80% phần nhàm chán xong trong vài phút.
- 03
Định hướng và tinh chỉnh
Phê bình bằng ngôn ngữ — “siết chặt khoảng cách, làm trạng thái rỗng ấm áp hơn.” Bạn giữ quyền quyết định cuối cùng; agent thực hiện các vòng lặp.
Những gì một nhà thiết kế có thể định hướng
nguyen mau Xem toàn bộ prompt → Web Prototype Taste Editorial
Nguyên mẫu web biên tập tối giản. Canvas đơn sắc ấm áp, tiêu đề serif + nội dung grotesque, viền 1px, màu pastel nhẹ nhàng, khoảng trắng rộng rãi, chuyển động vi mô.
nguyen mau Xem toàn bộ prompt → Web Prototype Taste Brutalist
Nguyên mẫu web phong cách in công nghiệp Thụy Sĩ. Canvas giấy báo, chữ grotesque đen nguyên khối, số tràn khung viewport, đường phân cách lưới siêu mỏng, điểm nhấn đỏ nguy hiểm, trang trí cú pháp ASCII. Trích xuất từ Leonxlnx/taste-skill `brutalist-skill` (chế độ in công nghiệp Thụy Sĩ).
nguyen mau Xem toàn bộ prompt → Onboarding di động
Luồng onboarding di động đa màn hình được hiển thị dưới dạng ba khung điện thoại cạnh nhau — splash, giá trị sản phẩm, đăng nhập. Thanh trạng thái, chấm vuốt, CTA chính. Sử dụng khi đề cập đến 'onboarding di động', 'onboarding iOS', 'đăng ký qua điện thoại' hoặc '移动端引导'.
nguyen mau Xem toàn bộ prompt → Wireframe Phác Thảo
Wireframe vẽ tay với nền giấy kẻ ô, tông bút dạ/chì, nhiều tab nhãn, ghi chú giấy nhớ và biểu đồ phác họa. Phù hợp cho yêu cầu wireframe, sketch, lo-fi hoặc bảng trắng.
nguyen mau Xem toàn bộ prompt → Web Prototype Taste Soft
Nguyên mẫu web phong cách mềm mại chuẩn Apple. Canvas bạc/kem, thẻ viền kép, CTA nút lồng nhau, bán kính squircle rộng, chuyển động đàn hồi và lưới môi trường. Dựa trên soft-skill của Leonxlnx/taste-skill và phần 4–8.
hinh anh Xem toàn bộ prompt → Áp phích hình ảnh
Công cụ tạo hình ảnh đơn cho áp phích, key art và minh họa biên tập. Mặc định dùng gpt-image-2 nhưng hỗ trợ Flux, Imagen hoặc Midjourney qua công cụ upstream đang hoạt động. Xuất file PNG/JPEG vào thư mục dự án.
Thiết kế với Open Design so với cách thủ công
| Điều bạn cần | Với Open Design | Công cụ thiết kế thủ công |
|---|---|---|
| Dựng một hệ thống thiết kế | ●Một DESIGN.md mà agent áp dụng ở mọi nơi | Một thư viện bạn bảo trì bằng tay trên từng công cụ |
| Tạo biến thể & trạng thái | ●Được tạo đúng hệ thống từ một câu lệnh | Nhân bản từng khung và tinh chỉnh từng cái |
| Bản dựng độ trung thực cao | ●Kết xuất thành HTML thật, không phải bản mô phỏng phẳng | Công việc tỉ mỉ từng điểm ảnh mà kỹ thuật vẫn dựng lại |
| Giữ sự nhất quán | ●Một hệ thống, được thực thi tự động | Kỷ luật thủ công; lệch dần theo thời gian |
| Bàn giao | ●Sản phẩm chính là mã — không có khoảng cách phiên dịch | Tài liệu đặc tả và bản đánh dấu chỉnh sửa |
Công việc độ trung thực cao, đúng hệ thống mà agent tạo ra từ định hướng. Hãy chọn một thứ gần với phong cách của bạn và tinh chỉnh nó.
Câu hỏi thường gặp cho nhà thiết kế
-
01 Cái này có thay thế tôi không?
Không — nó thay thế việc cực nhọc. Bạn đặt ra hệ thống và gu thẩm mỹ; agent lo phần sản xuất lặp đi lặp lại để bạn dành thời gian cho những quyết định mà chỉ bạn mới làm được.
-
02 Làm sao tôi giữ quyền kiểm soát diện mạo?
DESIGN.md của bạn là bản giao kèo. Agent kết xuất trong phạm vi đó, và bạn phê bình bằng ngôn ngữ cho đến khi nó đúng.
-
03 Đầu ra có chỉnh sửa được / có thật không?
Đó là HTML/CSS thật, không phải bản xuất phẳng — nên nó đi thẳng vào sản xuất thay vì bị dựng lại.
-
04 Tôi có thể dùng những agent nào?
Claude Code, Codex, Cursor Agent, Gemini CLI và nhiều adapter chính chủ khác, với khóa nhà cung cấp của riêng bạn.
Định hướng thiết kế tiếp theo của bạn ngay tối nay
Gắn sao cho repo, cài Open Design, và để agent lo phần sản xuất trong khi bạn phán định gu thẩm mỹ — ngay trong agent bạn đang dùng.