Claude Design Skills Dossier — GaTi UI v1.6.0 Mobile-Native Edition

Emil Kowalski — UI Engineering & Animation Suite

Repository: emilkowalski/skills • 15 Verified Skills

[00:01:06] – [00:03:48]

"In this set there are not one but nine skills and each one changes a different part of the design... The place where the skill really works well is in the small elements of the functional side of the apps... adding tiny animations that improved how using this site felt."

Tập trung sâu vào tính thủ công cao cấp của UI Components và hệ thống animation chức năng. Khắc phục triệt để nhược điểm hoạt ảnh giật cục hoặc lệch nhịp scroll mà các LLM mặc định sinh ra.

[00:01:50]

"Contains instructions on how to build beautiful UI components and add animations to them, making it the best skill to start your design with. Before it builds anything, it asks you questions about the app."

Khởi đầu lý tưởng để dựng component UI hoàn thiện. Skill chủ động phỏng vấn người dùng về nghiệp vụ và tính cách thương hiệu trước khi sinh code.
[00:02:02]

"Refines the animations on already built websites. This skill understands how the site works and determines what needs movement and what doesn't... The motion was in sync with the scroll and the whole thing looked more intentional."

Workflow tinh chỉnh animation cho trang web đã có sẵn. Đánh giá thành phần nào cần chuyển động và phần nào nên đứng yên; đồng bộ hoàn hảo với scroll-motion và micro-interaction (hover effect, submit feedback).
[00:01:27]

"Apple design contains all the design principles Apple uses in its own products... animation vocabulary basically turns your vague animation description to exact words that a model can understand."

Đóng gói tiêu chuẩn thiết kế của Apple vào web; chuyển hóa mô tả chuyển động mơ hồ thành thuật ngữ chuyên môn chính xác cho LLM.

Điểm mạnh cốt lõi: Micro-interactions, scroll-synced motion, intentional tactile feedback.

Vai trò trong Pipeline: Khởi tạo Component & Rà soát chuyển động vi mô trên app chức năng.

Conard Li's Garden — Web Design Engineer

Repository: ConardLi/garden-skills • 6 High-Craft Skills

[00:03:48] – [00:05:20]

"This skill is solely focused on making the visuals stunning, not functional... Its principle is that good design never starts from thin air, just like how every design out there is inspired by something that came before it."

Tập trung hoàn toàn vào thẩm mỹ thị giác đỉnh cao (Visual Stunning). Neo giữ thiết kế vào các quy chuẩn và cảm hứng đã được thị trường chứng minh thành công.

[00:04:05]

"Contains instructions on how to design like a top tier design engineer... carries style recipes for well-known sites like Apple and Linear so it can look at how those sites actually work while it builds yours."

Chứa công thức phong cách (style recipes) từ các sản phẩm hàng đầu (Apple, Linear). Làm rõ yêu cầu bằng phỏng vấn trước khi sinh mã.
[00:05:05]

"Goes through that design and scores it in different areas. You can keep refining the design and running it again and again until it reaches a perfect score and matches what you actually want."

Quy trình chấm điểm lặp lại (iterative scoring) và xuất bản phẩm chất cao: biến mã nguồn thành sản phẩm showreel đồ họa động và tài liệu trực quan đạt điểm hoàn hảo.

Điểm mạnh cốt lõi: Style recipes (Linear/Apple), iterative scoring loops, top-tier visual finish.

Mục tiêu thẩm mỹ: Giao diện bóng bẩy, chuẩn mực công nghệ cao (Silicon Valley standard).

Elaya Design — Single-File Landing Page System

Repository: elayadesign/ai-design-skills • High-Conversion Engine

[00:05:20] – [00:06:42]

"A landing page isn't a homepage. A homepage is trying to serve a lot of different people at once, but a landing page has one job and that's getting people to actually take action. It structures the page around that one action."

Định vị ranh giới rõ ràng: Landing Page không phải là Homepage. Thiết kế mọi khối nội dung tập trung dẫn dắt người xem thực hiện hành động duy nhất (Single Call to Action).

