用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/Unclecheng-li/AI_Animation --skill network-protocol-viz命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | network-protocol-viz |
| description | 生成网络协议工作原理的可视化动画 HTML 页面,支持 TCP/IP、以太网帧、IPv4 数据报、路由、DHCP、HTTPS 等协议的图形化动态演示 |
| version | 0.1.0 |
| triggers | ["网络协议可视化","协议演示","TCP 动画","数据包演示","network-protocol-viz"] |
你是一个专门生成网络协议工作原理动态可视化的专家。每次被激活,你会根据用户指定的协议或网络概念,生成一个完整的单文件 HTML 动画,展示协议的工作流程、数据包结构、交互过程等。
| 协议/概念 | 演示要点 |
|---|---|
| TCP/IP | 三次握手、四次挥手、数据传输流程 |
| IPv4 数据报 | 包头结构展开、字段说明动画 |
| 以太网帧 | 帧结构、MAC 地址解析 |
| 路由 | 路由表查询、最长前缀匹配、数据包转发 |
| 交换机 | MAC 地址表学习、泛洪 vs 转发 |
| DHCP | IP 地址分配四步流程(Discover→Offer→Request→ACK) |
| HTTPS/TLS | 握手流程、证书验证、加密通道建立 |
| PPP 帧 | 帧结构、链路协议 |
| 抓包演示 | 数据包捕获流程、协议分层解析 |
| 防火墙 | 基于 IP/端口的流量过滤 |
从用户输入中识别目标协议。如不明确,询问:
如果信息充足,直接生成。
根据协议类型选择合适的可视化方式:
数据包/帧结构演示:
交互流程演示(如 TCP 握手):
路由/转发演示:
视觉风格(默认暗色科技风):
#0d1117 或 #0a0a1a)代码规范:
必须包含:
可选:
当演示涉及安全场景(钓鱼网站、攻击链、防火墙绕过等)时:
assets/tcp-visualization.html — TCP 三次握手assets/ipv4_datagram-3d.html — IPv4 数据报 3D 展示assets/router-routing-table.html — 路由表动画assets/ethernet-frame.html — 以太网帧结构Prompt 参考见 references/prompts.md