Individual skill

figma-designer

Design inside Figma the way this designer does: real variables, text styles, auto layout and components, on a fixed visual system (Tailwind type and radius scale, spacing tokens, two-layer color tokens, button and state rules). Use this skill whenever you create, edit or review anything in a Figma file through the Figma MCP: screens, landing pages, components, mockups, design systems, tokens, or any UI. Use it even when the user doesn't name the skill and only says things like 'design a page in Figma', 'make a button component', 'mock this up' or shares a figma.com link. Load it before writing any use_figma code.

skills/figma-designer/SKILL.md

Read pinned source

Source commit 456d9e0d3e2d84c748bb143c6ca3d90c45e16213

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: Yes
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

Claude Code

Destination .claude/skills/figma-designer

(
  set -euo pipefail
  destination='./.claude/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.claude/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Codex

Destination .agents/skills/figma-designer

(
  set -euo pipefail
  destination='./.agents/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.agents/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Cursor

Destination .cursor/skills/figma-designer

(
  set -euo pipefail
  destination='./.cursor/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.cursor/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Gemini CLI

Destination .gemini/skills/figma-designer

(
  set -euo pipefail
  destination='./.gemini/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.gemini/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

GitHub Copilot

Destination .github/skills/figma-designer

(
  set -euo pipefail
  destination='./.github/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.github/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

OpenCode

Destination .opencode/skills/figma-designer

(
  set -euo pipefail
  destination='./.opencode/skills/figma-designer'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/elayadesign/ai-design-skills.git' "$work/repo"
  git -C "$work/repo" checkout --detach 456d9e0d3e2d84c748bb143c6ca3d90c45e16213
  git -C "$work/repo" archive --format=tar '456d9e0d3e2d84c748bb143c6ca3d90c45e16213:skills/figma-designer' > "$work/skill.tar"
  mkdir -p -- './.opencode/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Repository context

Repository stars (not skill ratings): 15,286
Repository last updated: Nov 1, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

design Derived category
writing Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 22,079 bytes

Read excerpt


# Figma Designer

These are the designer's own rules for working in Figma. They sit on top of the official Figma skills and don't replace them.

- **Load `figma-use` before any `use_figma` call.** It holds the Plugin API rules (color ranges, font loading, layout sizing). This skill only adds design rules.
- For full screens and pages, also load `figma-generate-design`. For component libraries and tokens, also load `figma-generate-library`.
- Exact token names and values are in [Token reference](#token-reference) at the end of this file. Read it before you create or bind any variable or text style.

## Workflow

1. **Check the file first.** List local variable collections and text styles, and search the file's libraries (`search_design_system`) for variables, styles and components. Reuse what exists before creating anything.
2. **Set up foundations if missing.** Create everything below before you build any screen:
   - the `spacing` and `radius` variables
   - the two color layers (`Core Colors`, then `Color System` with Light and Dark modes)