design-pick

Design Pick — Create diverse PPTs and websites with design packs

When you hand a presentation or webpage to AI, the results are similar every time — the same gradients, the same rounded cards. This skill selects one of 80 design packs(40 PPT + 40 web) that are clearly distinct from one another, and generates according to that pack's precise specification. Each pack defines colors, typography, layout, charts, diagrams, and "what not to do" as absolute values, so the AI produces consistent and clearly styled results.

How it works

Identify what to create — Check whether it is a PPT (presentation/slide/deck) or web (website/landing/UI).
Select a pack
- If the user specified a slug directly(예: web-velvet-dark-boutique) → proceed straight to that pack.
- If they only described a feeling(e.g., "luxurious dark tone") → from the catalog below, among packs matching the track, recommend 2–3 suitable ones with reasonsand let the user choose. Never list all 80.
Load the specification — Read the specification file references/{slug}.md of the selected pack.
Generate as-is — Create the output by faithfully following the specification. In particular, always obey the specification's "what not to do" section — this is the key to preventing regression to the AI default aesthetic.
- PPT packs: The specification includes templates for covers, body pages, charts, and diagrams (process, timeline, matrix, KPI).
- Web packs: The specification includes layout, components, typography, and motion.

PPT packs — Output format (required)

When creating .pptx with a PPT pack, always generate an editable native PowerPoint file. Titles, body text, tables, bullets, shapes, and arrows must all be python-pptx native objects (text boxes, tables, autoshapes, connectors).

Prohibited — The "full-bleed PNG" method of rendering with HTML/CSS and then embedding the entire slide as a PNG image. Even if it looks identical, you cannot edit a single character in PowerPoint. It cannot be used in practice because last-minute edits before a presentation are impossible — no matter how high the design fidelity, do not deliver using this method.
Charts, diagrams, and infographics are also drawn with native shapes whenever possible. Only photos and illustrations are inserted as images.
Embed Korean body text with a Korean font (such as Pretendard) and English label fonts in .pptx so they do not break on any PC.

Alternative — Create by pasting into Claude.ai

Without a separate pipeline, the pack's references/{slug}.md specification and source materials (lecture/planning MD, etc.) You can paste it as-is into a Claude.ai chat and ask, "Please create an editable .pptx according to this design specification." You can also request it that way. Claude.ai .pptx generates the file directly and provides it as a download — the above "editable native" principle applies equally in this case.

Recommended tips (feeling → pack mapping)

Map the user's wording to the pack's axes and families to narrow down the candidates:

"premium/luxury/elegant" → luxury, heritage, dark boutique family
"professional/trust/consulting/report" → consulting, strategy, McKinsey, policy family
"lots of diagrams/schematics/processes" → infographic, blueprint, isometric family
"minimal/clean/restrained" → Swiss, minimal, mono family
"intense/bold/eye-catching" → brutalism, Memphis, color block, big type family
"dark/tech" → dark tech, terminal, luminous, prism family When recommending, explain in one line how each candidate differs from the baseline (plain default design).

Catalog — Presentation (PPT 40)

