菜单
Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | tightened-slide |
| description | Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation. |
Use this workflow when a user asks for a Tightened Slide deck, horizontal swipe presentation, HTML slide deck, launch deck, analysis deck, framework deck, product deck, or data-driven talk.
index.html, with an adjacent images/ folder.assets/template.html.S01 to S22 layouts.If the user provides a complete outline and assets, proceed. If key inputs are missing, ask at most three questions:
If the theme is unspecified, default to International Klein Blue from references/themes.md.
If the language mode is unspecified, default to English.
Create the target folder and image folder:
mkdir -p path/to/deck/images
cp assets/template.html path/to/deck/index.html
Immediately replace the <title> placeholder in index.html.
Set the language mode on the root element:
<html lang="en" data-language="en">
or:
<html lang="ko" data-language="ko">
Korean mode uses the template font stack SUIT, Pretendard, Noto Sans KR, and Noto Sans before falling back to Inter and system sans fonts.
If the deck must work offline with local animation fallback, keep assets/motion.min.js reachable from the copied HTML path or accept the CDN fallback built into the template.
Before writing slide markup:
<style> block.references/layout-lock.md.references/layouts.md.Create a planning table before coding:
page -> data-layout -> reason -> image slot
For 7-8 page decks, use at least six different Sxx layouts. For 10+ page decks, use at least eight.
Use the registered layout set:
S01 Index CoverS02 Vertical Timeline + KPIS03 Split StatementS04 Six CellsS05 Three LayersS06 KPI TowerS07 Horizontal BarS08 Duo CompareS09 Dot Matrix StatementS10 Split ClosingS11 Horizontal TimelineS12 Manifesto + Ink BannerS13 Three ForcesS14 Loop FormS15 Matrix + Hero StatS16 Multi-card BriefS17 System DiagramS18 Why NowS19 Four CardsS20 Stacked KPI LedgerS21 Tech Spec SheetS22 Image HeroUse S08 + Tightened Map Component for maps, routes, city relationships, location networks, or historical movement pages.
Use S22 for one large image. Use S15 or S16 adaptations for multiple images. Do not create unregistered image split or evidence wall layouts.
Hard rules:
200 or 300.font-size:min(Xvw,Yvh) with Y >= X * 1.6..canvas-card already has horizontal padding; do not add another 5vw padding layer inside it.Language rules:
If images are needed:
references/image-prompts.md.images/.{page}-{semantic-name}.{ext}.data-image-slot to every local image.Slot defaults:
S22: s22-hero-21x9S15: s15-grid-21x9 or s15-grid-16x10S16: s16-brief-21x9 or s16-brief-16x10Run:
node scripts/validate-deck.mjs path/to/index.html
Fix every error. Warnings require visual review.
Then open the deck in a browser and inspect:
B static modeUse references/checklist.md as the delivery checklist.
End-to-end GPT image slide workflow. Trigger when the user wants to create a slide deck as generated images from a reference slide, source files, and a deck prompt. Runs design, plan, prompt, and render stages in order.
End-to-end HTML slide workflow. Trigger when the user wants a slide deck as editable HTML/CSS/JS from a reference design, source files, and a deck prompt. Runs design, plan, prompt, and render stages in order.
Shared slide-style extraction skill for GPT-image and HTML slide workflows. Converts one or more reference visuals into a reusable DESIGN.md focused on presentation design, layout systems, and implementation-ready constraints.
Persuasive GPT image deck-planning skill. Uses extracted DESIGN.md, user files, and the user's goal to decide slide ordering, page count, evidence placement, and narrative flow in JSON.
Page-level GPT image slide prompting skill. Converts DESIGN.md and slide_plan.json into detailed slide-generation prompts in JSON while preserving theme, body-slide consistency, and layout discipline.
Render slide images sequentially from DESIGN.md and slide prompt JSON using Codex native image generation, saving each output into the workspace with page-number filenames.