# swiss-design

Скилл задаёт ИИ-агенту дизайн-систему в духе швейцарского интернационального стиля: типографика IBM Plex Sans, сетка, оттенки stone и акцентный цвет.

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

## Что делает

Скилл описывает шесть принципов: сетка из 12 колонок с базовой единицей 8px, mobile-first, воздух как часть структуры, иерархия через прозрачность, один акцентный цвет на проект и узкие колонки текста. Агент применяет их, когда вы просите оформить страницу, привести в порядок интерфейс или ссылаетесь на швейцарский дизайн, гротески и модульные сетки.

Внутри — таблицы типографической шкалы, палитра stone для светлой и тёмной темы, набор акцентных цветов и правила вёрстки на Tailwind. Отдельно прописана типографическая мелочь: многоточие одним знаком, фигурные кавычки, `tabular-nums` для числовых колонок, `text-balance` для заголовков и неразрывные пробелы между числом и единицей. Шрифт подключается с Google Fonts, запасная цепочка — Hanken Grotesk, Barlow, Host Grotesk, DM Sans, `system-ui`.

Скилл рассчитан на проекты с Tailwind CSS: классы вроде `col-span-12 md:col-span-8` и `text-stone-900/70` — это и есть способ применения системы. Если в проекте Tailwind не подключён, придётся либо ставить его, либо переписывать правила вручную.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install zeke/swiss-design-skill swiss-design
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

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

## Примеры запросов агенту
- Оформи эту страницу в швейцарском стиле по скиллу swiss-design
- Приведи интерфейс к сетке 12 колонок и палитре stone
- Сделай тёмную тему по правилам swiss-design, акцент оставь красный

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/ilm-alan-frontend-design.md) — скилл · 580 установок
- [tailwind-design-system](https://affpapa.org/nevibecode/skills/sickn33-tailwind-design-system.md) — скилл · 1600 установок
- [swiss-creative-mode-template](https://affpapa.org/nevibecode/skills/swiss-creative-mode-template.md) — скилл · 2700 установок
- [responsive-design-system](https://affpapa.org/nevibecode/skills/responsive-design-system.md) — скилл · 343 установки
- [design-artifact](https://affpapa.org/nevibecode/skills/design-artifact.md) — скилл · 1700 установок
- [design-system](https://affpapa.org/nevibecode/skills/claudekit-design-system.md) — скилл · 42700 установок

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

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