Stop letting your coding agent design ugly landing pages: hands-on with ai-design-skills, the 11K-star landing page skill

A coding agent left to its own devices builds the same landing page every time: the default font, the default gradient, the default three cards. Ai-design-skills replaces those defaults with decisions. This guide installs its one skill file, reads it before your agent does, and audits the result with a script.

• Who: ai-design-skills (elayadesign/ai-design-skills on GitHub), created July 29, 2026; 11,919 stars and 861 forks on October 29, 2026; MIT licensed; 8 commits; pinned commit ded7efc, October 27, 2026.
• What: one agent skill, landing-page-design (432 lines, no code): Part A decides offer, structure, copy, and layout; Part B fixes typography, spacing, radius, backgrounds, hero layout, icons, and motion.
• When: verified October 29, 2026, on Linux x86_64, against a clone pinned to ded7efc; star tracker recorded 8,651 stars gained October 22 to 28, 2026.
• Requirement: Git and curl for everything verified here, plus a coding agent that reads rule files (Claude Code, Cursor, Codex, Windsurf, Cline) for the agent-led step. No GPU, no API key for the verified steps.

Why this skill, and why this week

Ask a coding agent for a landing page and you will usually get something that works and looks like everything else: the same default font, the same purple gradient, the same three feature cards, the same vague headline. The page is not broken. It is forgettable, and forgettable is a conversion problem. That is the gap ai-design-skills tries to close, and the numbers say the idea landed. The repository, elayadesign/ai-design-skills, held 11,919 stars and 861 forks when its GitHub page was read for this guide, and an independent tracker of GitHub star counts recorded 8,651 stars gained in the week of October 22 to 28, the largest weekly gain of any project it ranked. A second tracker put the single day gain on October 27 at about 1,395 stars. Star counts move daily and prove enthusiasm, not quality, so this guide tests the thing itself rather than trusting the chart.

What you actually get is smaller than the pitch suggests, and that is worth knowing before you install anything. The repository contains exactly one skill, landing-page-design: a single Markdown file, 432 lines, no code, no scripts, no dependencies. The README calls the collection growing and says more skills are on the way, but today there is one file that tells your agent how to plan, write, and style a landing page, and a companion repository for upgrading an existing site. One file is also the reason this guide can verify the project properly: there is nothing to compile, nothing to download beyond the file, and every claim in the skill can be read in full before you let an agent follow it.

This is a different job from the two design skills the blog covered recently. Hallmark audits a finished page against 57 checks and picks a theme so it stops looking machine made. Impeccable gives an agent a design vocabulary and 24 commands for reviewing frontend output. Both judge work that already exists. Landing-page-design builds the page in the first place: it decides the offer, the structure, the copy, and the visual rules, in that order. If you already have a page, start with one of those two. If you are staring at a blank file, this is the one to install.

What you will need

• Git and curl on your machine, for the clone and the Cursor download. Both commands are run below.
• A coding agent that reads rule files. The README names Claude Code, Cursor, Codex, Windsurf, and Cline. Any tool that reads a Markdown rules file works the same way.
• No API key, no GPU, and no account for everything verified in this guide: installing the skill, reading it, and auditing a page against its rules.
• One honest limit, stated up front. The agent-led step, where your coding agent builds a page by following the skill, is described from the skill file, not executed here: the verification environment has no coding-agent subscription. Everything that can run without one was run, is quoted verbatim below, and the demo page was built by following the skill section by section, then audited by script. If you have the agent, the prompt in Step 3 is the one to paste.

Step 1 — Install the skill in your agent's home

Installation is a file copy. For Claude Code, the README's commands, with the skill name filled in, are:

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/

Run from a project directory, that sequence produced exactly one file in the skill folder:

ls .claude/skills/landing-page-design/
SKILL.md

For Cursor, the README downloads the same file into the rules folder:

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

The downloaded file was compared byte for byte against the cloned file in this verification, and the comparison passed: the Cursor path and the Claude Code path deliver the identical file. For Codex, Windsurf, or Cline, copy SKILL.md into the file your tool already reads for project rules: AGENTS.md for Codex, .windsurfrules for Windsurf, .clinerules for Cline. That copy was also run here, and the first three lines of the resulting AGENTS.md are the skill's frontmatter, shown in Step 2.

Pin the version. Trending repositories change, and a skill is a file your agent obeys, so installing from a moving branch means the rules can change under you. The commit checked here is ded7efc9d5c02761c41a03caf3b78f9259ab8828, dated October 27, 2026, titled "Move design-to-motion to its own repo". Clone, then check that commit out before copying:

cd ai-design-skills
git checkout ded7efc9d5c02761c41a03caf3b78f9259ab8828
git rev-parse --short HEAD
ded7efc

