One Open Source Project a Day (No. 257): AI Design Skills — Design Guidelines Written as Rules an AI Can Execute, for Landing Pages and Figma

Introduction

"One offer → one audience → one primary action."

This is the 257th article in the "One Open Source Project a Day" series. Today's project is elayadesign's AI Design Skills.

The most common complaint about AI-made design is that it's bland: the same fonts, the same gradients, the same three-column cards. There are two ways out: give the AI more taste, or write design decisions down as rules that can be followed and checked item by item. This project takes the second path.

Each Skill is a folder at skills/<skill-name>/ with a SKILL.md inside, and you install only what you need. The design values (fonts, colors, spacing, motion) sit together in one section near the bottom of the file, so to change the look you fork the repo and edit that section, and the rest of the Skill adapts.

What You Will Learn

• How landing-page-design splits "strategy" from "visuals" and fixes their order
• How figma-designer makes the AI "bind variables instead of typing values" in Figma
• The shared set of design values: fonts, spacing, radii, motion
• How to install into different tools and how to customize for your brand
• The strengths and costs of this "rule-style" Skill

Prerequisites

• Having used Claude Code, Cursor, or similar tools, and knowing what a SKILL.md is
• Basic familiarity with front-end work or Figma
• Optional: Tailwind's type and radius scales

Project Background

What It Is

A collection of design skills for AI coding tools (Claude Code, Cursor, Codex, Windsurf, and any tool that reads a Markdown rules file). There are two now, and the README says more are on the way:

• landing-page-design: builds a landing page from scratch, covering intake questions, page structure, conversion copy, and a full visual system
• figma-designer: designs inside Figma with real structure

A separate repo, elayadesign/redesign-skill, handles upgrading existing sites and predates this collection. The README also promotes SlopScan, a tool that audits a live site against the same rules and produces a fix prompt for your agent.

Project Stats

• ⭐ GitHub Stars: about 14,480
• 🍴 Forks: about 1,090
• 💻 Language: Python (the repo itself is mostly Markdown rules)
• 📅 Created: 2026-07-29
• 📄 License: MIT, no attribution required
• 👤 Author: not named in the README; the repo sits under the GitHub account elayadesign
• 🤝 landing-page-design adapts content-realism and motion ideas from Leonxlnx/taste-skill (Leon Lin, MIT)

What It Does

The Problem It Solves

Without rules:
  The AI falls back on defaults → Inter font, gradient backgrounds, three equal cards
  ↑ and results differ from run to run
 
The Skill approach:
  Write design decisions as a list: what's allowed, what isn't, and the numbers
  ↓ the AI generates by the rules, then self-checks against the list
  ↑ to change the look, edit one section of design values

Quick Start

Node.js is needed for the skills CLI route:

# Interactive install
npx skills add elayadesign/ai-design-skills
 
# Just one skill
npx skills add elayadesign/ai-design-skills --skill landing-page-design
 
# Pick agents, user-level install
npx skills add elayadesign/ai-design-skills -a claude-code -a cursor -g
 
# List only, skip confirmations, update later
npx skills add elayadesign/ai-design-skills --list
npx skills add elayadesign/ai-design-skills -y
npx skills update

Install locations: .claude/skills/ for Claude Code, .agents/skills/ for Cursor, Codex, and others.

Manual install

After installing, just ask in plain language, for example "build a landing page for my SaaS product."

A Deeper Look

landing-page-design: Strategy First, Visuals Second

This Skill has two parts: A (strategy and structure) comes before B (visual system). If a user's explicit prompt conflicts with a rule, the user wins; otherwise the Skill overrides framework defaults.

A1 Intake: ask everything missing in one batch; if the user doesn't answer, write down an assumption, state it in a line, and continue. It covers the one primary action and what counts as a conversion, the audience and top three objections, available proof (logos, testimonials, numbers, case studies, guarantees, refund terms), and brand and mobile priorities.

A2 Page structure

• Above the fold: headline (outcome plus audience), subheadline, primary CTA (verb plus what they get), one proof signal, hero visual
• Mid page: problem to solution, 3 to 5 benefits, a 3-step how it works, social proof
• Bottom: FAQ (6 to 12 questions), risk reversal, a final CTA identical to the top

A4 Conversion rules: match the message to the traffic source; one primary CTA above the fold; benefits before features; be specific (for example, cutting reporting from 4 hours to 15 minutes); include at least one risk reducer; place proof beside its claim. CTAs are never "Learn more" or "Submit."

The Visual System: Numbers Written Down, So They Can Be Checked

