AI Design Skills: a Claude Code skill by Elaya
For people building a landing page or Figma file who want fixed design rules and conversion structure. Skip it if you already have your own design system.
Before you install: Its description tells Claude to apply its fixed fonts, colors and spacing to any web UI work, even when you never mention design.
- Score
- 60of 100
- Rank
- #223of 239
- Installs
- 1.8Kon skills.sh
- Stars
- 15.2Kon GitHub
- Security
- Clear 3 scanners
- Updated
- 2026
- Context
- ~168tokens always
Install
npx skills add https://github.com/elayadesign/ai-design-skills Run it in your terminal. View the source
Most people install it straight from GitHub, where it has 15.2K stars, so its skills.sh count understates how widely it is used.
Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app
What does AI Design Skills do?
AI Design Skills is a set of 2 skills: landing-page-design for building pages in code and figma-designer for designing inside Figma. landing-page-design opens with one batch of intake questions about the offer, audience, objections and proof, then sets a 12-part page structure, picks one of four layouts and writes conversion copy section by section. Its second half is a strict visual system: Geist, Manrope or Poppins only, a fixed spacing scale, Tailwind type and radius steps, flat backgrounds, Phosphor or Solar icons and set motion curves. figma-designer, per the README, builds Figma files with variables, named text styles, auto layout and components with every state.
It comes as a set of skills that work together:
- figma-designer (1.4K installs)
- landing-page-design
When should you use AI Design Skills?
Use it when
- You are building a landing page from scratch
- You want copy and layout aimed at one conversion goal
- You want a Figma file with real tokens and components
Skip it when
- Your project already follows its own design system
- You want gradients, Inter or other fonts it bans
What it needs and what it can touch
You need
- Figma access, for the figma-designer skill
What it can do
- Reads and edits project files
From reading its instructions, not from running it.
Why it scores 60
Strongest on quality (100 of 100), weakest on adoption (22).
Is AI Design Skills safe to install?
Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.
| Scanner | Result | Date |
|---|---|---|
| Gen Agent Trust Hub | Passed | Nov 1, 2026 |
| Socket | Passed | Nov 1, 2026 |
| Snyk | Low risk | Nov 1, 2026 |
Details
- Installs
- 1,824
- Repository stars
- 15,180
- Last repository change
- Tokens always loaded
- about 168
- Tokens when used
- about 5,339
- License
- MIT
- Data confidence
- High
Did it do the job for you?
Alternatives to AI Design Skills
All skills for this job-
Get frontend-designfrontend-design
For anyone asking Claude to build a page or screen whose look should be chosen for the subject.
-
Get frontend-ui-engineeringfrontend-ui-engineering
For developers building React-style interfaces who want accessible, responsive components without the stock AI look.
-
Get ui-ux-pro-maxui-ux-pro-max
For builders who want Claude to pick styles, palettes and fonts from a local search database before writing UI.
-
Get interface-designinterface-design
For builders of dashboards, admin panels and SaaS tools who want each visual choice argued from the product's world.
AI Design Skills