ai-design-skills: The Landing Page Design Skill Trending on GitHub, and What Is Inside

The GitHub repository ai-design-skills, a collection of design skills for AI coding tools, was trending on October 27, 2026 after gaining about 1,395 stars in a day and reaching roughly 9.1k stars and 656 forks, and it currently contains exactly one skill, landing-page-design. The MIT-licensed markdown file gives coding agents in Claude Code, Cursor, Codex, Windsurf and Cline a conversion-focused structure plus hard visual rules, including bans on Inter, Roboto, Arial, Open Sans and Helvetica, no background gradients, and no hyphens in copy. The repository's README describes a growing library, but the file reviewed is instructions only and does not run code.

A repository called ai-design-skills https://github.com/elayadesign/ai-design-skills?ref=explainx was trending on GitHub on October 27, 2026, gaining about 1,395 stars in a day and sitting at roughly 9.1k stars and 656 forks when we looked. It is a collection of design skills for AI coding tools, and right now it contains exactly one skill: landing-page-design . That is worth knowing before you install anything. The repo's pitch is a growing library; what you get today is one long, opinionated markdown file that tells your coding agent how to plan, write and style a landing page. This guide reads that file, explains what it forces your agent to do, how to install it in Claude Code, Cursor and Codex, and where its rules are likely to clash with your own brand. TL;DR: what builders ask first | Question | Answer | |---|---| | What is it? | A markdown skill with strategy rules plus a strict visual system for landing pages | | Which tools? | Claude Code, Cursor, Codex, Windsurf, Cline, or any tool that reads a rules file | | License? | MIT, no attribution needed | | How many skills? | One today landing-page-design ; the README says more are coming | | Does it run code? | The file we read is instructions only | | Biggest catch? | Hard rules no Inter, no hyphens in copy, no background gradients that override framework defaults | What the landing-page-design skill makes your agent do The skill has two halves. Part A decides what the page says and how it is structured. Part B is what the file calls "the non negotiable visual system." It tells the agent to work through A before touching B. Part A is conversion thinking. The core idea is that a landing page wins one intent: "one offer, one audience, one primary action." The agent is told to run an intake first, asking in one batch for the primary action, offer, ideal customer, top three objections, traffic source and proof points. If you cannot answer, it should state an assumption in one line and carry on rather than stall. It then prescribes a structure: above the fold a headline, subheadline, primary call to action, one proof signal and a hero visual; mid-page a problem-to-solution section, three to five benefits, a three-step how-it-works and social proof; at the bottom a six-to-twelve-question FAQ, risk reversal and a final call to action identical to the top. It offers four layout types classic hero, long-form story, minimal conversion page, comparison page and asks the agent to pick one and say why. It also suggests building section by section, never rebuilding the whole page per iteration, which keeps diffs reviewable. Copy rules are specific: benefit first, specific numbers "cut your weekly reporting from 4 hours to 15 minutes" beats "save time" , call-to-action verbs that say what you get, and at least one risk reversal such as a free trial or cancel anytime. The visual rules, and why they are a double-edged sword A grid of design system tiles with one green swatch illustrating strict landing page design rules in ai-design-skills Part B is where this skill differs from a generic "make it pretty" prompt. A sample of what it hard-codes: | Area | Rule in the skill | |---|---| | Fonts | Use Geist, Manrope, Geist Mono or Poppins; never Inter, Roboto, Arial, Open Sans or Helvetica; one typeface per site; no italics; nothing heavier than bold | | Type scale | Every size must land on a Tailwind step; snap to the closest step below | | Spacing | Only 13 tokens, from 0 to 96px | | Radius | Tailwind values; nested radius equals outer radius minus gap when the gap is under 32px | | Backgrounds | Flat only, no gradients; dark mode limited to six hex values | | Hero | Heading and subheading capped at 680px; gradient allowed only on heading text | | Icons | Phosphor, Solar or Iconamoon; never Material | | Motion | Weighted curve, animate only transform and opacity, respect reduced motion | | Copy | No hyphens in text, no orphaned words, sentence case, banned filler words like "revolutionize" and "supercharge" | | Required section | A tagline reveal where words go from muted to full color one at a time on scroll | The upside is consistency. A fixed spacing table, type scale and motion curve are exactly what stops agent-built pages from drifting into generic gradient-and-Inter sameness. The content realism section is also useful: no placeholder Latin, believable names, odd final digits in metrics, and calm specific error messages like "Upload failed. The file is over 20 MB." The downside is that these are one author's taste, written as law. The skill states "when a rule here conflicts with a framework default, this file wins," though also that when your explicit prompt conflicts with a rule, you win. If you already have a design system, install this skill and you may get a page that ignores your brand fonts. For that case, our guide to DESIGN.md templates for professional UI with AI agents https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents is the better starting point, and you can borrow just Part A. How to install it The README gives three paths. Claude Code. Create the skills folder, clone the repo to a temporary directory, and copy the skill folder in. Then ask in plain language for a landing page; the skill's long description tells the agent to consult it for any landing page, marketing site, component or prototype work, even if you do not mention design. Cursor. Download the skill's SKILL.md into .cursor/rules/ , or paste it into Settings, Rules for AI. Codex, Windsurf and others. Copy SKILL.md into whatever your tool uses: AGENTS.md for Codex, .windsurfrules for Windsurf, .clinerules for Cline, or paste it into a system prompt. On Claude.ai without a terminal, upload it to a Project. To customize, fork the repo and edit the design values section near the bottom of the file; the README says the rest follows automatically. For background on how skills load and why they are just markdown, see our complete guide to agent skills https://explainx.ai/blog/what-are-agent-skills-complete-guide . Safety and trust: what to check before installing a trending skill A skill is text your agent obeys, so a bad one is a prompt injection you invited in. The file we read contains instructions only, with no scripts, network calls or install hooks, and its credits section says parts were adapted from the MIT-licensed taste-skill by Leon Lin. The README also points to a companion repo for upgrading existing sites. Still, trending repos change fast. Pin to a commit, diff before updating, and read the whole file once. The same advice applies to bigger bundles such as ECC's 71 agents and 311 skills https://explainx.ai/blog/ecc-affaan-m-agent-harness-71-agents-311-skills-install-risks-github-trending-guide-2026 , where the install-risk surface is larger. How it compares with other skill collections | Collection | Scope | Our coverage | |---|---|---| | ai-design-skills | One skill, landing page strategy plus visuals | This post | | Rust-focused skills | Language tooling and Clippy config | BeautifulRust agent skills https://explainx.ai/blog/beautifulrust-agent-skills-rust-clippy-config-claude-code-codex-guide-2026 | | Workflow skills | Review, council and ship patterns | tstack agent skills https://explainx.ai/blog/tstack-t3dotgg-agent-skills-full-send-council-claude-code-codex-guide-2026 | | Mega bundle | Dozens of agents and skills | ECC harness guide https://explainx.ai/blog/ecc-affaan-m-agent-harness-71-agents-311-skills-install-risks-github-trending-guide-2026 | Star count is a weak signal here. 9.1k stars on a repo with 8 commits and one skill says more about the appeal of design guardrails for AI output than about maturity. Open questions the README does not answer: no versioned releases, no examples of generated pages, and no stated tests of how often agents obey the rules. Where the rules come from, and what is not tested The skill's credits say it adapts content realism and motion ideas from taste-skill by Leon Lin https://github.com/Leonxlnx/taste-skill?ref=explainx , MIT licensed, and that the sections were rewritten since. A companion skill, redesign-existing-projects in the elayadesign redesign-skill repository, handles upgrading an existing site and defers to this file for every concrete value. That lineage matters: this is part of a small family of taste-encoding skills, not a standalone invention. What is missing is evidence. There are no before-and-after screenshots in the README, no benchmark of landing page conversion, and no measurement of how reliably Claude Code, Cursor or Codex follow a file this long. Some rules are also mechanically hard for an agent to satisfy, such as "no hyphens in text" across all copy, or snapping every arbitrary size to the closest Tailwind step below. Expect partial compliance and use the quick checklist at the end of the file as a review step rather than trusting the first output. One more practical point: the file is long, and long rule files cost context on every run. If you only need strategy, trim Part B before installing, or keep the full file in a project you only use for marketing pages. A practical prompt to try After installing, try: "Build a landing page for a client-side image compressor. Primary action is download. Audience is photographers. Use layout C." Check the output against the skill's own checklist: one primary call to action above the fold, every font size on a Tailwind step, no gradient backgrounds, and the tagline reveal present. If the agent skips the intake or uses a banned font, the skill was not loaded, which is the most common failure with rule files. Bottom line ai-design-skills is a well-structured, MIT-licensed style guide packaged for agents. Install it if you want fast, consistent, conversion-minded landing pages and accept its taste. Skip it, or keep only Part A, if you have an established brand system. Either way, read the file first. Related reading Details are accurate as of October 27, 2026, based on the repository README and SKILL.md; star counts change quickly.