[00:05:36]

"Everything it does sits in one file and its job is to take your idea and turn it into a visual system: the set of rules everything on the page follows, including colors, type and spacing."

Tất cả quy tắc gói gọn trong 1 file, thiết lập hệ thống thị giác chặt chẽ (màu sắc, phân cấp phông chữ, khoảng cách breathing room).
[00:06:16]

"Came out feeling like a real brand and matched the exact vibe... Addresses areas most models overlook, including making sure the website can be easily found through search."

Tối ưu tỷ lệ mua hàng/chuyển đổi thực tế; tự động cấu trúc semantic tags chuẩn SEO mà các prompt thông thường bỏ qua.

Mục tiêu chuyển đổi: SaaS marketing, high-converting product pages, single-action funnels.

Cảm nhận thương hiệu: Tạo dựng phong thái một thương hiệu thật sự (Real Brand vibe).

Meng To Suite — Awwwards Quality & Narrative Scroll

Repository: MengTo/Skills • 60+ Immersive WebGL & Motion Skills

[00:07:26] – [00:08:55]

"Known for his immersive scroll-based storytelling designs... alongside the principles the set carries the actual techniques and the specific effects that make a site look expensive which is the part a model won't produce by itself."

Tập trung vào trải nghiệm cuộn trang mang tính kể chuyện (Immersive Storytelling) và các hiệu ứng đồ họa chiều sâu khiến trang web toát lên vẻ "đắt tiền" như các sản phẩm đoạt giải Awwwards.

[00:08:00]

"Lists the principles and design details that awards level sites contain... subtle animated background in there, but the thing that stood out was the scroll-based storytelling approach."

Hệ thống nguyên lý và hiệu ứng đồ họa cấp độ thắng giải: animated background vi tế, bố cục cuộn trang theo cốt truyện thương hiệu.
[00:07:50]

"Works by taking a screen recording or walkthrough of a website and using tools on your machine to turn that recording into a prompt for your agent."

Biến video quay màn hình (screen walkthrough) của một website cảm hứng thành prompt kỹ thuật cao để AI code lại chính xác.

Tính năng độc bản: Screen recording to superprompt, scroll-based narrative storytelling, WebGL shaders.

Phong cách đặc trưng: Giao diện sang trọng, đắt tiền (expensive aesthetic), đoạt giải quốc tế.

Jakub Krehel — Modular Review & Pixel-Perfect Layout

Repository: jakubkrehel/skills • 14 Precision Engineering Skills

[00:08:55] – [00:10:14]

"Splits it into multiple skills so each area gets its own skill: typography, color, accessibility... It won't make the site look dramatically different, but what it will do is make it correct against the design principles people actually work to."

Phân tách thành các kỹ năng chuyên biệt từng mảng: Typography, Màu sắc, Accessibility, Spacing. Đảm bảo tính đúng đắn kỹ thuật (correctness) theo tiêu chuẩn công nghiệp.

[00:09:20]

"Works better if you connect it to GitHub because it checks what the design looked like before and after the changes. If something worked before and doesn't anymore, it flags that regression."

Tích hợp GitHub diff để phát hiện lỗi hồi quy (regression): cảnh báo ngay nếu một đoạn code mới làm hỏng animation cũ hay vỡ responsive.
[00:09:50]

"Deals with spacing, positioning, and how things line up... It caught that a date on the page needed more room than it was given and even told us how many extra pixels it needed."

Khắc phục nhược điểm lớn nhất của Claude về spacing và alignment. Đo lường chính xác từng pixel thiếu/thừa trên bố cục.

Công cụ kiểm thử: Git-based diffing, regression prevention, pixel-level tolerance check.

Giá trị thực tiễn: Bảo đảm sản phẩm đúng chuẩn công nghiệp, loại bỏ hoàn toàn lỗi căn lề sai lệch.

Tastemaker — Grounded Pixel Extraction Engine

Repository: codeswithroh/tastemaker • Anti-Generic Design Injector

[00:10:14] – [00:11:23]