Read the diff before you update to a later commit. That habit matters more for skills than for libraries, because a skill change is a behavior change for every page your agent builds next.

Step 2 — Read the file before your agent does

Open SKILL.md. The frontmatter is the contract with the agent:

name: landing-page-design
description: "Complete system for building high converting landing pages: intake questions, page structure, layout selection, conversion copywriting, SEO, plus strict visual rules for typography, spacing, corner radius, backgrounds, hero layout, icons, and motion. Use this skill whenever building, editing, styling, reviewing, or writing copy for ANY landing page, marketing site, web UI, page section, component, or prototype, even when the user does not mention design, conversion, tokens, or a design system. Always consult it before choosing page sections, headlines, CTAs, fonts, font sizes, spacing values, border radii, background colors, icons, or transitions."

Note the breadth of that trigger: the agent is told to consult the skill for any landing page, marketing site, component, or prototype, even when you do not mention design. That is a feature if every page you build is a marketing page, and a surprise if you install it globally and then wonder why a dashboard came out looking like a sales page. Install it per project, not globally, unless marketing pages are all you build.

The file has two halves. Part A decides what the page says: an intake questionnaire answered in one batch, a twelve part page structure, four layout types, conversion rules, copywriting formulas, a build order, and search guidance. Part B is the visual system, and it is strict where most agent output is vague: four permitted typefaces, a fixed type scale, thirteen spacing tokens, Tailwind radius values with a nested radius formula, flat backgrounds only, a single permitted gradient (on hero heading text, never on a background), three permitted icon sets, and one motion curve. The file ends with a checklist that repeats both halves as tick boxes, plus credits noting that parts were adapted from the taste-skill by Leon Lin, under MIT. The repository itself is MIT licensed, so you may fork it, edit it, and ship what you build with it.

Two rules deserve attention before you use the skill, because they are the ones most likely to surprise you. First, the copy rules ban hyphens inside sentences and require words to be rewritten instead. That is easy to state and hard for an agent to satisfy across a whole page, so expect partial compliance and check for it with the audit in Step 5. Second, the skill says its rules beat framework defaults, but your explicit prompt beats the skill. If you already have a brand typeface outside the permitted four, say so in the prompt, or the skill will quietly replace it.

Step 3 — Give the agent a brief the skill can use

The skill's intake section asks for the primary action, the exact offer, the audience, their top three objections, the traffic source, proof points, and constraints, in one batch. Answering those questions is the work; the page is the consequence. The demo brief used for this guide is a small fictional product, because a demo needs concrete answers:

• Offer: Pixelpress, a small desktop app that shrinks photos on your own computer before upload.
• Audience: photographers who send large client galleries.
• Primary action: download. One action, and the same call to action at the top and the bottom of the page.
• Proof: a rating with an odd final digit and a review count, placed beside the claim it supports.
• Risk reversal: the download is free, with no account to close.
• Layout: type A, classic hero plus sections, because the product is understandable from a hero screenshot.

With the skill installed, the prompt to paste into your agent is short, because the skill carries the detail:

Build a landing page for Pixelpress, a desktop app that shrinks photos on your own computer before upload. Primary action is download. Audience is photographers who send large client galleries. Use layout A, classic hero plus sections. Follow the landing-page-design skill: give me the page outline, hero copy, benefits, how it works, FAQ, and layout recommendation first, then build section by section.

That last sentence mirrors the skill's own output format, which requires the outline and copy before any code, and section by section building after. If your agent skips the outline and jumps to code, the skill was not loaded: that is the most common failure with rule files, and the fix is to check the install path from Step 1, not to reword the prompt.

Step 4 — What a skill-following page looks like

The demo page built for this guide follows the skill's structure end to end: hero with headline, subheadline, one primary call to action, one proof signal, and a hero visual; three outcome driven benefits; a tagline reveal section; three how it works steps; testimonials; six questions; risk reversal; and a final call to action identical to the top one. Its hero styling is a compact example of Part B in practice:

body{font-family:'Manrope',sans-serif;font-size:16px;line-height:24px}
.hero-heading{font-size:48px;line-height:48px;max-width:680px;
  background:linear-gradient(to right,#000000,#666666);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cta{font-size:16px;font-weight:600;padding:8px 12px;border-radius:8px}
.cta:active{transform:scale(0.98)}
.cta:focus{outline:2px solid #1a7f4b;outline-offset:2px}

Every value there traces to a rule: Manrope is one of the four permitted typefaces, 48px is a step on the type scale with its paired line height, the hero is capped at 680px, the button uses 8px vertical and 12px horizontal padding, the gradient sits on heading text only (the one place the skill allows it), and the button carries hover, active, and focus states as the states section requires. The tagline reveal uses one IntersectionObserver per word, each word moving from muted to full color on the skill's base curve, with a 60ms stagger:

var words=document.querySelectorAll('#tagline .w');
var wo=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){
  var i=Array.prototype.indexOf.call(words,e.target);
  setTimeout(function(){e.target.classList.add('on');},i*60);
  wo.unobserve(e.target);}})},{threshold:0.5});
