Refn
2026
Design Translation
REFN
Design Translation Platform

Você vê um design foda.
Mas não sabe
dizer por quê.

O Refn sabe.

Mostre o que te chamou atenção.
O Refn te explica por que funciona
e traduz pro teu código.

Scroll
FRAGMENTADO
Hoje: 4 ferramentas, 0 contexto
🎨
Coolors
Só extrai cores
🔧
DevTools
Só mostra CSS cru
🤔
Seu cérebro
Chutando o spacing
✍️
Prompt vago
"Faz um design bonito escuro"
vs
Refn: 1 ferramenta, contexto total
Refn
Cores exatas • Tipografia identificada • Spacing medido • Radius • Efeitos • Por que funciona • Prompt completo com princípios, técnicas, componentes, do's/don'ts
COMO FUNCIONA
01

Joga o print ou a URL

Screenshot de qualquer coisa — site, Behance, Dribbble, Stories. Ou cola a URL e o Refn extrai o CSS real.

$ input:
https://joincobalt.com
02

Refn explica por que funciona

4-6 insights profundos com técnicas nomeadas, referências culturais, e como replicar em código.

// insight:
"Paleta monotone 85/10/5 — um único matiz em 3 luminosidades cria color thread que unifica elementos separados"
03

Cola o prompt e builda

Prompt completo com tokens, princípios, técnicas com código, componentes, do's/don'ts. Cola no Claude Code e sai parecido.

$ claude-code:
--color-accent: #FF1F5A;
--text-hero-leading: 0.92;
/* Frame-breaking: w-[110%] */
ANALYSIS

Não extrai tokens.
Entende design.

Exemplo real: análise do site OCTO SMM feita pelo Refn. Cada insight identifica a técnica, explica o mecanismo, e diz como replicar.

Design Signature
"Heroísmo cinematográfico 3D com tipografia condensada em contraste monocromático magenta-noir"
maximalist-expression
Signature

Quebra de Frame como Dispositivo de Imersão

Os tentáculos do polvo ultrapassam os limites do viewport em pelo menos 3 direções, ocupando ~60% da área visível. O elemento 3D não está contido — ele invade o espaço do usuário.

Frame-breaking elimina a sensação de "página" e ativa o sistema de atenção pré-atencional. Quando um objeto viola os limites esperados, o córtex visual o processa como mais próximo e mais urgente.

frame-breaking z-axis-layering depth-cue

↗ Cartazes IMAX (Gravity, Interstellar), Baugasm de Vasjen Katro

Signature

Paleta Monocromática com Proporção 85/10/5

Preto puro (#000) ocupa ~85%, magenta saturado ~10%, branco ~5%. Não há cinzas intermediários no fundo. A restrição cromática radical força hierarquia apenas por saturação.

O preto total faz o magenta parecer auto-iluminado — princípio de "simultaneous contrast" de Josef Albers. O magenta ativa cones L e S simultaneamente, criando vibração óptica impossível de ignorar.

monochromatic simultaneous-contrast chromatic-scarcity

↗ Neon noir de Drive (2011), Mr. Robot, linguagem Vercel invertida

Signature

Tipografia Condensada como Arquitetura Vertical

Sans-serif condensada peso 800-900, ~72-80px, line-height 0.92. Alternância de cor dentro do mesmo bloco — magenta pra proposição de valor, branco pro contexto.

Fontes condensadas em peso extremo funcionam como arquitetura — cada letra é uma coluna. A alternância de cor cria hierarquia semântica sem diferença de tamanho, processada 60ms mais rápido.

typographic-color-alternation negative-leading weight-as-structure

↗ Bloomberg Businessweek (Richard Turley), David Rudnick, Linear

Supporting

Rim Lighting Magenta como Assinatura Volumétrica

Iluminação de borda delineia as formas do polvo contra o preto. Contornos de ~2-4px. Centro em sombra profunda, bordas em saturação máxima do magenta.

Rim lighting separa sujeito do fundo sem contraste de preenchimento. A cor do rim sendo idêntica à tipografia cria coesão semiótica — magenta = marca em todo lugar.

rim-lighting gestalt-closure chromatic-unity

↗ Blade Runner, Roger Deakins, renders 3D de Beeple, Nike Air Max

PROMPT

Não é um JSON de tokens.
É um briefing de design completo.

O prompt gerado pelo Refn inclui princípios de design com o "porquê", tokens CSS como custom properties, configuração Tailwind, técnicas nomeadas com código de implementação, guia de componentes com JSX, e uma lista completa de do's e don'ts.

Não é "use essas cores". É "use essas cores PORQUE o contraste simultâneo de Albers faz o magenta parecer auto-iluminado contra preto puro — e aqui está o CSS exato."

494
linhas de prompt
geradas de um único screenshot
refn-output.md
## Design System — Heroismo Cinematografico Noir ### Principios de Design 1. Poster-First, Website-Second Cada secao deve funcionar como um poster independente. O impacto visual vem ANTES da usabilidade. 2. Disciplina Cromatica Radical Apenas 3 cores existem neste universo: preto puro, magenta, e branco. NADA MAIS. ### Tokens CSS --color-bg-primary: #000000; --color-accent: #FF1F5A; --color-text-primary: #FFFFFF; --text-hero-size: clamp(3rem, 8vw, 5rem); --text-hero-leading: 0.92; ### Tecnica: Frame-Breaking .hero-visual { position: absolute; bottom: -8vh; left: -5vw; width: 110vw; /* Sangra alem do container */ } ### Tecnica: Watermark Ghost .watermark { font-size: 25vw; color: rgba(255,255,255,0.06); pointer-events: none; } ### DO's USE preto PURO (#000000) USE leading negativo (< 1.0) USE alternancia accent/branco ### DON'Ts NAO use off-black (#111) NAO use gradientes NAO use border-radius
REFN

Feito por quem
sente design
mas não sabe
explicar.

Para quem builda com AI e quer parar de aceitar o genérico.

Para quem vê um site foda e quer entender — e replicar.

Em breve