# framer-ui-skills

Задаёт агенту жёсткие правила вёрстки в стиле Framer: тёмный фон, шрифт Inter, сетка 4px. Пригодится, когда нужен предсказуемый вид интерфейса без ручных правок.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 320 установок · ★ 100
- Автор: design-skills
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/ihlamury/design-skills/tree/HEAD/skills/framer/SKILL.md
- Обновлён: 2026-02-10
- HTML: https://affpapa.org/nevibecode/skills/framer-ui-skills

## Что делает

Скилл описывает дизайн-систему Framer как набор ограничений для ИИ-агента. Внутри — семантические токены цветов с HEX-кодами (`surface-base` #000000, `surface-raised` #141415), таблица текстовых стилей, шкалы отступов, радиусов и границ. Агент читает эти правила и применяет их при генерации разметки.

Правила категоричные: тёмные фоны для основных поверхностей, контраст текста не ниже 4.5:1, `Inter` как единственное семейство, заголовки 93px/700, тело 23px/500, сетка 4px для отступов. Анимация только по `transform` и `opacity`, не дольше 200ms, и лишь если её попросили явно. Для деструктивных действий требуется `AlertDialog`, а фокус-обводка 2px цветом `#5E6AD2` не удаляется никогда.

Скилл рассчитан на тёмную тему. Если ваш проект светлый, токены придётся переопределять вручную, иначе агент выдаст чёрные поверхности там, где они не нужны. Полезно и то, что запрет на анимацию макетных свойств вроде `width` и `margin` снимает часть типовых проблем с производительностью.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill framer-ui-skills -a claude-code
```
```bash
npx skills add ihlamury/design-skills --skill framer -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/framer/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/framer/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill framer -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/framer/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill framer -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/framer/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.github/skills/framer/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill framer -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/ihlamury/design-skills --path skills/framer
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/framer/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add ihlamury/design-skills --skill framer -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/ihlamury/design-skills/tree/HEAD/skills/framer/SKILL.md

## Когда брать
- собрать тёмный интерфейс с нуля по готовым токенам
- привести отступы и радиусы к единой сетке 4px
- подобрать пару размеров и насыщенностей для заголовков и текста
- проверить контраст текста до порога 4.5:1
- удержать агента от анимации свойств, ломающих раскладку

## Примеры запросов агенту
- Собери страницу лендинга по framer-ui-skills: тёмный фон, Inter, сетка 4px
- Сделай карточку товара в стиле Framer из этого скилла
- Перепиши этот блок по правилам framer-ui-skills, фокус-обводку оставь

## Похожие
- [ui-design](https://affpapa.org/nevibecode/skills/mblode-ui-design.md) — скилл · 1400 установок
- [using-ui-stack](https://affpapa.org/nevibecode/skills/using-ui-stack.md) — скилл · 539 установок
- [sleek](https://affpapa.org/nevibecode/skills/sleek.md) — скилл · 2400 установок
- [design-tokens](https://affpapa.org/nevibecode/skills/design-tokens.md) — скилл · 5900 установок
- [color-palette](https://affpapa.org/nevibecode/skills/color-palette.md) — скилл · 3200 установок
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок

Из того же набора: [ihlamury/design-skills](https://affpapa.org/nevibecode/by/ihlamury/design-skills.md) — 5 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md