SkillFoxx
Telegram

Swiss Design Skill

swiss-design-skill

Скилл задает агенту швейцарский стиль на Tailwind: сетка из 12 колонок, IBM Plex Sans, один акцент и много воздуха.

  • 163 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Минимальный доступ

Почему такой уровень

  • Скилл содержит инструкции и справочники по верстке, сам ничего не запускает и никуда не ходит.
Все причины и проверки

zeke/swiss-design-skillАвтор:zeke

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/swiss-design-skill

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скилл содержит инструкции и справочники по верстке, сам ничего не запускает и никуда не ходит.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

swiss-design — скилл с дизайн-системой в духе Международного типографского стиля 1950–60-х годов. Агент верстает страницы на Tailwind CSS по готовым правилам: шрифт IBM Plex Sans, палитра stone, иерархия через прозрачность текста, сетка из 12 колонок с шагом 8 пикселей. В `SKILL.md` собраны шесть принципов, а подробности лежат в папке `references/`: токены и CSS-переменные, паттерны компонентов, готовый `tailwind.config.js` и подсказки, как применить систему к существующей странице. Акцент по умолчанию — швейцарский красный `#C8102E`, его меняют на кобальтовый, золотой или лесной зеленый. Светлая и темная темы переключаются через `prefers-color-scheme`.

Для кого. Фронтенд-разработчикам и дизайнерам, которые просят агента привести страницу в строгий вид без собственной дизайн-системы.

Подходит, если

  • Лендинг или внутренняя страница выглядят шаблонно, и им нужна строгая типографика.
  • Агент верстает новую страницу на Tailwind без макета.
  • Существующий интерфейс чистят одной фразой вроде «приведи к швейцарскому стилю».
  • Бренду подходит другой акцент: красный заменяют на кобальтовый, золотой или зеленый.

Не подходит, если

  • Проект сверстан не на Tailwind CSS: правила и конфиг написаны под его классы.
  • У бренда есть готовая дизайн-система со своими шрифтами и палитрой.
  • Нужен выразительный декоративный стиль с градиентами и иллюстрациями.

Пример запроса к агенту

Примени скилл swiss-design к этой странице: оставь один красный акцент и ограничь ширину текста.

Ограничения

Скилл рассчитан на Tailwind CSS и шрифт IBM Plex Sans из Google Fonts: без Tailwind токены придется переносить вручную. Правила жесткие: отступы секций от `py-24`, текст не шире `max-w-[60ch]`, иерархия строится только прозрачностью, акцент один на проект. Для интерфейса с множеством статусных цветов такая палитра потребует правок. Скилл дает инструкции агенту и сам ничего не запускает. Папка `website/` с демо в агента не попадает, ее ставить не нужно. Лицензия MIT.

Как отключить. Удалите папку `swiss-design` из каталога скиллов вашего агента. Стили, уже внесенные в проект, останутся в коде.

Частые вопросы

Как установить swiss-design-skill?

Выполните `npx skills add zeke/swiss-design-skill`. Вручную: склонируйте репозиторий и скопируйте папку `swiss-design` в каталог скиллов агента, например `~/.config/opencode/skills/`.

Как вызвать скилл?

Попросите агента, например: «Apply the swiss-design skill to this page». Скилл срабатывает и на просьбы привести интерфейс в порядок или сослаться на швейцарский стиль.

Какие шрифты использует скилл?

Основной — IBM Plex Sans из Google Fonts. Запасные по порядку: Hanken Grotesk, Barlow, Host Grotesk, DM Sans, затем системный шрифт.

Можно ли заменить красный акцент?

Да. `#C8102E` задан по умолчанию, под проект его меняют на кобальтовый, золотой или лесной зеленый. Акцент при этом остается один.

Что лежит в папке references?

Четыре файла: `design-system.md` с токенами и CSS-переменными, `components.md` с паттернами компонентов, `tailwind-config.md` с готовым конфигом и `prompting.md` о применении к существующим страницам.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.

СкиллМинимальный доступ95

Скилл дает агенту подборку современных приемов CSS: одно правило вместо набора брейкпоинтов и CSS-возможность прежде скрипта.

СкиллМинимальный доступ403

Скилл правит интерфейс в живом коде без лишних зависимостей: компоненты, секции, страницы и RTL с арабским под ваш стек

СкиллРасширенный доступ121

Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили

СкиллМинимальный доступ3,6 тыс.

Nothing Design

nothing-design

Скилл генерации интерфейсов в визуальном языке Nothing: монохром, швейцарская типографика, промышленная строгость

СкиллМинимальный доступ2,9 тыс.

Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign

СкиллРасширенный доступ982

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
Swiss Design Skill (эта карточка)нет163
Apple Design Skillнет3 231ревьюит интерфейс по рекомендациям Apple HIG; swiss-design-skill задает строгий швейцарский стиль на Tailwind
Awesome Design Skillsнет3 642реестр дизайн-скиллов под разные стили; swiss-design-skill — один стиль с готовым конфигом Tailwind

Коротко о README

Репозиторий хранит один скилл и сайт-витрину с демо-роликом. Принципы системы: сетка прежде всего, пустое место работает как структура, акцент один, колонки узкие.

Бейдж для README

Исходный SKILL.md

---
name: swiss-design
description: Apply a Swiss International Style design system using Tailwind CSS. Use when asked to style a webpage, clean up a UI, apply a design system, make something look great, or when the user references Swiss design, grotesque fonts, Helvetica, grid systems, modernist typography, or 1960s/1950s design aesthetics. Implements IBM Plex Sans typography, stone color palette, opacity-based hierarchy, generous whitespace, and structured grid layouts.
license: MIT
metadata:
  author: zeke
  version: "1.0"
---

# Swiss Design System

A design system rooted in the Swiss International Style of the 1950s–60s: grotesque typography, rigorous grid, bold geometric forms, generous whitespace, and restrained color.

## Six Principles

1. **Grid first.** Every layout lives on a 12-column grid with an 8px base unit.
2. **Mobile first, always.** Design for the smallest viewport first, then expand. Every layout must work at 320px and at 1440px. Use `sm:`, `md:`, `lg:` Tailwind prefixes systematically.
3. **Whitespace is structure.** Generous padding and margins are not waste — they are the design.
4. **Opacity, not hue, creates hierarchy.** Never introduce a second color to indicate text weight or importance. Use opacity.
5. **One accent.** Each project gets exactly one accent color, used sparingly at multiple opacities.
6. **Narrow columns.** Body text never exceeds `max-w-[60ch]`. Wider columns hurt legibility.

---

## Typography

**Primary font:** IBM Plex Sans (Google Fonts)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
```

**Fallback chain** (in order of preference):

| Font | Source | Character |
| ---- | ------ | --------- |
| IBM Plex Sans | Google Fonts | Primary. Rational, slightly condensed, 1960s systems rationalism |
| Hanken Grotesk | Google Fonts | Closest to Neue Haas Grotesk lineage |
| Barlow | Google Fonts | Condensed Swiss-grid proportions, strong vertical rhythm |
| Host Grotesk | Google Fonts | Warm grotesque, good at all sizes |
| DM Sans | Google Fonts | Clean neo-grotesque fallback |
| system-ui | Built-in | Last resort |

```css

Сообщить о проблеме