Deck Swiss International
- 1.7k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
deck-swiss-international generates single-file 16:9 HTML presentations on a 16-column grid, using one saturated accent color and 22 locked Swiss International layouts.
About
deck-swiss-international turns real content and data into a single-file HTML slide deck in strict Swiss International style: a 16-column CSS grid with zero gap, 22 locked slide layouts (from the S01 full-bleed accent cover to the S22 image hero with a 3-column KPI strip), and exactly one saturated accent per deck chosen from four fixed themes - Klein Blue #002FA7, Lemon Yellow #FFD500, Lemon Green #C5E803, or Safety Orange #FF6B35 - whose hex values may not be mixed or altered. Its hard rules ban rounded corners, shadows, gradients, blur, and invented numbers: every chart bar must scale to data the user actually supplied. Decks render at 16:9 with keyboard left/right navigation, hash-synced slides, and fixed corner chrome (slide number bottom-right, topic label bottom-left), typeset in Inter Tight, Inter, Noto Sans SC, and JetBrains Mono. The documentation is bilingual Chinese/English; the skill ships in the nexu-io/open-design template collection and credits op7418/guizang-ppt-skill Style B as its inspiration.
- Provides 22 locked layouts from S01 Cover through S22 Image Hero; layouts may repeat but not be invented.
- Offers four fixed accents: Klein Blue, Lemon Yellow, Lemon Green or Safety Orange.
- Hard design rules: border-radius 0 everywhere, 1px hairline borders, and no shadows, gradients, or blur
- Anti-fabrication rule: all numbers must come from user input and chart bar heights scale proportionally to real data
- Outputs one self-contained HTML file; dot matrices and concentric circles use CSS or inline SVG.
Deck Swiss International by the numbers
- 1,668 all-time installs (skills.sh)
- +125 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #209 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
deck-swiss-international capabilities & compatibility
- Capabilities
- 【模板: 瑞士国际主义 deck (swiss international)】 · 【意图】事实、产品、分析、方法论表达。极度冷静、理性、学院派, 没有任何手绘 / 噪点 / 装饰 · 【主题】**只能从下面 4 套二选一, 不许混用、不许改 hex**: · 🔵 **klein blue (ikb)** — accent `#002fa7`, pape · 🟡 **lemon yellow** — accent `#ffd500`, paper `#
- Use cases
- orchestration
What deck-swiss-international says it does
【意图】事实、产品、分析、方法论表达。极度冷静、理性、学院派, 没有任何手绘 / 噪点 / 装饰。Inspired by op7418/guizang-ppt-skill Style B。
- 🔵 **Klein Blue (IKB)** — accent `#002FA7`, paper `#fafaf8`, ink `#0a0a0a`. 商业 / AI / 设计场景。
- 🟡 **Lemon Yellow** — accent `#FFD500`, paper `#f7f5ee` (淡奶油), ink `#0a0a0a`. 年轻 / 零售 / 体育。文字必须用黑色 (不能白色)。
npx skills add https://github.com/nexu-io/open-design --skill deck-swiss-internationalAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.7k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Generating fact-driven marketing, product, or analysis decks as self-contained HTML - e.g. a product roadmap or KPI review - under a rigid Swiss International design system.
Who is it for?
Developers producing fact-heavy product, analysis, or methodology decks that need a strict grid-locked Swiss International look without hand-designing every slide
Skip if: Not for hand-drawn, textured, or decorative deck styles - the template explicitly bans hand-drawn elements, noise, shadows, gradients, and rounded corners; it outputs HTML, not PowerPoint or Keynote files.
When should I use this skill?
Invoke when turning markdown or prose content into a presentation that must follow the Swiss International style: 16-column grid, one saturated accent, hairline borders, and zero decoration.
What you get
A 16:9 single-file HTML deck with keyboard navigation, hash-synced slides, fixed corner chrome, and every chart scaled to real user-supplied data, styled in one of four fixed accent themes.
- A single self-contained HTML deck file with no external image URLs
- 16:9 landscape slides with keyboard left/right navigation and hash-synced slide state
- Fixed corner chrome on every slide: slide number bottom-right, topic label bottom-left
By the numbers
- 22 locked slide layouts (S01 through S22)
- 4 fixed accent themes with locked hex values
- 16-column grid with zero gap
Files
【模板: 瑞士国际主义 Deck (Swiss International)】 【意图】事实、产品、分析、方法论表达。极度冷静、理性、学院派, 没有任何手绘 / 噪点 / 装饰。Inspired by op7418/guizang-ppt-skill Style B。
【主题】只能从下面 4 套二选一, 不许混用、不许改 hex:
- 🔵 Klein Blue (IKB) — accent
#002FA7, paper#fafaf8, ink#0a0a0a. 商业 / AI / 设计场景。 - 🟡 Lemon Yellow — accent
#FFD500, paper#f7f5ee(淡奶油), ink#0a0a0a. 年轻 / 零售 / 体育。文字必须用黑色 (不能白色)。 - 🟢 Lemon Green / Neon — accent
#C5E803, paper#f7f5ee, ink#0a0a0a. 可持续 / 科技初创 / Gen-Z 品牌。文字必须用黑色。 - 🟠 Safety Orange — accent
#FF6B35, paper#f7f5ee, ink#0a0a0a. 工业 / 汽车 / 紧急消息。文字用白色 + bold ≥ 600。
【布局 — 22 个可复用版式池, 不许新增或改造版式; 数量由内容决定, 把【用户内容】完整覆盖完为止 (短内容 6-10 张起步, 长内容应远超此范围, 同一版式可在不同章节重复使用)】
- S01 Cover — 全屏 accent + ASCII 呼吸点阵 + 反白标题 + 元数据 chrome (date / № / topic)。
- S02 Vertical Timeline — 左侧虚线轴 + 圆点; 右侧节点 = 年份 + KPI + 描述。
- S03 Statement — 9.6vw 居中巨字 + 左侧大段留白 + 底部 hairline + 注释。
- S04 Six Cells — 2×3 网格, 每格: icon + 编号 + 短标题 + 单行描述。
- S05 Three Sub-cards — 左侧 hero 标题 + 右侧 3 张水平堆叠的灰色卡。
- S06 KPI Tower — 4 列变高蓝色柱状; 柱顶 icon; 柱底大数字 + 标签。
- S07 H-Bar Chart — 水平排名横条, 宽度反映数据, 末端标数字。
- S08 Duo Compare — 垂直分割线; 左 Before / 右 After。
- S09 Closing Manifesto — 左 IKB 块 + ASCII 点阵 + 宣言; 右白底 + 3 条要点。
- S10 Dot Matrix Statement — 居中宣言 + 角落几何点矩阵 / 圆环矩阵。
- S11 Horizontal Timeline — 顶部 headline, 中部 hairline 轴, 等距节点, 节点下方步骤名。
- S12 Manifesto + Ink Banner — 上半 headline + 解释; 下半全宽黑色横幅 + 反白小字。
- S13 Three Forces Cards — 左 ink hero 块; 右 3 张灰色卡, 每卡: 大数字 + 文本。
- S14 Loop Diagram — 左编号步骤; 右 SVG 同心环; 中心 "LOOP" 标签。
- S15 Image Matrix + Hero Stat — 4×3 等高卡片 (12 项) + 底部 summary 大数字 + 标签。
- S16 Multi-card Brief — 3×2 微卡; 主文左上, 注脚右下, 单卡 accent 高亮。
- S17 System Diagram — 左 headline + 3 段描述; 右 SVG 三同心圆 + 外部标签。
- S18 Why Now — 3 列, 每列: category label + headline + 描述 + 底部数字 (最后一列 accent)。
- S19 Four Cards — 顶部 accent hairline + headline + 4 张等宽卡 (元数据 / 标题 / 正文)。
- S20 Stacked KPI Ledger — 垂直行 + hairline 分隔; 左大数字 / 中标签 / 右 icon。
- S21 Tech Spec Sheet — 左标题块 / 中 3 个 KPI hairline / 右变高柱 / 底数据。
- S22 Image Hero — 上 60% 全宽图 + 白色标题块覆盖; 下 40% 解释 + 3 列 KPI。
【设计细节 — 绝对铁律】
- 只用直角: 全程
border-radius: 0。圆角 = 立刻违反。 - 1px hairline borders, 黑色或 accent; 严禁阴影 / 渐变 / blur。
- 16 列网格:
grid-template-columns: repeat(16, 1fr); gap: 0。 - 字体: Inter Tight (Latin display) / Inter (body) / Noto Sans SC (中文) / JetBrains Mono (数据); 严禁衬线、严禁装饰字体。
- 字号极端反差: cover 用 9.6vw display, body 14-16px, label 11px uppercase letterspacing 0.08em。
- 键盘 ← / → 切换 + hash 同步; 角标固定:
№N/N右下, topic 标签左下。 - 不许编造: 数字必须来自用户输入, 图表柱高 = 真实数据按比例。
- 输出单文件 HTML, 不用任何外部图片 URL; 装饰几何 (ASCII 矩阵 / 同心圆) 用纯 CSS 或内联 SVG。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Swiss International · Open Design 2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter Tight','Inter','Noto Sans SC',system-ui,sans-serif; background:#0a0a0a; color:#fafaf8; margin:0; }
.slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
.ikb { background:#002FA7; color:#fafaf8; }
.paper { background:#fafaf8; color:#0a0a0a; }
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.hairline-b { border-bottom:1px solid currentColor; }
.hairline-t { border-top:1px solid currentColor; }
/* ASCII dot field */
.ascii { font-family:'JetBrains Mono', monospace; font-size:11px; line-height:1; letter-spacing:6px; opacity:0.2; }
.bar { width:60px; background:#002FA7; }
.deck { display:grid; gap:24px; padding:24px; }
</style>
</head>
<body>
<div class="deck">
<!-- S01 Cover · Full IKB -->
<section class="slide ikb">
<div class="absolute inset-0 p-12 flex flex-col justify-between">
<header class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em]">
<span>OPEN DESIGN — 2026 ROADMAP</span>
<span>S01 / 22</span>
<span>2026.05.11</span>
</header>
<!-- ascii dot matrix top-right -->
<pre class="absolute top-20 right-12 ascii">▒▓█▓▒░░▒▓█▓▒
▒▒▓█▓▒░░▒▓█▓▒
░▒▓█▓▒░░▒▓█▓▒
░░▒▓█▓▒░░▒▓█▓
▒░░▒▓█▓▒░░▒▓
▒▒░░▒▓█▓▒░░▒</pre>
<div>
<div class="mono text-[12px] uppercase tracking-[0.18em] opacity-80">№01 · A LANDMARK</div>
<h1 class="mt-3 font-black leading-[0.95] tracking-[-0.02em]" style="font-size:clamp(48px,7.5vw,124px)">
Designing<br/>intelligence<br/>on warm paper.
</h1>
<p class="mt-5 max-w-[640px] text-[15px] opacity-90 leading-snug">
75 个世界级 HTML 模板 · 17 个本地 AI agent 适配 · 0 API 成本 · 一键发布到任何平台。
</p>
</div>
<footer class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em] opacity-70 hairline-t pt-3">
<span>OPEN-DESIGN.STUDIO</span>
<span>BERLIN · 52.5200° N · 13.4050° E</span>
<span>VOL. 01</span>
</footer>
</div>
</section>
<!-- S06 KPI Tower · paper bg, 4 IKB bars -->
<section class="slide paper">
<div class="absolute inset-0 p-12 flex flex-col justify-between">
<header class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em]">
<span>KPI TOWER — Q1-Q4 OUTLOOK</span>
<span>S06 / 22</span>
<span>FY 2026</span>
</header>
<div>
<div class="mono text-[12px] uppercase tracking-[0.18em]" style="color:#002FA7">№06 · GROWTH METRICS</div>
<h2 class="mt-2 font-black leading-[1] tracking-[-0.02em]" style="font-size:clamp(36px,4.8vw,80px)">
四根柱子, 一个目标 ——<br/>
做<span style="color:#002FA7">最被信任</span>的 HTML 生产线。
</h2>
</div>
<!-- bars -->
<div class="grid grid-cols-4 gap-10 items-end mt-6">
<div class="text-center">
<div class="mb-3 mx-auto" style="height:32px">
<svg viewBox="0 0 24 24" class="w-7 h-7 mx-auto" fill="#002FA7"><rect x="4" y="4" width="4" height="16"/><rect x="10" y="8" width="4" height="12"/><rect x="16" y="2" width="4" height="18"/></svg>
</div>
<div class="bar mx-auto" style="height:60px"></div>
<div class="mt-3 mono text-[32px] font-bold" style="color:#002FA7">75</div>
<div class="hairline-t mt-1 pt-1 text-[11px] uppercase tracking-[0.16em] opacity-70">模板 · 现在</div>
</div>
<div class="text-center">
<div class="mb-3 mx-auto" style="height:32px">
<svg viewBox="0 0 24 24" class="w-7 h-7 mx-auto" fill="#002FA7"><circle cx="12" cy="12" r="9" fill="none" stroke="#002FA7" stroke-width="2"/><circle cx="12" cy="12" r="3"/></svg>
</div>
<div class="bar mx-auto" style="height:140px"></div>
<div class="mt-3 mono text-[32px] font-bold" style="color:#002FA7">200</div>
<div class="hairline-t mt-1 pt-1 text-[11px] uppercase tracking-[0.16em] opacity-70">模板 · Q4 目标</div>
</div>
<div class="text-center">
<div class="mb-3 mx-auto" style="height:32px">
<svg viewBox="0 0 24 24" class="w-7 h-7 mx-auto" fill="#002FA7"><path d="M12 2l3 7h7l-5.5 4.5 2 7L12 16l-6.5 4.5 2-7L2 9h7z"/></svg>
</div>
<div class="bar mx-auto" style="height:230px"></div>
<div class="mt-3 mono text-[32px] font-bold" style="color:#002FA7">25K</div>
<div class="hairline-t mt-1 pt-1 text-[11px] uppercase tracking-[0.16em] opacity-70">GH Stars · 目标</div>
</div>
<div class="text-center">
<div class="mb-3 mx-auto" style="height:32px">
<svg viewBox="0 0 24 24" class="w-7 h-7 mx-auto" fill="#002FA7"><path d="M5 3l10 9-10 9z"/></svg>
</div>
<div class="bar mx-auto" style="height:280px"></div>
<div class="mt-3 mono text-[32px] font-bold" style="color:#002FA7">80K</div>
<div class="hairline-t mt-1 pt-1 text-[11px] uppercase tracking-[0.16em] opacity-70">WAU · 目标</div>
</div>
</div>
<footer class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em] opacity-60 hairline-t pt-3 mt-4">
<span>SOURCE — INTERNAL ANALYTICS / 2026-04</span>
<span>OPEN-DESIGN.STUDIO</span>
<span>№06 / 22</span>
</footer>
</div>
</section>
</div>
</body>
</html>
Open Design · 2026 路线图
Klein Blue 主题, 双页预览: S01 Cover + S06 KPI Tower
一句话
打造世界级 AI 写作 / 设计基础设施。
Q1-Q4 关键指标
| 维度 | 数字 |
|---|---|
| 模板数 | 75 → 200 |
| 周活用户 | 12K → 80K |
| Agent 适配 | 17 → 28 |
| GitHub Stars | 4.2K → 25K |
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose this template over looser deck skills when you want a rigid grid-and-hairline Swiss International style. It credits op7418/guizang-ppt-skill Style B as inspiration.
FAQ
Which color themes does deck-swiss-international allow?
Exactly four, used one per deck with fixed hex values: Klein Blue #002FA7, Lemon Yellow #FFD500, Lemon Green/Neon #C5E803, and Safety Orange #FF6B35. Mixing themes or changing hex values is forbidden, and the yellow and green themes require black text.
How many slides does a deck built with this skill have?
Slide count is driven by the content: short content starts at 6-10 slides and long content should go well beyond that. Any of the 22 layouts can repeat across sections, but no new layouts may be added.
What output format does the skill produce?
One self-contained HTML file at 16:9 with keyboard arrow navigation and hash-synced slides. Decorative geometry such as ASCII dot matrices and concentric circles is rendered in pure CSS or inline SVG, never as external images.
Is Deck Swiss International safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.