ppt-consulting-precision-grid — Consulting precision grid: on a 12-column modular grid, achromatic body text and hairline-bordered data boxes in a single accent color, action-title headers... · mono/minimal-sans/strict-grid/dense/none
ppt-keynote-minimal-fullbleed — Keynote minimal full bleed: only a single line of text on a full-bleed photo or solid background, one message per slide with overwhelming whitespace and extreme restraint. · mono/minimal-sans/full-bleed/airy/subtle
ppt-editorial-magazine — Editorial magazine: multi-column grid per spread, large serif headlines and drop caps, publication hierarchy with magazine typographic details. · mono/serif-editorial/asymmetric/balanced/none
ppt-neo-brutalism — Neobrutalism: thick black borders and hard shadows, rough collisions of primary-color blocks, intentional asymmetry of huge bold sans-serif type. · vivid-primary/heavy-display/block-grid/dense/snappy
ppt-glassmorphism — Glassmorphism: translucent frosted glass panels floating over a colorful gradient background, depth from highlight borders. · gradient/minimal-sans/centered/airy/subtle
ppt-korea-policy-navy — Korean policy report navy: navy header bar and bold Korean gothic titles, left-side numbered sections, aligned box body text in the style of Korean public reports... · dark/minimal-sans/strict-grid/balanced/none
ppt-dark-tech — Dark mode tech: neon cyan and violet accents and glowing lines on a charcoal background, cyber tech conference tone with monospace labels. · dark/mono/asymmetric/balanced/snappy
ppt-hand-drawn-sketch — Hand-drawn sketch: hand-drawn borders and rough pen-stroke arrows and speech bubbles, informal workshop tone with cream paper texture. · earth/mixed/asymmetric/balanced/playful
ppt-data-infographic-heavy — Data infographic heavy: dashboard-style layout packed with charts, KPI cards, and icon statistics, with information density along an F-shaped flow as its identity. · vivid-primary/minimal-sans/block-grid/dense/subtle
ppt-monochrome-risk — Monochrome Risk: Only pure black-and-white steps, bold warning headlines and thick rule-line divisions for a deliberately solemn risk-report tone. · mono/heavy-display/strict-grid/balanced/none
ppt-memphis-retro-90s — 90s Memphis Retro: Zigzags, dots, terrazzo patterns, irregular geometric shapes, and clashing primary colors for 80s–90s postmodern disorder. · vivid-primary/heavy-display/asymmetric/dense/playful
ppt-minimal-mono-note — Minimal Mono Note: Only monospace type on a white page with ample margins, one ink-black color for a static typewriter-note aesthetic. · mono/mono/centered/airy/none
ppt-botanical-organic — Botanical Organic: Beige, terracotta, and moss-green earth tones with hand-drawn botanical illustrations, organic curves for a natural wellness tone. · earth/serif-editorial/asymmetric/airy/subtle
ppt-vivid-gradient-future — Vivid Gradient Future: Saturated multicolor mesh gradients fill the background while glowing curves and abstract 3D float in a future-vision tone. · gradient/heavy-display/full-bleed/balanced/snappy
ppt-print-first-newspaper — Print-First Newspaper: Multi-column layouts, bold serif mastheads, and thin rule-line divisions for the standard format of a newsprint newspaper page. · mono/serif-editorial/block-grid/dense/none
ppt-swiss-editorial-bold — Swiss Editorial Bold: Using giant condensed display type like illustration on a precise grid, editorial design of intentional chaos. · vivid-primary/heavy-display/strict-grid/balanced/snappy
ppt-bauhaus-geometric — Bauhaus Geometric: Basic shapes of circles, triangles, and squares with the primary colors red, yellow, and blue, functionalist geometric composition in asymmetrical balance. · vivid-primary/heavy-display/asymmetric/balanced/none
ppt-expressive-material — Expressive Material: Material 3 Expressive's bold colors and variable font variations, large rounded forms and cheerful motion… · vivid-primary/mixed/block-grid/balanced/playful
ppt-luxury-editorial-serif — Luxury Editorial Serif: Thin high-contrast Didone serif on an off-white page with ample margins, an elegant tone with a single restrained touch of gold. · mono/serif-editorial/centered/airy/subtle
ppt-startup-pitch-colorful — Startup Pitch Colorful: A highly saturated 4–5 color palette, rounded keyword badges, and giant numeric metrics dominating with demo-day energy. · vivid-primary/mixed/centered/balanced/playful
ppt-precision-fintech-deck — Precision Fintech Deck: A restrained fintech… where a single indigo-violet accent color on a blue-gray surface handles all CTAs, key figures, and charts · pastel/minimal-sans/asymmetric/airy/subtle
ppt-engineered-dark-deck — Engineered Dark Deck: A single subtle radial glow on a charcoal background, neutral sans-serif and hairline borders, 120–180ms micro… · dark/minimal-sans/centered/airy/snappy
ppt-warm-hospitality-deck — Warm Hospitality Deck: A single coral-red accent on a white canvas with humanist sans-serif with rounded terminals, the warmth of full-bleed rounded-corner photography… · earth/minimal-sans/full-bleed/airy/playful
ppt-monochrome-infrastructure-deck — Monochrome Infrastructure Deck: An infrastructure deck reduced to pure white and pure black only — sans-serif + mono mix, 1px hairline borders, emphasis through weight rather than color… · mono/mixed/strict-grid/balanced/subtle
ppt-expressive-soundwave-deck — Expressive Soundwave Deck: Lay vibrant duotone gradients across a dark canvas in large areas, with an extra-wide display that makes each slide a single... · gradient/heavy-display/block-grid/balanced/playful
ppt-editorial-product-deck — Editorial Product Deck: Ink black on a cream-ivory surface, serif headings + sans-serif body, warm minimalism on a strict 12-column grid... · earth/serif-editorial/strict-grid/balanced/none
ppt-cinematic-keynote-deck — Cinematic Keynote Deck: A single giant key visual on a pure black stage with minimal text, a well-ordered balanced rhythm, and a summary slide at the end... · dark/minimal-sans/full-bleed/balanced/subtle
ppt-confident-color-block-deck — Confident Color-Block Deck: Large solid color blocks (1–2 colors per slide) laid asymmetrically on a white background, with white heavy sans-serif overlaid... · vivid-primary/heavy-display/asymmetric/airy/snappy
ppt-strategy-navy-deck — Strategy Navy Deck: A two-color multi-layered blue system with serif headings + sans-serif body, action titles and evidence modules on a 12-column grid... · vivid-primary/mixed/strict-grid/dense/none
ppt-heritage-luxury-deck — Heritage Luxury Deck: A heritage/luxury IR deck in sepia-champagne tones with gold hairlines and a high-contrast Didone serif centered... · earth/serif-editorial/centered/balanced/subtle
ppt-isometric-platform-deck — Isometric Platform Deck: On a bright cool-gray canvas, three-dimensional platforms, blocks, and stair structures in orthographic isometric projection support the content, ... · mono/minimal-sans/centered/airy/subtle
ppt-mckinsey-ghost-deck — MBB Ghost Deck Framework: On a pure white canvas, action titles as complete sentences and slate-gray body text, emphasizing only through weight instead of color in the MBB style... · mono/minimal-sans/asymmetric/balanced/none
ppt-blueprint-schematic-deck — Blueprint Schematic Deck: A 1px cyan dot grid exposed like a blueprint on a deep indigo-blue background, with dimension guide lines, leader lines, and section hatching... · dark/mono/strict-grid/dense/none
ppt-editorial-infographic-deck — Editorial Infographic Deck: Large serif headlines and thin rule-line divisions on an off-white page, with a single touch of ink red making the data feel like a newspaper or magazine... · vivid-primary/serif-editorial/block-grid/balanced/none
ppt-vivid-gradient-infographic-deck — Vivid Gradient Infographic Deck: Highly saturated duotone gradients on a bright canvas fill rounded pill nodes, icon chips, and KPI rings in a VC pitch... · gradient/heavy-display/block-grid/balanced/playful
ppt-bold-block-infographic-deck — Bold Block Infographic Deck: On a white background, solid color blocks in charcoal, amber, and teal become nodes, segments, and cells, forming the diagram itself, bold... · vivid-primary/heavy-display/block-grid/dense/none
ppt-prismatic-dark-deck — Prismatic Dark Diagram Deck: On an ink navy-black background, diagram nodes and lines glow with a cyan→magenta→amber prism gradient in a tech... · gradient/minimal-sans/full-bleed/balanced/snappy
ppt-soft-pastel-system-deck — Soft Pastel System Deck: On an off-white canvas, three pastel colors—lilac, mint, and peach—with soft multi-shadows, plump rounded nodes and cards... · pastel/minimal-sans/centered/balanced/snappy
ppt-archival-index-deck — Archival Index Deck: Serif + monospace mix on a paper-light beige canvas, numbering and labeling every diagram like library cards and archive ledgers… · mono/mixed/strict-grid/dense/none
ppt-warm-minimal-diagram-deck — Warm Minimal Diagram Deck: Ink-brown body text and a single terracotta accent on a warm sand-ivory canvas, thin 1pt line diagrams and… · earth/minimal-sans/centered/airy/none

