The ai design skills trend is all over GitHub this week. These are drop-in instruction files (often a SKILL.md) that you add to an AI coding tool such as Claude Code, Cursor or Codex, so it designs pages with clear rules instead of falling back on the same default look. This research-based post covers three popular repos, how to install them, and a simple workflow for small business sites.
Why AI-built sites look the same
The Impeccable README describes the problem well: "Inter for everything. Purple-to-blue gradients. Cards nested in cards, gray text on colored backgrounds." Ask an agent for a page with no guidance and these patterns show up again and again. Design skills give the agent rules, a vocabulary and checks, so the result looks like it was made for your business.
Three repos worth a look
1. elayadesign/ai-design-skills (MIT). This repo is a growing collection of design skills. Right now it has one, landing-page-design, which asks intake questions, then plans page structure, conversion copy and a visual system (type, spacing, radius, motion). Its design values sit in one section near the bottom of the file, so you can fork it and change fonts and colours to match your brand.
2. Impeccable (Apache-2.0). Impeccable adds commands such as critique, audit, polish and bolder. Its README says it includes 62 deterministic rules that flag common "AI slop" tells, with no LLM or API key needed for that check, and that it is strongest on pages that already exist.
3. Hallmark (MIT). Hallmark, made by Together AI, is a design skill for Claude Code, Codex, Cursor and OpenCode. Its README lists fifty themes plus redesign and audit commands, and it checks pages in a real browser for things like contrast, focus states and broken phone layouts.
How to install a skill
For Claude Code, the ai-design-skills README suggests copying the skill folder into your project:
mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/
For Cursor, save the SKILL.md as a project rule:
mkdir -p .cursor/rules
curl -o .cursor/rules/landing-page-design.md \
https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/landing-page-design/SKILL.md
For Codex, the same README says to paste the file into AGENTS.md. Impeccable installs from your project root with npx impeccable install, followed by /impeccable init inside your agent.
Always read a skill file before adding it. It is plain text, so you can see exactly what it tells your agent to do.
A simple workflow for a small business site
- Write the brief first. Who the site is for, the one action you want (book, call, buy), and your brand colours.
- Build with one skill. Use a landing-page skill for the first draft rather than stacking several at once.
- Review with an audit command. Run a critique or audit pass and fix the top issues, especially contrast and mobile layout.
- Check on a real phone. Most small business visitors arrive on mobile.
- Keep facts real. Replace any placeholder reviews, numbers or client logos with your own, or remove them.
Bottom line
Design skills are free and open source, and they won't replace a designer for a full brand. But for a quick landing page or a refresh, they are a cheap way to make AI-built pages look less like every other AI-built page.
More research-based AI news for small businesses and creators is at ainews.useaifix.com, and AI automation help is at useaifix.com.
Top comments (0)