Swiss Design Skill
swiss-design-skill
A skill that gives the agent a Swiss style on Tailwind: 12-column grid, IBM Plex Sans, a single accent and generous whitespace.
- 163 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill holds layout instructions and references; it runs nothing and contacts nothing on its own.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/swiss-design-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill holds layout instructions and references; it runs nothing and contacts nothing on its own.
This is third-party code. Review the repository files before installing.
What it does
swiss-design is a skill carrying a design system in the spirit of the 1950s–60s International Typographic Style. The agent builds pages on Tailwind CSS from ready rules: IBM Plex Sans type, the stone palette, hierarchy through text opacity and a 12-column grid on an 8px unit. `SKILL.md` holds six principles, and the details sit in the `references/` folder: tokens and CSS variables, component patterns, a paste-ready `tailwind.config.js` and tips for applying the system to an existing page. The default accent is Swiss red `#C8102E`, swappable for cobalt, golden or forest green. Light and dark themes switch through `prefers-color-scheme`.
Who it is for. Frontend developers and designers asking an agent to give a page a strict look when they have no design system of their own.
Good fit when
- A landing or internal page looks templated and needs strict typography.
- The agent builds a new Tailwind page without a mockup.
- An existing interface is cleaned up with one phrase such as "apply the Swiss style".
- The brand suits another accent: red is replaced with cobalt, golden or green.
Not a fit when
- The project is not built on Tailwind CSS: the rules and config are written for its classes.
- The brand already has a design system with its own fonts and palette.
- You want an expressive decorative style with gradients and illustrations.
Example request
Apply the swiss-design skill to this page: keep a single red accent and limit the text width.Limitations
The skill targets Tailwind CSS and the IBM Plex Sans font from Google Fonts: without Tailwind the tokens have to be ported by hand. The rules are strict: section padding of at least `py-24`, text no wider than `max-w-[60ch]`, hierarchy built only by opacity and one accent per project. An interface with many status colors will need edits to this palette. The skill gives the agent instructions and runs nothing itself. The `website/` demo folder does not reach the agent and need not be installed. The license is MIT.
How to disable. Delete the `swiss-design` folder from your agent's skills directory. Styles already applied to the project stay in the code.
FAQ
How do I install swiss-design-skill?
Run `npx skills add zeke/swiss-design-skill`. By hand: clone the repository and copy the `swiss-design` folder into your agent's skills directory, for example `~/.config/opencode/skills/`.
How do I trigger the skill?
Ask the agent, for example: "Apply the swiss-design skill to this page". It also fires on requests to clean up a UI or on mentions of Swiss style.
Which fonts does the skill use?
The primary font is IBM Plex Sans from Google Fonts. Fallbacks in order: Hanken Grotesk, Barlow, Host Grotesk, DM Sans, then the system font.
Can I replace the red accent?
Yes. `#C8102E` is the default, and per project it is swapped for cobalt, golden or forest green. There is still only one accent.
What is in the references folder?
Four files: `design-system.md` with tokens and CSS variables, `components.md` with component patterns, `tailwind-config.md` with a ready config and `prompting.md` on applying the system to existing pages.
Discussion
No questions or reviews yet.
Related
SkillsA skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A skill gives an agent modern CSS techniques: one declaration instead of piles of breakpoints, and a CSS feature before a script.
A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Nothing Design
nothing-design
A skill for generating UI in the Nothing visual language: monochrome, Swiss typography, industrial rigor
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Swiss Design Skill (this card) | no | 163 | |
| Apple Design Skill | no | 3,167 | reviews an interface against Apple HIG; swiss-design-skill sets a strict Swiss style on Tailwind |
| Awesome Design Skills | no | 3,616 | a registry of design skills for many styles; swiss-design-skill is one style with a ready Tailwind config |
README in short
The repository holds a single skill and a showcase site with a demo video. The system's principles: grid first, whitespace as structure, one accent, narrow columns.
README badge
Original 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