5 Free Repos That Give Claude Real Design Skills

Ask Claude for a website with no design system and it guesses. Guessing gets you the same safe page everyone else gets. These five free repos swap the guessing for a real spec: rules for taste, a library of styles, ready-made design systems, motion that means something, and a way to copy the look of any site you like.

Four of the five are GitHub repos. Number four, motion presets, lives inside Taste Skill, so you get it with the same install. We kept it as its own step because motion is where most AI pages go wrong.

Taste Skill is a free set of design skills with over 90,000 stars on GitHub. It works in Claude Code, Cursor and Codex, and it pushes Claude toward stronger layout, type, motion and spacing.

What Taste Skill does for you: one main skill with three 1 to 10 dials (layout variance, motion, density), plus add-on skills for a set look: soft and premium, minimalist, brutalist, and one for redesigning a site you already have.

Who Taste Skill is for: anyone building a landing page, portfolio or product site who's tired of the default AI look. When to skip it: you already have a strict brand system and just want Claude to follow it. Hand Claude that system as a DESIGN.md instead (repo 3 and repo 5).

We walk through the three dials in depth in our guide 3 Free Design Skills That Stop Claude From Making AI Slop. Here we care most about the motion side, which is repo 4.

How to install Taste Skill: copy the repo URL below, paste it into Claude Code, and say: install this.

Or install it by hand with one terminal command:

Prompt to try with Taste Skill:

UI/UX Pro Max is the most-starred design skill on this list, with over 130,000 stars. Before Claude writes a line of code, UI/UX Pro Max searches its own library and hands Claude a full design system for your kind of product.

What UI/UX Pro Max does for you: it matches your product to one of 192 product types, then picks from 79 UI styles, 192 color palettes, 74 font pairings and 34 landing page layouts. You get colors, fonts, page structure, effects, a list of things to avoid, and a checklist to run before you ship.

Who UI/UX Pro Max is for: people who don't know which fonts or colors fit their business and want Claude to decide with a reason. It also covers 22 tech stacks, from plain HTML to React, SwiftUI and Flutter. When to skip it: you already picked your look. The repo is the free Basic version. The paid Premium version adds logos and brand kits, which you don't need for a website.

How to install UI/UX Pro Max: copy the repo URL below, paste it into Claude Code, and say: install this.

Or install it by hand. Type these two lines into Claude Code. The skill's search script needs Python 3 on your computer.

UI/UX Pro Max turns on by itself when you ask for UI work, so you can just ask for the page.

Prompt to try with UI/UX Pro Max:

Awesome Claude Design is a list of 68 design systems in DESIGN.md format, modeled on how brands like Stripe, Linear, Vercel, Apple and Notion build their sites. A DESIGN.md is one plain text file that tells an AI how a site should look: colors, type, components, spacing, and do's and don'ts.

What Awesome Claude Design does for you: you skip the blank page. Pick the design system closest to the feel you want, give Claude the file, and every screen it builds stays on that system. Each file has the same nine sections, so Claude always knows where to look.

Who Awesome Claude Design is for: anyone who can point at a site and say "like that." It was made for Claude Design, Anthropic's design workspace at claude.ai/design, and the same files work in Claude Code. When to skip it: you want your own look from scratch. Use repo 2 instead.

The repo itself is only the list. The DESIGN.md files live on getdesign.md, one page per design system. How to get one into Claude Code: copy the repo URL below, paste it into Claude Code, and say which design system you want.

Or grab one by hand. Each getdesign.md page has a Download DESIGN.md button and a one-line command you run from your project folder. For the Stripe-style system:

Prompt to try with Awesome Claude Design:

Motion presets get their own step on this list, but there's no separate motion repo to install. The motion lives inside Taste Skill (repo 1): its main skill has a motion dial from 1 (static) to 10 (cinematic), plus ready-made GSAP code for scroll effects like sticky card stacks, sideways scrolling sections and staggered reveals. UI/UX Pro Max (repo 2) adds a key effects line to each design system it makes.

What the motion presets do for you: Claude stops adding random fade-ins and uses motion only when it has a job. Taste Skill's rule is blunt: "Motion must be motivated." Every animation has to show what matters, tell a story, answer a click or show that something changed. "It looked cool" doesn't count.

Who the motion presets are for: anyone whose site feels flat, or whose last AI build moved so much it felt cheap. When to skip them: dashboards and tools people use all day. Keep those still.

How to get the motion presets: install Taste Skill (repo 1). There's nothing extra to install.

Best practices for motion:

• Animate one or two moments per section, not everything. Let most of the page sit still so the motion that's there lands.
• Keep the motion dial at 3 or lower unless you want a showy page. Taste Skill says that if Claude can't make the motion work, it should drop the dial to 3 and ship a clean still page.
• Ask for motion by name, like "a staggered entrance on the feature cards," instead of "make it animated."
• Check that the page respects reduced motion for people who turn animations off. Both Taste Skill and UI/UX Pro Max ask Claude to.

Prompt to try with motion:

The DESIGN.md Chrome extension from TypeUI reads the site you're looking at and writes its design system into a file for Claude. It has about 2,900 stars on GitHub and it's also on the Chrome Web Store as DESIGN.md Style Extractor.

What the DESIGN.md Chrome extension does for you: open any site, click the extension, and it pulls out the fonts, colors, spacing, rounded corners, shadows and motion. It turns them into a DESIGN.md or a SKILL.md you can download, with do's and don'ts and accessibility rules already in the file.

Who the DESIGN.md Chrome extension is for: anyone who found a site they love and wants their own site to feel like it. When to skip it: the site you like is already on the Awesome Claude Design list. Grab that file instead (repo 3).

How to install the DESIGN.md Chrome extension: a Chrome extension goes into Chrome, so Claude Code can't install it for you. The easy way is the Chrome Web Store: search for DESIGN.md Style Extractor and add it to Chrome. Or load it from GitHub: download the repo, open chrome://extensions, turn on Developer mode, click Load unpacked, and pick the folder.

Prompt to try with the DESIGN.md Chrome extension:

The five repos work best as one pipeline. Reference in, system set, taste and motion on top:

1. 1Get a reference. Export a DESIGN.md from a site you love with the Chrome extension (repo 5), or pick one of the 68 in Awesome Claude Design (repo 3).
2. 2Or have one made. No reference in mind? Let UI/UX Pro Max (repo 2) build a design system for your kind of business.
3. 3Build against the DESIGN.md. Tell Claude to build every page against that one file.
4. 4Add taste and motion. Use Taste Skill (repo 1) and its motion dial (repo 4) to polish the build.

If you only install one, we'd start with UI/UX Pro Max. It gives Claude a design system on day one, and a design system is the single biggest upgrade. Add Taste Skill when you want more personality and motion.

One caution on copying brands. The design systems on getdesign.md say they're independent takes on each brand's public look and aren't linked to those brands. Use them to learn the patterns, then make the look your own. Don't copy a brand's logo, name or whole identity for a client.