promptslide by prompticeu/promptslide
npx skills add https://github.com/prompticeu/promptslide --skill promptslide使用 AI 编码代理创建幻灯片演示文稿。每张幻灯片都是一个使用 Tailwind CSS 样式的 React 组件,具有内置动画和 PDF 导出功能。
检查当前目录中是否已存在 PromptSlide 项目:
grep -q '"promptslide"' package.json 2>/dev/null
在编写任何代码之前,询问用户:
使用答案在搭建项目结构之前规划幻灯片结构。
在编写任何代码之前确定视觉方向:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
选择的方向决定了您在步骤 3–4 中配置的内容:
src/globals.css(--primary 和其他 CSS 变量)index.html 中的 <link> + src/theme.ts 中的 fontssrc/layouts/ 中的自定义 React 组件(见下文"布局"部分)预设是起点,而非严格的模板。用户可以更改所有内容 — 这些都只是 React 组件和 CSS 变量。
bun create slides my-deck -- --yes
cd my-deck
bun install
bun run dev
--yes 标志跳过交互式提示并使用合理的默认值。将 my-deck 替换为用户所需的名称。开发服务器将在 http://localhost:5173 启动,并支持热模块替换。
编辑 src/theme.ts 以设置品牌名称和徽标,编辑 src/globals.css 以设置主题颜色。详情请参阅 references/theming-and-branding.md。
在编写任何幻灯片代码之前,承诺一个清晰的美学方向,并整体规划演示文稿。通用、模板化的幻灯片比没有幻灯片更糟糕。
选择一个独特的视觉个性 — 编辑风、粗野主义、奢华极简、大胆几何、温暖有机 — 并在整个演示文稿中精确执行。关键是意图,而非强度。一个经过完美间距和排版执行的克制极简演示文稿,与一个大胆的极繁主义演示文稿同样有力。扼杀演示文稿的是优柔寡断:什么都有一点,什么都不坚持。
不要默认使用脑海中浮现的第一个布局。为每张幻灯片考虑 2–3 个选项,并选择最能传达信息的那一个。
在编码之前与用户分享您的设计计划。 简要描述视觉方向、颜色策略以及您对每张幻灯片的布局方法(例如,"幻灯片 3:不对称两栏布局,带有超大统计数字","幻灯片 7:深色亮点幻灯片 — 演示文稿中最重要的部分")。让他们批准或调整 — 不要只是决定并开始构建。
从 src/slides/ 中删除演示幻灯片并清空 src/deck-config.ts,然后按照下面的编写说明操作。
无论这是新演示文稿还是现有演示文稿,在创建幻灯片文件之前,请与用户确认视觉方向。用户的主色可能在搭建时已配置 — 未经询问不要覆盖它。
在编写任何幻灯片代码之前,向用户展示您的设计计划。 包括:
对于每张幻灯片,思考内容想要表达什么。请参阅 references/slide-design-guide.md 了解设计原则和需要避免的反模式。
src/
├── layouts/ # 幻灯片布局 — 您的"母版主题",可自由创建
├── slides/ # 您的幻灯片放在这里
├── theme.ts # 品牌名称、徽标、字体
├── deck-config.ts # 幻灯片顺序 + 步骤计数
├── App.tsx # 主题提供者
└── globals.css # 主题颜色(CSS 自定义属性)
text-foreground、text-muted-foreground、text-primary、bg-background、bg-card、border-border — 这些映射到主题的 CSS 自定义属性。lucide-react 导入(例如,import { ArrowRight } from "lucide-react")。每张幻灯片都是一个接收 SlideProps 的 React 组件:
// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";
export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
return (
<div className="bg-background text-foreground flex h-full w-full flex-col p-12">
<h2 className="text-4xl font-bold">Your Title</h2>
<div className="flex flex-1 items-center">
<p className="text-muted-foreground text-lg">Your content</p>
</div>
</div>
);
}
在 src/deck-config.ts 中注册它:
import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";
export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];
布局是 src/layouts/ 中的 React 组件,用于包装幻灯片内容。它们控制结构(页眉、页脚、背景、内边距),是传统工具中最接近"母版幻灯片"的概念。更改一次布局,使用它的每张幻灯片都会更新。
每个演示文稿创建 2–4 个布局以实现视觉多样性。
搭建的项目包含 SlideLayoutCentered 作为起点。自由创建新的布局 — 它们只是 React 组件。用户可以自定义内边距、背景、页眉样式,或添加全新的结构模式。
使用 <Animated> 实现点击显示步骤,使用 <AnimatedGroup> 实现交错显示。可用动画:fade、slide-up、slide-down、slide-left、slide-right、scale。
关键规则:deck-config.ts 中的 steps 值必须等于该幻灯片中使用的最高 step 编号。steps: 0 表示没有动画。
完整的动画 API 请参阅 references/animation-api.md。
这些规则确保幻灯片在屏幕和 PDF 导出中看起来完全相同:
filter: blur() 和 backdrop-filter: blur() 会被 Chromium 的 PDF 管道静默丢弃bg-gradient-to-* 和径向渐变渲染不一致 — 改用带有不透明度的纯色(例如,bg-primary/5、bg-muted/20)box-shadow(包括 shadow-sm、shadow-lg、shadow-2xl)无法正确导出到 PDF — 改用边框或背景色调(例如,border border-border、bg-white/5)关于内容密度规则、设计原则和视觉反模式,请参阅 references/slide-design-guide.md。
创建或修改幻灯片后,您可以捕获屏幕截图以视觉验证其是否正确渲染。请参阅 references/visual-verification.md 了解 promptslide to-image 命令和工作流程。
用户可以在浏览器中点击幻灯片元素留下批注 — 附加到特定 DOM 元素的文本反馈。批注存储在项目根目录的 annotations.json 中。
在开始工作前检查批注:
cat annotations.json 2>/dev/null
每个批注包含:
slideIndex — 哪张幻灯片(基于 0,匹配 deck-config.ts 顺序)slideTitle — 人类可读的幻灯片名称target.selector — 幻灯片内元素的 CSS 选择器target.textContent — 目标元素的文本内容target.dataAnnotate — 如果元素具有 data-annotate 属性,则为稳定标识符body — 用户的反馈status — "open" 或 "resolved"处理反馈后,将批注的 status 更新为 "resolved",并可选择添加 resolution 说明解释更改内容。直接编辑 annotations.json。
创建幻灯片时,向关键元素(标题、功能卡片、统计块)添加 data-annotate="descriptive-name",使批注在编辑过程中更稳定:
<h2 data-annotate="main-title" className="text-4xl font-bold">Title</h2>
<div data-annotate="feature-card-1" className="rounded-2xl bg-card p-6">...</div>
所有幻灯片编写完成后,更新 .promptslide-lock.json 中的 deckMeta(标题、描述、3–6 个标签)和 items 下的每张幻灯片 meta 条目(标题、标签、部分)。这些将成为用户运行 promptslide publish 时的预填默认值。首先读取现有的 lockfile 并合并 — 不要覆盖其他字段。
每周安装次数
91
代码仓库
GitHub 星标数
6
首次出现
2026 年 2 月 27 日
安全审计
已安装于
claude-code81
gemini-cli59
github-copilot59
amp59
cline59
codex59
Create slide decks with AI coding agents. Each slide is a React component styled with Tailwind CSS, with built-in animations and PDF export.
Check if a PromptSlide project already exists in the current directory:
grep -q '"promptslide"' package.json 2>/dev/null
Before writing any code, ask the user:
Use the answers to plan slide structure before scaffolding.
Determine the visual direction before writing any code:
The chosen direction determines what you configure in Steps 3–4:
src/globals.css (--primary and other CSS variables)<link> in index.html + fonts in src/theme.tssrc/layouts/ (see Layouts below)Presets are starting points, not rigid templates. The user can change everything — it's all just React components and CSS variables.
bun create slides my-deck -- --yes
cd my-deck
bun install
bun run dev
The --yes flag skips interactive prompts and uses sensible defaults. Replace my-deck with the user's desired name. The dev server starts at http://localhost:5173 with hot module replacement.
Edit src/theme.ts for brand name and logo, and src/globals.css for theme colors. See references/theming-and-branding.md for details.
Before writing any slide code, commit to a clear aesthetic direction and plan the deck holistically. Generic, template-looking slides are worse than no slides at all.
Choose a distinct visual personality — editorial, brutalist, luxury-minimal, bold geometric, warm organic — and execute it with precision throughout the deck. The key is intentionality, not intensity. A restrained minimal deck executed with perfect spacing and typography is just as strong as a bold maximalist one. What kills a deck is indecision: a little of everything, committing to nothing.
Don't default to the first layout that comes to mind. Consider 2–3 options for each slide and pick the one that best serves the message.
Share your design plan with the user before coding. Briefly describe the visual direction, color strategy, and your layout approach for each slide (e.g., "slide 3: asymmetric two-column with oversized stat", "slide 7: dark hero slide — the most important in the deck"). Let them approve or adjust — don't just decide and start building.
Remove the demo slides from src/slides/ and clear src/deck-config.ts, then follow the authoring instructions below.
Whether this is a new deck or an existing one, confirm the visual direction with the user before creating slide files. The user's primary color may already be configured from scaffolding — don't overwrite it without asking.
Present your design plan to the user before writing any slide code. Include:
For each slide, think about what the content wants to be. See references/slide-design-guide.md for design principles and anti-patterns to avoid.
src/
├── layouts/ # Slide layouts — your "master themes", create freely
├── slides/ # Your slides go here
├── theme.ts # Brand name, logo, fonts
├── deck-config.ts # Slide order + step counts
├── App.tsx # Theme provider
└── globals.css # Theme colors (CSS custom properties)
text-foreground, text-muted-foreground, text-primary, bg-background, bg-card, border-border — these map to the theme's CSS custom properties.lucide-react (e.g., import { ArrowRight } from "lucide-react").Every slide is a React component that receives SlideProps:
// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";
export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
return (
<div className="bg-background text-foreground flex h-full w-full flex-col p-12">
<h2 className="text-4xl font-bold">Your Title</h2>
<div className="flex flex-1 items-center">
<p className="text-muted-foreground text-lg">Your content</p>
</div>
</div>
);
}
Register it in src/deck-config.ts:
import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";
export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];
Layouts are React components in src/layouts/ that wrap slide content. They control structure (headers, footers, backgrounds, padding) and are the closest thing to "master slides" in traditional tools. Change a layout once, every slide using it updates.
Create 2–4 layouts per deck for visual variety.
The scaffolded project includes SlideLayoutCentered as a starter. Create new ones freely — they're just React components. Users can customize padding, backgrounds, header styles, or add entirely new structural patterns.
Use <Animated> for click-to-reveal steps and <AnimatedGroup> for staggered reveals. Available animations: fade, slide-up, slide-down, slide-left, slide-right, scale.
Critical rule : The steps value in deck-config.ts MUST equal the highest step number used in that slide. steps: 0 means no animations.
For the full animation API, see references/animation-api.md.
These rules ensure slides look identical on screen and in PDF export:
filter: blur() and backdrop-filter: blur() are silently dropped by Chromium's PDF pipelinebg-gradient-to-* and radial gradients render inconsistently — use solid colors with opacity instead (e.g., bg-primary/5, bg-muted/20)box-shadow (including shadow-sm, shadow-lg, shadow-2xl) does not export correctly to PDF — use borders or background tints instead (e.g., border border-border, )For content density rules, design principles, and visual anti-patterns, see references/slide-design-guide.md.
After creating or modifying a slide, you can capture a screenshot to visually verify it renders correctly. See references/visual-verification.md for the promptslide to-image command and workflow.
Users can click on slide elements in the browser to leave annotations — text feedback attached to specific DOM elements. Annotations are stored in annotations.json at the project root.
Check for annotations before starting work:
cat annotations.json 2>/dev/null
Each annotation has:
slideIndex — which slide (0-based, matching deck-config.ts order)slideTitle — human-readable slide nametarget.selector — CSS selector to the element within the slidetarget.textContent — text content of the target elementtarget.dataAnnotate — stable identifier if the element has a data-annotate attributebody — the user's feedbackstatus — "open" or After addressing feedback, update the annotation's status to "resolved" and optionally add a resolution note explaining what was changed. Edit annotations.json directly.
When creating slides, add data-annotate="descriptive-name" to key elements (headings, feature cards, stat blocks) to make annotations more stable across edits:
<h2 data-annotate="main-title" className="text-4xl font-bold">Title</h2>
<div data-annotate="feature-card-1" className="rounded-2xl bg-card p-6">...</div>
After all slides are authored, update .promptslide-lock.json with deckMeta (title, description, 3–6 tags) and per-slide meta entries (title, tags, section) under items. These become pre-filled defaults when the user runs promptslide publish. Read the existing lockfile first and merge — don't overwrite other fields.
Weekly Installs
91
Repository
GitHub Stars
6
First Seen
Feb 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code81
gemini-cli59
github-copilot59
amp59
cline59
codex59
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
120,000 周安装
yfinance MCP 服务器 - 获取 Yahoo Finance 实时和历史金融数据 | 股票价格、期权、财报、新闻
71 周安装
Salesforce B2C Business Manager 扩展开发指南:自定义管理界面菜单、表单与对话框
71 周安装
Godot 4 性能优化指南:多线程、对象池、渲染批处理与物理查询优化
71 周安装
构建代理:编译打包、构建系统优化与CI/CD配置专家
72 周安装
PowerShell安全加固指南:Windows脚本安全配置、JEA与约束语言模式实施
72 周安装
搜索专家代理:系统性信息检索与高级搜索策略,提升研究效率与质量
72 周安装
bg-white/5"resolved"