Catalog — Website (40)

web-swiss-grid — Swiss Grid Minimal: A strict 12-column modular grid with left-aligned asymmetry, a pure grid with no ornamentation and a single accent color. · mono/minimal-sans/strict-grid/balanced/none
web-neo-brutalism — Neo-Brutalism: Rough black hard borders and offset hard shadows, saturated clashes of primary-color blocks and bold display antidesi… · vivid-primary/heavy-display/asymmetric/dense/snappy
web-glassmorphism — Glassmorphism: Translucent frosted glass surfaces and backdrop-blur, a sense of depth from panels floating over gradient backgrounds. · gradient/minimal-sans/centered/airy/subtle
web-editorial-longform — Editorial Longform: A single narrow body column with large serif body text, magazine-article longform with oversized headlines and drop caps. · mono/serif-editorial/centered/airy/subtle
web-dark-terminal — Dark Tech / Terminal: Monospace text and fluorescent accent colors on a near-black background, the developer-console aesthetic of hairline grids. · dark/mono/strict-grid/dense/subtle
web-claymorphism — Claymorphism Soft: Plump, puffy clay-like 3D surfaces and double shadows, a tactile toy aesthetic in pastel tones. · pastel/minimal-sans/centered/airy/playful
web-big-type-statement — Big Type Statement: Oversized display typography filling the screen is the content itself, negative letter-spacing and achromatic plus one accent. · mono/heavy-display/full-bleed/airy/subtle
web-y2k-chrome — Y2K Chrome Revival: Metallic chrome gradients and holographic sheen, a retro-cyber aesthetic of blob shapes and beveled buttons. · gradient/mixed/asymmetric/dense/playful
web-botanical-organic — Botanical Organic: Earthy tones of soil, sage, and terracotta with hand-drawn plants and organic curved blobs, a wellness tone on natural-texture backgrounds. · earth/serif-editorial/asymmetric/airy/subtle
web-monospace-docs — Monospace Docs: A light-mode documentation site built entirely in monospace typography, with hairline table borders and precision of alignment. · mono/mono/strict-grid/dense/none
web-minimal-luxury — Minimal Luxury Fashion: Sans-serif with vast whitespace and wide letter-spacing, the silent fashion-house luxury of achromatic black, white, and ivory. · mono/minimal-sans/full-bleed/airy/subtle
web-memphis-postmodern — Memphis Postmodern: Clashes of primary colors and pastels with seemingly randomly scattered geometric shapes, postmodern kitsch with terrazzo texture. · vivid-primary/mixed/asymmetric/dense/playful
web-news-journal-grid — News / Journal Grid: A dense multi-column grid with bold serif headlines, the front-page newspaper aesthetic of thin rule dividers — density is authority. · mono/serif-editorial/strict-grid/dense/none
web-fun-illustrated — Fun Illustrated: Flat hand-drawn illustrations and a highly saturated multicolor palette, a cheerful and friendly tone with rounded bold sans-serif. · vivid-primary/heavy-display/centered/balanced/playful
web-ai-gradient-mesh — AI Gradient Mesh: A flowing multi-color mesh gradient fills the entire background, with a solid white card on top, glow and noise textures… · gradient/minimal-sans/full-bleed/balanced/subtle
web-dark-luxury — Dark Luxury: Gold and champagne metallic accents on a deep charcoal background with a thin serif display, a premium presentation of darkness and luster. · dark/serif-editorial/full-bleed/airy/subtle
web-archive-library — Archive / Library: Dense tables, lists, and indexes mixed with serif and mono, the aesthetic of a digital archive catalog on a paper-toned beige background. · earth/mixed/strict-grid/dense/none
web-material-expressive — Material Expressive: Material 3 Expressive's tonal color system and morphing shapes, spring-based bouncy motion… · vivid-primary/minimal-sans/block-grid/balanced/playful
web-risograph-print — Risograph Print: Intentional offset of 2–3 spot colors with coarse halftone dots and grain, the look of risograph printing in fluorescent ink tones. · vivid-primary/heavy-display/block-grid/balanced/snappy
web-bauhaus-geometric — Bauhaus Geometric: Bauhaus design principles — basic shapes of circles, triangles, and squares, the three primary colors red, yellow, and blue plus black and white, geometric… · vivid-primary/heavy-display/block-grid/balanced/snappy
web-precision-fintech — Precision Fintech Light: Off-white and ink navy body text, an iridescent pastel band dividing the top third, negative letter-spacing thin grotesque… · mono/minimal-sans/asymmetric/balanced/subtle
web-blueprint-grid — Blueprint Grid: A 1px hairline dot/line grid exposed like a blueprint on a white or ink-black canvas, with content on the grid… · mono/mono/strict-grid/balanced/subtle
web-luminous-dark-bento — Luminous Dark Bento: Asymmetric bento tiles float on deep charcoal with 1px glowing borders, and radial glows and micro-motion make the interface… · dark/minimal-sans/block-grid/balanced/snappy
web-warm-workspace — Warm Workspace: Warm off-white and ink gray, monochrome line illustrations and rounded cards, a mix of humanist serif and sans-serif… · earth/mixed/centered/airy/subtle
web-iridescent-marketing-flow — Iridescent Marketing Flow: Curved color blocks flow into a bright white background, with bold sans-serif, rounded buttons, and full-width illustration banners… · vivid-primary/heavy-display/full-bleed/balanced/playful
web-spatial-immersive-hero — Spatial Immersive Hero: A vertical slider where the background color shifts and text appears and disappears as you scroll, floating 3D objects and cinematic… · dark/minimal-sans/full-bleed/airy/playful
web-tactile-soft-product — Tactile Soft Product: Rounded cards with soft multiple shadows float subtly on a greige background, with restrained mint and coral accents and… · pastel/minimal-sans/centered/balanced/snappy
web-editorial-confidence — Editorial Confidence: Asymmetric multi-column layout on a wide white canvas, large display serif headlines with a single deep accent color, hairline rules… · vivid-primary/serif-editorial/asymmetric/balanced/subtle
web-signal-monochrome — Signal Monochrome: A single signal color dots only the CTA on a pure white and pure black high-contrast canvas, with a dense hierarchy and color-inverted hover… · mono/minimal-sans/asymmetric/dense/snappy
web-immersive-media-grid — Immersive Media Grid: An immersive collage with full-bleed media tiles densely laid out in a modular grid on an ink-black background, large sans-serif and … · dark/heavy-display/block-grid/dense/playful
web-atelier-archive-serif — Atelier Archive Serif: Exposing a strict 12-column grid on an off-white canvas, with a left-side work index list and a large right-side… like a gallery catalog · mono/mixed/strict-grid/airy/none
web-haute-jewelry-noir — Haute Jewelry Noir: A single product render floats under a radial spotlight on a nearly pure-black canvas, with thin high-contrast ser… · dark/serif-editorial/centered/airy/playful
web-cinematic-marque-reveal — Cinematic Marquee Reveal: A 21:9 cinematic full-bleed key visual on an ink-black canvas with sequential scroll reveals, bold wide display… · dark/heavy-display/full-bleed/airy/snappy
web-poetic-hospitality-scroll — Poetic Hospitality Scroll: Short, poem-like humanist serif copy over full-bleed environmental photography in warm sand and linen tones, Ken Burns-style zoom and di… · earth/serif-editorial/full-bleed/airy/playful
web-iridescent-noir-prestige — Iridescent Noir Prestige: Holographic metallic shading restrained to text edges and hairline borders on a deep ink-black background,… · gradient/mixed/asymmetric/airy/subtle
web-tactile-luxury-editorial — Tactile Luxury Editorial: Paper grain and fabric weave textures on a warm cream and sand background with an asymmetric multi-column magazine layout, serif + sans… · earth/mixed/asymmetric/balanced/subtle
web-prestige-saas-restraint — Prestige SaaS Restraint: Restrained grotesque headlines and asymmetric product screenshots on a calm off-white background, ink slate solid colors and sp… · mono/mixed/asymmetric/airy/snappy
web-grand-serif-statement — Grand Serif Statement: Full-bleed big type where an oversized display serif filling the off-white canvas becomes the content itself, ne… · mono/serif-editorial/full-bleed/balanced/subtle
web-velvet-dark-boutique — Velvet Dark Boutique: Modular bento lookbook tiles framed by velvet matte texture and gold-bronze hairline borders on a deep wine-charcoal background, se… · dark/mixed/block-grid/balanced/subtle
web-couture-color-block — Couture Color Block: Deeply saturated solid color blocks in deep burgundy, forest, and cobalt laid out asymmetrically on a white canvas, with thin display… · vivid-primary/serif-editorial/asymmetric/airy/none

Source · License

Each pack is a specification of visual principles learned from public design systems and styles, and does not replicate the trademarks or logos of any specific product. Specifications and documentation are MIT. Full catalog and previews: https://design-diversity.vercel.app