무료GitHub에 공개한국어 소개

deck-swiss-international

제품 정보와 분석 결과를 16열 그리드와 하나의 강조색을 쓰는 HTML 슬라이드로 정리합니다. 22가지 고정 배치로 실제 데이터와 비교 내용을 전달합니다.

원문원문 설명 보기

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

nexu-io/open-design

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

제품 로드맵 발표
핵심 지표와 순위 보고
개선 전후의 차이 설명
방법론과 시스템 구성도 정리

한국어 소개

할 수 있는 일

제품 정보, 분석 결과, 방법론을 정돈된 HTML 슬라이드로 만듭니다. 16열 그리드를 기준으로 하나의 선명한 강조색, 가는 선, 크기 차이가 큰 글자를 사용합니다. 표지, 시간 흐름, 핵심 지표, 순위, 비교, 순환도, 사양 소개 등 22가지 고정 배치에서 내용에 맞는 것을 선택합니다. 내용에 따라 페이지를 늘리고 같은 배치를 다른 장에서도 사용할 수 있습니다.

이럴 때 유용합니다

제품 로드맵이나 사업 수치를 통일된 자료로 설명할 때 유용합니다. 장식을 줄이고 사실과 데이터를 중심으로 전달하려는 상황에 적합합니다. 완성된 자료는 왼쪽과 오른쪽 방향키로 페이지를 전환합니다.

사용 예시

“이 제품 로드맵을 시간 흐름과 핵심 지표를 활용한 슬라이드로 정리해 주세요.”
“개선 전후 비교와 실적 데이터를 같은 배색의 자료로 설명해 주세요.”

주의 사항

출력은 하나의 HTML 파일입니다. 지정된 네 가지 배색 중 하나를 선택하며 색상을 섞거나 변경하지 않습니다. 고정 배치를 추가하거나 수정하지 않는 설계입니다. 수치는 사용자가 제공해야 하며 그래프도 실제 값에 비례해야 합니다. 외부 이미지 URL은 사용하지 않습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호제품, 분석, 방법론 발표용임을 명시하고 배색과 22가지 배치의 용도를 설명합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호22가지 배치, 색상 코드, 그리드 설정, 단일 HTML 출력을 구체적으로 정의합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호단일 HTML 파일 생성을 지정하고 외부 이미지 URL을 금지합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호디자인 시스템이 필요 없다고 명시하며 추가 도구나 API 키를 지정하지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(3)

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

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