Repolode
Submit
elayadesign

elayadesign/ai-design-skills

A collection of self-contained design skill files for AI coding tools such as Claude Code, Cursor, and Codex, starting with a landing page skill.

View on GitHub
Stars
14,606
Forks
1,104
Open issues
1
Last commit
5 days ago

What is it?

AI Design Skills is a set of markdown-based design skills that AI coding tools can follow when building user interfaces. Each skill is a self-contained folder with a SKILL.md file, so you install only the ones you need into your project's rules or skills directory.

The current skill, landing-page-design, guides an assistant through building a landing page from scratch. It covers intake questions, page structure, conversion-oriented copy, and a visual system defining typography, spacing, radius, and motion. A separate repository handles upgrading an existing site.

Installation works with Claude Code (copied into .claude/skills), Cursor (as a file in .cursor/rules), and tools such as Codex, Windsurf, and Cline through their respective rules files. Claude.ai users can upload the file to a Project or attach it to a chat. Design values such as fonts, colors, and spacing sit in one section near the bottom of each file for easy customization.

Key features

  • 01Provides a landing-page-design skill covering structure, copy, and visual system
  • 02Each skill is a self-contained folder that can be installed independently
  • 03Works with Claude Code, Cursor, Codex, Windsurf, Cline, and generic system prompts
  • 04Design tokens such as fonts, colors, and spacing are grouped in one editable section
  • 05Released under the MIT license

Use cases

  • Generating a landing page for a product launch with an AI coding assistant
  • Giving an AI tool consistent design rules so generated UI follows a defined visual system
  • Customizing fonts, colors, and spacing for a team's brand by forking the repository

Quick start

  1. 1

    Create the skills folder in your project

    mkdir -p .claude/skills
  2. 2

    Clone the repository to a temporary folder

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

    Copy the skill folder you want into your project (replace <skill-name>, e.g. landing-page-design)

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

    In Claude Code, ask in plain language for what the skill covers

In collections

UI design skills for AI coding agentsClaude Code tools, skills & pluginsAI coding assistants & agents

Topics

#ai-coding#design-system#landing-page#claude-code#cursor#prompt-engineering#ui-design

FAQ

What is ai-design-skills?
A collection of self-contained design skill files for AI coding tools such as Claude Code, Cursor, and Codex, starting with a landing page skill. AI Design Skills is a set of markdown-based design skills that AI coding tools can follow when building user interfaces. Each skill is a self-contained folder with a SKILL.md file, so you install only the ones you need into your project's rules or skills directory.
Is ai-design-skills free to use? What license does it have?
ai-design-skills is open source under the MIT license. Check the license terms before using it in commercial products.
Is ai-design-skills still maintained?
Actively maintained. The last commit to ai-design-skills was on Nov 1, 2026.
What can I use ai-design-skills for?
Generating a landing page for a product launch with an AI coding assistant Giving an AI tool consistent design rules so generated UI follows a defined visual system Customizing fonts, colors, and spacing for a team's brand by forking the repository
How do I install ai-design-skills?
Create the skills folder in your project: mkdir -p .claude/skills Clone the repository to a temporary folder: git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills Copy the skill folder you want into your project (replace <skill-name>, e.g. landing-page-design): cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/ In Claude Code, ask in plain language for what the skill covers
Where can I get ai-design-skills?
The source code and installation instructions are on GitHub: https://github.com/elayadesign/ai-design-skills

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects