简体中文 | English

oshwhub-readme-skill

用于 立创开源广场 (OSHWHUB) 硬件开源项目展示页面生成的 AI Skill。让 AI Agent 自动生成产品级展示页面，包含功能介绍、硬件详解、BOM清单、3D外壳展示等模块。

使用前准备

在使用本 Skill 之前，请先在你的项目文件夹中准备好以下文件：

1. 图片文件（放入 img/ 文件夹）

图片使用中文或英文文字描述命名，Skill 会根据文件名中的描述自动匹配到对应的页面模块，无需固定命名格式。

命名示例：

img/
├── ESP32智能小车正面渲染图.png       → 自动匹配到 Hero 主图
├── 项目组成架构图.png                → 自动匹配到 组成图
├── 蓝牙遥控功能展示.png              → 自动匹配到 功能介绍
├── PCB设计图.png                     → 自动匹配到 硬件详解
├── 原理图截图.png                    → 自动匹配到 硬件详解
├── 3D外壳正面.png                    → 自动匹配到 3D外壳
├── BOM元器件清单截图.png             → 自动匹配到 BOM清单
└── 引脚定义图.png                    → 自动匹配到 引脚说明

💡 命名建议：使用能描述图片内容的文字，如"产品主图"、"PCB布局"、"功能演示"等。

2. 项目源码（放入 code/ 文件夹）

将你的项目源代码文件放入 code/ 文件夹。Skill 会自动读取源码结构，在"源码介绍"模块中生成目录树和关键文件说明。

code/
├── src/
│   ├── main.cpp
│   └── config.h
├── platformio.ini
└── README.md

3. 嘉立创EDA 导出文件（放入 SRC/ 文件夹）

如果你的项目有原理图和 PCB，请从嘉立创EDA中导出以下文件并放入 SRC/ 文件夹：

• BOM 表：嘉立创EDA → 原理图 → 导出 BOM（.csv 或 .xlsx 格式）
• 网表文件：嘉立创EDA → PCB → 导出网表（.enet 格式，嘉立创EDA专用 JSON 网表）

Skill 会自动读取 BOM 文件，在页面中生成元器件清单表格。

SRC/
├── BOM_项目名称.csv
└── 网表_项目名称.enet

4. 准备完成后

在项目根目录启动 AI Agent，加载 Skill 后即可开始生成展示页面。Skill 会自动扫描上述文件夹，读取并处理所有已准备的文件。

功能特性

• 参考专业产品展示风格，生成美观的 HTML 页面
• 仅生成 <body> 内容，所有样式使用内联 style 属性，无 <style> 和 <script> 标签
• 自动预留 <img> 图片占位符，生成图片清单供用户准备
• 自动创建 img/、code/、SRC/ 文件夹结构
• 支持深色模式，使用 light-dark() CSS 函数
• 模块化设计：根据项目类型自动选择需要展示的模块

安装说明

1. 拉取仓库到skill目录

根据你使用的 AI Agent 文档，找到或创建存放 Skill 的目录：

git clone https://github.com/easyeda/oshwhub-readme-skill

例如：

Claude Code
用户作用域：位于 ~/.claude/skills，对本机所有项目生效
进入到对应的skills文件夹下
在终端执行git clone https://github.com/easyeda/oshwhub-readme-skill即可

QwenCode
项目作用域：位于项目根目录下的 .qwen/skills
用户作用域：位于 ~/.qwen/skills，对本机所有项目生效
进入到对应的skills文件夹下
在终端执行git clone https://github.com/easyeda/oshwhub-readme-skill即可

2. 使用指定skill

在你的 AI Agent 中确认 Skill 已加载，可通过命令指定skill。

例如：

Claude Code
在对话中输入/oshwhub-readme-skill或说"帮我生成一个开源项目展示页面"

QwenCode
1.进入终端：在终端中输入qwen后回车
2.指定skill并发送需求：在QwenCode的CLI中输入/skills回车
选择要使用的oshwhub-readme-skill并回车，然后填入你的需求

工作原理

Skill 定义了一套工作流，AI Agent 在生成展示页面时会遵循：

页面模块

根据项目类型自动选择包含的模块：

设计风格

• 紫色/绿色/蓝色多色主题
• 渐变背景 Hero 区域
• 卡片式功能介绍，圆角 + 阴影
• light-dark() 深色模式支持
• 响应式网格布局
• 无空行连续 HTML 输出

目录结构

生成后的项目目录结构：

project-root/
├── img/              # 用户放置图片
│   ├── hero.png
│   ├── composition.png
│   ├── feature_1.png
│   └── ...
├── code/             # 用户放置项目源码
├── SRC/              # 嘉立创EDA网表和BOM（有原理图+PCB时）
└── index.html        # 生成的展示页面

已测试的平台