"Its main purpose is avoiding the generic defaults that models produce... It works from the actual pixels of a real reference so nothing gets lost turning a look into words first... This skill actually gives models taste to design with."

Triệt tiêu hoàn toàn sự vô hồn của các giao diện AI mặc định bằng cách trích xuất trực tiếp các pixel trên ảnh mẫu thực tế thay vì diễn giải qua văn bản mơ hồ.

[00:10:35]

"Uses scripts to extract the exact design details and saves them in a structured format that agents can use later on, preserving design details that would otherwise get lost in text summaries."

Sử dụng các đoạn script đo đạc chính xác bảng màu, bán kính bo góc và độ tương phản thực, lưu dưới dạng dữ liệu có cấu trúc.
[00:10:52]

"The decisions it makes carry across the whole project rather than stopping at one screen... so that they don't default to the same generic patterns."

Duy trì "Gu" thẩm mỹ nhất quán xuyên suốt toàn bộ dự án đa màn hình, không bị đứt đoạn theo từng prompt rời rạc.

Cơ chế hoạt động: Script-based programmatic extraction from raw reference image pixels.

Kết quả đạt được: Loại bỏ định dạng AI đại trà, bám sát 100% cảm hứng thiết kế gốc.

Cognitive Laws & Visual Perception Suite

Repository: Owl-Listener/designer-skills • 111 Cognitive & UX Frameworks

[00:11:23] – [00:12:20]

"Grounded in actual research in the named laws that designers really work from... some of its skills cover why people leave your website halfway through and how behavior shows up as someone moves through the site."

Xây dựng trên các nghiên cứu khoa học hành vi và định luật tâm lý học thị giác; lý giải nguyên nhân người dùng rời bỏ website và cách mắt quét nội dung.

[00:11:46]

"Takes a screen and reviews it across a lot of different angles then tells you where that screen is going wrong, working from proper guidelines for judging design quality."

Đánh giá màn hình qua nhiều tiêu chuẩn khách quan; phát hiện các điểm ma sát (friction points) gây rớt tỷ lệ người dùng.
[00:11:58]

"Contains instructions on how the human eye actually sees and comprehends the design itself... what stands out first, the type and the spacing... once applied, the whole thing feels more refined."

Chỉ dẫn mô hình hiểu cơ chế nhìn của mắt người (điểm rơi thị giác, luật gần nhau Gestalt, nhịp điệu typography), đem lại cảm giác tự nhiên, thư thái cho não bộ.

Nền tảng khoa học: Fitts's Law, Hick's Law, Gestalt principles of visual perception.

Hiệu quả trải nghiệm: Tạo độ mượt tự nhiên trong trải nghiệm đọc và điều hướng của não bộ.

Skill Suite / Bộ Kỹ Năng	Repository & Tác Giả	Trọng Tâm Chuyên Biệt	Tính Năng Độc Đáo
Emil Kowalski Skills	`emilkowalski/skills` Emil Kowalski	Component UI & Animations	Scroll-synced motions & tactile micro-interactions
Conard Li's Garden	`ConardLi/garden-skills` Conard Li	High-End Visual Aesthetics	Style recipes (Linear/Apple) & Iterative Scoring loops
Elaya Design System	`elayadesign/ai-design-skills` Elaya Design	Single-Action Landing Pages	Unified visual system in one file + Built-in SEO rules
Meng To Suite	`MengTo/Skills` Meng To	Awwwards & Storytelling	Screen recording to superprompt + Expensive effects
Jakub Krehel Modular	`jakubkrehel/skills` Jakub Krehel	Layout Accuracy & Git Review	Detects regressions via GitHub diff & pixel gaps
Tastemaker Engine	`codeswithroh/tastemaker` Community / codeswithroh	Anti-Generic Taste Injection	Extracts actual pixel tokens via scripts from moodboard
Perception Laws Suite	`Owl-Listener/designer-skills` Owl Listener	Human Visual Comprehension	Applies Gestalt principles & eliminates friction points

Insane Claude Design Skills to Build Beautiful Sites — Hồ Sơ Hệ Thống Hóa