assets/template.html
<!doctype html>
<html lang="en" data-theme="paper">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Swiss Creative Mode Template</title>
<style>
:root {
--paper: #f3efe4;
--ink: #0b0b0b;
--accent-a: #f28cc2;
--accent-b: #f1cb3c;
--accent-c: #188f5a;
--accent-d: #ff7f2a;
--card-shadow: 8px 8px 0 var(--ink);
}
html[data-theme="dark"] {
--paper: #111216;
--ink: #f3efe4;
--accent-a: #ff9ad0;
--accent-b: #ffd84f;
--accent-c: #2fbf7a;
--accent-d: #ff9852;
--card-shadow: 8px 8px 0 #000;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
background: var(--paper);
color: var(--ink);
}
.app {
width: min(1320px, 94vw);
margin: 24px auto 34px;
border: 3px solid var(--ink);
background: var(--paper);
box-shadow: var(--card-shadow);
padding: 18px 18px 24px;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
border-bottom: 2px dashed var(--ink);
padding-bottom: 14px;
margin-bottom: 16px;
}
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
button {
border: 2px solid var(--ink);
background: #fff;
color: var(--ink);
padding: 7px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
}
button:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 2px; }
.viewport {
position: relative;
min-height: 660px;
border: 2px solid var(--ink);
background: var(--paper);
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(40px);
pointer-events: none;
transition: opacity .4s ease, transform .4s ease;
padding: 28px;
}
.scene.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.hero-grid,
.stack-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
height: 100%;
align-items: center;
}
.display {
margin: 0 0 16px;
font-size: clamp(40px, 7vw, 98px);
line-height: .95;
text-transform: uppercase;
letter-spacing: -.03em;
font-weight: 900;
}
.display span { color: var(--accent-d); }
.lead {
max-width: 580px;
font-size: 18px;
line-height: 1.45;
font-weight: 600;
}
.art-board {
border: 3px solid var(--ink);
min-height: 440px;
background: var(--accent-c);
position: relative;
box-shadow: var(--card-shadow);
}
.layer {
position: absolute;
width: 56%;
height: 56%;
border: 3px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
left: 22%;
top: 18%;
}
.layer.l1 { background: var(--accent-a); transform: translate(-26px, -24px); }
.layer.l2 { background: var(--accent-d); transform: translate(18px, 16px); }
.layer.l3 { background: var(--paper); transform: rotate(-6deg); }
.steps-title { margin: 0 0 16px; font-size: clamp(38px, 6vw, 88px); font-weight: 900; text-transform: uppercase; line-height: .94; }
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card {
border: 3px solid var(--ink);
padding: 14px;
min-height: 320px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 5px 5px 0 var(--ink);
}
.card:nth-child(1) { background: #fff; }
.card:nth-child(2) { background: var(--accent-a); }
.card:nth-child(3) { background: var(--accent-b); }
.card:nth-child(4) { background: var(--accent-c); color: var(--paper); }
.num { font-size: 56px; font-weight: 900; line-height: 1; }
.title { font-size: 30px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.body { font-size: 16px; line-height: 1.4; font-weight: 600; }
.legend { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.swatch { width: 22px; height: 22px; border: 2px solid var(--ink); flex: 0 0 auto; }
.stack-board {
border: 3px solid var(--ink);
background: var(--accent-c);
min-height: 440px;
box-shadow: var(--card-shadow);
display: grid;
place-items: center;
}
.stack { width: min(420px, 88%); display: grid; gap: 10px; }
.stack-item {
border: 3px solid var(--ink);
box-shadow: 8px 8px 0 var(--ink);
padding: 14px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
background: #fff;
}
.stack-item:nth-child(1) { background: var(--accent-a); width: 76%; }
.stack-item:nth-child(2) { background: var(--accent-b); width: 84%; margin-left: 8%; }
.stack-item:nth-child(3) { background: var(--accent-d); width: 90%; margin-left: 12%; }
.stack-item:nth-child(4) { background: var(--paper); width: 96%; margin-left: 16%; }
.hotspot {
margin-top: 16px;
border: 2px solid var(--ink);
background: #fff;
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.hotspot p { margin: 0; font-size: 14px; font-weight: 700; }
.hotspot .dot { width: 13px; height: 13px; border-radius: 999px; background: var(--accent-d); border: 2px solid var(--ink); }
.footer {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.dots { display: flex; gap: 8px; }
.dot-btn {
width: 24px;
height: 24px;
border-radius: 999px;
padding: 0;
line-height: 1;
background: #fff;
}
.dot-btn.active { background: var(--ink); color: var(--paper); }
.meta { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 980px) {
.hero-grid, .stack-grid { grid-template-columns: 1fr; }
.step-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.step-row { grid-template-columns: 1fr; }
.viewport { min-height: 980px; }
}
</style>
</head>
<body>
<div class="app">
<div class="topbar">
<div class="kicker">Swiss Creative Mode / Template</div>
<div class="controls">
<button id="prevBtn" type="button">Prev</button>
<button id="nextBtn" type="button">Next</button>
<button id="themeBtn" type="button">Theme</button>
<button id="paletteBtn" type="button">Palette</button>
<button id="hotspotBtn" type="button">Hotspot</button>
</div>
</div>
<div class="viewport">
<section class="scene active" data-scene="0">
<div class="hero-grid">
<div>
<p class="kicker">Vol. 01 / Edition 2026</p>
<h1 class="display">Creative <span>Mode</span></h1>
<p class="lead">A premium editorial template for launch narratives, strategy decks, and visual system storytelling. Replace copy and labels while preserving rhythm and interaction.</p>
</div>
<div class="art-board">
<div class="layer l1"></div>
<div class="layer l2"></div>
<div class="layer l3"></div>
</div>
</div>
</section>
<section class="scene" data-scene="1">
<p class="kicker">How it works</p>
<h2 class="steps-title">A Four-Step Process.</h2>
<div class="step-row">
<article class="card"><div class="num">01</div><div class="title">Discover</div><div class="body">Capture constraints and map opportunities.</div></article>
<article class="card"><div class="num">02</div><div class="title">Define</div><div class="body">Frame the problem and lock system rules.</div></article>
<article class="card"><div class="num">03</div><div class="title">Develop</div><div class="body">Prototype interactions and visual hierarchy.</div></article>
<article class="card"><div class="num">04</div><div class="title">Deliver</div><div class="body">Ship polished artifacts ready for decision flow.</div></article>
</div>
</section>
<section class="scene" data-scene="2">
<div class="stack-grid">
<div>
<p class="kicker">System diagram</p>
<h2 class="display">A Stack Of Moving Parts.</h2>
<div class="legend">
<div class="row"><span class="swatch" style="background: var(--accent-a)"></span>Layer Alpha - Interface</div>
<div class="row"><span class="swatch" style="background: var(--accent-b)"></span>Layer Beta - Orchestration</div>
<div class="row"><span class="swatch" style="background: var(--accent-d)"></span>Layer Gamma - Services</div>
<div class="row"><span class="swatch" style="background: var(--paper)"></span>Layer Delta - Substrate</div>
</div>
<div class="hotspot" id="hotspotPanel">
<p id="hotspotText">Hotspot: orchestration rail is currently pinned for annotation.</p>
<span class="dot"></span>
</div>
</div>
<div class="stack-board">
<div class="stack">
<div class="stack-item">Layer / 01</div>
<div class="stack-item">Layer / 02</div>
<div class="stack-item">Layer / 03</div>
<div class="stack-item">Layer / 04</div>
</div>
</div>
</div>
</section>
</div>
<div class="footer">
<div class="dots" id="dots"></div>
<div class="meta" id="meta">Scene 01 · 03</div>
</div>
</div>
<script>
(function () {
var palettes = [
{ a: "#f28cc2", b: "#f1cb3c", c: "#188f5a", d: "#ff7f2a" },
{ a: "#b8a2ff", b: "#ffd166", c: "#3aaed8", d: "#ff7b54" },
{ a: "#ff7eb6", b: "#d9ef8b", c: "#22a06b", d: "#ff9966" }
];
var sceneIndex = 0;
var hotspotAlt = false;
var paletteIndex = 0;
var scenes = Array.prototype.slice.call(document.querySelectorAll(".scene"));
var dotsWrap = document.getElementById("dots");
var meta = document.getElementById("meta");
var hotspotText = document.getElementById("hotspotText");
var root = document.documentElement;
function renderDots() {
dotsWrap.innerHTML = "";
scenes.forEach(function (_, i) {
var btn = document.createElement("button");
btn.type = "button";
btn.className = "dot-btn" + (i === sceneIndex ? " active" : "");
btn.textContent = String(i + 1);
btn.setAttribute("aria-label", "Go to scene " + (i + 1));
btn.addEventListener("click", function () {
sceneIndex = i;
render();
});
dotsWrap.appendChild(btn);
});
}
function render() {
scenes.forEach(function (scene, i) {
scene.classList.toggle("active", i === sceneIndex);
});
meta.textContent = "Scene " + String(sceneIndex + 1).padStart(2, "0") + " · 03";
renderDots();
}
function setPalette(next) {
root.style.setProperty("--accent-a", next.a);
root.style.setProperty("--accent-b", next.b);
root.style.setProperty("--accent-c", next.c);
root.style.setProperty("--accent-d", next.d);
}
document.getElementById("prevBtn").addEventListener("click", function () {
sceneIndex = (sceneIndex - 1 + scenes.length) % scenes.length;
render();
});
document.getElementById("nextBtn").addEventListener("click", function () {
sceneIndex = (sceneIndex + 1) % scenes.length;
render();
});
document.getElementById("themeBtn").addEventListener("click", function () {
var current = root.getAttribute("data-theme");
root.setAttribute("data-theme", current === "paper" ? "dark" : "paper");
});
document.getElementById("paletteBtn").addEventListener("click", function () {
paletteIndex = (paletteIndex + 1) % palettes.length;
setPalette(palettes[paletteIndex]);
});
document.getElementById("hotspotBtn").addEventListener("click", function () {
hotspotAlt = !hotspotAlt;
hotspotText.textContent = hotspotAlt
? "Hotspot: subsystem handoff expanded — replace with your own system note."
: "Hotspot: orchestration rail is currently pinned for annotation.";
});
document.addEventListener("keydown", function (event) {
if (event.key === "ArrowRight") {
sceneIndex = (sceneIndex + 1) % scenes.length;
render();
} else if (event.key === "ArrowLeft") {
sceneIndex = (sceneIndex - 1 + scenes.length) % scenes.length;
render();
}
});
render();
})();
</script>
</body>
</html>
example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Swiss Creative Mode Example</title>
<style>
body { margin: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; background: #f3efe4; color: #0b0b0b; }
.wrap { width: min(1120px, 94vw); margin: 24px auto; border: 3px solid #0b0b0b; background: #f3efe4; padding: 20px; box-shadow: 8px 8px 0 #0b0b0b; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 12px 0 18px; font-size: clamp(42px, 8vw, 102px); line-height: .92; text-transform: uppercase; letter-spacing: -.03em; }
h1 span { color: #ff7f2a; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card { border: 3px solid #0b0b0b; min-height: 220px; padding: 14px; box-shadow: 6px 6px 0 #0b0b0b; }
.c1 { background: #fff; }
.c2 { background: #f28cc2; }
.c3 { background: #f1cb3c; }
.c4 { background: #188f5a; color: #f3efe4; }
.num { font-size: 52px; font-weight: 900; line-height: 1; }
.ttl { font-size: 28px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.txt { font-size: 16px; line-height: 1.45; font-weight: 600; margin-top: 10px; }
.stack { margin-top: 18px; border: 3px solid #0b0b0b; padding: 16px; background: #188f5a; box-shadow: 8px 8px 0 #0b0b0b; }
.bar { border: 3px solid #0b0b0b; padding: 12px; margin: 10px 0; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; box-shadow: 6px 6px 0 #0b0b0b; }
.b1 { width: 68%; background: #f28cc2; }
.b2 { width: 78%; background: #f1cb3c; margin-left: 6%; }
.b3 { width: 86%; background: #ff7f2a; margin-left: 10%; }
.b4 { width: 92%; background: #f3efe4; margin-left: 14%; }
.foot { margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main class="wrap">
<p class="kicker">Swiss Creative Mode / Example</p>
<h1>Creative <span>Mode</span></h1>
<div class="grid">
<article class="card c1">
<div class="num">01</div>
<div class="ttl">Discover</div>
<p class="txt">Scan constraints and define the opportunity window with factual context.</p>
</article>
<article class="card c2">
<div class="num">02</div>
<div class="ttl">Define</div>
<p class="txt">Choose narrative structure, visual hierarchy, and interaction assumptions.</p>
</article>
<article class="card c3">
<div class="num">03</div>
<div class="ttl">Develop</div>
<p class="txt">Compose responsive sections, feedback states, and micro-interactions.</p>
</article>
<article class="card c4">
<div class="num">04</div>
<div class="ttl">Deliver</div>
<p class="txt">Ship a reusable template with credible content and presentation polish.</p>
</article>
</div>
<section class="stack">
<div class="bar b1">Layer / 01</div>
<div class="bar b2">Layer / 02</div>
<div class="bar b3">Layer / 03</div>
<div class="bar b4">Layer / 04</div>
</section>
<div class="foot">
<span>Template preview only</span>
<span>01 · 08</span>
</div>
</main>
</body>
</html>
references/checklist.md
# Swiss Creative Mode Template Checklist
## P0 (must pass before emitting `<artifact>`)
- [ ] `assets/template.html` exists and opens directly from disk.
- [ ] `example.html` exists and is a complete hand-built sample.
- [ ] Frontmatter is `od.mode: template`, `od.scenario: live-artifacts`,
`od.preview.type: html`, and `od.outputs.primary: index.html`.
- [ ] Layout includes 3 scenes:
- [ ] hero / title scene
- [ ] four-step process scene
- [ ] stack/architecture scene
- [ ] Slide navigation works with Prev/Next buttons and dot indicators.
- [ ] Theme toggle works (paper/dark) without page reload.
- [ ] Palette-cycle interaction updates accent colors across cards and chips.
- [ ] Hotspot interaction toggles contextual annotation/detail text.
- [ ] No sandbox-hostile hard dependencies:
- [ ] no unguarded `localStorage` / `sessionStorage`
- [ ] no `alert()` / `confirm()` / `prompt()`
## P1 (quality bar)
- [ ] Typography hierarchy is clear (display title, section title, body copy, labels).
- [ ] Spacing rhythm is consistent and grid-aligned.
- [ ] Colors preserve contrast in both themes.
- [ ] Interactions are smooth and non-blocking.
- [ ] Template remains fully usable with keyboard (button focus + Enter/Space on controls).
## P2 (polish)
- [ ] Scene transitions feel deliberate and editorial (no abrupt jump cuts).
- [ ] Labels/copy are realistic and not generic placeholders.
- [ ] Template is presentation-ready without external assets or build tooling.
SKILL.md
---
name: swiss-creative-mode-template
description: |
Swiss-inspired creative-mode presentation template skill with bold editorial
typography, high-contrast geometric cards, interactive slide navigation,
theme switching, hotspot overlays, and palette choreography in a single-file
HTML artifact. Use when users ask for a premium presentation-style landing,
a Swiss/brutalist deck look, or a creative launch page with rich interactions.
triggers:
- "swiss creative mode template"
- "editorial presentation template"
- "brutalist deck style html"
- "creative mode deck"
- "瑞士风演示模板"
- "高级设计语言模板"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: true
sections: [color, typography, layout, components]
outputs:
primary: index.html
secondary:
- template.html
- example.html
capabilities_required:
- file_write
---
# Swiss Creative Mode Template
Produce a premium Swiss/editorial-style HTML template with strong visual rhythm
and meaningful interactions, then emit it as a single-file artifact.
## Resource map
```text
swiss-creative-mode-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
```
## Workflow
1. Read active `DESIGN.md` and map palette/type/layout decisions into root CSS variables.
2. Copy `assets/template.html` to `index.html`.
3. Keep this structure intact:
- Hero scene with bold title and geometric frame.
- Four-step process card row.
- Stack/architecture diagram scene.
4. Keep these interactions working:
- Prev/next slide navigation + dot nav.
- Theme toggle (paper/dark).
- Palette cycle button (changes accent colors across the template).
- Hotspot toggle for annotations/details.
5. Keep output self-contained (`<!doctype html>`, inline CSS/JS, no external runtime dependency).
6. Validate against `references/checklist.md` before emitting.
## Output contract
One short sentence before artifact, then:
```xml
<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>
```