hps-memphis-pop

name hps-memphis-pop en_name Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator zh_name 像内容策展人一样做流行文化回顾演讲 description A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. en_description A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. zh_description 像内容策展人一样做流行文化回顾演讲——一份可商业交付的生活故事 Deck，围绕真实主题、证据链与决策目标组织。 tags ["life","travel-photo-essay-deck","personal","story","photo-essay","decision-deck","commercial-slide-agent","hps-memphis-pop"] triggers ["travel-photo-essay-deck","life","Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator","像内容策展人一样做流行文化回顾演讲","story","personal","photo-essay","html deck","html slides"] od {"mode":"deck","surface":"web","upstream":"https://github.com/lewislulu/html-ppt-skill","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false},"speaker_notes":true,"animations":true,"example_prompt_i18n":{"zh-CN":"用孟菲斯波普把我的内容做成一套 80 年代孟菲斯风格的单文件 HTML 幻灯片：奶油色 confetti 圆点画布、黑描边硬阴影卡片、热粉 accent 和 Archivo Black 大标题。从种子 example.html 出发——完整保留 token 表、slide 骨架和键盘运行时，只替换幻灯片内容，使用真实内容，不要 lorem ipsum。"},"category":"life","scenario":"personal","example_prompt":"Create \"Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator\" as a decision-grade Life & story deck in this template's own visual system. Subject: A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Audience: talk audience, design community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once."} Memphis Pop（孟菲斯波普） A locked single-theme deck plugin: the memphis-pop skin from the upstream MIT-licensed lewislulu/html-ppt-skill (36 themes × 31 layouts), shipped as one self-contained seed — example.html — that carries the full token sheet, the Memphis decor devices, the slide scaffold, and the keyboard runtime. Start from example.html . Replace content only. Never rewrite the design system or the runtime script. Never introduce colors or fonts outside this spec. Positioning vs. sibling Memphis-adjacent plugins: this is the full-bleed scattered confetti-dot pattern Memphis. daisy-days is hand-drawn daisy childlike (flower illustration devices), block-frame is big-color-block neobrutalist (no pattern). The three decor systems are mutually exclusive — do not mix. Locked token sheet (do not deviate) Every variable below is defined in the seed's :root . Slides reference tokens only — never hard-code a color in slide markup. :root { --bg : #fef6e8 ; /* warm cream canvas */ --bg-soft : #fdebc7 ; --surface : #ffffff ; /* card face */ --surface-2 : #fff1d1 ; --border : #111111 ; /* everything outlines in near-black */ --border-strong : #111111 ; --text-1 : #111111 ; --text-2 : #333333 ; --text-3 : #666666 ; --accent : #ff3d8b ; /* hot pink — the lead */ --accent-2 : #37c2d7 ; /* teal */ --accent-3 : #ffcc00 ; /* yellow */ --good : #6ac04c ; --warn : #ffcc00 ; --bad : #ff3d8b ; --grad : linear-gradient ( 135deg , #ff3d8b , #ffcc00 50% , #37c2d7 ); --grad-soft : linear-gradient ( 135deg , #fdebc7 , #fff1d1 ); --radius : 10px ; --radius-sm : 6px ; --radius-lg : 18px ; --shadow : 5px 5px 0 #111 ; /* hard offset, never blurred */ --shadow-lg : 9px 9px 0 #111 ; --font-sans : 'Space Grotesk' , 'Inter' , 'Noto Sans SC' ,sans-serif; --font-serif : 'Space Grotesk' , 'Noto Sans SC' ,sans-serif; --font-mono : 'JetBrains Mono' ,SFMono-Regular,Menlo,monospace; --font-display : 'Archivo Black' , 'Space Grotesk' ,sans-serif; --letter-tight :-. 01em ; --letter-normal : 0 ; --ease : cubic-bezier (. 4 , 0 ,. 2 , 1 ); } Fonts come from Google Fonts @import only (Archivo Black, Space Grotesk, Noto Sans SC, JetBrains Mono). No other external resource of any kind. Signature decor devices (the Memphis kit) Confetti-dot canvas — the body background tiles three offset radial-gradient layers of 3px dots (pink / teal / yellow at 200 / 220 / 260px tile sizes) over --bg . It is full-bleed on every slide; slides stay transparent so the pattern always shows through. Never paint an opaque slide background. Black-outlined cards — .card is 2.5px solid #111 with --shadow (hard offset, zero blur). Hero cards may use --shadow-lg . Geometric SVG confetti — inline SVG triangles, squiggle zigzags, circles, plus signs and half-tone arcs, each stroked in #111 and filled with one accent, scattered absolutely behind/around content ( .memphis-shape ). 2–4 per slide maximum. Tilted sticker pills — .pill carries a 2px black border, an accent fill and a slight rotate(±2deg) ; used as tags and badges. Thick black divider bars — .divider-accent is a hot-pink bar with a black outline; section dividers pair it with a giant outlined numeral. Gradient display numerals — .gradient-text (the tri-color --grad ) is reserved for big numbers and 1–2 highlight words. Layout system (shared upstream 31-layout catalog) The upstream catalog is shared across the html-ppt family; compose pages from these master categories: group layouts Openers & transitions cover · toc · section-divider Text-centric bullets · two-column · three-column · big-quote Numbers & data stat-highlight · kpi-grid · table · chart-bar/line/pie/radar Code & terminal code · diff · terminal Diagrams & flows flow-diagram · arch-diagram · process-steps · mindmap Plans & comparisons timeline · roadmap · gantt · comparison · pros-cons · todo-checklist Visuals image-hero · image-grid Closers cta · thanks Default sequence: cover → toc → (section-divider → 2–4 content pages) × N → thanks . Charts are always pure CSS or inline SVG — never Chart.js or any external library. The seed demonstrates: cover, toc, section-divider, two-column, kpi-grid, stat-highlight, chart-bar, process-steps, big-quote, thanks. Page structure & runtime contract (keep the seed script verbatim) Every page is <section class="slide" data-title="..."> inside <div class="deck" id="deck"> — a horizontal scroll-snap strip, each slide exactly 100vw × 100vh (one screen, no internal scrolling), 16:9 / 1280×720 baseline with clamp() type scales, padding 72px 96px . Fixed chrome: .deck-header (deck title + theme chip), .deck-footer (attribution + N / total counter), .progress-bar . Keyboard: ← → Space PageUp PageDown Home End navigate. Hash routing: #/N (1-based) deep-links a slide; navigation syncs the hash via history.replaceState wrapped in try/catch (srcdoc-safe). The script dedupes dual window/document capture-phase key listeners by Event identity and auto-focuses <body> so keys work without a click — these solve real iframe-host bugs; do not "simplify" them away. Speaker notes: one hidden <div class="notes">…</div> per slide. Authoring checklist Copy example.html ; keep all <style> blocks and the <script> verbatim. Replace the 10 demo slides with the planned layout sequence; real content, real numbers — no lorem ipsum, no placeholder images. Keep the confetti-dot canvas visible on every slide; scatter at most 2–4 geometric SVG shapes per slide. Stay inside the locked palette: pink leads, teal/yellow support, near-black #111 outlines, white card faces — nothing else. Write 1–3 sentence speaker notes per slide in .notes . Verify: arrows + Space navigate, #/5 deep-links, no slide overflows vertically, every shadow is a hard offset (no blur anywhere). Attribution Visual system, token vocabulary, theme palette, and layout taxonomy come from the upstream MIT-licensed lewislulu/html-ppt-skill (© lewis < sudolewis@gmail.com >), theme memphis-pop . The LICENSE file ships alongside this skill — keep it in place when redistributing.