html-product-skill

一套内容资产，同时产出 产品宣传页 + A4 宣传册 + 电子翻页版。

技能介绍

html-product-skill 是一个面向 AI 协作的产品叙事技能，适合：

• 产品官网 / 方案页 / 投标材料
• 招商资料 / 销售宣传册 / 项目介绍
• 既要在线展示，又要可打印 PDF 的场景
• 技能官网：https://lqskill.rmuu.cn

核心输出：

• index.html：产品宣传页
• brochure.html：A4 宣传册（可打印/导出 PDF）
• flipbook.html：电子翻页版宣传册

内置主题：

• smart-community-classic（蓝色，默认）
• smart-community-green
• smart-community-orange
• smart-community-red

内置封面 / 尾页模板：

• 封面（Cover）
  • cover-party-red-grid：党建红 · 几何线框
  • cover-green-topo：绿色能源 · 等高线
  • cover-blue-wave：科技蓝 · 流线曲面
  • cover-green-geometry：智联绿 · 几何方阵
• 尾页（Tail）
  • tail-party-red-solid：党建红 · 价值宣言
  • tail-green-topo：绿色能源 · 联系页
  • tail-blue-wave：科技蓝 · 收尾页
  • tail-green-geometry：智联绿 · 几何收束

推荐组合：

• party · red · grid：cover-party-red-grid + tail-party-red-solid
• green · topo：cover-green-topo + tail-green-topo
• blue · wave：cover-blue-wave + tail-blue-wave
• green · geometry：cover-green-geometry + tail-green-geometry

本地选择器：templates/cover-tail-library/selector.html

AI 使用方法

1) 安装技能

npx html-product-skill install

常用命令：

npx html-product-skill install --force
npx html-product-skill where
npx html-product-skill uninstall

2) 在 AI 中说明你的目标

建议一次说清 4 件事：

• 目标受众（给谁看）
• 业务目标（转化/背书/中标）
• 核心卖点（3-5 条）
• 交付要求（网页 + A4 + 是否要翻页版）

3) 让 AI 按技能模板落地

可直接复用下面的提示词模板。

提示词模板（可直接粘贴）

模板 A：从 0 到 1 生成全套

请使用 html-product-skill，为我生成一套“产品宣传页 + A4 宣传册 + 电子翻页版”。
产品名：{{产品名}}
一句话定位：{{定位}}
目标受众：{{受众}}
核心卖点：
1) {{卖点1}}
2) {{卖点2}}
3) {{卖点3}}
交付风格：专业、现代、可信
请输出统一叙事结构，并确保网页与宣传册口径一致。

模板 B：已有资料，快速重写成可交付版本

请基于我提供的资料，使用 html-product-skill 生成可直接交付的版本：
1) index.html（宣传页）
2) brochure.html（A4 宣传册）
3) flipbook.html（电子翻页版）
要求：保留事实信息，优化结构层级，增强转化表达，避免空泛文案。

模板 C：偏政府/物业/企业方案风格

请使用 html-product-skill，产出偏“政府/物业/企业方案”风格的双形态内容：
- 风格关键词：稳重、专业、可信、可落地
- 重点突出：平台能力、业务流程、角色价值、交付成果
- 交付：宣传页 + A4 宣传册 + 翻页预览
请优先使用真实截图占位逻辑，并保证打印版不溢出。

模板 D：只优化文案与叙事（不大改视觉）

请使用 html-product-skill 对现有页面做“文案与叙事优化”，不要大改视觉框架。
目标：让信息更清晰、价值更具体、章节节奏更顺。
请给出优化后的标题、副标题、价值点、模块顺序与 CTA 文案。

模板 E：替换封面与尾页（指定内置模板）

请使用 html-product-skill，在不改正文页面的前提下，仅替换宣传册封面与尾页。
封面模板：{{cover-id}}（可选：cover-party-red-grid / cover-green-topo / cover-blue-wave / cover-green-geometry）
尾页模板：{{tail-id}}（可选：tail-party-red-solid / tail-green-topo / tail-blue-wave / tail-green-geometry）
请保留正文内容与分页结构，只更新封面和尾页信息（标题、公司、联系人、电话、二维码文案）。

模板 F：基于设计文档 / 设计稿 / 截图 / 现有代码生成完整宣传册

请使用 html-product-skill，基于我项目已有资料生成一套完整宣传册（A4 可打印 + 电子翻页预览）。
可用输入包含：设计文档、UI 设计稿、页面截图、现有前端代码（按我提供内容为准）。
请按以下要求执行：
1) 先提炼统一叙事：产品定位、目标受众、核心卖点、能力模块、交付价值；
2) 输出完整宣传册结构（封面、目录/概览、能力页、场景页、案例/数据页、尾页）；
3) 视觉风格尽量贴合现有设计系统（配色、字体层级、组件语义），不凭空杜撰事实；
4) 同步生成 `brochure.html` 与 `flipbook.html` 所需内容，保证打印版不溢出；
5) 缺失信息请用“待确认”占位并列出补充清单，不中断生成流程。

模板 G：一行极速版（聊天直发）

请使用 html-product-skill，基于我提供的设计文档/UI 稿/截图/代码，生成一套完整的宣传页+A4 宣传册+电子翻页版，保持现有设计风格并标注待确认信息。

建议流程（高效）

1. 先确定一句话定位 + 受众 + 3 个核心卖点
2. 先出结构稿，再补图，再微调视觉
3. 先保证宣传页与宣传册口径一致，再做风格增强

维护说明

开发与 npm 发布说明已拆分到仓库内维护文档：MAINTAINER.md（该文件不随 npm 包发布）。