image-to-code

Kỹ năng chuyển đổi hình ảnh website thành mã dành cho Codex. Đối với các tác vụ web quan trọng về mặt trực quan, trước tiên nó phải tự tạo ra (các) hình ảnh thiết kế, phân tích sâu chúng, sau đó triển khai website để khớp với chúng một cách chính xác nhất có thể. Trong Codex, nó phải ưu tiên các hình ảnh lớn, dễ đọc, dành riêng cho từng phần thay vì các bảng tổng hợp nhỏ, tạo ra các hình ảnh độc lập mới cho các phần hoặc chế độ xem chi tiết thay vì cắt từ ảnh cũ, tránh tạo ra quá ít, tránh giao diện thẻ-lồng-thẻ-lồng-thẻ, và

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code

Tải ZIP GitHub

Thêm skills từ leonxlnx

design-taste-frontend

Kỹ sư UI/UX cao cấp. Kiến trúc giao diện số vượt qua các thiên kiến mặc định của LLM. Áp dụng các quy tắc dựa trên chỉ số, kiến trúc thành phần chặt chẽ, tăng tốc phần cứng CSS và kỹ thuật thiết kế cân bằng.

developmentdesigncreative

high-end-visual-design

Dạy AI thiết kế như một agency cao cấp. Xác định chính xác font chữ, khoảng cách, đổ bóng, cấu trúc thẻ và hiệu ứng hoạt hình giúp website trông đắt tiền. Chặn tất cả các mặc định phổ biến khiến thiết kế AI trông rẻ tiền hoặc chung chung.

designcreativedevelopment

redesign-existing-projects

Nâng cấp các trang web và ứng dụng hiện có lên chất lượng cao cấp. Kiểm tra thiết kế hiện tại, xác định các mẫu AI chung chung, và áp dụng các tiêu chuẩn thiết kế cao cấp mà không làm hỏng chức năng. Hoạt động với bất kỳ framework CSS nào hoặc CSS thuần.

designdevelopmentcode-review

Giao diện phong cách biên tập sạch sẽ. Bảng màu đơn sắc ấm áp, tương phản kiểu chữ, lưới bento phẳng, màu pastel nhẹ nhàng. Không gradient, không bóng đậm.

designcreativedevelopment

Kỹ sư UX/UI cao cấp & Chuyển động GSAP nâng cao. Áp dụng ngẫu nhiên hóa thực sự dựa trên Python để tạo sự khác biệt bố cục, cấu trúc trang AIDA nghiêm ngặt, kiểu chữ biên tập rộng (cấm xuống dòng 6 dòng), lưới bento không khoảng cách, ScrollTriggers GSAP nghiêm ngặt (ghim, xếp chồng, cuộn), hình ảnh nhỏ nội dòng và khoảng cách phần lớn.

developmentdesigncreative

Kỹ năng tạo hình ảnh bộ nhận diện thương hiệu cao cấp dành cho việc xây dựng bảng hướng dẫn thương hiệu đẳng cấp, hệ thống logo, bộ nhận diện và trình bày thế giới hình ảnh. Được huấn luyện cho các hệ thống thương hiệu tối giản, điện ảnh, biên tập, công nghệ tối, xa xỉ, văn hóa, bảo mật, trò chơi, công cụ dành cho nhà phát triển và ứng dụng tiêu dùng. Tối ưu hóa cho việc lên ý tưởng logo có chủ đích, bố cục tinh tế, kiểu chữ thưa thớt, ý nghĩa biểu tượng mạnh mẽ,

creativedesignmarketing

imagegen-frontend-web

Kỹ năng frontend hình ảnh cao cấp để tạo ra các tham khảo thiết kế website cao cấp, có ý thức chuyển đổi. QUY TẮC ĐẦU RA QUAN TRỌNG — tạo MỘT hình ảnh ngang riêng biệt CHO MỖI phần. Một trang đích có 8 phần sẽ tạo ra 8 hình ảnh. Không bao giờ nén nhiều phần vào một hình ảnh. Áp dụng sự đa dạng bố cục (không phải lúc nào cũng là văn bản trái / hình ảnh phải), tự do về ảnh nền, các lời kêu gọi hành động đa dạng, các tỷ lệ hero đa dạng (khổng lồ / trung bình / tối giản nhỏ), xương

creativedesigndevelopment

full-output-enforcement

Ghi đè hành vi cắt ngắn mặc định của LLM. Thực thi tạo mã hoàn chỉnh, cấm các mẫu giữ chỗ và xử lý sạch sẽ các phân tách giới hạn token. Áp dụng cho bất kỳ tác vụ nào yêu cầu đầu ra đầy đủ, không rút gọn.

developmentcode-reviewtesting