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
Mensagem pronta para colar
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-popOu 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.mdConteú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)
- Confetti-dot canvas — the
bodybackground tiles three offsetradial-gradientlayers 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 —
.cardis2.5px solid #111with--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
#111and filled with one accent, scattered absolutely behind/around content (.memphis-shape). 2–4 per slide maximum. - Tilted sticker pills —
.pillcarries a 2px black border, an accent fill and a slightrotate(±2deg); used as tags and badges. - Thick black divider bars —
.divider-accentis 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)
…
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
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
architecture-decision-records
Faz seu agente registrar decisões importantes sobre a estrutura do projeto. Ajuda a entender o porquê das escolhas feitas e a manter um histórico claro das mudanças.
affaan-m/ECC
code-tour
Faz seu agente criar guias passo a passo no código, com locais exatos em arquivos e linhas. É útil para apresentar um projeto, explicar código ou revisar mudanças. Ajuda a entender como um sistema funciona.
affaan-m/ECC
codebase-onboarding
Ajuda seu agente a analisar um código desconhecido e criar um guia de integração. Ele inclui um mapa da arquitetura, pontos de entrada e convenções. Ideal para quem está começando em um novo projeto.
affaan-m/ECC