Skip to content
cccskills
FreePublished on GitHubEnglish overview

deck-swiss-international

Turn product information, analysis, or methods into an HTML slide deck with a 16-column grid and one accent color. Use 22 fixed layouts for timelines, comparisons, diagrams, and charts based on supplied data.

OriginalShow the original description

16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).

Run score Not tested

See how to install

Good for

  • Presenting a product roadmap
  • Reporting KPIs and ranking data
  • Explaining before-and-after differences
  • Organizing methods and system diagrams

Overview

What it does

Turn product information, analysis results, and methods into an orderly HTML slide deck. The design uses a 16-column grid, one vivid accent color, thin rules, and a strong contrast between large and small text. Choose from 22 fixed layouts, including covers, timelines, KPIs, rankings, comparisons, loop diagrams, and specification pages. Add pages according to the amount of content, and reuse the same layout in different sections.

When it helps

Use it to explain a product roadmap or business figures in a presentation with a consistent visual style. Its restrained decoration suits situations where facts and data should carry the message. Viewers can move between pages using the left and right arrow keys.

Example requests

  • “Turn this product roadmap into slides using timelines and KPIs.”
  • “Explain the before-and-after comparison and performance data in a deck with a consistent color scheme.”

Notes

The output is one HTML file. Select one of four specified color schemes; colors cannot be mixed or changed, and fixed layouts cannot be added or modified. You must supply the numbers, and charts must scale proportionally to actual values. External image URLs are not used.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Document check

AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).

SafetyAre sending data, deleting files, and running commands disclosed?
AGoodIt specifies generating a single HTML file and prohibits external image URLs.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodIt explicitly requires no design system and specifies no additional tools or API keys.

Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md5.8 KB
  • example.html6.0 KB
  • example.md330 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

【模板: 瑞士国际主义 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。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.6KUpdated Oct 23, 2026

ad-creative

FreeSummary

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.6KUpdated Oct 23, 2026

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.6KUpdated Oct 23, 2026

agent-browser

FreeSummary

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.6KUpdated Oct 23, 2026

ai-music-album

FreeSummary

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.6KUpdated Oct 23, 2026

algorithmic-art

FreeSummary

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.6KUpdated Oct 23, 2026

See all skills by nexu-io

Report a problem with this skill