# Trying AI Design Skills, a rule pack for coding agents

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.

- Language: en
- Published: 2026-10-28
- Tags: automation, design-skills, agent-skills
- URL: https://devs7ud.io/en/blog/ai-design-skills-landing-page-en
- Translation (ko): https://devs7ud.io/blog/ai-design-skills-landing-page.md

## Hand your AI the design rules in one file

[AI Design Skills](https://github.com/elayadesign/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.

![An illustration standing for the repository](/blog-img/ai-design-skills-landing-page-en/1.png)

## Installing is moving one file

The README gives a different route for each tool. Claude Code copies the skill folder, and Cursor downloads it as a rules file.

```bash
# Claude Code
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/
```

```bash
# Cursor
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, 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.

**From install to result**

- Pick the skill
- → Put it where the tool reads
- → Ask in plain words
- → A result that follows the rules

_Source: AI Design Skills README_

## The rulebook comes in two parts

`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**

| Area | What it sets |
| --- | --- |
| 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 |

_Source: landing-page-design SKILL.md_

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.

## Two prompts, two samples

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:

```text
Build a landing page for Ledgerly,
an invoicing app for freelancers.
The primary action is starting
a free trial.
```

The second asks for a dark theme.

```text
Build a dark theme landing page
for Tracelight, a command line
log search tool for backend
developers. The primary action is
installing it with Homebrew.
```

The results are below. Tap a picture to see it larger.

![Ledgerly first screen, light theme](/blog-img/ai-design-skills-landing-page-en/d1.png "First screen for prompt 1. A sample made for this post, for a made up product")

![Ledgerly tagline section](/blog-img/ai-design-skills-landing-page-en/d2.png "Tagline section for prompt 1. The words are lighting up one by one")

![Tracelight first screen, dark theme](/blog-img/ai-design-skills-landing-page-en/d3.png "First screen for prompt 2. A sample made for this post, for a made up product")

![Tracelight tagline section](/blog-img/ai-design-skills-landing-page-en/d4.png "Tagline section for prompt 2")

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.

## View

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.

![An illustration of rules being set up one line at a time](/blog-img/ai-design-skills-landing-page-en/2.png)

## Some news this week did not make it in

- The same author's [redesign-skill](https://github.com/elayadesign/redesign-skill) is the companion for fixing an existing site, and it has 407 stars
- `landing-page-design` says it adapts parts of [taste-skill](https://github.com/Leonxlnx/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](https://github.com/elayadesign/ai-design-skills), repository and README
- [landing-page-design SKILL.md](https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md)
- [The latest commit](https://github.com/elayadesign/ai-design-skills/commit/ded7efc9d5c02761c41a03caf3b78f9259ab8828)