# HTML Page
> 生成移动端优先的 HTML 推文页/落地页，支持选择品牌风格（金融专业/奢华暗色/科技感/极简等），可链接长图PDF导出。触发词：H5落地页、推文页、活动页、HTML宣传页、发手机看的页面。
- Skill: `startupsalad/html-page` (Agent Skill)
- Install (CLI): `npx skillmds@latest add startupsalad/html-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/startupsalad/html-page/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: startupsalad (https://skillmd.com/u/startupsalad)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/startupsalad/html-page
---
# HTML 页面生成 skill — 推文页 & 落地页
专门用于生成高质量的移动端优先 HTML 推文页面和落地页，内置 10 套风格可选，生成完成后可一键转长图 PDF 发手机。
## 工作流
### 第一步：确认需求
与用户确认以下 3 个要点：
1. **页面内容** — 要传达什么？
- 活动主题、时间地点、报名二维码
- 项目亮点、参与人信息
- 品牌故事、宣传语
- 其他说明文字、视觉重点
2. **风格方向** — 选择以下风格之一（或自定义描述）：
| 风格名 | 适用场景 | 特点 |
|:---:|:---|:---|
| **clean** | 金融/政务活动 | 极简白底，黑白灰，专业稳健 |
| **luxury** | 高端理财/私人银行 | 暗色奢华，金色点缀，低调精致 |
| **glassmorphism** | AI/科技活动 | 毛玻璃蓝紫，透明层叠，未来感 |
| **dashboard** | 数据汇报/白皮书 | 模块化卡片，数据展示，系统感 |
| **storytelling** | 品牌推文/公益活动 | 叙事型排版，图文混搭，有温度 |
| **stripe** | 现代金融/SaaS | 蓝白对比，极简线条，可信专业 |
| **linear** | 科技公司/产品发布 | 暗黑极简，极限留白，高级感 |
| **notion** | 内容阅读/编辑型 | 编辑感排版，温暖中性，易读 |
| **vercel** | 黑科技/前沿产品 | 纯黑白，高对比，震撼感 |
| **startup-salad** | 创业沙拉品牌活动 | 蓝绿对比，几何排版，创新专业 |
| 自定义 | 特殊需求 | 描述想要的感觉和氛围 |
3. **输出格式** — 需要什么？
- 只要 HTML 文件？
- 同时转长图 PDF（便于发微信、手机看）？
### 第二步：加载设计系统
根据选择的风格，读取对应的设计规范文件：
```
.claude/design-systems/{style}.md
```
这个文件包含：
- 色彩系统（主色、辅色、中性色）
- 排版规范（字体、字号、行高）
- 组件样式（按钮、卡片、间距）
- 布局指南（移动端优先、响应式）
- 动效规范（过渡、动画）
### 第三步：生成 HTML
基于以下技术规范生成完整的、可立即使用的 HTML 文件：
**结构要求：**
- ✅ 单个 HTML 文件（所有 CSS 内联、无外部依赖）
- ✅ 响应式设计（移动端 375px 优先，逐步适配）
- ✅ 语义化 HTML（section, article, header, footer）
- ✅ 无障碍设计（alt 文本、ARIA 标签、足够对比度）
**样式要求：**
- 所有样式 `