Skip to content

seacen/deckify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

deckify

URL to HTML slide design system that genuinely enables AI‑native slides for real work environments

Train deckify on your brand once. Every deck after that is just a prompt.

English · 中文


What deckify does

You give deckify any brand's website. A few minutes later you have two things that compound:

  1. A complete Design System — the brand's colors, fonts, logo, voice, plus the engineering rules every slide should follow. Saved as one .md file. Hand it to any AI agent, anywhere, anytime.
  2. A 9-slide demo deck — already in that brand's visual language. Living HTML, opens in any browser. Proves the spec works.

The first one is the asset that compounds. Every future deck gets generated from it — by AI, in HTML, in seconds. No design skills required. No PowerPoint required. No template to fight with.

You:    use deckify on https://www.tiffany.com
deckify: ... reads tiffany.com like a designer would
         ... extracts colors, fonts, logo, mood
         ... writes a Design System
         ... builds a 9-slide deck in Tiffany's visual language
         ... checks its own work, fixes anything off
         ✓ Done. Open ~/deckify/decks/tiffany/tiffany-deck.html

What makes deckify different

1. It learns your brand by looking, not by prompting

deckify visits the brand website like a designer would — clicks through the home page, the about page, the press kit; spots the real logo (not a generic placeholder); reads the real colors and fonts; senses the mood. Most "AI design tools" generate from a prompt; deckify learns from evidence.

2. It produces a reusable Design System, not a one-off deck

The output is a brand asset, not a single output. Every future deck — for the same brand — is generated by AI from this one Design System file. Update the file once, and every downstream deck moves with it. Slides stop being one-off creations and start being derived from a brand spec.

3. It checks its own work — then fixes itself

After deckify produces the slides, it doesn't just say "done". It runs 11 automatic checks ("Are the dimensions right?" "Is the logo actually visible?" "Will it look OK on a phone?") and then judges its own output against 6 visual standards ("Does it feel on-brand?" "Is the typography balanced?" "Does the content read well?"). If something scores low, it rewrites the part that's wrong and runs the checks again. The deck you see is what deckify believed was good enough to ship.

4. It knows what should never change

Designing slides has rules: logo must show on every slide; text below 12 px is unreadable; mobile must collapse to a single column. Most AI slide generators re-learn these the hard way each time. deckify bakes 40+ of these rules into its core; only the brand-specific stuff (colors, fonts, mood) varies per brand. Every deck looks like that brand but also works as engineering — on desktop, on mobile, on a projector, on a print.


See it in action

Eight reference brands, every one passing both machine checks and visual review. Open the HTML files in your browser to flip through:

Tiffany & Co. (中文)

Editorial luxury, Didone serif, restrained Tiffany Blue. Open the deck → · DS markdown

Cover Content
Tiffany cover Tiffany content

Stripe

Engineered clarity, Söhne-style sans, bold purple gradient. Open the deck → · DS markdown

Cover Content
Stripe cover Stripe content

Unilever

Friendly humanist, sustainability voice, custom font. Open the deck → · DS markdown

Cover Content
Unilever cover Unilever content

P&G

Corporate blue, gradient logo badge, generous chrome. Open the deck → · DS markdown

Cover Content
P&G cover P&G content

Coca-Cola

Editorial heritage, Georgia serif, deep red. Open the deck → · DS markdown

Cover Content
Coca-Cola cover Coca-Cola content

Mars

Confident corporate, multi-division palette, structured grid. Open the deck → · DS markdown

Cover Content
Mars cover Mars content

L'Oréal

French fashion editorial, high-contrast serif, fashion-magazine moments. Open the deck → · DS markdown

Cover Content
L'Oréal cover L'Oréal content

Xiaomi (中文)

Tech-confident, restrained orange accent, dense product-page rhythm. Open the deck → · DS markdown

Cover Content
Xiaomi cover Xiaomi content

Install

deckify ships as a standard agent skill (skills/deckify/SKILL.md). The fastest way to install it is the open skills CLI — one command, works across Claude Code, Codex, Cursor, OpenCode, and 70+ other agents. It auto-detects which agents you have installed and drops deckify into each of their skill directories.

npx skills add seacen/deckify