words.forEach(function(w){wo.observe(w);});

One deliberate omission, stated so you do not mistake it for an oversight: the demo page uses no icon set, so it neither follows nor breaks the icon rule. When you add icons, the skill permits Phosphor, Solar, or Iconamoon, and forbids Material Icons and Material Symbols. Pick one set and use it everywhere; mixing sets is the fastest way back to the generic look you installed the skill to escape.

Step 5 — Audit the output, because the agent will drift

A skill is a wish until something checks it. The audit below is a small Python script, standard library only, that checks the rules a script can check: permitted typefaces, the type scale, the spacing tokens, the radius values, gradients outside the hero heading, hyphens in visible copy, banned filler phrases, the tagline reveal, focus states, and the single identical call to action appearing exactly twice. Save it as audit.py beside the page and run it:

#!/usr/bin/env python3
"""Audit a page against the machine checkable rules of landing-page-design.

Checks (from SKILL.md): B1 fonts allowlist + Tailwind type scale,
B2 spacing tokens, B3 radius values, B4 flat backgrounds (gradient only
on hero heading text), B1 no hyphens in visible copy, B8 banned filler
words, B11 tagline reveal present, single primary CTA above the fold
and identical final CTA, B9 focus state present.
Usage: python3 audit.py <page.html>
"""
import re, sys

SCALE = {12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96, 128}
TOKENS = {0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96}
RADII = {0, 2, 4, 6, 8, 12, 16, 24, 9999}
BANNED_FONTS = ["Inter", "Roboto", "Arial", "Open Sans", "Helvetica"]
ALLOWED_FONTS = ["Geist", "Manrope", "Geist Mono", "Poppins"]
BANNED_WORDS = ["revolutionize", "supercharge", "cutting edge", "effortless",
                "transform your workflow", "take it to the next level",
                "harness the power", "world class"]

def main(path):
    html = open(path).read()
    body = re.search(r"<body>(.*)</body>", html, re.S).group(1)
    style = re.search(r"<style>(.*)</style>", html, re.S).group(1)
    script_free = re.sub(r"<script>.*?</script>", "", body, flags=re.S)
    text = re.sub(r"<[^>]+>", " ", script_free)
    text = re.sub(r"\s+", " ", text)
    fails = []
    for f in BANNED_FONTS:
        if re.search(r"font-family:[^;]*\b" + re.escape(f) + r"\b", style):
            fails.append(f"banned font in CSS: {f}")
    if not any(f in style for f in ALLOWED_FONTS):
        fails.append("no approved typeface in CSS")
    for m in re.finditer(r"font-size:\s*(\d+)px", style):
        if int(m.group(1)) not in SCALE:
            fails.append(f"font size off scale: {m.group(0)}")
    for prop in ["padding", "margin", "gap"]:
        for m in re.finditer(prop + r":([^;{}]+)[;}]", style):
            for v in re.findall(r"(\d+)px", m.group(1)):
                if int(v) not in TOKENS:
                    fails.append(f"spacing off token table: {prop}: {v}px")
    for m in re.finditer(r"border-radius:\s*(\d+)px", style):
        if int(m.group(1)) not in RADII:
            fails.append(f"radius off Tailwind values: {m.group(0)}")
    # gradients: allowed only inside the .hero-heading rule
    for m in re.finditer(r"([^{]+)\{([^}]*linear-gradient[^}]*)\}", style):
        if ".hero-heading" not in m.group(1):
            fails.append(f"background gradient outside hero heading: {m.group(1).strip()}")
    if "-" in text:
        i = text.index("-")
        fails.append(f"hyphen in visible copy near: ...{text[max(0,i-40):i+40]}...")
    for w in BANNED_WORDS:
        if w in text.lower():
            fails.append(f"banned filler phrase in copy: {w}")
    if 'id="tagline"' not in html or "IntersectionObserver" not in html:
        fails.append("tagline reveal section or scroll observer missing")
    if ":focus" not in style:
        fails.append("no focus state in CSS")
    ctas = re.findall(r'class="cta"[^>]*>([^<]+)<', body)
    if len(ctas) != 2 or len(set(ctas)) != 1:
        fails.append(f"primary CTA must appear exactly twice, identical: {ctas}")
    if fails:
        print(f"FAIL ({len(fails)}):")
        for f in fails:
            print(" -", f)
        return 1
    print("PASS: all machine checkable skill rules hold")
    print(f" - visible copy chars: {len(text)}, CTA text: {ctas[0]!r}")
    return 0

