Insane Claude Design Skills You Need To Actually Build Beautiful Sites

How these skills plug in

The setup detail that makes the rest work: a skill lives in your Claude account, not in Claude Design. You open Claude settings, go to Skills, and Add or Upload the skill (a .md with a YAML name/description, or a .zip/.skill folder containing a SKILL.md). Once it passes the short security scan it is usable everywhere: Claude Design, Claude Code, Codex, or any agent, all giving the same result.

1. Emil Kowalski's skills (a set of 9)

A set of nine skills, each changing a different part of the design. Named ones include Apple design (Apple's own product design principles, reusable on other sites) and an animation-vocabulary skill (turns a vague animation description into exact words a model understands). The channel uses two the most: a design-engineering starter skill with instructions for building beautiful UI components and adding animations (the best skill to start a design with), and animate, a complete step-by-step workflow for adding animations to an already-built website.

On a landing page the improvement from animate is subtle (landing pages mostly benefit from scroll-based animation, covered in other videos). Where it really shows is the small functional details of an app: tiny interactions on form submit, graphics popping up on hover. The demo added those to a restaurant site and made it feel noticeably more interactive.

2. Conrad Lee's "garden" skills (a set of 5)

A collection of five skills covering video presentations and images. The important one is web-design-engineer, which contains instructions to design like a top-tier design engineer, focused purely on making the visuals stunning rather than the functional side. It works through your requirements with you until the intent is clear, then looks for real designs to work from; its principle is that good design never starts from thin air. It also ships a set of references: how to judge a design, the ways designs usually go wrong, and style recipes for well-known sites (Apple, Linear) so it can build against how those actually work. Run it on an existing design and it scores that design across areas; you keep refining and re-running until it reaches a perfect score.

3. Elia Design's AI design skill (a single skill for landing pages)

One skill, built specifically for landing pages, everything in a single file. Its job is to take your idea and turn it into a visual system: the set of rules everything on the page then follows (colours, type, spacing). Its thinking: a landing page is not a homepage. A homepage serves many people at once; a landing page has one job, getting people to take one action, so the skill structures the whole page around that action to draw focus to it. It keeps a consistent visual style and also addresses areas most models overlook, including making the site findable through search (SEO). It asks you questions first, then designs. In the demo the result felt like a real brand and was structured to make a purchase more likely.

4. Mangto's scroll-storytelling skills

Mangto is a designer known for immersive scroll-based storytelling, packaged into a system of skills focused on designs that tell a story rather than just look good. One is video-to-super-prompt: it takes a screen recording or walkthrough of a site and uses tools on your machine to turn that recording into a detailed prompt for your agent. The set also includes turning an existing HTML page into reusable per-section/animation/button prompts, a full-page capture for structure reference, and a daily UI-inspiration loop.

The standout is build-awwwards-quality-sites. Awwwards runs a competition for stunning design; its winners are recognized as the best-designed sites on the web. This skill lists the principles those award-level sites share, plus the actual techniques and specific effects that make a site look expensive (the part a model won't produce on its own), and steers the build in that direction. The output is structured like a winning site, with a subtle animated background and scroll-based storytelling.

5. Jakub Krehel's split-by-area skills

Unlike the sets where one skill handles the whole site, this splits the work so each area (typography, colour, accessibility, and more) gets its own skill. The channel uses two. The review (interface-review) skill comprehensively reviews all aspects of a design and gives a score to iterate against; it works better wired to GitHub, because it compares what the design looked like before and after a change and flags regressions (if something worked before your last change and no longer does, it tells you which change broke it), covering animations, accessibility, and responsive behavior. The better-layout skill handles spacing, positioning, and alignment, the area Claude Design struggles with most; it will not change the look dramatically, it makes the design correct against real design principles.

6. Tastemaker

Its purpose is avoiding the generic defaults models produce, and what sets it apart is how. When you give a model a reference image, it usually converts the image into a text summary and works from that, losing detail. Tastemaker instead uses scripts to extract the exact design details from the real reference and saves them in a structured format an agent can reuse later, so nothing is lost turning a look into words. It leans on scripts first for work that does not need the agent, and its decisions carry across the whole project rather than stopping at one screen. The effect is that the model has "taste" to design with and does not fall back to the same generic patterns.

7. A laws-based collection (Owl-Listener/designer-skills)

The last set is grounded in actual research, the named laws designers really work from, with a separate skill for each. Some skills cover why people leave a site halfway through and how behavior shows up as someone moves through it. You install only the skills that fit how you work. The channel added two: screen-critique, which takes a screen and reviews it across many angles from proper design-quality guidelines then tells you where it goes wrong, and perception-laws, which encodes how the human eye actually sees and comprehends a design. Applied to a finished site, perception-laws made the whole thing feel more refined (what stands out first, type, spacing).

Where to get them

The channel notes all of these are open-source skills on GitHub. It also sells its own tested/refined skills through a paid community (AI LABS Pro), which is out of scope here. The two source repos confirmed on screen:

Tools and resources

Claims to verify

• Creator names are auto-caption approximations and several are uncertain: "Emil Kowalski", "Conrad Lee", "Elia Design", "Mangto", "Jakob Creel". The on-screen GitHub handles are reliable: jakubkrehel/skills (the review/layout set; audio "Jakob Creel" = Jakub Krehel) and Owl-Listener/designer-skills (the laws collection).
• The video treats Tastemaker (7th) and the laws collection (8th) as separate. On screen, a local .claude/skills tree showed Tastemaker, screen-critique, and perception-laws installed together, so repo attribution for Tastemaker specifically was not clearly shown; verify Tastemaker's own source before citing a repo.
• "Skills added in Claude settings are the same ones usable in Claude Design, Claude Code, Codex, or any agent" is the channel's claim; confirm current Claude Skills portability before relying on it for a client setup.
• The channel's results are its own testing ("the skills we tested that actually gave us results"); treat the per-skill quality claims as their experience, not independent benchmarks.

Glossary

• design skill: a packaged, reusable workflow (a SKILL.md plus references/scripts) that changes how an AI model designs, built by an experienced designer to steer the model off its default output.
• Claude Design: Claude's built-in design surface for generating and editing UI/websites; it uses skills added in your Claude account settings.
• SKILL.md: the markdown file at the root of a skill that carries its name, description, and instructions; agents read it to run the skill.
• default pattern / design tells: the recognizable visual habits a given model falls back to (colours, shapes, layout), which make AI-built sites look generic and alike.
• visual system: the set of rules a design follows (colours, type, spacing) so every element on the page stays consistent.
• design token: a single named design value (a colour, a radius, a gap) stored in a structured file so it can be reused precisely across a project.
• design.json: a structured file of extracted design tokens (Tastemaker's output format) used instead of a lossy text description of a reference.
• scroll-based storytelling: a design approach where content and animation are driven by the user's scroll position to unfold a narrative down the page.
• Awwwards: a long-running competition and gallery recognizing the best-designed websites; used here as the quality bar for "expensive-looking" sites.
• reference-grounded design: generating a design from real existing designs rather than from nothing ("good design never starts from thin air").
• interface review: reviewing a change (uncommitted work, a branch, or a pull request) for interface quality, as opposed to reviewing a single static screen.
• regression (design): something that worked before a change and no longer does; a review skill wired to GitHub can flag which change caused it.
• perception laws: research-backed rules for how the human eye groups, orders, and emphasises elements on a screen.
• Hick's law: the principle that more choices increase decision time; used to explain why a step in a flow is too heavy.
• Miller's law: the principle that people can hold only a limited number of items in working memory (about seven); used to judge cognitive load.
• one-shot (a design): getting a usable result from a single prompt/generation without iterative refinement.
• video-to-super-prompt: a skill that turns a screen recording of a site into a detailed text prompt an agent can build from.