swiss-design-skill

KO | EN

gitlite — search

#python #typescript #llm #android #linux #docker #macos #java #windows #cli #vue #pytorch #mcp #open-source

swiss-design-skill

(★ 134)

A Swiss International Style design system skill for AI agents

File Explorer

Download Latest Version (.zip)

- - components.md
  - design-system.md
  - prompting.md
  - tailwind-config.md
- SKILL.md
- - fetch-inspiration.mjs
  - fetch-more-inspiration.mjs
  - generate-preview.mjs
- - index.tsx
- .gitignore
- package-lock.json
- package.json
- tsconfig.json
- webreel.config.json
- wrangler.jsonc
.gitignore
demo-thumb.jpg
demo.mp4
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# swiss-design-skill

A Swiss International Style design system for AI agents. Grotesque typography, rigorous grid, generous whitespace, restrained color — expressed through Tailwind CSS.

[swiss.ziki.boo](https://swiss.ziki.boo)

## Demo

[![swiss-design-skill demo](https://raw.githubusercontent.com/zeke/swiss-design-skill/main/demo-thumb.jpg)](demo.mp4)

## Install

```sh
npx skills add zeke/swiss-design-skill
```

Or manually copy the skill directory:

```sh
gh repo clone zeke/swiss-design-skill
cp -r swiss-design-skill/swiss-design ~/.config/opencode/skills/
```

## Usage

Once installed, tell your agent to apply it:

- "Apply the swiss-design skill to this page"
- "Clean up this UI using swiss design principles"
- "Make this look great — use the Swiss style"

The agent will apply IBM Plex Sans typography, the stone color palette, opacity-based hierarchy, a 12-column grid, and generous whitespace.

## What's included

```
swiss-design/
├── SKILL.md                    # Quick reference (always loaded)
└── references/
    ├── design-system.md        # Full token reference, CSS variables
    ├── components.md           # Tailwind component patterns
    ├── tailwind-config.md      # Paste-ready tailwind.config.js
    └── prompting.md            # Applying the system to existing pages
```

## Design principles

- **Grid first.** 12-column, 8px base unit
- **Whitespace is structure.** Sections get `py-24` minimum
- **Opacity, not hue, creates hierarchy.** `text-stone-900/70`, never `text-stone-500`
- **One accent.** Swiss red (`#C8102E`) by default; swap to cobalt, golden, or forest per project
- **Narrow columns.** Body text never exceeds `max-w-[60ch]`
- **Light and dark mode** via `prefers-color-scheme`

## Typography

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

Fallbacks: Hanken Grotesk · Barlow · Host Grotesk · DM Sans

## License

MIT

swiss-design-skill

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

swiss-design-skill

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README