mcpField
D
digits-fintech-swiss-template

digits-fintech-swiss-template

github.com/nexu-io设计与 UI104.6k2.8k 次安装今天更新
代码仓库

关于 digits-fintech-swiss-template

用于瑞士网格风格数据叙事的三页 HTML 模板 Skill。它规定页面结构、导航、轻量动效和单文件交付要求,供 Agent 在此基础上调整内容。

主要功能

  1. 01三页数据叙事模板
  2. 02Prev / Next 与圆点导航
  3. 03方向键导航
  4. 04轻量页面与悬停动效
  5. 05内联 CSS 和 JavaScript

适用场景

  1. 01制作三页数据演示
  2. 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.html
assets/
template.html
references/
checklist.md

详细介绍

Digits Fintech Swiss 模板

采用瑞士网格风格进行数据叙事的优质三页实时作品模板。

资源映射

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

工作流

  1. 从 assets/template.html 开始,并保持三页结构完整。
  2. 替换文案和指标值,同时保留卡片层级和阅读顺序。
  3. 保留以下交互:
    • 上一页 / 下一页按钮
    • 键盘导航(ArrowLeft / ArrowRight)
    • 圆点导航
  4. 动效保持轻微(幻灯片淡入 + 轻微悬停上浮即可)。
  5. 文件保持自包含(内联 CSS/JS),不使用与沙盒不兼容的 API。

输出约定

先输出一句简洁的说明,然后输出一个 HTML 作品:

<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>

评论

支持 Markdown