swiss-creative-mode-template

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Produce a premium Swiss/editorial-style HTML template with strong visual rhythm and meaningful interactions, then emit it as a single-file artifact.

生成具有强烈视觉节奏和丰富交互效果的高端瑞士/编辑风格HTML模板，并以单文件形式交付。

text

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

text

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Read active
```
DESIGN.md
```
and map palette/type/layout decisions into root CSS variables.
Copy
```
assets/template.html
```
to
```
index.html
```
.
Keep this structure intact:
- Hero scene with bold title and geometric frame.
- Four-step process card row.
- Stack/architecture diagram scene.
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.
Keep output self-contained (
```
<!doctype html>
```
, inline CSS/JS, no external runtime dependency).
Validate against
```
references/checklist.md
```
before emitting.

读取当前的
```
DESIGN.md
```
文件，将调色板、字体、布局决策映射为根CSS变量。
将
```
assets/template.html
```
复制到
```
index.html
```
。
保留以下结构：
- 包含醒目标题和几何框架的Hero场景。
- 四步流程卡片行。
- 堆叠/架构图场景。
确保以下交互功能正常运行：
- 上一页/下一页幻灯片导航 + 圆点导航。
- 主题切换（纸质/深色）。
- 调色板循环按钮（更改模板中的强调色）。
- 用于注释/详情的热点切换。
确保输出为自包含文件（
```
<!doctype html>
```
、内联CSS/JS、无外部运行依赖）。
交付前根据
```
references/checklist.md
```
进行验证。

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>

在交付产物前添加一句简短说明，然后输出：

xml

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>