The GitHub repository AI Design Skills, with 10,166 stars, gives AI coding tools a set of landing page design rules. Here is how to install it, how it is used, and two samples built from two prompts.
AI Design Skills is a GitHub repository of design rules that AI coding tools such as Claude Code, Cursor and Codex can read. It has 10,166 stars and an MIT license.
It holds one skill today, landing-page-design: a single file that says what a landing page should say, how to lay it out and how to style it. The latest commit, on October 27, moved the design-to-motion skill into a repository of its own.
The README gives a different route for each tool. Claude Code copies the skill folder, and Cursor downloads it as a rules file.
For Codex, Windsurf and Cline it says to paste the contents of SKILL.md into AGENTS.md, .windsurfrules and .clinerules. Without a terminal, upload the file to a Claude.ai project.
- Pick the skill → Put it where the tool reads
- Put it where the tool reads → Ask in plain words
- Ask in plain words → A result that follows the rules
SKILL.md is 431 lines long. Part A is strategy and structure: what to ask first, the order of the page, how to write headlines and buttons, and how to handle search. Part B is the visual system, and it is pretty strict.
What Part B nails down
| Fonts | Only Geist, Manrope, Geist Mono and Poppins. Never Inter, Roboto, Arial, Open Sans or Helvetica |
| Number of fonts | One per site. No italics |
| Spacing | Only the 13 values in its table, from 0 to 96px |
| Backgrounds | No gradients. The hero heading text is the one exception |
| Hero heading | Max width 680px, with line breaks where the thought breaks |
| Icons | Phosphor, Solar or Iconamoon. Never Material icons |
| Motion | One decelerating curve, 500ms for position changes, and only transform and opacity move |
| Required section | A large type tagline section below the hero, where the words light up one at a time |
There are writing rules too: no hyphens inside sentences, no single word left alone on the last line, and a ban on filler such as "revolutionize" and "effortless". Corner radii, states such as hover and focus, and finishing items such as a 404 page and legal links are all spelled out.
The repository ships no example output. So while writing this post I read SKILL.md and built the pages myself, following its rules. The product names Ledgerly and Tracelight are made up for the demo. The first prompt:
The second asks for a dark theme.
The results are below. Tap a picture to see it larger.
Here is where the rules show up. One typeface, Geist, and a hero heading that breaks at meaningful points inside 680px. The gradient sits on the heading text only, and the background is flat. The dark theme uses #181818, one of the listed colors. The tagline section is built so the words darken from the front, and the photo catches it halfway.
The rules are clear and easy to follow. Two things are worth knowing before you start.
First, the samples are mine, so they do not promise that your agent will produce the same thing. It will vary with the model and the tool. I also copied the install commands as the README gives them and did not run them while writing.
Second, the font rule. As far as I know, none of the allowed fonts (Geist, Manrope, Poppins) has Korean glyphs. On a Korean page the browser falls back to another font and the "one typeface" rule breaks. That is why the samples above use English copy. For a Korean service you will have to adjust this part yourself.
I would try it on one project first. A rule you dislike can simply be deleted from the file.
- The same author's redesign-skill is the companion for fixing an existing site, and it has 407 stars
landing-page-designsays it adapts parts of taste-skill, which has 103,898 stars- The new repository for
design-to-motion, which the latest commit says it moved to, could not be found when I looked
Sources
- elayadesign/ai-design-skills, repository and README
- landing-page-design SKILL.md
- The latest commit