Frontend Slides

前端幻灯片

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

创建无需额外依赖、动画丰富且完全在浏览器中运行的 HTML 演示文稿。

Start with a topic, outline, finished content, or an existing PowerPoint file. The Agent turns your material into a distinctive, responsive web presentation.

你可以从主题、大纲、完整文稿或现有 PowerPoint 文件开始。Agent 会将材料制作成风格鲜明、响应式的网页演示文稿。

What It Does

功能介绍

Creates HTML presentations from topics, notes, outlines, or finished content.
根据主题、笔记、大纲或完整文稿创建 HTML 演示文稿。
Converts PPT and PPTX files into browser-based presentations.
将 PPT 和 PPTX 文件转换为可在浏览器中运行的演示文稿。
Improves the layout, typography, motion, and visual direction of existing HTML slides.
改进现有 HTML 幻灯片的布局、字体、动画和整体视觉方向。
Generates visual style previews when you are unsure which design direction to choose.
当你还未确定设计方向时，生成可视化风格预览供你选择。
Supports keyboard, mouse-wheel, touch, and swipe navigation.
支持键盘、鼠标滚轮、触摸和滑动翻页。
Includes slide progress indicators or page numbers.
提供演示进度指示或当前页码。
Adds meaningful reveal animations without making the presentation distracting.
添加自然、有意义的入场动画，同时避免过度干扰内容。
Supports reduced-motion accessibility preferences.
支持减少动态效果的无障碍偏好设置。
Defaults to a single self-contained HTML file with inline CSS and JavaScript.
默认交付一个包含内联 CSS 和 JavaScript 的独立 HTML 文件。

Best For

适用场景

Conference talks and public presentations.
技术大会、行业会议和公开演讲。
Startup pitches and product presentations.
创业路演和产品演示。
Workshops and training materials.
工作坊和培训材料。
Educational and teaching presentations.
教育和教学演示文稿。
Internal company updates and reports.
公司内部汇报和工作报告。
Converting PowerPoint decks into web presentations.
将 PowerPoint 演示文稿转换为网页演示。
Improving an existing HTML slide deck.
优化已有的 HTML 幻灯片。

Visual Style Exploration

视觉风格探索

If you do not know which visual style you want, the Agent can create three single-slide previews based on the feeling you want the presentation to produce.

如果你还没有明确的视觉偏好，Agent 可以根据演示文稿希望传达的感受，创建三种单页风格预览。

The previews demonstrate typography, color, layout, atmosphere, and motion. You can choose one direction or combine elements from multiple options.

预览会展示字体、配色、布局、氛围和动画效果。你可以选择其中一种，也可以组合多个方案中的设计元素。

If you already have a preferred style, visual reference, or design preset, the preview stage can be skipped.

如果你已经有明确的风格、视觉参考或设计预设，则可以跳过预览阶段。

How It Works

工作流程

Identifies whether the task is a new presentation, a PowerPoint conversion, or an existing HTML presentation enhancement.
判断任务属于新建演示文稿、转换 PowerPoint，还是优化已有 HTML 演示文稿。
Confirms the purpose, audience, desired length, and current state of the content.
确认演示用途、目标观众、期望页数和当前内容完成度。
Collects the topic, outline, finished copy, or source presentation file.
收集主题、大纲、完整文稿或源演示文件。
Establishes the visual direction directly or through three style previews.
直接确定视觉方向，或通过三种风格预览进行选择。
Builds the complete responsive HTML presentation.
制作完整的响应式 HTML 演示文稿。
Verifies that every slide fits correctly across common desktop, tablet, and mobile screen sizes.
检查每一页在常见桌面、平板和手机屏幕尺寸下是否正确适配。
Delivers a presentation that can be opened locally in a modern browser.
交付可直接使用现代浏览器在本地打开的演示文稿。

PowerPoint Conversion

PowerPoint 转换

When converting a PPT or PPTX file, the Agent extracts the available text, images, and speaker notes while preserving the original slide order.

转换 PPT 或 PPTX 文件时，Agent 会提取可读取的文字、图片和演讲者备注，并保留原始幻灯片顺序。

The extracted content is then redesigned as a responsive HTML presentation with browser navigation and animation.

提取后的内容会被重新设计成响应式 HTML 演示文稿，并加入浏览器翻页和动画功能。

The result is a web-based reinterpretation of the source presentation rather than a pixel-perfect copy of the original PowerPoint file.

最终结果是原始演示文稿的网页化重新设计，而不是对 PowerPoint 文件进行逐像素复制。

Responsive Design

响应式设计

Every slide is designed to fit within a single browser viewport without internal scrolling.

