after-hours-editorial-template

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

After Hours Editorial Template

After Hours 编辑模板

Produce a self-contained HTML editorial motion artifact in a dark luxury style, with three short pages, cinematic typography, and premium transition language.

生成一个独立的暗黑奢华风格HTML编辑动效制品，包含三个短页面、电影级排版与高端转场效果。

Resource map

资源地图

text

after-hours-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

text

after-hours-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

工作流程

Read active
```
DESIGN.md
```
and map colors, typography tone, and layout rhythm into CSS variables while preserving a dark editorial baseline.
Copy
```
assets/template.html
```
to
```
index.html
```
.
Keep three narrative pages in sequence; do not increase default page dwell above 3 seconds.
Preserve premium motion behavior:
- staged text reveal hierarchy
- chapter wipe transitions
- ambient grain/vignette depth
- restrained cursor-light interaction for local preview
Keep output single-file HTML with inline CSS and JS.
Avoid sandbox-hostile browser APIs (e.g. localStorage and confirm).
Validate with
```
references/checklist.md
```
before emitting.

读取当前的
```
DESIGN.md
```
，将色彩、排版基调与布局节奏映射为CSS变量，同时保留暗黑编辑风格的基础样式。
将
```
assets/template.html
```
复制为
```
index.html
```
。
保留三个叙事页面的顺序，默认页面停留时间不超过3秒。
保留高端动效表现：
- 分阶段的文本展示层级
- 章节擦除转场
- 环境颗粒/暗角深度效果
- 本地预览时的受限光标高亮交互
输出为包含内联CSS和JS的单文件HTML。
避免使用沙箱不兼容的浏览器API（如localStorage和confirm）。
输出前使用
```
references/checklist.md
```
进行验证。

Output contract

输出约定

One short orientation sentence, then:

xml

<artifact identifier="after-hours-editorial" type="text/html" title="After Hours Editorial Template">
<!doctype html>
<html>...</html>
</artifact>

先写一句简短的说明语，然后输出：

xml

<artifact identifier="after-hours-editorial" type="text/html" title="After Hours Editorial Template">
<!doctype html>
<html>...</html>
</artifact>