Frontend Slides Frontend Slides 实用指南

当您需要从零开始或通过转换 PowerPoint 文件创建令人惊叹、富有动画效果的 HTML 演示文稿时，请使用此技能。当用户想要制作演示文稿、将 PPT/PPTX 转换为网页或为演讲/推介创建幻灯片时使用。帮助非设计人员通过视觉探索发现他们的美学。

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

你倾向于趋向于通用的、“按分布”输出。在前端设计中，这会产生用户称之为“AI 粗糙感”的美学。避免这种情况：制作富有创意、独特的前端，让人惊喜和愉悦。

富有创造性地诠释并做出出乎意料的选择，使其真正适应上下文。在轻重主题、不同字体、不同美学之间变化。你仍然倾向于在多次创作中趋向于常见选择（例如 Space Grotesk）。避免这种情况：关键是你必须跳出思维框框！

这些不变量适用于每个演示文稿中的每一张幻灯片：

在生成时，读取 viewport-base.css 并在每个演示文稿中包含其完整内容。

询问用户这是主要用于阅读的卡组还是口语的卡组，然后根据这个答案进行设计：

Low density / speaker-led Public talks, keynote-style sharing, live explanation One idea per slide, large type, strong visual hierarchy, generous negative space, 1-3 bullets max, more slides if needed

High density / reading-first Reports, handouts, async review, detailed internal docs More self-contained slides, structured grids/tables/annotations, 4-8 bullets or 4-6 cards when readable, tighter but still intentional spacing

基线限制仍然适用：禁止滚动、禁止溢出、禁止面板重叠，以及文本不得低于舒适阅读的大小。如果内容超出所选的密度模式，请将其拆分为更多幻灯片，而不是缩小到内容变得拥挤。

在增强现有演示文稿时，固定阶段拟合是最大的风险：

在向现有幻灯片添加图片时：先将图片移动到新幻灯片或先减少其他内容。切勿在未检查现有内容是否已填满1920×1080幻灯片舞台的情况下添加图片。

阶段 1：内容发现（新演示文稿）

所有问题一次性询问，以便用户一次性填写所有内容。如果当前环境提供原生结构化问题界面，请使用；否则请在一条简明消息中以清晰编号的选项进行询问：

问题 1 — 目的（标题：“目的”）:

这个演示是用来做什么的？选项：投资推介 / 教学教程 / 会议演讲 / 内部演示

问题 2 — 长度（标题：“长度”）:

大约有多少张幻灯片？选项：短 5-10 / 中 10-20 / 长 20

问题 3 — 内容（标题：“内容”）：

你有准备好内容吗？选项：所有内容准备好了 / 粗略笔记 / 只有主题

问题 4 — 密度（标题：“密度”）:

牌组应该感觉有多密集？选项：

在第1阶段不要询问内联编辑。 用户在看到草稿之前不应选择编辑方式。内联编辑是草稿后的功能：除非用户明确要求锁定/仅导出文件，否则默认包含它。

记住用户的密度选择。它会影响幻灯片数量、字体比例、每张幻灯片的文字量、布局密度，以及是偏向电影式的演示者幻灯片还是自包含的阅读幻灯片。

如果用户有内容，询问他们是否愿意分享。

第1.2步：图像评估（如果提供图像）

如果用户选择“无图片” → 跳到第2阶段。

如果用户提供了一个图片文件夹：

预览中的标志： 如果识别到可用的标志，将其（base64）嵌入阶段2的每个样式预览中 — 用户会看到他们的品牌以三种不同的方式呈现。

这是“展示，而不是讲述”的阶段。 大多数人无法用语言清楚表达设计偏好。

步骤 2.0：直接生成 3 个样式预览

根据目的、受众、情绪和内容密度，生成3个不同的单页HTML预览，展示排版、颜色、动画和整体美学。

不要问用户他们是否想要选项或预设选择器。默认的发现体验始终是视觉比较。

如果用户已经给出了氛围，请使用它。如果没有，从场合、受众、内容和风险中推断出可能的情绪。保持选项足够多样化，这样用户可以通过视觉反应而不需要一开始就明确表达偏好。

如果用户明确指定预设或粗体模板，将其作为一个选项，然后围绕它生成其余的预览槽位。

请阅读 STYLE_PRESETS.md 以获取安全的预设候选。如果 bold-template-pack/selection-index.json 存在，也请阅读该简明索引，但暂时不要阅读任何 design.md 文件。

Impressed/Confident Bold Signal, Electric Studio, Dark Botanical

Excited/Energized Creative Voltage, Neon Cyber, Split Pastel

Calm/Focused Notebook Tabs, Paper & Ink, Swiss Modern

Inspired/Moved Dark Botanical, Vintage Editorial, Pastel Geometry

预览真实性规则（不可协商）：

将预览保存到 .frontend-slides/slide-previews/（style-a.html、style-b.html、style-c.html）。每个预览都应是自包含且紧凑的，显示一个动画标题幻灯片。

你更喜欢哪种样式预览？选项：样式A: [名称] / 样式B: [名称] / 样式C: [名称] / 元素混合

如果“混合元素”，请询问具体情况。

使用第一阶段的内容（文本或整理的图像）和第二阶段的风格生成完整的演示文稿。

如果提供了图片，幻灯片大纲已经从步骤1.2中包含了它们。如果没有，CSS生成的视觉效果（渐变、形状、图案）可以提供视觉趣味——这是完全受支持的一等路径。

在整个牌组中应用用户选择的密度：

如果用户所述的需求是混合的，请选择两种模式中更接近的一种，而不是发明一个中间选项：面对面说服使用低密度为默认；异步传播或详细审阅使用高密度为默认。

绝不要让高密度内容变成视觉杂乱。如果高密度幻灯片开始溢出，请将其拆分或重新设计成更清晰的结构。

如果用户从 bold-template-pack 中选择了一个加粗模板，请在生成之前读取该模板的完整 design.md。不要读取其他加粗模板。将 design.md 视为设计方案：

如果用户选择了自生成的自定义通配符，请将该预览的 CSS 和布局视为设计方案：

在生成之前，请阅读这些支持文件：

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration...

前端

开发工具

客户端

这是一份前端幻灯片制作指南，支持从零创建、PPT转换及现有HTML增强。它强调零依赖、动画丰富的设计，遵循固定16:9舞台规则，并提供高/低密度模式、多风格预览及一键部署分享等实用功能。

图像理解

文件系统

服务器

防火墙

Python

短信

GitHub

Agent

ReAct 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

Frontend Slides Frontend Slides 实用指南

Frontend Slides Frontend Slides 实用指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