Motion has concrete numbers too: curve cubic-bezier(0.22,1,0.36,1), duration-500 for layout, hover color or opacity at 300ms and never under 200ms; animate only transform and opacity and respect prefers-reduced-motion; scroll reveals rise 32px and fade over 600 to 800ms, once only, via IntersectionObserver rather than unthrottled scroll listeners.

On content realism: banned filler includes revolutionize, supercharge, cutting edge, effortless, and world class; sample numbers shouldn't be round; no invented facts about real products, using placeholders like {{price}} instead. States must be complete: hover, active (scale(0.98)), visible focus, skeleton loading, empty views, and inline errors, with no window.alert() and no dead # links.

The mandatory tagline reveal: a separate section lower on the page, at least two lines, set in Heading 3 to 1, with words starting at about 25 to 35% opacity and lighting up one at a time at a trigger line while scrolling; under reduced motion, full color shows immediately.

figma-designer: Bind, Don't Type

It layers on the official figma-use, figma-generate-design, and figma-generate-library skills, and figma-use must be loaded before any use_figma call. Six steps:

1. Inspect the file: list local variables and text styles, search the libraries, and reuse what exists
2. Create what's missing: spacing and radius variables, Core Colors, Color System (Light and Dark modes), and text styles
3. Build section by section, taking a screenshot after each and fixing issues
4. Use auto layout everywhere, with padding and gap bound to spacing variables
5. Bind, don't type: fills, strokes, radii, padding, and gaps bind to variables, text uses text styles; designs use Color System only, never Core Colors directly
6. Run the checklist, fix failures, then report what was built and skipped

A few design choices worth noting:

• Two color layers: Core Colors are palettes (at least 10 shades each), while Color System is entirely aliases grouped as Border, Surface, Action, Text, Icon, and Overlay; names describe roles, not colors, and light and dark are Modes rather than two sets of hardcoded colors
• Foundations page: one auto layout section per variable collection, with every sample bound to variables so it updates with the tokens; label text (such as Surface/Primary → Grayscale/870) must be re-synced manually
• Components: anything reusable is a component; buttons are one set with Type (Primary, Secondary, Tertiary, Error, Warning) × State, giving 25 variants per size, with focus adding a 2px outside ring; data views get Loading, Empty, and Error states
• Accessibility: 4.5:1 contrast for body text, 3:1 for large text and UI parts, never rely on color alone, and touch targets of at least 44×44 on mobile
• Hygiene: meaningful layer names (such as Pricing / Card / Pro), never Frame 427; pages Foundations, Components, and Screens; never delete or move existing user layers unless asked

It ends with a 12-item checklist covering variable binding, two-mode colors, state variants, icon sources, and placeholder copy.

Strengths and Costs

Strengths: checkable rules give more consistent results; each Skill is independent and installed as needed; design values sit in one section, which is easy to customize; it works across tools.

Costs: the rules are firm, and different brands may end up looking alike. The font allowlist has only four entries and bans Inter; the mandatory tagline reveal and uniform gradient heading suit one kind of style, not necessarily yours. It's better seen as opinionated defaults than a neutral tool. The README states no further limitations and says nothing about Python scripts, so the repo's Python language tag may just be a statistical artifact.

Project Links and Resources

• 🌟 GitHub: https://github.com/elayadesign/ai-design-skills
• 🔁 Upgrading existing sites: elayadesign/redesign-skill
• 🔍 Site audit: SlopScan
• 🎨 One source of inspiration: Leonxlnx/taste-skill (No. 125 in this series)
• 📄 License: MIT

Summary

Key Takeaways

1. Rule-style Skills: design decisions written as executable, checkable lists
2. Landing pages in two parts: strategy and structure first, then the visual system, with user instructions taking priority
3. Bind rather than type in Figma: variables, text styles, auto layout, and component states all covered
4. Values in one section: fork and edit one place to change the look
5. Opinionated: the font allowlist and mandatory tagline motion won't suit every brand

Who This Is For

• Solo developers and small teams who want consistent landing pages from AI
• Designers using Figma MCP who want the AI to respect a design system
• Developers who want to learn how to write design guidelines as Skills

Suggested First Steps

Install landing-page-design first and have it build a landing page for a product you know, then check against the list which rules produced results you like and which don't fit your brand. Then fork the repo and edit only the design-values section to see whether the look follows. For the Figma side, you need Figma MCP set up and the official figma-use first.

Check out PrimeSkills — a curated marketplace of AI agents and skills that have been validated in real-world, enterprise-grade workflows. No fluff, just what actually works.

Find more useful knowledge and interesting products on my Homepage