从养宠经验到可复用 Skill：我用一个周末造了「宠物养护 Skill 工作台」

一、赛道背景：一篇笔记就是一次产品发布

华为开发者大赛 × 小红书 Skill 创新赛道，提出了一个很有意思的理念：

“一篇笔记就是一次产品发布，一条评论就是一次真实反馈。”

这句话打动了我。作为一个养猫三年的人，我在小红书上发过不少养猫笔记——从选猫粮到处理猫癣，从猫砂盆摆放到深夜跑酷治理。每篇笔记都是踩坑换来的经验，但它们散落在时间线里，没法被结构化复用。

如果每篇笔记都是一个"产品"，那它应该有版本号、有 changelog、有安装入口、有用户反馈。这就是「宠物养护 Skill 工作台」的出发点。

二、设计思路：把小红书笔记变成 Skill

1. 什么是 Skill 笔记？

在这个项目里，一条 Skill 笔记不是一段自由文本，而是一个结构化的"产品发布"：

• 标题：一句话说清这个 Skill 解决什么问题
• 分类：新手入门 / 日常护理 / 健康检查 / 好物避雷 / 急救常识
• 适用场景：什么情况下用这个 Skill
• 详细步骤：按顺序的操作指南
• 避坑小贴士：踩过的坑，帮你绕开
• 标签：便于检索和关联
• 版本号：v1.0.0，每次迭代自增
• 安装数：被多少人"安装"复用

2. 核心交互闭环

发布 → 浏览 → 安装 → 反馈 → 迭代

• 发布：用结构化表单写一条 Skill 笔记，触发"产品上线"撒花动画
• 浏览：瀑布流首页双列展示，分类标签横滑筛选
• 安装：看到别人的 Skill，一键"安装"，预填充表单，修改后发布为自己的新版本
• 反馈：在笔记详情页发表评论，模拟"真实反馈"
• 迭代：更新已有笔记，自动记录 changelog，版本号自增

三、技术实现：单文件应用，零依赖

1. 技术选型

整个项目是一个 index.html 文件，所有 CSS 和 JS 内联，没有任何外部依赖。选择单文件架构的原因：

• 部署极简：一个文件就是一个应用，python3 -m http.server 3000 即可运行
• 无构建工具：不需要 npm、webpack、vite，打开即用
• 便于分发：作为参赛作品，评委一个文件就能跑起来
• 适合 Skill 传播：单文件本身就是最轻量的"安装包"

2. 数据持久化

使用 localStorage 存储所有笔记数据，key 为 pet_skill_notes。预置了 3 条示例笔记（新手养猫入门、猫咪日常健康检查、养猫好物避雷清单），让首次打开就有内容可看。

数据结构示例：

{
  "id": "note-001",
  "title": "新手养猫入门指南",
  "category": "新手入门",
  "scenario": "第一次养猫，不知道需要准备什么",
  "steps": ["准备猫砂盆和猫砂", "选择合适的猫粮", "设置猫咪休息区"],
  "tips": ["猫砂盆数量 = 猫的数量 + 1", "前两周不要洗澡"],
  "tags": ["新手", "必备", "准备清单"],
  "version": "1.0.0",
  "changelog": [{"version": "1.0.0", "date": "2026-10-19", "changes": "初始版本"}],
  "installs": 42,
  "likes": 18,
  "comments": [],
  "createdAt": "2026-10-19T10:00:00Z"
}

3. 界面设计

采用小红书原生风格，让用户零学习成本：

• 主色：珊瑚红 #FF2442
• 背景：暖米白 #FAFAFA
• 卡片：白色圆角 16px，轻阴影
• 布局：底部 Tab 导航（首页 / 发布 / 我的）
• 首页：瀑布流双列卡片 + 分类标签横滑
• 动效：卡片 hover 微缩放，发布仪式感撒花动画

瀑布流使用 CSS columns 实现，比 JS 计算定位更轻量：

.masonry {
  column-count: 2;
  column-gap: 8px;
}
.masonry .card {
  break-inside: avoid;
  margin-bottom: 8px;
}

4. 撒花动画

