Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.
3 to 30 minutes — you ship a product launch animation, a clickable App prototype, an editable PPT deck, or a print-grade infographic.
Not "decent for AI" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it accurately reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you totally out of AI slop territory.
Recommended global install for Codex, Antigravity, Claude Code, Cursor, and the shared Agent Skills location:
npx github:DinhLucent/Slide_ProMax -- --global --agents codex,antigravity,claude-code,cursor,commonProject/workspace install:
npx github:DinhLucent/Slide_ProMax -- --project --agents codex,antigravity,claude-code,cursor,commonInstall from a local clone:
npm run install:agents -- --global --agents allWhy not rely only on npx skills add? Some versions install only into .agents/skills, which misses native user/project folders used by several agents. Slide ProMax ships its own installer and writes to both the shared Agent Skills location and platform-native locations.
See references/install-targets.md for the target mapping and source notes.
Default global targets:
| Agent | Install targets |
|---|---|
| Shared Agent Skills | ~/.agents/skills/slide-promax |
| Codex | ~/.agents/skills/slide-promax + compatibility mirror ~/.codex/skills/slide-promax |
| Claude Code | ~/.claude/skills/slide-promax |
| Cursor | ~/.cursor/skills/slide-promax |
| Antigravity | ~/.gemini/antigravity/skills/slide-promax + compatibility mirror ~/.antigravity/skills/slide-promax |
Default project targets:
| Agent | Install targets |
|---|---|
| Shared Agent Skills / Codex | .agents/skills/slide-promax |
| Claude Code | .claude/skills/slide-promax |
| Cursor | .cursor/skills/slide-promax |
| Antigravity | .agents/skills/slide-promax + legacy .agent/skills/slide-promax + compatibility mirror .antigravity/skills/slide-promax |
Useful installer flags:
node scripts/install.mjs --dry-run --global --project --agents all
node scripts/install.mjs --global --agents claude-code,cursor --no-compat
node scripts/install.mjs --project --agents antigravity --forceThen just talk to your agent:
"Make a keynote for AI psychology. Give me 3 style directions to pick from."
"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
"Turn this logic into a 60-second animation. Export MP4 and GIF."
"Run a 5-dimension expert review on this design."
No buttons, no panels, no Figma plugins. Agent-agnostic — drops into any markdown-skill-capable agent environment.
| Capability | Deliverable | Typical time |
|---|---|---|
| Interactive prototype (App / Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | ~10–15 min |
| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | ~15–25 min |
| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | ~8–12 min |
| Design variations | 3+ side-by-side comps · Tweaks live params · cross-dimension exploration | ~10 min |
| Infographic / data viz | Print-quality typography · exports to vector PDF/PNG/SVG | ~10 min |
| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | ~5 min |
| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins · actionable punch list | ~3 min |
The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia/Met/Unsplash · Playwright click tests before delivery.
Stage + Sprite time-slice model · useTime / useSprite / interpolate / Easing — four APIs cover every animation need · one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
HTML decks for browser presentation · html2pptx.js reads DOM computed styles and translates each element into real PowerPoint objects · exports are actual text frames, not image-bed fakes.
Colors / typography / information density parameterized · side panel toggle · pure-frontend + localStorage persistence · survives reload.
Magazine-grade typography · precise CSS Grid columns · text-wrap: pretty typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.
Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.
No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.
Mandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write brand-spec.md covering logo, product shots, UI screenshots, colors, fonts.
The hardest rule in the skill. When the task touches a specific brand, five steps are strictly enforced:
| Step | Action | Purpose |
|---|---|---|
| 1 · Ask | Checklist of 6 asset types: logo, product shots, UI, color palette, fonts. | Respect existing resources |
| 2 · Search | Target official channels: <brand>.com/press · brand.<brand>.com |
Find authoritative assets |
| 3 · Download | Logo (SVG / HTML tracing) · Product shots · UI app store extraction | Execute three rigorous fallback paths per asset type |
| 4 · Verify + Extract | Check fidelity & resolution · grep hex codes from reality | Never guess from memory |
| 5 · Spec Lock | Write brand-spec.md cementing all paths and CSS variables |
Un-frozen knowledge evaporates |
A/B-tested logic reveals this mechanism reduces AI hallucination variance by 5×.
Triggered when the brief is too vague to execute:
- Doesn't run on generic intuition — enters a Fallback mode.
- Recommends 3 differentiated directions from 5 schools × 20 philosophies.
- Each variation comes with flagship works, gestalt keywords, and aesthetic tones.
- Generates 3 visual demos side-by-side, waits for user selection before locking main flow.
The default working mode across every task:
- Sends the full question set in one batch, wait for all answers before moving.
- Embeds assumptions + placeholders + reasoning comments directly into the HTML tree.
- Demonstrates explicitly to the user early (even if just rendering flat gray blocks).
- Fills real content → iterates variations → toggles Tweaks sequentially.
When the task mentions a specific product / technology / event (e.g., "DJI Pocket 4"), the first action must be WebSearch to confirm existence, release status, and specifications. No claims are ever generated solely from LLM training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.
Rigorous avoidance of the visual common denominator of AI output (purple gradients / emoji bullet points / standard rounded corners + left border accents / drawn SVGs / Inter as a display font / CSS silhouettes standing in for real product shots). The engine heavily enforces text-wrap: pretty, CSS Grid logic, carefully chosen serif display faces, and Oklch color matching.
Traditional browser graphic tools (like Figma or web-based AI design canvases) excel at GUI interaction. However, Slide ProMax is architected aggressively differently. Great hi-fi design doesn't start from a blank page; it grows from existing design context.
| Feature | Browser-Based AI Tools | Slide ProMax |
|---|---|---|
| Form Factor | Web product (used in browser) | Pure Skill (Execution runs in terminal/code editor) |
| Deliverables | Flat Canvas designs / Screenshots | Functional HTML / MP4 / GIF / editable PPTX / PDF |
| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
| Complex Animation | Extremely Limited | Stage + Sprite timeline · Native 60fps export tooling |
While GUI tools act as an improved interface, Slide ProMax makes the graphics-tool layer disappear altogether.
- No layer-editable PPTX-to-Figma round-trip. The output is native HTML — screenshottable, recordable, image-exportable. While PPT formats are exported, you cannot drag the resulting PPT strictly into Keynote/Figma with intact perfect web coordinates.
- Physics and particle math out of scope. 3D simulations, real-world physics collision, and intensive particle structures exceed the boundaries of this specific design engine.
- Brand-from-zero logic drops baseline quality. Requesting hi-fi architecture derived completely without existing product references forces the model to invent aesthetics blindly, typically yielding baseline 60–65 point frameworks. Constructing off zero assets is purely a last-resort function.
This is fundamentally a rigid 80-point systems skill, not a generalized 100-point product. For users unbothered by GUI navigation, this system acts decisively to save vast amounts of raw UI alignment time natively from your prompt.
Slide_ProMax/
├── SKILL.md # Main protocol (Agent instruction boundary)
├── README.md # English README operations (this file)
├── assets/ # Starter Component Frameworks
│ ├── animations.jsx # Stage + Sprite + Easing logic
│ ├── ios_frame.jsx # iPhone 15 Pro native bezel
│ ├── deck_stage.js # HTML deck compilation engine
│ ├── design_canvas.jsx # Side-by-side variation displays
│ └── showcases/ # 24 prebuilt system bounds
├── references/ # System memory encyclopedias
│ ├── animation-pitfalls.md# Hard animation bounds
│ ├── design-styles.md # 20 design philosophy constraints
│ ├── slide-decks.md # PPTX translation syntax
│ └── ...
├── scripts/ # Export and compilation toolchain
│ ├── render-video.js # HTML → MP4 processing
│ ├── convert-formats.sh # MP4 → 60fps + GIF processing
│ ├── export_deck_pptx.mjs # Local PPT execution bridge
│ └── verify.py # Local DOM bound verifications
└── demos/ # Media bounds supporting document layouts