关于 digits-fintech-swiss-template
用于瑞士网格风格数据叙事的三页 HTML 模板 Skill。它规定页面结构、导航、轻量动效和单文件交付要求,供 Agent 在此基础上调整内容。
主要功能
- 01三页数据叙事模板
- 02Prev / Next 与圆点导航
- 03方向键导航
- 04轻量页面与悬停动效
- 05内联 CSS 和 JavaScript
适用场景
- 01制作三页数据演示
- 02以瑞士网格布局呈现指标
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill digits-fintech-swiss-template安装后在 Claude Code 中输入/digits-fintech-swiss-template确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
example.htmlassets/template.htmlreferences/checklist.md详细介绍
Digits Fintech Swiss 模板
采用瑞士网格风格进行数据叙事的优质三页实时作品模板。
资源映射
digits-fintech-swiss-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
工作流
- 从
assets/template.html开始,并保持三页结构完整。 - 替换文案和指标值,同时保留卡片层级和阅读顺序。
- 保留以下交互:
- 上一页 / 下一页按钮
- 键盘导航(
ArrowLeft/ArrowRight) - 圆点导航
- 动效保持轻微(幻灯片淡入 + 轻微悬停上浮即可)。
- 文件保持自包含(内联 CSS/JS),不使用与沙盒不兼容的 API。
输出约定
先输出一句简洁的说明,然后输出一个 HTML 作品:
<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>
评论
支持 Markdown