1 / 3

在线演示

在新标签页打开真实演示页，亲手点一点、滑一滑看实际效果。

打开演示

免费精选v1.0.0

Swiss Type UI

官方精选

#swiss #typography #grid #minimal #design-system

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.

适用平台Claude CodeCodexCursorCopilotGemini CLIWindsurfCline

试试这样说

Build a landing page in Swiss International Typographic Style: 12-column grid, black/white/signal-red, one grotesque typeface, hairline rules

你能得到

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

适合场景

B2B SaaS websites, data products, documentation sites, portfolios, exhibition/event pages — anywhere that needs a calm, precise, trustworthy feel

不适合

games, kids products, food, weddings, or anything needing warmth or decoration

名称: Swiss Type UI
下载数: 0
分类: 设计
包含 skills: 1

下载与安装

v1.0.0更新于 2026/10/9 · 22.6 KB · 8 个文件

更新内容: 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)

登录后下载

登录用户免费下载。

1. 下载 ZIP

点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。

2. 解压到 agent 的 skills 目录

解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：

unzip swiss-type-ui-v1.0.0.zip -d ~/.claude/skills/swiss-type-ui/

各 Agent 的 skills 目录

Claude Code: ~/.claude/skills
Cursor: ~/.cursor/skills
Codex: ~/.codex/skills
GitHub Copilot: ~/.copilot/skills

3. 重启你的 agent

下次启动时 agent 会自动识别新 skill，直接问它能做什么。

喜欢这个免费 skill？Premium 解锁 28 个独家 skills。

一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。

看看 Premium →

评价

还没有评价，来做第一个打分的人吧。

登录后评价

相关技能

免费精选

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

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

设计