发布笔记时触发"产品上线"仪式感。用 JS 创建 50 个彩色粒子从顶部下落，每个粒子有随机的水平偏移、旋转速度和下落时长，模拟真实撒花效果。动画结束后自动清理 DOM 节点，避免内存泄漏。

四、五大功能模块

1. 笔记发布器

结构化表单，包含标题、分类、适用场景、详细步骤（动态增删）、避坑小贴士（动态增删）、标签。发布时触发撒花动画，新笔记出现在首页瀑布流顶部。

2. Skill 模板库

预设 5 个宠物养护场景模板，一键预填充发布表单：

• 新手养猫入门指南
• 狗狗基础训练
• 猫咪日常健康检查
• 养猫好物避雷清单
• 猫咪急救常识

模板的意义在于降低发布门槛——不需要从零开始写，选一个模板改改就行。

3. 版本管理

每条笔记支持迭代更新。更新时自动记录 changelog：版本号自增（v1.0.0 → v1.0.1），记录修改时间和变更内容。在详情页"版本历史"区域展示完整的迭代过程。

4. 反馈中心

模拟评论区作为"真实反馈"。每条评论关联到笔记，在笔记详情页底部展示。这对应赛道理念中"一条评论就是一次真实反馈"——评论不是灌水，而是对 Skill 的使用反馈。

5. 一键复用

这是整个项目最核心的"Skill"特性。浏览他人笔记时，点击"安装这个 Skill"按钮：

• 预填充发布表单（标题、分类、步骤、贴士、标签全部带入）
• 用户修改后发布为自己的新版本
• 原笔记安装数 +1
• 发布后跳转到首页，新笔记出现在瀑布流顶部

这就是"一篇笔记就是一次产品发布"的字面实现——你安装别人的经验 Skill，填入自己的参数（修改适配自己的情况），发布为你的版本。

五、开发过程

1. 环境搭建

使用华为云 CodeArts 沙箱环境（acpx 会话）进行开发。沙箱提供了完整的开发环境，包括 Node.js 语法检查、本地预览服务器等。

2. Bug 修复

开发过程中遇到一个典型 Bug：底部"+"发布按钮点击无响应。根因是 renderDetail() 函数中一行 JS 存在语法错误——三元表达式和字符串拼接之间缺少 + 运算符：

// 错误代码
(liked?' liked':'')">👍</span>'

// 修复后
(liked?' liked':'')+'">👍</span>'

这个语法错误导致整个 JS 块解析失败，所有按钮事件都无法绑定。修复后用 node --check 验证语法通过。

3. 代码推送

通过 GitCode OAuth 流程创建仓库并推送代码。

仓库地址：https://gitcode.com/sdf2342/pet-skill-workbench.git

4. 隧道暴露

使用华为云 DevBridge 创建隧道，将本地 3000 端口暴露为公网可访问地址，方便评委在线体验。

六、作品发布

项目已发布至华为云开发者作品展览馆：

• 🏆 作品链接：https://gallery.developer.huaweicloud.com/gallery/0065d9ee3d400000
• 📦 GitCode 仓库：https://gitcode.com/sdf2342/pet-skill-workbench.git

七、总结与展望

这个项目想表达的是：Skill 不一定是代码，也可以是生活经验的结构化沉淀。

养宠三年踩过的坑、试过的猫粮、处理过的猫癣，如果只是散落在小红书时间线里，它们就是一次性的消费内容；但如果把它们结构化成可安装、可迭代、可反馈的 Skill 笔记，它们就成了可复用的知识资产。

后续可以扩展的方向：

• 接入真实后端，实现跨用户的数据共享
• 增加 Skill 评分和搜索功能
• 支持图片上传，让笔记更丰富
• 接入 AI 辅助，根据用户描述自动生成 Skill 草稿
• 导出 Skill 为标准格式（如 YAML），实现跨平台复用

如果你也养宠，欢迎来体验，安装一个 Skill，发布你自己的版本。

技术栈：纯 HTML + CSS + JavaScript（单文件，零依赖）
运行方式：浏览器直接打开 index.html，或 python3 -m http.server 3000
代码仓库：https://gitcode.com/sdf2342/pet-skill-workbench.git