SenseCraft HMI Web 内容生成器

借助 AI 驱动的设计能力，生成惊艳且专为电子墨水屏优化的网页内容。

设计理念

电子墨水屏是数字艺术品，而非普通网页。

灵感源自 Kindle 屏保与极简主义海报。每一页都应美得足以装裱展示。

AI 工作流

当用户请求生成电子墨水屏内容时，请按以下工作流执行：

步骤 1：研读参考文件并牢记于心

阅读设计参考文件（必须）：

设计哲学 — {baseDir}/references/design-patterns.md

10 种经典布局参考 — {baseDir}/references/layouts.md；但请勿局限于这些布局。特别地，若用户提供具体布局构想，请严格遵循其指示。

步骤 2：引导用户提供必要配置信息

若用户通过 Web 聊天通道与您交互，请调用 wizard.js 脚本。该脚本将在 http://localhost:39527/ 启动一个网页，并在用户浏览器中弹出可视化配置界面。用户完成配置后，脚本将自动退出，并创建 {baseDir}/data/.wizard-config.json 文件以保存配置信息。

若用户使用 Discord 等远程聊天通道，请通过对话方式向用户询问以下信息：

• 屏幕尺寸及颜色支持能力
• 用户对页面布局的具体构想

上述配置信息将统一保存至 {baseDir}/data/.wizard-config.json 文件中。后续所有流程（如生成网页的尺寸、颜色支持等）均需严格遵循该配置。

步骤 3：准备内容

文本内容：

• AI 根据用户需求生成内容（例如名言、诗歌、天气信息等）
• 或直接采用用户提供的内容

图像内容（仅当用户明确要求包含图像时）：

请向用户确认图像来源：

• 用户提供图像 URL
• 用户提供本地图像文件
• 若 openclaw 已配置文生图大模型，则调用该模型生成图像

图像存储路径：{baseDir}/data/public/images/

步骤 4：生成 HTML

根据用户需求生成 HTML 文件，并保存至 {baseDir}/data/ 目录。HTML 文件可内含 JavaScript，其中引用的图像路径应为 ./public/images/。

请将 CSS 直接嵌入 HTML 文件中。如需引用 Bootstrap 等 CSS 框架，请使用其 CDN 链接。

请将 JavaScript 脚本直接嵌入 HTML 文件中。如需引用 jQuery 等 JS 框架，请使用其 CDN 链接。

网页核心规范：

• 整个网页可视区域的像素尺寸必须与目标屏幕尺寸完全一致，禁止出现滚动条或任何滚动控件。
• 网页所用颜色不得超过屏幕支持的颜色范围。这包括通过 CSS 控制背景色、文字色、图像色等所有色彩元素。

设计哲学与布局参考：

• {baseDir}/references/design-patterns.md
• {baseDir}/references/layouts.md

步骤 5：启动 server.js

我们使用 pm2 管理 HTTP 服务。

# 启动服务
pm2 start {baseDir}/data/server.js --name sensecraft-hmi

# 停止服务
pm2 stop sensecraft-hmi

# 查看日志
pm2 logs sensecraft-hmi

# 访问地址
http://localhost:19527/?token=XXXXX

服务启动后，请自动打开浏览器访问 http://localhost:19527/?token=XXXXX，以便用户即时预览生成的网页效果。同时，在聊天界面中提示用户：可通过访问该链接实时查看网页效果。

步骤 6：反向代理

指导用户使用反向代理工具，将 http://localhost:19527 映射至公网，再通过 SenseCraft HMI 平台中的 html 小部件加载并显示该网页。

可用的反向代理工具包括：frp、ngrok、Cloudflare Tunnel 等。建议用户优先选用 HTTP 协议转发（而非 TCP 转发），因其安全性更高。

出于 openclaw 技能安全审查要求，本技能不提供任何反向代理工具的二进制文件。请用户自行搜索、下载并部署使用。

工具列表

10 种经典布局

详细规格请参阅 references/layouts.md。

定时更新

若用户需求中包含定时任务，可采用以下三种方式：

1. 使用 OpenClaw cron 定期更新内容，适用于每次更新内容差异较大的场景

openclaw cron add --name "daily-summary" --schedule "0 9 * * *" 
  --task "Generate a work summary based on Notion"

2. 在 HTML 文件中嵌入 JavaScript 脚本，实现动态内容更新，适用于从 API 拉取数据的场景

3. 基于 Node.js Express 后端编写后台服务，结合模板技术或 React 等框架，实现后端向前端推送数据，适用于内容更新逻辑特别复杂的场景

文件结构

sensecraft-hmi-gen/
├── SKILL.md                    # 本文件（当前文件）
├── data/                       # AI 生成网页的源文件目录
│   ├── server.js               # Express 服务端
│   ├── index.html              # 当前展示的内容页
│   ├── .token                  # 访问令牌
│   ├── public/images/          # 图像资源（可选）
│   ├── public/css/             # CSS 资源（可选）
│   └── public/js/              # JS 资源（可选）
├── scripts/
│   ├── init_project.js         # 项目初始化脚本
│   ├── wizard.js               # 配置向导服务（含前端 + 后端）
└── references/
    ├── layouts.md              # 布局详细规格说明
    ├── design-patterns.md      # 设计模式与美学指南
    └── screen-specs.md         # 硬件规格说明

实用建议

• 让 AI 充分发挥创造力 — 不必拘泥于模板，让设计自然源于内容本身
• 深入研读设计参考 — design-patterns.md 与 layouts.md 是您的灵感源泉
• 字体尺寸大胆放大 — 屏幕上看似过大的字号，在电子墨水屏上往往恰到好处
• 务必实机测试 — 电子墨水屏的显示效果与 LCD 屏截然不同
• 善用留白 — 留白并非浪费空间，而是优雅的体现

故障排查