关于 swiss-user-research-video-template
用于制作叙事型用户研究演示的设计技能,输出独立 HTML。它规定三页结构、视觉样式、交互方式和验证要求。
主要功能
- 01三页研究叙事结构
- 02参与者构成环形图
- 03行为模式与证据面板
- 04键盘和圆点导航
- 05独立 HTML 输出
适用场景
- 01展示用户研究发现
- 02呈现参与者构成
- 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.htmlassets/template.htmlreferences/checklist.md详细介绍
瑞士风格用户研究视频模板
一款高级瑞士编辑风格的用户研究模板,适用于叙事内容丰富的实时作品。 视觉风格以温暖的纸张色调、严格的间距节奏、纤细的线条和克制的微交互为特色,让注意力始终聚焦于故事。
资源索引
swiss-user-research-video-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
工作流
- 阅读
DESIGN.md,然后将设计令牌映射到模板 CSS 变量(--paper、--ink、--muted、线条颜色、分段颜色),不要改变布局语义。 - 从
assets/template.html开始;保留三张幻灯片的结构:- 标题/背景说明
- 参与者构成环形图
- 行为模式与证据面板
- 保留交互:
- 点击/键盘切换幻灯片(
ArrowLeft/ArrowRight) - 底部分页圆点及其活动状态
- 环形图图例悬停高亮
- 细微的线条绘制和面板抬升过渡效果
- 点击/键盘切换幻灯片(
- 确保所有数据真实可信,且文案、环形图标签和百分比之间相互一致。
- 保持 HTML 独立完整(内嵌 CSS/JS),不依赖外部框架。
- 输出前使用
references/checklist.md进行验证。
输出约定
先输出一句简洁的导览说明,然后输出单个 HTML 作品:
<artifact identifier="swiss-user-research-deck" type="text/html" title="Swiss User Research Synthesis">
<!doctype html>
<html>...</html>
</artifact>
评论
支持 Markdown