DOCSEARCHbyAlgolia
Submit Docs

Frontend Slides

repository·main·Indexed 12 days ago

https://github.com/zarazhangrui/frontend-slides

A coding-agent skill for creating high-quality, single-file HTML presentations from text prompts or PowerPoint (.pptx) files. It features a visual style discovery process with a 'Preview Mix' strategy, utilizing a library of curated themes and the Bold Template Pack containing 34 design systems. The tool ensures a fixed 1920×1080 stage scaled to the viewport and is compatible with Claude Code, Codex, Kimi Code, OpenCode, and Gemini CLI.

Tokens
270.8K
Snippets
234
Records
854
Agent score
98%

What's inside Frontend Slides

  1. Overview of the Raw Grid template

    main

    The raw-grid template is a neo-brutalist presentation system characterized by a high-density, graphic, and energetic aesthetic. It uses 3px solid black borders as the primary layout mechanism, with no gaps between cells, no rounded corners, and no gradients.

    Best for: Founder pitches, accelerator demos, brand decks, indie launches, and creator portfolios. It is particularly strong for stat slides, comparison tables, and process flows where a 'scrappy-confident' or 'direct' tone is desired.

    Avoid for: Contexts requiring a soft, warm, or quiet atmosphere, as the brutalist borders and hard shadows create a loud, high-contrast visual voice.

  2. Overview of the Editorial Tri-Tone template

    main

    The editorial-tri-tone template is a high-contrast, three-color presentation system designed to mimic the aesthetic of an independent arts or fashion magazine. It uses a strict palette of blush pink, golden butter, and deep burgundy wine.

    Best for:

    • Editorial pitches, fashion brand decks, lifestyle media, and art direction reviews.
    • Tech, research, or business decks that want to move away from standard neutrals toward a stylish, intentional tri-tone look.

    Avoid for:

    • Decks requiring a soft, comforting, or low-contrast feel, as the burgundy/pink/cream combination is intentionally high-contrast.

  3. Overview of the Cobalt Grid template

    main
    The cobalt-grid template is a high-formality, medium-density editorial system designed for design-research bulletins, art publications, and curated trend reports. It follows a "two-color risograph monograph" aesthetic, utilizing a warm cream paper canvas and electric cobalt ink. It is best suited for serious, studious, or academic decks (e.g., studio annuals, agency capability decks) and should be avoided for decks requiring warmth, multi-color energy, or a playful tone.

  4. Overview of the Blue Professional Design System

    main

    Blue Professional is a consulting-grade presentation system designed for executive briefings and research deliverables. It follows a philosophy of restraint with one strong commitment: a warm cream canvas and a single saturated cobalt accent.

    Visual Identity

    • Canvas: Warm cream ({colors.bg} — #fdfae7). Never use pure white or gray.
    • Accent: Single saturated cobalt ({colors.primary} — #1e2bfa). This is used for all emphasis, metrics, CTAs, eyebrows, and chart fills. There are no secondary brand colors.
    • Typography:
      • Space Grotesk (Display/Chrome): Used for h1-h3, metrics, eyebrow labels (uppercase, 0.08em tracking), tag pills, CTAs, and counters.
      • Inter (Body): Used for paragraphs, lists, and table content.
    • Depth: Uses soft, tinted elevations. Cards use a 4% cobalt tint ({colors.card-bg}) with a 1.5px translucent cobalt border ({colors.border}). No drop shadows are used except for a subtle cobalt-tinted shadow on CTA hover states.
    • Density: Designed for data-dense layouts (dashboards, grids, rankings) while maintaining a rhythmic structure of slide-header, h2 headline, and content region.

  5. Overview of the Editorial Forest template

    main
    The editorial-forest template is a serif-led editorial presentation system designed to mimic the aesthetic of a literary quarterly, an art-book monograph, or a quiet annual report. It is best suited for quarterly reviews, internal readouts, studio updates, and creative-agency presentations where a warm, intentional, and unhurried tone is required. It should be avoided for contexts requiring urgency, punchiness, or a sales-driven feel.

  6. Design System Overview: Capsule Template

    main

    The Capsule design system is a playful, editorial-style aesthetic characterized by pill-shaped containers, a sun-bleached cream canvas, and a nine-color candy palette. It uses a 'Memphis-meets-editorial' style, pairing Bodoni Moda serif headlines with Space Grotesk body text.

    Key visual elements include:

    • Pill Containers: Text containers use a 9999px border-radius with a 2px ink stroke and a soft 6–12px offset shadow.
    • Color Palette: A base of cream (#F5F5F0) and ink (#1A1A1A) accented by various candy colors (coral, lime, lavender, etc.).
    • Atmosphere: Uses a subtle grain-overlay (4% opacity fractal noise) and radial-glow (soft color washes) to provide texture and warmth.

  7. Studio Design System Overview

    main

    Studio is a "type-as-graphic-mass" presentation system designed with a severe, reductive agency aesthetic (inspired by Pentagram, Anti, and Order).

    Core Design Principles:

    • Typography as Shape: Uses Barlow at weight 900, uppercase, at massive scales so that type functions as a graphic element rather than just text.
    • Binary Palette: The system uses a "binary plus one" color approach. The only two states are:
      1. Dark Mode: {colors.near-black} (#1C1C1C) background with {colors.acid-yellow} (#F5D200) type.
      2. Light Mode: {colors.acid-yellow} (#F5D200) background with {colors.near-black} (#1C1C1C) type.
    • Flat Aesthetic: No drop shadows, no rounded corners, and no gradients. Design is driven by heavy type and hairline/2px rules.
    • Density: Low and deliberate. The system favors single, massive statements over dense body text.

  8. Mat Design System Overview

    main

    Mat is a material-tactile presentation system designed for a high-end, industrial-design aesthetic. It uses a deep forest-green environment (#232E26) warmed by a wood-brown radial glow (#7A4E24) in the bottom-right corner of dark slides.

    Core Design Principles:

    • Atmospheric Depth: Uses a radial glow instead of drop shadows or rounded corners. Depth is achieved through light and color, not stacking.
    • Typography: A three-voice stack using Bricolage Grotesque (display/headlines, always mixed case), DM Sans (body/lead), and DM Mono (labels/metadata, uppercase).
    • Color Usage: A narrow palette where warm orange (#C07030) acts as a single, minimal accent for small inline marks (kickers, bullet em-dashes, or single chart highlights). It is never used for backgrounds or large headlines.
    • Density: Follows a medium-sparse philosophy. The system requires generous negative space to maintain its elegant, breathable feel.

  9. Design System Overview: Pink Script (After Hours)

    main

    The Pink Script (After Hours) design system is a nocturnal, couture editorial aesthetic designed for high-end presentations. It mimics glossy fashion magazine spreads and late-night perfume advertising.

    Key Visual Characteristics:

    • Color Palette: Hot fuchsia ink on dim warm-black paper.
    • Typography:
      • DM Serif Display: Used for all script and editorial moments (up to 600px).
      • Inter (weight 300): Used for body text.
      • JetBrains Mono: Used for boutique-catalog metadata.
    • Atmosphere: Features a soft film-grain overlay and a hairline interior frame.
    • Canvas: Fixed 1920×1080 resolution.

  10. Use the Pin & Paper template for hand-crafted, literary presentations

    main

    The Pin & Paper template is a field-notebook editorial system designed to make decks feel hand-crafted, warm, and thoughtful. It uses a yellow legal-pad paper aesthetic with deep cobalt-blue ink and hand-drawn safety-pin illustrations.

    Best Use Cases

    • Qualitative research findings
    • Founder reflections
    • Longform brand stories
    • Workshop debriefs
    • Any deck that needs personality and warmth over digital-native polish.

    When to Avoid

    • Decks requiring a rigorously data-driven or highly polished digital appearance.
    • The handwritten Caveat font is intentionally informal and may clash with high-formality requirements.

  11. Design System Overview: Broadside

    main

    Broadside is a protest-poster editorial system designed for high-impact, low-density presentations. It uses massive Barlow typography (weight 900, lowercase) as a graphic element rather than just text.

    Core Principles:

    • Two-Register Color System: Uses a 'dark register' (near-black background with cream text and fire-orange accents) and an 'orange register' (fire-orange background with dark ink text). There are no light/cream slides.
    • Monolithic Typography: Uses Barlow for all primary text roles and IBM Plex Mono exclusively for 'chrome' elements (labels, tags, slide numbers).
    • Flat Aesthetic: No drop shadows, gradients, or rounded corners. Hierarchy is built via type weight, size, and 1px hairline dividers.
    • Low Density: Designed for negative space. Bullet lists are capped at three items. A single massive display moment should ideally be paired with minimal supporting text.

  12. Design System Overview: Grove Template

    main

    The Grove template is a quiet, editorial-serif presentation system designed to mimic a well-bound monograph or boutique brand book. It uses a high-contrast, sophisticated aesthetic characterized by:

    • Typography:
      • Headlines: Playfair Display (weight 400, never bold).
      • Body: Jost (weight 300).
      • Labels/Kickers: JetBrains Mono (weight 300).
    • Color Palette: A deep forest green canvas (#192b1b) paired with warm cream text (#d4cfbf) and a single terracotta coral accent (#c8524a).
    • Visual Style: Generous negative space, 1px hairline borders, and a signature low-opacity serif watermark numeral.