Frontend Slides: a zero-dependency HTML slide skill that lets non-designers pick their taste from three real previews
Our takeTwelve safe presets, 34 bold templates, and one NON-NEGOTIABLE rule that every preview must look like the real first page: style selection is moved from describing to looking, which is a product decision for non-designers rather than template hoarding. Two more ideas worth copying into any generative-UI pipeline: a fixed 1920x1080 stage in exchange for layout determinism, and acceptance by rendered screenshot checking both overflow and panel overlap, since scrollHeight alone cannot catch z-axis covering. We did not install it and produce a deck, so it is graded as pending reproduction.
zarazhangrui/frontend-slides is a coding-agent skill, MIT, primary language JavaScript, 29,716 stars / 2,326 forks, described in one line as making beautiful slides on the web with a coding agent's frontend abilities. Its design premise is the first Philosophy item in the README: you do not need to be a designer to make something good-looking, you only need to react to what you see. That sentence determines the whole architecture. Most PPT prompt collections ask you to describe a style first (minimal, techy, business); SKILL.md explicitly rejects that route - Phase 2 is called Style Discovery, states that most people cannot describe their design preferences in words, and makes the default experience visual comparison: generate three single-page HTML previews, open them automatically, and let the user pick, with an explicit instruction not to ask whether they want options or a preset selector. The three-slot ratio is a hard rule: one safe preset (from the 12 curated entries in STYLE_PRESETS.md, grouped by temperament - dark Bold Signal / Electric Studio / Creative Voltage / Dark Botanical, light Notebook Tabs / Pastel Geometry / Split Pastel / Vintage Editorial, specialised Neon Cyber / Terminal Green / Swiss Modern / Paper & Ink), at least one bold template (34 design systems in bold-template-pack, from the author's other repo beautiful-html-templates, each with three real screenshots), and one wildcard (a second bold template or an agent-designed custom look, used when the brief holds an opportunity sharper than any template). The artefact is a zero-dependency single HTML file with all CSS and JS inlined - no npm, no build tool, no framework - justified plainly: dependencies are liabilities, an HTML file still opens in ten years, a 2019 React project does not. Progressive disclosure is token engineering: the agent first reads only selection-index.json with its mood / tone / best_for / avoid_for / formality / density / scheme fields, then the preview.md cards of the shortlist, and reads a full design.md only for the single template the user finally picks, with an explicit do-not-copy-template.html rule. One rule is marked NON-NEGOTIABLE: every style preview must look like the real first page of the user's deck rather than a diagnostic card - no preview, template, preset, Option A-B-C, filename or path may be rendered on the slide, and requirement notes such as 'sharp and provocative' must not become content. Core principle 5 is NON-NEGOTIABLE too: a fixed 1920x1080 canvas scaled uniformly, 16:9 even on phones, letterboxing allowed and re-layout forbidden; each supporting constraint maps to a real bug (inline the whole of viewport-base.css, show and hide pages only with the visibility / opacity / pointer-events based.active /.visible classes and never display:none, use clamp outside the stage only, never negate a CSS function directly but write calc(-1 * clamp(...)), and support prefers-reduced-motion). The anti-AI-slop section addresses the agent in the second person and names the convergence tendencies to avoid - Inter / Roboto / Arial, purple gradients on white, predictable layouts - with the sharpest line being that you will still converge on common choices across generations (Space Grotesk for example), so avoid it. The acceptance bar is professional: verify overflow and panel overlap in a rendered browser screenshot, because checking scrollHeight alone is not enough since grid panels can visually cover each other. Six phases cover three modes (new build, PPTX conversion via extract-pptx.py, enhancing existing HTML) and two density settings, the artefact carries inline editing (press E, save with Ctrl+S), and Phase 6 documents the operational pitfalls of deploy.sh (Vercel) and export-pdf.sh (Playwright, where –compact renders at 1280x720 and usually cuts 50-70%). We did not install the plugin or produce a real deck, so it is graded as pending reproduction.
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides 然后 /plugin install frontend-slides@frontend-slides