第一部分 / HTML 介绍

HTML 是什么？

HTML（超文本标记语言）是一种用于描述网页内容结构的标记语言。

它通过标签组织标题、段落、图片和链接等内容。

浏览器会解析这些标签，并显示对应的网页内容。

HTML 标签与页面内容

代码示例（HTML）

1<h1>这是一个标题</h1>
2<p>这是一段文字。</p>
3<a href="#">了解更多</a>

浏览器预览

这是一个标题

这是一段文字。

了解更多

网页由三个角色共同组成

HTML

内容与结构

定义标题、段落、图片与链接

CSS

样式与布局

控制颜色、字体与响应式布局

JavaScript

行为与交互

实现切换、动画与操作反馈

HTML 负责内容结构，CSS 负责样式，JavaScript 负责交互。

第一部分 / HTML 幻灯片的特点

使用 HTML 做产品介绍/产品展示的四大优势

从多端展示、协作维护、真实交互到数据更新，先建立整体认知，再逐项演示。

01

响应式

可以实现不同平台不同的展示效果，布局更灵活

02

协作维护

通过 Git 等版本管理工具，可以实现多人维护同一套网页内容

03

真实交互

相较于 PPT，HTML 基于浏览器，交互更丰富

04

实时数据

接入数据库，前端网页数据可以实现实时更新

接下来逐项演示

第一部分 / 四大优势 / 01

响应式

可以实现不同平台不同的展示效果，布局更灵活。

同一份内容，适配不同视口

视口设置

视口宽度 768 px 3937681440

内容间距: 24 px
栏目数量: 2 列
导航模式: 收起

页面实时预览

HTML 内容展示

HTML 是什么？

HTML（超文本标记语言）用于描述网页内容结构。

标签数量142▲ +12.7%

页面结构2 级▲ +1级

内容元素36▼ -5.3%

访问趋势（响应式适配后）

布局自动切换
内容间距同步调整
导航收起为简洁模式

布局: 3列 → 2列
导航: 展开 → 收起
间距: 32 → 24

第一部分 / 四大优势 / 02

协作维护

通过 Git 等版本管理工具，可以实现多人维护同一套网页内容。

有一定使用门槛

内容修改

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4  <title>HTML 内容展示</title>
5- <meta name="description" content="网页示例">
6+ <meta name="description" content="HTML 演示内容">
7</head>

A编辑者 A● 正在修改B编辑者 B● 等待合并

版本与合并

当前分支feature/content

待合并2 项

冲突0 项

修改前4<title>HTML 内容展示</title>5- content="网页示例"

修改后4<title>HTML 内容展示</title>5+ content="HTML 演示内容"

✓ 修改已合并，页面内容已更新

01

分支协作分开修改，降低互相影响

02

版本记录每次提交都可以追溯

03

审核合并确认修改后再进入主版本

第一部分 / 四大优势 / 03

真实交互

相较于 PPT，HTML 基于浏览器，交互更丰富。

调整数据，结果同步变化

参数设置

项目总预算¥800万项目周期24个月管理费率8.0% 人工成本¥380万材料成本¥275万其他费用¥75万

预算结果

项目周期24个月

本月可支配¥83万

预算余额¥40万

预计结余第13月

资金余额预测

营收 vs 支出

本月预算构成

已更新 +¥15万

● 参数已更新，看板已重新计算

左侧输入改变后，指标、图表与构成同步更新。

第一部分 / 四大优势 / 04

实时数据

接入数据库后，前端网页数据可以实现实时更新。

实际更新需通过后端接口或数据服务。 ● 数据连接正常

数据来源

业务数据库● 已连接2 秒前更新

数据接口● 正常5 秒轮询

缓存服务● 正常60 秒过期

更新策略

刷新频率
断线重连

实时事件日志

收到新数据
校验通过
看板已更新

实时看板

业务数据库● 已连接2秒前更新

当前记录1,248

本次新增16 ↗

待处理32 ↗

接口耗时86 ms

数据变化趋势

分类分布

数据更新明细

数据项	更新前	更新后	状态

● 已同步最新数据 · 看板内容已更新

第二部分 / 网页幻灯片开发

制作 HTML 展示页的两种方式

同一份内容，可以直接生成，也可以先确认页面原型后再进入实现。

内容 / 资料

方法 01

AI 直接生成

△ 效率高，但质量不可控

提交内容

AI 直接生成

网页成品

方法 02

先制作原型图，审核后再实现

● 推荐

提交内容

页面原型图

审核确认

前端实现

先确认结构、布局和视觉样式，再进入开发。

接下来逐项演示

第二部分 / 网页幻灯片开发 / 方法 01

直接让 AI 生成网页

把内容与提示词交给 AI，直接生成可向客户展示的产品网页。

效率高，但质量不可控

生成结果预览

幸之住 · 产品方案 Demo

./xingzhizhu-showcase/index.html

打开 Demo

配套素材

可下载、可复用

幸之住设计流程图1029.pptxPPTX · 41.3 MB 网页生成提示词.txtTXT · 完整提示词

本次使用的提示词

你是一名资深品牌设计师、产品经理和前端工程师。请根据我提供的产品内容，直接设计并实现一个用于向客户展示产品或产品方案的纯前端网页。

你的目标不是简单地把文字放进网页，而是把原始内容整理成一套结构清晰、重点突出、具有商业说服力的在线演示页面。

下载 PPT 下载提示词

第二部分 / 网页幻灯片开发 / 方法 02

原型先行，再实现网页

先根据内容生成页面原型图，审核确认后再进行网页开发。

先审核，再开发，质量更可控

审核后的实现预览

幸之住 · 产品与设计服务 Demo

./xingzhizhu-product-web/index.html

打开 Demo

配套素材

可下载、可复用

幸之住设计流程图1029.pptxPPTX · 41.3 MB 页面原型生成提示词.txtTXT · 完整提示词

本次使用的提示词

你是一名资深产品经理、品牌设计师、信息架构师和 UI/UX 设计师。请根据我上传的资料，为“向客户展示产品或产品方案”设计一套接近真实上线效果的网页页面原型图。

本阶段只进行内容梳理和页面原型设计，不编写网页代码。

下载 PPT 下载提示词

一次构建三个站点，部署时只需发布根目录 dist。

第二部分 / 网页幻灯片开发 / Skill 工具

使用 frontend-slides 生成前端幻灯片

参考 PPT 并使用 frontend-slides Skill，生成用于对外展示产品的前端展示页面。

PPT → HTML 演示页面

生成结果预览

幸之住 · 前端幻灯片 Demo

./xingzhizhu-product-intro/index.html

打开 Demo

Skill 与配套素材

安装、下载与复用

frontend-slidesGitHub · Skill 源码与下载打开

幸之住设计流程图1029.pptxPPTX · 41.3 MB frontend-slides生成提示词.txtTXT · 完整提示词

在 Trae 中安装 Skill

把仓库地址发送给 Trae，并让它安装 frontend-slides。

https://github.com/zarazhangrui/frontend-slides

安装后即可在项目中使用

本次使用的提示词

参考ppt并使用frontend-slides skills设计并生成用于对外展示产品的前端展示页面

打开 Skill 下载 PPT 下载提示词