humantonylee Tightened Slide
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.
Operating Assumptions
- This is a Tightened Slide only system.
- The output is a static HTML deck, normally
index.html, with an adjacentimages/folder. - The template is
assets/template.html. - Body slides must use registered
S01toS22layouts. - The validator is required before delivery.
- Supported language modes are English and Korean.
Step 1: Clarify Only What Matters
If the user provides a complete outline and assets, proceed. If key inputs are missing, ask at most three questions:
- Audience and presentation setting.
- Target duration or page count.
- Source material, language mode, required images/data, and hard constraints.
If the theme is unspecified, default to International Klein Blue from references/themes.md.
If the language mode is unspecified, default to English.
Step 2: Prepare The Deck
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.
Step 3: Preflight
Before writing slide markup:
- Read the template
<style>block. - Read
references/layout-lock.md. - Read the relevant skeletons in
references/layouts.md. - Confirm every class you plan to use exists in the template.
- Do not invent global classes. Use inline styles only for page-specific tuning.
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.
Step 4: Pick Layouts
Use the registered layout set:
S01Index CoverS02Vertical Timeline + KPIS03Split StatementS04Six CellsS05Three LayersS06KPI TowerS07Horizontal BarS08Duo CompareS09Dot Matrix StatementS10Split ClosingS11Horizontal TimelineS12Manifesto + Ink BannerS13Three ForcesS14Loop FormS15Matrix + Hero StatS16Multi-card BriefS17System DiagramS18Why NowS19Four CardsS20Stacked KPI LedgerS21Tech Spec SheetS22Image Hero
Use 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.
Step 5: Apply The Visual System
Hard rules:
- One accent color per deck.
- No gradients, shadows, rounded cards, glass, neon, 3D, or decorative borders.
- Large type uses light weights:
200or300. - Body text uses restrained weights and clear hierarchy.
- Large sizes use
font-size:min(Xvw,Yvh)withY >= X * 1.6. - Headings sit on the left/top content axis unless using registered statement/split layouts.
- Kicker text sits above the title, not beside it.
.canvas-cardalready has horizontal padding; do not add another5vwpadding layer inside it.- Keep all captions, labels, and footnotes above the bottom navigation safe area.
- SVG may draw geometry only; visible labels must be HTML.
Language rules:
- English mode uses concise sentence case titles and direct body copy.
- Korean mode uses short Korean titles, compact body lines, and consistent product terms.
- Diagram labels and generated-image text must match the chosen language mode.
Step 6: Image Flow
If images are needed:
- Ask before generating new images.
- Choose the layout slot before writing the prompt.
- Use
references/image-prompts.md. - Save generated or provided images in
images/. - Name images
{page}-{semantic-name}.{ext}. - Add
data-image-slotto every local image.
Slot defaults:
S22:s22-hero-21x9S15:s15-grid-21x9ors15-grid-16x10S16:s16-brief-21x9ors16-brief-16x10
Step 7: Validate
Run:
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:
- title alignment
- type weight
- spacing between title and body
- image crop and image slot fit
- captions and footnotes above navigation
- ESC index visibility
Bstatic mode
Use references/checklist.md as the delivery checklist.