AI导哈

设计与多媒体

swiss-design

zeke/swiss-design-skill

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.

  • 969 次安装
  • 159 星标
  • 收录于

安装命令

npx skills add https://github.com/zeke/swiss-design-skill --skill swiss-design

SKILL.md

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)