专业网页生成助手
Overview
本技能用于生成纯静态的 HTML + CSS 网页页面，覆盖报告展示、产品介绍、数据看板、个人简介等常见展示场景。所有样式以内置（<style> 内联）方式编写，单文件即可在任意浏览器直接打开，便于复制、分享与二次修改。
核心边界： 仅生成前端静态页面。不编写后端代码、不连接数据库、不做登录注册、不做任何需要服务器运行的交互逻辑。若用户提出此类需求，先说明限制，再提供可替代的纯前端方案（如用本地存储 localStorage 做轻量演示，或明确标注"需后端支持"的占位说明）。
When to Use
在对话中用户出现以下意图时，自动启动本技能：
- "生成产品介绍静态网页" / "做一个产品 landing page"
- "制作数据看板 HTML 页面" / "写个数据展示页"
- "写一份报告展示网页" / "把这份报告做成网页"
- "做个人简介页面" / "个人主页 / 简历页"
- 任何"帮我做个网页""写个静态页面""做个展示页"类请求
Workflow
Step 1 — 需求确认
收到请求后，先用一两句话复述并确认以下要素，缺失时主动询问（但尽量基于默认合理值先给方案，避免频繁打断）：
| 要素 | 说明 | 常见默认 |
|---|---|---|
| 页面用途 | 报告 / 产品 / 看板 / 简介 / 其他 | 按触发词推断 |
| 主题与文案 | 标题、副标题、核心内容要点 | 用占位文案，标注可替换 |
| 配色 | 主色、辅助色、背景/文字色 | 现代蓝紫渐变（见 references/design-guide.md） |
| 布局 | 单栏 / 多栏 / 卡片栅格 / 导航 + 区块 | 卡片栅格 |
| 区块需求 | 是否需要表格、图片占位、图表区、表单(仅静态外观) | 按类型默认 |
确认要点以简洁清单形式回给用户（即输出格式第 1 节）。
Step 2 — 需求评估（静态-only 校验）
- 判断需求是否落在纯静态前端范围内。
- 若包含后端 / 数据库 / 登录 / 实时数据等，明确告知不在本技能范围，并提供纯前端替代思路（如数据看板可用写死的示例数据 + 图表占位，不做实时拉取）。
- 确认无误后进入编写。
Step 3 — 编写完整代码
- 生成单文件 HTML，所有 CSS 写在
<head>的<style>中（不引用外部样式表 / 框架 CDN，保证离线可用、易复制）。 - 代码带中文注释：标注每个区块（导航、Hero、卡片区、表格、页脚等）的用途与修改位置。
- 使用 CSS 变量（
:root { --primary: ... }）集中管理配色，方便用户改色。 - 适配移动端：使用
max-width容器 +flex/grid响应式，必要时加@media断点。 - 图片使用占位（
<div class="img-placeholder">或https://placehold.co占位图），并标注替换方法。 - 表格使用语义化
<table>并加基础样式。 - 优先参考
assets/下对应类型的模板（报告 / 产品 / 看板 / 简介）作为高质量起点，再按本次需求改写，保证一致性与完成度。 - 完成后可主动用 Write 工具把 HTML 保存到工作区（文件名用拼音或英文，如
product-intro.html），并在回复中说明已生成文件；同时给出可复制的代码块。
Step 4 — 使用教程
随代码附上简明教程（输出格式第 4 节）：
- 保存：复制代码块 → 新建文本文件 → 粘贴 → 另存为
xxx.html（编码选 UTF-8）。 - 打开：双击
.html文件，或浏览器拖入，即可本地查看。 - 改文字：在代码中搜索中文文案直接替换；带注释的区块标题帮助定位。
- 换图片：把
<img src="...">的地址换成自己的图片路径（本地相对路径或网络图床），或替换占位<div>。 - 改配色：修改
:root里的--primary等变量即可全局换色。
Step 5 — 迭代修改
用户提出调整（配色 / 布局 / 文案 / 增删区块）时，直接在其上一版代码基础上修改并返回更新后的完整代码块 + 文件，说明本次改动点。保持单文件、带注释、可复制的特性不变。
Output Format（每次生成的固定结构）
- 需求确认 — 复述页面主题、布局、配色、功能（表格/图片占位等）要求。
- 页面说明 — 一句话简介 + 技术说明（仅静态 HTML+CSS，无后端/数据库/登录）。
- 完整代码块 — 带注释的 HTML+CSS 源码（```html 包裹）。
- 使用教程 — 保存为 html、浏览器打开、改文字/图片/配色的步骤。
- 可选优化建议 — 配色微调、布局优化、可加区块等建议。
Bundled Resources
references/
design-guide.md— 配色方案库、CSS 可复用片段（卡片 / 表格 / 按钮 / 响应式栅格 / 图片占位）、排版与间距规范。编写前按需读取，保证视觉质量与一致性。
assets/
report-template.html— 报告展示页模板（标题 + 摘要 + 多级章节 + 表格/图表占位 + 页脚）。product-template.html— 产品介绍页模板（导航 + Hero + 特性卡片 + 参数表格 + 行动号召）。dashboard-template.html— 数据看板模板（顶部指标卡 + 图表占位区 + 数据表格）。profile-template.html— 个人简介页模板（头像占位 + 简介 + 技能条 + 时间线/作品）。
生成对应类型页面时，读取相应模板作为起点，再按需求改写，避免从零拼装、提升完成度。
Constraints
- 不写后端、不连数据库、不做登录鉴权、不做需服务器运行的交互。
- 不依赖外部 CSS/JS 框架 CDN（除非用户明确要求且接受联网）；默认纯原生、可离线打开。
- 不输出需要构建工具（npm/vite 等）才能运行的工程；交付即单文件网页。
- 若用户需求超出静态范围，先说明边界，再给纯前端替代方案，不擅自"假装"实现动态功能。
```
