Free Landing Page Design Rules Library: A Practical Guide for Claude Code and Cursor

AI coding assistants produce landing pages that look identical nine times out of ten: a centered hero headline, three icons in a row, and a gradient button. This "AI aesthetic" has become a running joke in developer circles. A designer named Elia has open-sourced the solution directly—a landing page design skill built specifically for Claude Code and Cursor, MIT licensed, completely free, and nearing 9,000 GitHub stars.

How This Skill Actually Works

According to a YouTube channel's introduction to this skill, it's called Landing Page Design. It's essentially a structured markdown instruction file that gets read and executed when placed into a Claude Code or Cursor project.

The first step isn't having it write code—it's "interrogating" you with three questions: what your product/service is (offer), who it's for (audience), and the single action you want visitors to take. These three answers shape every subsequent design decision and prevent the AI from free-styling in an information vacuum, churning out generic template copy that could fit anything.

Start with Structure, Not Color

Once it has those three answers, the skill plans out 12 page sections, starting from the main headline all the way through to the FAQ and final call-to-action button. Skeleton first, flesh second—the order itself is good design. Many AI-generated pages fail precisely because they skip structure and jump straight to piling on visual elements. The result looks flashy but the conversion path is broken.

Visual Rules Are Hard Constraints

The real differentiator lies in typography and spacing. The skill restricts fonts to a whitelist: Geist, Manrope, Geist Mono, Poppins, Never, Intel, Roboto. Spacing values come from a fixed list of 13 numbers.

This "constrained assignment" approach deserves a closer look. Generative AI's default behavior is to diverge as much as possible, but design requires convergence—too many font choices and arbitrary spacing values cause the page to lose its rhythm. Narrowing the option space with a whitelist and fixed values actually pushes output closer to professional-grade design. This aligns with the underlying logic of many design systems: constraints aren't the enemy of freedom—they're the guarantee of quality.

Claude Code and Cursor represent two mainstream forms of AI coding tools today. Claude Code is Anthropic's command-line agent tool that runs in the terminal, capable of reading and writing project files, executing commands, and autonomously completing multi-step tasks. Cursor is an editor built on VS Code that embeds AI chat, code completion, and context retrieval into the IDE. Both support injecting persistent instructions and constraints into the model through markdown files within the project (such as CLAUDE.md, .cursorrules, or rules directories). A "skill" is essentially this kind of rule document that the tool automatically reads—it doesn't modify model weights but influences generation behavior through context injection, making it portable, versionable, and easy for teams to share and customize.

Several names on the font whitelist warrant a brief explanation. Geist and Geist Mono are open-source font families released by Vercel—the former a sans-serif body font and the latter a monospace variant, both carrying a distinctly modern tech-product character. Manrope is a geometric open-source sans-serif often used in clean SaaS interfaces. Poppins originates from an Indian type project with rounded, strongly geometric letterforms suited to friendly brands. Roboto is Google's system-level font with broad coverage and good compatibility. Compressing candidates to this small set essentially pre-completes font pairing and tonal filtering for users, avoiding issues like arbitrary mixing of serif and geometric sans-serif fonts or introducing commercially licensed fonts. The fixed spacing value list serves the same purpose: replacing arbitrary pixel values with a rhythmic scale so whitespace between sections maintains internal consistency.

Redesign: Subtracting from Existing Pages

The same designer also released another free skill called Redesign. Usage is straightforward: point it at a website you've already launched, and it identifies "genericized patterns"—places that clearly bear template fingerprints—then fixes them.

These two skills are complementary: Landing Page Design handles starting from scratch, while Redesign handles retrofitting existing pages. For teams sitting on a pile of AI-generated pages with no idea how to systematically improve them, the latter may offer more practical value.

A Few Pitfalls to Watch For

The Motion Skill Is No Longer in the Repository

The video gives a clear heads-up: the skill for motion animations is no longer in this repository as of that day, and the new repository hasn't been made public yet. If you see someone recommending it online but the link doesn't work, that's why.

Stars Don't Equal Design Quality

Nearly 9,000 stars is an impressive number, but the video itself cautions: lots of stars doesn't mean the design is good.

This is a measured and necessary reminder. GitHub stars reflect reach and buzz, not actual output quality. The same rules library will perform very differently across different products and brand tones. The only reliable way to verify is to run it on your own page and see whether the output is usable.

GitHub stars are a one-way, low-cost bookmarking behavior—users often star at the moment they see a tweet or video, think "this looks useful," and save it for later, rather than after actually using and validating it. Star count is therefore closer to a reach metric, measuring exposure and buzz, with a clear gap from the repository's actual effectiveness. More reliable signals for judging whether such a rules library is worth adopting include: whether there are concrete usage examples and output screenshots, whether people in the issues section report real results, whether the rules are continuously updated, and whether the author explains the boundaries of applicability. The most direct test remains plugging it into your own project, generating a page with real product information, and manually evaluating it against your conversion goals.

Why These "Design Rules Libraries" Are Worth Watching

Encoding a designer's judgment into AI-executable constraints is becoming a new form of collaboration. Previously, getting this level of design guidance meant either hiring a designer or grinding through an entire design specification book. Now it exists as a markdown file, MIT licensed, ready to drop into your workflow.

For individual developers and small teams, this means a substantial lowering of the barrier—you no longer need to understand font pairing and spacing systems to have AI produce a landing page with complete structure and on-point visuals. For more experienced teams, the value lies in making design rules explicit—turning them into something discussable, modifiable, and versionable.

What's important is staying clear-headed: a rules library solves the "floor" problem—keeping AI from producing something terrible. The ceiling—truly compelling design—still requires human judgment. Tools eliminate mediocrity; people create surprise.

One-line Summary

A designer open-sources a landing page design skill that constrains AI-generated pages with whitelists and fixed spacing.

Paragraph Summary

Designer Elia has open-sourced a markdown skill called Landing Page Design, built for Claude Code and Cursor under the MIT license, with nearly 9,000 GitHub stars. Rather than writing code directly, it first asks three questions—product offer, target audience, and core action—then plans 12 page sections from hero headline to FAQ and CTA, establishing structure before visuals. The real differentiator is hard constraints: fonts limited to a whitelist of seven including Geist, Manrope, Poppins, and Roboto, and spacing drawn from 13 fixed values, favoring convergence over divergence. A companion Redesign skill scans live websites to identify and fix template-like patterns. The article also notes that the motion animation skill has been removed from the repository, and that star count doesn't equal design quality—testing on your own pages is essential.