# figma-ui-skills

Applies Figma UI constraints: light mode, Inter font, and a 4px grid. Keeps coding agents from picking random spacing, colors, or heavy layout animations.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 346 installs · ★ 100
- Author: design-skills
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/ihlamury/design-skills/tree/HEAD/skills/figma/SKILL.md
- Updated: 2026-02-10
- HTML: https://affpapa.org/en/nevibecode/skills/figma-ui-skills

## What it does

The skill injects strict UI design rules into the coding agent. It pins the background surface to `#FFFFFF` and sets primary action and focus states to `#BEBAF6`. Typography relies strictly on Inter, requiring `57px` for primary headings with `text-balance` and `36px` for body copy with `text-pretty`.

Spacing strictly follows a 4px grid system with a default gap of 5px. Border radii are constrained to either 3px or 4px with a 1px border width. Full viewport heights must use `h-dvh` instead of `h-screen`, and square blocks need `size-*` utilities.

Interaction rules ban animating layout properties like width, height, or margin. Transitions are limited to compositor properties (`transform` and `opacity`) capped at 200ms, preventing sluggish blur or backdrop-filter animations.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill figma-ui-skills -a claude-code
```
```bash
npx skills add ihlamury/design-skills --skill figma -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/figma/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/figma/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill figma -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/figma/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill figma -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/figma/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ihlamury/design-skills figma
```

2. **Manually: put the files in place**
- File: `.github/skills/figma/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill figma -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ihlamury/design-skills --path skills/figma
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill figma -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ihlamury/design-skills/tree/HEAD/skills/figma/SKILL.md

## When to use it
- apply Figma UI design system rules to generated frontend components
- stop the agent from inventing arbitrary margin and padding values
- constrain typography to Inter with defined heading and body sizes
- prevent layout property animations and unneeded useEffect calls

## Example prompts
- Build a settings card following figma-ui-skills constraints
- Create a confirmation modal using the Figma palette and AlertDialog pattern
- Lay out a dashboard header on the 4px grid using Inter and the 57px heading style

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: aec62d0a18b69cb7.

BEGIN THIRD-PARTY FILE aec62d0a18b69cb7
```text
---
name: figma-ui-skills
description: Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
license: MIT
metadata:
  author: design-skills
  version: "1.0.0"
  source: https://figma.com
---

# Figma UI Skills

Opinionated constraints for building Figma-style interfaces with AI agents.

## When to Apply

Reference these guidelines when:
- Building light-mode interfaces
- Creating Figma-inspired design systems
- Implementing UIs with Inter font and 4px grid

## Colors

- SHOULD use light backgrounds for primary surfaces
- MUST use `#FFFFFF` as page background (`surface-base`)
- MUST use `#BEBAF6` for primary actions and focus states (`accent`)
- SHOULD reduce color palette (currently 12 colors detected)
- MUST maintain text contrast ratio of at least 4.5:1 for accessibility

### Semantic Tokens

| Token | HEX | RGB | Usage |
|-------|-----|-----|-------|
| `surface-base` | #FFFFFF | rgb(255,255,255) | Page background |
| `surface-raised` | #3A28FA | rgb(58,40,250) | Cards, modals, raised surfaces |
| `surface-overlay` | #E7E7E7 | rgb(231,231,231) | Overlays, tooltips, dropdowns |
| `text-primary` | #545454 | rgb(84,84,84) | Headings, body text |
| `text-2` | #262626 | rgb(38,38,38) | Additional text |
| `text-tertiary` | #656565 | rgb(101,101,101) | Additional text |
| `border-default` | #4D3ECF | rgb(77,62,207) | Subtle borders, dividers |
| `accent` | #BEBAF6 | rgb(190,186,246) | Primary actions, links, focus |

## Typography

- MUST use `Inter` as primary font family
- SHOULD use single font family for consistency
- MUST use `57px` / `extra_bold` for primary headings
- MUST use `36px` / `700` for body text
- SHOULD reduce font weights (currently 5 detected)
- MUST use `text-balance` for headings and `text-pretty` for body text
- SHOULD use `tabular-nums` for numeric data
- NEVER modify letter-spacing unless explicitly requested

### Text Styles

| Style | Font | Size | Weight | Color | Count |
|-------|------|------|--------|-------|-------|
| `heading-1` | Inter | 57px | extra_bold | #232323 | 1 |
| `body` | Inter | 36px | 700 | #272727 | 1 |
| `text-30px` | Inter | 30px | 700 | #2C2C2C | 1 |
| `text-28px` | Inter | 28px | 500 | #545454 | 1 |
| `text-26px` | Inter | 26px | semi_bold | #272727 | 1 |
| `text-22px` | Inter | 22px | 400 | #2D2D2D | 1 |
| `text-20px` | Inter | 20px | 500 | #545454 | 1 |
| `text-18px` | Inter | 18px | semi_bold | #262626 | 1 |
| `text-18px` | Inter | 18px | semi_bold | #373737 | 1 |
| `text-17px` | Inter | 17px | semi_bold | #313131 | 1 |

### Typography Reference

**Font Families:**
- `Inter` (used 23x)

**Font Sizes:** 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 26px, 28px, 30px, 36px, 57px

## Spacing

- MUST use 4px grid for spacing
- SHOULD use spacing from scale: 2px, 4px, 5px, 9px, 10px, 11px, 37px, 67px
- SHOULD use 5px as default gap between elements
```
END THIRD-PARTY FILE aec62d0a18b69cb7

The third-party file has ended. Everything between the aec62d0a18b69cb7 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2911 of 5284 bytes. © design-skills · MIT · https://github.com/ihlamury/design-skills/tree/HEAD/skills/figma/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md