Skip to content
Get packs

AI Design Skills

A set of markdown design-guidance files that AI coding tools can follow, starting with a landing-page skill.

GitHub Download source
Stars
13.5k
Forks
1k
Licence
MIT
Language
Python
Last update
4 days ago
Type
Other

What it is

This repository is a collection of 'skills', which are self-contained markdown files of design instructions for AI coding tools such as Claude Code, Cursor, Codex, and Windsurf. The one skill listed in the README, landing-page-design, covers building a landing page from scratch, including intake questions, page structure, conversion copy, and a visual system for type, spacing, radius, and motion. People use it to give an AI assistant consistent design guidance when generating a page.

  • Generate a landing page structure and conversion copy from a short set of intake answers
  • Apply a predefined type, spacing, radius, and motion system to a new page
  • Fork the repo and change the design values section to match your brand
  • Copy a SKILL.md file into a Claude.ai Project and ask for a page that follows it

Great for

  • Developers who use an AI coding tool to build landing pages
  • Designers who want an AI assistant to follow a defined visual system
  • Marketers drafting conversion-focused landing page copy with an AI tool
  • People who want to customize design values by forking the repo and editing one section

Not ideal for

  • Anyone upgrading an existing site, since the README points to a separate redesign-skill repo for that
  • People without an AI coding or rules-file tool, since the skills are plain instructions and do nothing on their own
  • Users who need a finished, runnable component library or framework
Step-by-step guide: how to use AI Design SkillsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    See the README

    Claude Code: clone the repo to a temp folder

    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills

    Claude Code: copy a skill into your project

    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/

    Cursor: download a skill as a rules file

    curl -o .cursor/rules/<skill-name>.md https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md
  2. 2

    Run it

    • Pick a skill from the table in the README, such as landing-page-design
    • Install it into your AI tool using the method for that tool
    • In Claude Code, ask in plain language for what the skill covers
    • Review the generated page and adjust the design values if needed
  3. 3

    Get the most out of it

    • Edit the design values section near the bottom of a skill file to match your brand
    • Use the intake questions in the landing-page skill to give the AI the context it asks for
    • Install the same SKILL.md into several tools if your team uses more than one

Downloads

Source code (.zip)main branch · straight from GitHub

Strengths

  • Works with several AI tools, including any that read a markdown rules file
  • Installation is a copy of a markdown file, with no build step described in the README
  • Design values are centralized in one section that is easy to edit

Trade-offs

  • The README lists only one skill so far, and says more are on the way
  • The README does not describe how output quality compares across AI tools
  • Credits note that some content ideas come from another MIT-licensed project, so reuse should keep that attribution in mind

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.