if __name__ == "__main__":
    sys.exit(main(sys.argv[1]))

Against the demo page, the audit passed in full:

python3 audit.py demo/index.html
PASS: all machine checkable skill rules hold
 - visible copy chars: 2151, CTA text: 'Download Pixelpress free'

An audit that never fails is a decoration, so the script was also run against a deliberately broken copy of the page, with the typeface swapped to Inter and one font size changed to 19px. It caught both, plus the derived consequence that no approved typeface remained:

python3 audit.py /tmp/audit-neg.html
FAIL (3):
 - banned font in CSS: Inter
 - no approved typeface in CSS
 - font size off scale: font-size:19px

Run this audit on your agent's output before you ship the page. It will not catch everything: it cannot judge whether a headline is specific, whether proof sits beside the claim it supports, or whether a line breaks at a meaningful point. Those are human checks, and the skill's own checklist at the end of the file is the list to use for them. What the script does catch, the drift an agent produces most often, is exactly the class of error that makes agent built pages look alike: a default font creeping back in, a size that lands between scale steps, a spacing value invented on the spot.

Step 6 — Make it yours, then stop touching it

The README's customization advice is one paragraph long and it is the right shape: every skill's design values live in one section near the bottom of the file, so fork the repository, edit that section, and the rest follows. Change the typeface to the one your brand actually uses, swap the spacing tokens if your system differs, and leave the structure alone. Two cautions from the verification. First, the file is long, and long rule files cost context on every agent run; if you only need the strategy half, trim Part B before installing, or keep the full file in projects that are only marketing pages. Second, do not edit the installed copy in place and forget the fork: the next update overwrites it. Fork, edit the fork, pin the commit, and re-audit after every update.

When to use this, and when to use something else

Traps and limits, collected in one place

• One skill, not a library. The repository promises more skills, but today landing-page-design is the whole collection, plus a separate companion repository for redesigns. Judge it on that file, not on the roadmap.
• No examples in the README. There are no screenshots of pages built with the skill and no measurements of how often agents obey its rules. The demo and audit in this guide exist because the repository does not show its own work.
• Partial compliance is the normal outcome. Rules like no hyphens in copy and snapping every size to the closest scale step below are mechanically hard for an agent to satisfy perfectly. Treat the skill's checklist as a review step, not a guarantee.
• Taste is one author's. Banning Inter, requiring a tagline reveal on every page, and capping hero width at 680px are defensible choices, not universal laws. If they clash with your brand, fork and edit the values section rather than fighting the file on every page.
• The agent step was not run here. The verification environment has no coding-agent subscription, so the prompt in Step 3 is quoted from the skill's own output format and intake, not from an observed agent run. The install paths, the file audit, the demo page, and the audit script were all executed; the generation step is the part you verify on your own machine.
• Context cost. At 432 lines, this file loads on every run in a project where it is installed. Keep it scoped to marketing page projects.

The takeaway

Most agent output looks generic for a boring reason: nothing told the agent what to choose. A default font, a default gradient, and a default layout are what you get when every value is left to chance. Ai-design-skills replaces chance with a short list of decisions: one offer, one audience, one action; a fixed structure; a fixed type scale; thirteen spacing values; flat backgrounds; one motion curve. Install the single file, pin the commit, read it once, give the agent a real brief, and then audit the result with a script instead of trusting it. The skill will not make a bad offer convert, and it will not rescue vague copy. What it does, measurably, is stop the agent from making the same ten unforced visual errors on every page, which is most of what makes agent built landing pages look agent built.

Sources: the elayadesign/ai-design-skills repository (README.md and skills/landing-page-design/SKILL.md, commit ded7efc, October 27, 2026, read October 29, 2026); the GitHub repository page for elayadesign/ai-design-skills (11,919 stars, 861 forks, MIT license, 8 commits, created July 29, 2026); an independent GitHub star tracker recording 8,651 stars gained October 22 to 28, 2026; a second tracker recording about 1,395 stars gained on October 27, 2026; and the verification runs quoted in this guide (Claude Code, Cursor, and Codex install paths; byte comparison of the Cursor download against the clone; the demo page and audit script runs, including the negative control, October 29, 2026). The agent-led page generation step is described from the skill file and was not executed here, because the verification environment has no coding-agent subscription. Star counts move daily; the figures above are dated snapshots, not live totals.