Pular para o conteúdo
Skillpedia
Documentação101 mil · #557

hps-memphis-pop

Ajuda seu agente a contar a história de como o design dos anos 80 moldou os apps atuais. Ele explora a cultura pop e as lições aprendidas. É útil para palestras e comunidades de design.

O que ela faz

Esta ferramenta cria apresentações de slides com um estilo visual inspirado nos anos 80, chamado Memphis. Ela usa um padrão de bolinhas coloridas, formas geométricas e cores vibrantes para deixar seus slides com um visual único e chamativo.

Quando usar

  • ✓Para criar uma apresentação sobre design ou cultura pop dos anos 80.
  • ✓Quando você quer slides com um visual divertido e diferente do comum.
  • ✓Para apresentar ideias de forma visualmente impactante.

Exemplo do que pedir para a IA

“Crie uma apresentação sobre a história do design gráfico usando o estilo Memphis.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-memphis-pop/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-memphis-pop/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

Você começa com um arquivo de exemplo e substitui o conteúdo pelos seus textos e imagens. A ferramenta cuida do visual, aplicando o estilo Memphis automaticamente.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add nexu-io/open-design --skill hps-memphis-pop

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/hps-memphis-pop/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

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)

  1. 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.
  2. Black-outlined cards — .card is 2.5px solid #111 with --shadow (hard offset, zero blur). Hero cards may use --shadow-lg.
  3. 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.
  4. Tilted sticker pills — .pill carries a 2px black border, an accent fill and a slight rotate(±2deg); used as tags and badges.
  5. Thick black divider bars — .divider-accent is a hot-pink bar with a black outline; section dividers pair it with a giant outlined numeral.
  6. 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)

…

Perguntas frequentes

Posso mudar as cores e fontes?

Não, o estilo visual é fixo para manter a identidade Memphis. Você só pode alterar o conteúdo dos slides.

Quantos slides posso criar?

A ferramenta oferece 31 tipos de layouts que você pode combinar para criar quantas páginas precisar.

Como navego pelos slides?

Você pode usar as setas do teclado, a barra de espaço, PageUp/PageDown, Home e End para navegar entre os slides.

Detalhes

Descrição original do autor

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.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#557
Licença
Apache-2.0
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas