Swiss Design

What it does

When your agent uses it

• Asked to style a webpage
• Apply a design system
• Make something look great
• The user references Swiss design

Example prompts

• “/swiss-design”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit de1c04a. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are html, css and javascript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • fonts.googleapis.com

  Also links to:

  • raw.githubusercontent.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Swiss Design loads about 3.2k tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 113 tokens; SKILL.md has 1,223 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~113

When it runs · the whole SKILL.md, loaded when a task matches

~3.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~10k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from try-works/role-model at commit de1c04a, republished under its MIT licence (© try-works). 1,223 words, ~3,241 tokens.

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

metadata.version

1.0

<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">

font-family: 'IBM Plex Sans', 'Hanken Grotesk', 'Barlow', 'Host Grotesk', 'DM Sans', system-ui, sans-serif;

Full presence:   text-stone-900          (primary)
Softer:          text-stone-900/70       (secondary, labels)
Quiet:           text-stone-900/40       (tertiary, captions)
Ghosted:         text-stone-900/20       (disabled, placeholder)

Full:    bg-[#C8102E]          text-[#C8102E]
Muted:   bg-[#C8102E]/60       text-[#C8102E]/60
Subtle:  bg-[#C8102E]/20       (backgrounds, tints)
Ghost:   bg-[#C8102E]/10       (very light tints)

<!-- 12-column grid — always mobile-first, columns collapse to full-width on small screens -->
<div class="grid grid-cols-12 gap-4 md:gap-8">
  <div class="col-span-12 md:col-span-8">...</div>
  <div class="col-span-12 md:col-span-4">...</div>
</div>

<!-- Scale display type fluidly across viewports -->
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

<!-- Or use clamp() for truly fluid scaling -->
<h1 class="text-[clamp(2rem,6vw,5rem)] font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

<section class="py-16 md:py-24 lg:py-32 border-b border-stone-200 dark:border-stone-800">
  <div class="max-w-6xl mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      ...
    </div>
  </div>
</section>

// tailwind.config.js
darkMode: 'media'

html { color-scheme: light dark; }

<meta name="color-scheme" content="light dark">

© try-works, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in .agents/skills/swiss-design of try-works/role-model.

• SKILL.md
• references/components.md
• references/design-system.md
• references/prompting.md
• references/tailwind-config.md

Open the folder on GitHubat commit de1c04a

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in try-works/role-model, which our catalogue first saw on October 7, 2026.

• zeke/swiss-design-skillswiss-design