Transforme uma imagem de referência em uma página real com o Open Design (grátis via Gemini)

Este guia trata de um fluxo de trabalho específico e subutilizado do Open Design: começar a partir de uma imagem de referência. Encontre um design de que você goste — um shot do Dribbble, o print de qualquer site — solte-o, e o Open Design constrói uma página real nessa linguagem visual. E você pode rodar todo o processo de graça no nível gratuito de um agente de código. Ele segue o passo a passo que o Compile Future apresenta em seu vídeo, reescrito e atualizado para a versão atual. Assista ao vídeo acima ou siga lendo a versão escrita.

O espaço de trabalho do Open Design: descreva o que você quer construir, escolha um modo, e seu agente faz o resto.

O que é o Open Design?

O Open Design é uma plataforma de design open source e local-first — uma alternativa ao Claude Design que roda na sua própria máquina. A diferença principal: em vez de ficar preso a um único modelo, ele aciona o agente de código que você já usa — Claude Code, Codex, Cursor, Gemini, OpenCode e outros. Ele vem com uma biblioteca extensa de skills e sistemas de design de marcas (Airbnb, Apple, Cursor, Ferrari, Figma e muitas outras), de modo que a geração parte de uma estética real em vez de um prompt genérico.

• Open source, Apache-2.0 — clone, faça self-host ou apenas baixe o app.
• Roda localmente — seus projetos ficam na sua própria máquina.
• Qualquer modelo — incluindo níveis gratuitos; sem GPU necessária (o modelo roda na nuvem via sua CLI, não no seu hardware).

Passo 1 — Instale e conecte um modelo gratuito

Baixe o instalador em open-design.ai/download (DMG do macOS ou .exe do Windows), ou rode a partir do código-fonte. No primeiro início, escolha seu agente. O Compile Future usa o Gemini CLI porque seu nível gratuito é generoso (muitas requisições gratuitas por dia) — então todo o fluxo de trabalho não custa nada:

• Escolha o Gemini na configuração. Se não for detectado, instale o Gemini CLI (um comando no site dele) e faça login com uma conta Google.
• Prefere outra coisa? Qualquer CLI detectada funciona, ou traga sua própria API key.

É por isso que «sem GPU»: o modelo roda na nuvem via sua CLI, então até um notebook modesto serve.

Passo 2 — Construir a partir de um prompt de texto (o básico)

Defina um design system padrão (o Compile Future gosta de um ousado), escolha Prototype, dê um nome e selecione high fidelity para o melhor resultado. Envie seu briefing. O Open Design faz algumas perguntas de descoberta (ferramenta única / landing page / tudo em um? responsivo? tom? contexto da marca?) e uma direção visual (por exemplo, um visual minimalista no estilo Vercel), e então constrói uma primeira versão limpa. Você pode ajustar as cores de destaque direto na página.

Um protótipo real gerado, renderizado na pré-visualização — uma landing page de agência escura e cinematográfica.

Passo 3 — O fluxo de trabalho com imagem de referência (a melhor parte)

Aqui está a técnica que vale o vídeo. Em vez de descrever um visual em palavras, mostre o visual ao Open Design:

1. Encontre um design de que você goste — navegue pelo Dribbble (pesquise, por exemplo, «tools website») ou qualquer site no ar para se inspirar.
2. Salve um print dele.
3. De volta ao Open Design, crie um projeto no modo free-form, anexe o print e dê o prompt: «build my [site], use the design language from the image I shared.»
4. Responda às perguntas de descoberta, dizendo a ele para seguir a UI da imagem.

O Open Design escreve uma brand spec a partir da referência (ele a exibe e pede que você confirme) e então constrói a página nessa linguagem visual — a mesma sensação de layout, cores e tipografia da sua referência, aplicadas ao seu conteúdo. É a forma mais rápida de obter um resultado fiel à marca quando você consegue ver o que quer, mas não consegue descrever.

A biblioteca de plugins: instale skills direto do registry — incluindo skills de design anti-slop.

Passo 4 — Editar e publicar

Refine em linguagem comum — «remove the sign-in button», «adjust the card radius» — e veja a atualização acontecer. Veja o código via Source, depois use Share para baixar um ZIP, PDF ou PowerPoint, exportar HTML autônomo, ou deploy to Vercel com um clique (basta colar um Vercel token) para obter um link compartilhável.

Dicas

• Rode de graça no nível gratuito do Gemini CLI (ou qualquer CLI com nível gratuito) — sem assinatura, sem GPU.
• Use uma imagem de referência quando você consegue imaginar o visual mas não descrevê-lo — Dribbble ou o print de qualquer site.
• O modo free-form + «match the image» é o padrão de prompt que acerta a referência em cheio.
• Confirme a brand spec que ele gera antes de construir, para que a direção esteja certa.
• high fidelity para um resultado caprichado; itere com edições em linguagem comum.

FAQ

Preciso de uma GPU? Não. O modelo roda via sua CLI (na nuvem), não na sua máquina — um notebook comum serve.

Dá mesmo para rodar de graça? Sim — aponte-o para uma CLI com nível gratuito, como o Gemini, e você consegue gerar designs sem custo; você só paga se escolher um modelo/API pago.

Como faço o design a partir de uma imagem de que gosto? Use o modo free-form, anexe o print e diga a ele para usar a linguagem de design da imagem; ele extrai uma brand spec e constrói nesse estilo.

É grátis e open source? Sim — Apache-2.0. Rode localmente de graça; você só paga pelo uso de modelo/mídia daquilo que conectar.

---

Este guia escrito é baseado no passo a passo do Compile Future. Assista ao vídeo completo acima e inscreva-se no Compile Future para mais fluxos de trabalho de IA gratuitos.