That's it. Restart your agent and invoke it with "use deckify on https://example.com".

Other ways to install

Claude Code plugin — deckify is also a Claude Code plugin (it ships a .claude-plugin/marketplace.json):

claude plugin marketplace add https://github.com/seacen/deckify
claude plugin install deckify

Manual — clone the repo and point your host at skills/deckify/:

git clone https://github.com/seacen/deckify.git
# Then either symlink ./deckify/skills/deckify into your host's skills
# directory, or read skills/deckify/SKILL.md as a context attachment.
# SKILL.md is self-describing — any agent that reads it knows how to drive it.

One dependency: agent-browser

deckify reads brand sites the way a designer would — rendered DOM, computed styles, screenshots — which curl can't do. It uses the standalone agent-browser CLI for that. After installing the skill, verify it's present:

python3 <install-path>/skills/deckify/scripts/setup.py

If agent-browser is missing, the script prints the right install command for your platform (npm / brew / cargo). Your agent can run it for you.


How a run looks

You:      use deckify on https://www.your-brand.com

deckify:  (Phase 1) reads the home + 5–8 subpages, takes screenshots,
                    extracts colors / fonts / logo
          (Phase 2) asks you 1–2 short questions where it's genuinely
                    uncertain (language, ambiguous logo, etc)
          (Phase 3) writes ~/deckify/decks/<brand>/<brand>-PPT-Design-System.md
          (Phase 4) builds ~/deckify/decks/<brand>/<brand>-deck.html
          (Phase 5) runs 11 hard checks + scores its own visual quality
          (Phase 6) hands you both files + a one-page summary

Total time: 5–10 minutes for most brands, longer for sites that block bots.

The output goes to ~/deckify/decks/<brand>/. Always — independent of where you ran the command from.


Where things live on your machine

~/deckify/                          ← all your generated brand outputs
└── decks/
    └── <brand>/
        ├── <brand>-PPT-Design-System.md   ← the deliverable
        ├── <brand>-deck.html              ← demo deck, opens in browser
        └── source/                        ← logo, brand profile, picked pages

Reports from each run (screenshots, pass/fail logs) go to ~/deckify/reports/runs/<timestamp>/.


What's in this repo

Folder What it is
skills/deckify/ The skill itself — what gets installed onto your machine
decks/ 8 reference brand outputs, kept as study material
tools/phase-a/ Maintainer-only — used to keep the skill in good shape
TESTING.md The two-layer testing model (skill quality vs single-deck quality)

License

PolyForm Noncommercial 1.0.0 — free for personal, educational, research, charitable, and noncommercial use. Commercial use requires a separate license. Attribution is required: keep the LICENSE file when redistributing or building on top of deckify.

If you're unsure whether your use is "noncommercial," reach out via a GitHub issue.


Credits

Built by Xichang (Seacen) Zhaogithub.com/seacen. Engineering DNA distilled from many failed slides. Every line of references/ds-template.md came from a real production bug.

Special thanks to my twin brother, @park0er — the one who pulled me into AI. On a quiet afternoon at his place, just before Chinese New Year, he showed me what OpenClaw was doing — the first time I felt the pull of this whole AI thing. Some weeks later, he casually shared a slide an AI had built in pure HTML — and I realised AI could actually make slides beautiful. Without those two offhand moments, there'd be no deckify.


One more thing — a note for the AI era

Look at what just happened. You didn't open PowerPoint. You didn't move a single text box. You didn't fight a template. PPT was built for humans to draw with their hands — every box, every gradient, every line spacing, hand-placed. That made sense for fifty years.

The job has changed. Slides are no longer drawn — they're imagined and described. The author has shifted from human to AI, and AI's native medium isn't .pptx binary — it's HTML. Living markup, animatable, queryable, transformable, copy-paste-able into any conversation. Where PPT slows AI down, HTML lets it run.

deckify exists because of that shift. It's not a "better way to make slides" — it's the asset that lets AI make slides at all, in the medium AI was born to write in. Build the brand's spec once; let every deck after that be AI's job.

Welcome to the deck for the AI era.

— deckify

About

URL to HTML slide design system that genuinely enables AI‑native slides for real work environments

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors