Swiss International Typographic Style web UI skill: strict 12-column grids, black-white-signal red palette, one neo-grotesque typeface with typographic scale contrast, and hairline rules. Precision-first layouts for SaaS, data products, docs sites and portfolios.
Build a landing page in Swiss International Typographic Style: 12-column grid, black/white/signal-red, one grotesque typeface, hairline rules
What you get
- SKILL.md with full workflow (grid system, type scale, rule lines, motion language, QA checklist, anti-patterns) + 3 reference files (design-tokens.md, components.md, snippets.md with copy-paste code) + 2 demo landing pages
Good fit
- B2B SaaS websites, data products, documentation sites, portfolios, exhibition/event pages — anywhere that needs a calm, precise, trustworthy feel
Not for
- games, kids products, food, weddings, or anything needing warmth or decoration
- Name
- Swiss Type UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Initial release: Swiss International Typographic Style UI skill with 12-column grid system, type scale, rule lines, 8 motion patterns, and 2 demo pages (SaaS landing + pricing)
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip swiss-type-ui-v1.0.0.zip -d ~/.claude/skills/swiss-type-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 28 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Editorial Magazine UI
Editorial Magazine UI
Design print-magazine-style landing pages — oversized serif headlines, ruled columns, drop caps, pull quotes and a single printer's-ink accent. Use when the user asks for editorial / magazine-style landing pages or brand sites.
Claude Code · Codex · Cursor · Copilot +3
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1
taste-skill
Leonxlnx/taste-skill
Taste-Skill - gives your AI good taste. Stops the AI from generating boring, generic slop.
archify
tt-a1i/archify
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams.