emil-design-eng – skill Thiết kế & UI cho agent AI
Dùng khi thiết kế hoặc đánh giá giao diện sản phẩm tinh tế, lấy cảm hứng từ hoạt ảnh, tương tác và kỹ thuật thành phần của Emil Kowalski.
Cài skill emil-design-eng bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /emil-design-eng – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $emil-design-eng – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /emil-design-eng – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /emil-design-eng – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
Design Engineering
Detailed Guide
Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- Use when the user asks for UI polish, product design critique, animation direction, or high-craft component decisions.
- Use when reviewing frontend code for motion quality, easing, duration, physicality, interaction feedback, or subtle interface details.
- Use when building or refining React, Tailwind, CSS, or Framer Motion interfaces where taste and perceived quality matter.
Limitations
- Keep decorative animation separate from action authorization. Provide keyboard alternatives for gestures, honor reduced motion and test final visible states; duplicated visual controls must not create duplicate accessible controls.
- This skill provides design engineering judgment; it does not replace project-specific product requirements, accessibility testing, or real-device motion review.
- Verify framework versions, installed dependencies, and rendered behavior before treating animation or UI recommendations as production-ready.
- Do not apply these rules mechanically when an existing brand system, platform convention, or user requirement calls for a different interaction language.
Skill liên quan
- engine-selection – Chọn game engine và framework theo nền tảng, thể loại và kiến trúc (canvas toàn màn hình…
- quality-manager-qms-iso13485 – Triển khai và duy trì hệ thống quản lý chất lượng ISO 13485 cho tổ chức thiết bị y tế…
- enhance-prompt – Biến ý tưởng UI còn mơ hồ thành prompt hoàn chỉnh, tối ưu cho Stitch. Tăng độ cụ thể…
- rag-architect – Dùng khi người dùng yêu cầu thiết kế pipeline RAG, chọn chiến lược chunking hoặc…
- event-sourcing-architect – Chuyên gia về event sourcing, CQRS và kiến trúc hướng sự kiện. Thành thạo thiết kế event…
- event-store-design – Thiết kế và triển khai event store cho hệ thống event-sourced. Dùng khi xây dựng hạ tầng…
- vision-sft – Tinh chỉnh các mô hình ngôn ngữ-thị giác (VLM) bằng học có giám sát trên dữ liệu ảnh+văn…
- expo-animation – Hướng dẫn tuyển chọn từ upstream cho Expo Animation; dùng khi quy trình khớp với mục…