AI Design Skills

What it is

AI Design Skills is Elaya’s pair of design skills for AI coding tools. landing-page-design builds a landing page from scratch. It starts with intake questions, then page structure, layout choice and conversion copy, and ends with a fixed visual system for type, spacing, corner radius, backgrounds, icons and motion. figma-designer works inside a Figma file through the Figma MCP. It builds with real variables, named text styles, auto layout and components that carry every state. Each skill is one SKILL.md file. Your AI tool follows it, so the tool does the building and you answer its questions and judge the result.

1. You ask your AI tool for a page or a Figma design
2. The tool asks its questions or reads your Figma file
3. The tool builds one section at a time by the rules
4. You review each section and say what to change

Who it suits

People who build landing pages with an AI coding tool and keep getting the same generic page back. Designers who want an AI tool to work in Figma with variables and text styles instead of loose numbers. It is a set of rules and a process. It is not a template library, and it ships no page or component of its own.

Where to use it

Any tool that reads skills or a rules file. The README names Claude Code, Cursor, Codex and Windsurf, and it also covers Cline and Claude.ai.

• Claude Code: the skills go in .claude/skills/, through the skills CLI or by copying a folder
• Cursor: the skills CLI puts them in .agents/skills/, or one file per skill goes in .cursor/rules/
• Codex, Windsurf and Cline: the skills CLI covers them too, or you paste the SKILL.md into AGENTS.md, .windsurfrules or .clinerules
• Claude.ai: you upload the SKILL.md to a Project, or attach it to a chat and write “follow this”
• figma-designer also needs the Figma MCP connected to your tool

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder, with every route the README gives.

1. Check that Node.js is recent enough. The skills CLI’s own README asks for 22.20 or later. If your machine has no Node.js, install it from Node.js’s own site first.
2. Run the install line in your project. The skills CLI lists both skills and asks which to install and for which agents, and you choose. Add -g for a user-level install instead of a project one.
3. Ask for what the skill covers. Say you need a landing page, or a design in Figma. If the skills folder is new, run /reload-skills in Claude Code first.

npx skills add elayadesign/ai-design-skills

To take one skill, add its name after --skill. The README’s example takes landing-page-design.

npx skills add elayadesign/ai-design-skills --skill landing-page-design

With no Node.js, the manual route for Claude Code copies a folder by hand. Replace <skill-name> with landing-page-design or figma-designer. On Windows, run it in a bash shell such as Git Bash.

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/

For figma-designer, connect Figma first. Figma’s help page for Claude Code gives this line.

claude plugin install figma@claude-plugins-official

Then restart Claude Code, type /plugin, select figma on the Installed tab and press Enter twice. A browser page opens, and you click Allow access.

How to use it

Ask in plain words, as the README says. Claude Code loads a skill when your request matches its description, and each skill’s description says it applies even when you do not name it.

landing-page-design asks for what is missing in one batch. Where you cannot answer, the tool makes an assumption, says it in one line and goes on. figma-designer checks your file for existing variables and styles first, then builds one section at a time with a screenshot after each.

Example

You run a small invoicing app and want a page that gets visitors to start a free trial.

Build a landing page for my invoicing app. The one action is starting a free trial.

The tool asks for your offer, the top three reasons visitors do not sign up and the proof you have, then returns an outline, hero copy and an FAQ before it writes code.

It builds the hero first, in one typeface from the skill’s list, and leaves marked placeholders such as {{price}} where you gave no real price.

For newcomers and experts

If you are new. A skill is a text file of instructions your AI tool follows when your request matches it. Start with the page you need and answer the intake questions plainly. When you want something different from a rule, say so in your prompt. landing-page-design’s SKILL.md says your own prompt wins over its rules.

For experts. The design values live in the files, so you can change them. The README says to fork the repository and edit each skill’s design section. In figma-designer that is the Token reference at the end. In landing-page-design the values sit in Part B.

The two files differ in places. landing-page-design allows only Geist, Manrope, Geist Mono and Poppins and sets its headings semibold. figma-designer allows any font and sets its headings regular. Use each where it fits, or edit one to match the other.

figma-designer sits on Figma’s own skills. Its SKILL.md tells the tool to load figma-use before any use_figma call, and figma-generate-design or figma-generate-library for screens and libraries. The README does not say how to get them, and Figma’s plugin for Claude Code includes them.

Good to know

These are rules, not templates.

• No page or component ships: each skill folder holds one SKILL.md, so installing adds instructions and no program
• Strict on purpose: the landing page skill bans hyphens in page copy, background gradients, italic fonts and fonts outside its list. Your prompt can overrule it
• Figma: figma-designer needs a Figma Design file you can edit and the Figma MCP. Its SKILL.md names no way to connect them, so use Figma’s help pages
• Claude.ai: the README gives an upload route, and it does not say whether Claude.ai can run figma-designer. Treat that skill as a Claude Code or Cursor one until you check
• Updates: after a skills CLI install, npx skills update pulls changes. The manual routes have no update step, so copy the folder again
• Existing sites: the README points to a separate repository, redesign-skill, for upgrading a site that already exists
• Credits: landing-page-design adapts content realism and motion ideas from Leon Lin’s taste-skill, which is MIT licensed
• Maker: Elaya, MIT licensed, with no attribution needed. A community project, not made by Mindket