每一页幻灯片都会完整适配一个浏览器视口，不会出现内部滚动条。

Typography and spacing scale responsively across different screen sizes. If a slide contains too much content, it is divided into multiple slides instead of shrinking the text below a readable size.

字体和间距会根据不同屏幕尺寸自动调整。如果单页内容过多，内容会被拆分到多个页面，而不是通过缩小文字强行塞入一页。

The finished presentation can be checked at the following common viewport sizes:

完成后的演示文稿可以针对以下常见视口尺寸进行检查：

1920 × 1080
1920 × 1080
1280 × 720
1280 × 720
768 × 1024
768 × 1024
375 × 667
375 × 667
667 × 375
667 × 375

Interaction Features

交互功能

Keyboard navigation.
键盘翻页。
Mouse-wheel navigation.
鼠标滚轮翻页。
Touch and swipe navigation.
触摸和滑动翻页。
Slide number or progress indicator.
页码或演示进度指示。
Reveal-on-enter animations.
页面进入时的内容展示动画。
Responsive typography and spacing.
响应式字体和间距。
Reduced-motion accessibility support.
减少动态效果的无障碍支持。

Inputs

输入内容

Provide any combination of the following:

请提供以下任意信息：

Presentation topic.
演示文稿主题。
Target audience.
目标观众。
Presentation purpose.
使用场景和演示目的。
Desired slide count.
期望页数。
Content outline or finished copy.
内容大纲或完整文稿。
PPT or PPTX source file.
PPT 或 PPTX 源文件。
Brand colors and typography requirements.
品牌颜色和字体要求。
Visual references or preferred design style.
视觉参考或喜欢的设计风格。
The feeling the presentation should create, such as focused, energetic, impressive, or inspiring.
希望演示文稿营造的氛围，例如专注、充满活力、令人印象深刻或富有启发性。

Outputs

输出内容

A polished, responsive, and interactive HTML presentation that can be opened directly in a modern browser.

一个精美、响应式且具备交互功能的 HTML 演示文稿，可直接使用现代浏览器打开。

By default, the presentation is delivered as one self-contained HTML file with inline CSS and JavaScript.

默认情况下，演示文稿会作为一个包含内联 CSS 和 JavaScript 的独立 HTML 文件交付。

An additional assets folder is used only when extracted or user-provided images and media files are required.

只有在需要使用提取的图片、用户提供的图片或其他媒体文件时，才会额外创建资源文件夹。

Design Principles

设计原则

Every slide must fit inside the viewport.
每一页都必须完整适配当前视口。
Slides must not contain internal scrollbars.
幻灯片内部不能出现滚动条。
Text must remain clear and readable.
文字必须保持清晰易读。
Animation should support the message rather than distract from it.
动画应该强化信息表达，而不是分散注意力。
The presentation should have a distinctive and intentional visual direction.
演示文稿应具备鲜明且经过明确设计的视觉方向。
Generic, template-like AI aesthetics should be avoided.
避免常见、模板化的 AI 设计风格。
The presentation should remain responsive, accessible, and performant.
演示文稿应保持良好的响应式体验、无障碍支持和运行性能。

Important Notes

重要说明

This Agent primarily creates HTML presentations that run in a browser. It does not produce a native PowerPoint file unless a separate PowerPoint authoring workflow is used.

该 Agent 主要创建在浏览器中运行的 HTML 演示文稿。除非使用单独的 PowerPoint 制作流程，否则不会生成原生 PowerPoint 文件。

For presentations requiring complex PowerPoint animations, advanced transitions, extensive speaker notes, or fully editable native PowerPoint elements, use a dedicated PowerPoint authoring tool.

如果演示文稿需要复杂的 PowerPoint 动画、高级转场、大量演讲者备注或完全可编辑的原生 PowerPoint 元素，建议使用专门的 PowerPoint 制作工具。

Example Prompts

示例提示词

Create a 10-slide product launch presentation from this outline.
根据这份大纲制作一个 10 页的产品发布演示文稿。
Convert this PPTX file into a responsive HTML presentation.
将这个 PPTX 文件转换为响应式 HTML 演示文稿。
Create an animation-rich pitch deck for my startup.
为我的创业项目制作一份动画丰富的路演演示。
Improve the layout, typography, and motion of this HTML presentation.
优化这个 HTML 演示文稿的布局、字体和动画效果。
Design three visual style options for my conference talk.
为我的会议演讲设计三种视觉风格方案。
Turn these training materials into web slides that work on desktop and mobile.
把这些培训材料制作成适合电脑和手机播放的网页幻灯片。

Frontend Slides - Free Online Skill