mcpField
A
after-hours-editorial-template

after-hours-editorial-template

github.com/nexu-io创意与媒体104.6k2.8k 次安装今天更新
代码仓库

关于 after-hours-editorial-template

用于制作暗色编辑风格 HTML 动态作品的技能，默认包含三个叙事页面。它指导 Agent 映射设计规范、实现克制的转场，并检查单文件输出。

主要功能

  1. 01三页叙事结构
  2. 02暗色奢华视觉基调
  3. 03分层文字显现与章节擦除转场
  4. 04内嵌 CSS 和 JavaScript
  5. 05依据清单验证

适用场景

  1. 01制作短篇编辑风格动态作品
  2. 02将当前设计变量映射到 HTML
  3. 03生成单文件浏览器作品

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/open-design --skill after-hours-editorial-template

安装后在 Claude Code 中输入/after-hours-editorial-template确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

example.html
assets/
template.html
references/
checklist.md

详细介绍

深夜编辑模板

制作一个独立的 HTML 编辑风格动态作品，采用暗黑奢华风格， 包含三个简短页面、电影感排版和高级转场语言。

资源映射

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

工作流

  1. 阅读当前生效的 DESIGN.md，并将色彩、字体风格和布局节奏映射 到 CSS 变量中，同时保留暗黑编辑风格的基调。
  2. 将 assets/template.html 复制为 index.html。
  3. 按顺序保留三个叙事页面；默认页面停留时间不得超过 3 秒。
  4. 保持高级动态效果：
    • 分阶段的文字显现层次
    • 章节擦除转场
    • 氛围颗粒与暗角营造的纵深感
    • 用于本地预览的克制型光标光效交互
  5. 将输出保持为单文件 HTML，内嵌 CSS 和 JS。
  6. 避免使用不适用于沙盒的浏览器 API（例如 localStorage 和 confirm）。
  7. 输出前使用 references/checklist.md 进行验证。

输出约定

先用一句简短的话说明内容，然后：

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

评论

支持 Markdown