健身开发者的插画宝库：302个开源运动示意图 + 零框架依赖的 npm 包

你是否曾为开发一款健身 App 或线上训练课程而发愁——找不到高质量、可商用、带结构化元数据的运动动作图？是否在 React Native 里反复处理 SVG 路径兼容性，或在 Web 项目中手动管理 300+ 张 PNG/SVG 的命名与路径？Workout Guide 正是为此而生：它不是一个健身 App，而是一套「开箱即用的运动视觉基础设施」——提供 302 个标准动作、每个动作含 3 个连续帧（起始/中间/结束）、全部透明背景 SVG + PNG 备份、类型安全 API、且完全不绑定 React/Vue/Svelte 等任何前端框架。开发者只需几行代码，就能把专业级运动插画集成进自己的产品中。

核心功能

302 个覆盖全肌群的标准运动插画：从深蹲、硬拉、引体向上到单腿臀桥、弹力带划船等冷门动作一应俱全，涵盖胸部、背部、肩部、手臂、腿部、核心六大肌群，支持按部位、器械（bodyweight / dumbbell / barbell / resistance-band）、难度等级精准筛选，解决「找不到某类小众动作图」的长期痛点。
每个动作标配 3 帧动画序列（SVG 格式）：不是静态单图，而是起始姿态 → 运动中段 → 目标终点的三帧矢量图，开发者可轻松实现轻量级动作演示动画（如 CSS transition 或 Lottie 替代方案），无需自己绘图或切帧，大幅降低运动教学类产品的交互开发成本。
零框架依赖的 TypeScript npm 包（@bryllim/workout-guide）：导出 getExercise()、searchExercises()、getAssetUrl() 等纯函数，不引入任何 React/Vue 组件，可无缝用于 CLI 工具、Node.js 后端服务、Tauri 桌面应用甚至 Expo Go 预览环境，彻底摆脱「为用图标被迫装一堆 UI 框架依赖」的尴尬。
开箱即用的搜索式静态画廊（Astro 构建）：访问在线画廊即可按关键词、器械、目标肌群实时过滤，点击进入详情页查看三帧 SVG、中文/英文名称、主要发力肌群、常见变式说明及标准化元数据（如关节角度范围、推荐组数），省去人工查文档、翻 Figma 文件的时间。
React Native 友好资产加载方案：明确支持 require('./assets/push-up-1.png') 这类原生 RN 资源引用方式，并在指南中给出完整 Image 组件封装示例，解决 RN 中 SVG 渲染兼容性差、第三方库体积大（如 react-native-svg）的问题，让健身类 RN App 也能用上高清矢量图。
确定性资产导入与校验机制：通过 npm run catalog:import 命令可从符合规范的外部 JSON/CSV 数据源（如团队内部动作库导出）一键同步更新全部 906 张 SVG（302×3）及元数据，配合 npm run check 自动验证文件完整性、尺寸一致性（512×512）、许可证声明，保障团队协作中素材版本可控。
双许可证分层授权清晰透明：代码与文档采用 MIT 协议（可商用闭源），所有 906 张 SVG/PNG 插画采用 CC BY-SA 4.0（需署名并相同方式共享），并在 LICENSES.md 和 ATTRIBUTION.md 中逐项注明 Everkinetic 原始素材来源，规避企业法务审核风险。

技术亮点

Astro 驱动的静态站点架构：画廊与文档站点（apps/site）基于 Astro 构建，零 JS 默认加载、极致首屏性能（Lighthouse 得分 >98），所有页面预渲染为 HTML，SVG 直接内联，无运行时框架开销，完美适配健身类内容站对 SEO 和离线访问的强需求。
Monorepo + npm workspace 精细分工：仓库采用严格分层设计：packages/workout-guide 仅包含类型定义、纯函数 API 和全部 906 张 SVG 资产（全部提交 Git，非动态生成），apps/site 作为独立消费方，确保包体积最小化（安装后仅 1.2MB），且资产变更不影响 API 稳定性。
结构化元数据驱动的插画体系：每个动作对应 JSON 元数据包含 name（多语言）、primaryMuscles、equipment、difficulty、frames（三帧文件名）、tips（要点提示）等字段，使搜索、筛选、排序具备语义基础，而非简单字符串匹配。
SVG 优先 + PNG 兜底的兼容策略：所有 906 张插画均以透明背景 SVG 存储（体积小、缩放无损），同时保留原始 PNG 源文件用于旧版 Android WebView 或需要像素级控制的场景，开发者可通过 getAssetUrl('push-up', 1, 'png') 显式指定格式，兼顾现代性与向后兼容。

适合哪些人用

这款工具专为需要将专业运动视觉内容快速、合规、可维护地集成进自有产品的技术团队打造：

健身 App 开发者：例如正在用 Expo 开发一款「居家无器械训练」App 的团队，可直接 import { searchExercises } from '@bryllim/workout-guide' 获取所有 bodyweight chest 动作列表，再用 getAssetUrl 加载三帧 SVG，在训练计划页实现平滑的动作切换动画，全程无需设计介入；
运动康复 SaaS 产品经理：为物理治疗师设计患者教育系统时，需按「肩袖损伤恢复阶段」筛选特定动作。利用其结构化元数据（如 tags: ['rotator-cuff', 'phase-1']），可快速构建定制化动作库，导出 PDF 教程时直接嵌入 SVG，保证印刷质量。

快速上手

只需三步，5 分钟接入：

安装包：npm install @bryllim/workout-guide
在代码中调用（TypeScript 示例）：
import { getExercise, searchExercises, getAssetUrl } from '@bryllim/workout-guide';
const squat = getExercise('barbell-squat'); // 返回完整元数据对象
const coreExercises = searchExercises('core', { equipment: 'bodyweight' }); // 筛选
const frame2Url = getAssetUrl('plank', 2); // 获取第二帧 SVG URL
在 React Native 中使用 PNG（需配置 asset resolver）：
<Image source={require(`@bryllim/workout-guide/assets/plank-1.png`)} />

更多集成细节见官方 Integration Guide。

同类对比 / 注意事项

vs. IconFont 图标库（如 Font Awesome）：Workout Guide 不是通用图标集，而是专注「人体运动解剖准确性」的垂直插画库，每张图都经过姿势校准，且提供三帧序列和肌群标注，图标库无法满足此深度需求；
vs. 商业图库（如 Shutterstock 运动图）：无需按图付费、无版权灰色地带、可修改 SVG 路径适配品牌色，且元数据结构化程度远超商业图库的关键词标签；
注意事项：SVG 插画为正面视角二维示意，不替代专业解剖教学；CC BY-SA 4.0 许可要求若二次分发修改后的插画，须以相同协议公开——但仅调用 API、显示原图不构成「衍生作品」，通常无需开源自身代码。