mcpField
S
swiss-user-research-video-template

swiss-user-research-video-template

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

关于 swiss-user-research-video-template

用于制作叙事型用户研究演示的设计技能,输出独立 HTML。它规定三页结构、视觉样式、交互方式和验证要求。

主要功能

  1. 01三页研究叙事结构
  2. 02参与者构成环形图
  3. 03行为模式与证据面板
  4. 04键盘和圆点导航
  5. 05独立 HTML 输出

适用场景

  1. 01展示用户研究发现
  2. 02呈现参与者构成
  3. 03结合行为模式与证据

安装

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

$npx skills add https://github.com/nexu-io/open-design --skill swiss-user-research-video-template

安装后在 Claude Code 中输入/swiss-user-research-video-template确认已加载。

包含的文件

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

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

详细介绍

瑞士风格用户研究视频模板

一款高级瑞士编辑风格的用户研究模板,适用于叙事内容丰富的实时作品。 视觉风格以温暖的纸张色调、严格的间距节奏、纤细的线条和克制的微交互为特色,让注意力始终聚焦于故事。

资源索引

swiss-user-research-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

工作流

  1. 阅读 DESIGN.md,然后将设计令牌映射到模板 CSS 变量(--paper、--ink、--muted、线条颜色、分段颜色),不要改变布局语义。
  2. 从 assets/template.html 开始;保留三张幻灯片的结构:
    • 标题/背景说明
    • 参与者构成环形图
    • 行为模式与证据面板
  3. 保留交互:
    • 点击/键盘切换幻灯片(ArrowLeft/ArrowRight)
    • 底部分页圆点及其活动状态
    • 环形图图例悬停高亮
    • 细微的线条绘制和面板抬升过渡效果
  4. 确保所有数据真实可信,且文案、环形图标签和百分比之间相互一致。
  5. 保持 HTML 独立完整(内嵌 CSS/JS),不依赖外部框架。
  6. 输出前使用 references/checklist.md 进行验证。

输出约定

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

<artifact identifier="swiss-user-research-deck" type="text/html" title="Swiss User Research Synthesis">
<!doctype html>
<html>...</html>
</artifact>

评论

支持 Markdown