Sites que parecemfeitos por estúdio

Você descreve e o Felix gera a sua landing ou app, com preview ao vivo. Edite os textos, estilo e imagens sem sair da página.

Criar conta Já tenho conta

Agentes quetrabalham com você

Do briefing ao resultado, sem configurações complicadas. O Studio gera o seu protótipo enquanto você assiste.

Novo · handoff v2

Status para times de produto

Do brief ao
ship, sem ruído

Testar grátisVer demo

2.4k

times

12m

setup

99.9%

uptime

SOC2

ready

128 pares restantes

Drop 04 · Limitado

Passo firme.
Zero ruído.

Tênis de performance. Frete rápido pro Brasil.

Comprar Run-XGuia de tamanho

Marketing queconverte

Hero full-bleed, tipografia e CTAs com destino. One-pager pronto pra publicar.

Relay

Backlog3

Produto

Atualizar catálogo

Outono 26

2 sem

Mkt

Brief lookbook

Editorial

1 sem

Ops

Cotar fornecedor

Tecido · SP

Qui

A fazer4

Cliente

Confirmar visita

Showroom

Hoje

Venda

Enviar proposta

Cliente · Vila

Qui

Ateliê

Agendar prova

Peça sob medida

Sex

Admin

Revisar permissões

Equipe

Sex

Em curso3

Cliente

Onboarding cliente

Novo cadastro

Agora

Ops

Separar pedidos

Semana 12

Hoje

Ateliê

Ajuste de medidas

Sob encomenda

Amanhã

Feito3

Mkt

Publicar coleção

Site · Nova

Ontem

Venda

Fechar orçamento

Madalena

Ontem

Admin

Convite da equipe

3 membros

Seg

Produto commock vivo

Shell, rotas e ações que respondem no preview — não é wireframe estático.

Edite seu sitesem complicação

Tipografia, estilos ou imagens, edite do seu jeito e no seu ritmo. Utilize as ferramentas do Studio, com ou sem IA.

Clique, digite e edite

Headline, CTA ou parágrafo, clique e reescreva. Sem chat e sem IA: o que você vê já é o que vai no arquivo.

Novo

Casaco linho

Alfaiataria · Vila Madalena

R$ 1.280R$ 1.560

Ajuste e veja ao vivo

Raio, espaçamentos, cores e fontes. O CSS do seu protótipo muda ao vivo, sem código e sem sair do preview.

Aponte o trecho. Diga o que mudar.

Selecione o elemento e descreva o ajuste. O Felix edita só o que você quiser, sem refazer a página inteira.

Do fornoPadaria Lume

Cardápio · manhã

Pão de fermentação longa

Crosta crocante, miolo aberto. Sai às 7h — enquanto ainda esquenta a pedra.

Sessão aberta · hoje 19h

Personal · Pinheiros

Treino seu.
Resultado seu.

Começar avaliaçãoVer método

vagas

45'

sessão

4.9

nota

Pinheiros

studio · SP

Escolha suas fotos e vídeo

Pesquise na biblioteca, gere com IA ou envie as suas próprias fotos e vídeos.

Baixe ou publique

O código é seu. Baixe o projeto completo ou publique seu link para compartilhar.

1import { motion, AnimatePresence } from "framer-motion"2import { Hero, DropBand, SizePicker, LookGrid } from "@/components/kore"3import { useCart, useDrop } from "@/hooks"4 5const SIZES = [ 36, 37, 38, 39, 40, 41, 42, 43, 44 ] as const6const LOOKS = [ "graphite", "bone", "oxide", "night" ]7 8export function Home() {9  const { add, count} = useCart()10  const { sku, price, stock} = useDrop("kore-01")11 12  return (13    <main className="kore min-h-screen bg-ink text-bone">14      <Hero title="Passo firme." sub="Zero ruído." cta="Ver drop" />15      <DropBand sku={sku} price={price} stock={stock} accent="#e11d48" />16      <SizePicker sizes={SIZES} onPick={(s) => add(sku, s)} cartCount={count} />17      <LookGrid looks={LOOKS} columns={4} gap="1.5rem" />18      <AnimatePresence>19        {count > 0 && (20          <motion.aside className="cart-drawer" initial={{ x: 40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} />21        )}22      </AnimatePresence>23    </main>24  )25}26 27export function Hero({ title, sub, cta}: HeroProps) {28  return (29    <section className="hero relative overflow-hidden">30      <h1 className="display text-6xl font-black tracking-tight">{title}</h1>31      <p className="mt-3 text-lg text-muted">{sub}</p>32      <button type="button" className="btn-primary mt-8">{cta}</button>33    </section>34  )35}1import { motion, AnimatePresence } from "framer-motion"2import { Hero, DropBand, SizePicker, LookGrid } from "@/components/kore"3import { useCart, useDrop } from "@/hooks"4 5const SIZES = [ 36, 37, 38, 39, 40, 41, 42, 43, 44 ] as const6const LOOKS = [ "graphite", "bone", "oxide", "night" ]7 8export function Home() {9  const { add, count} = useCart()10  const { sku, price, stock} = useDrop("kore-01")11 12  return (13    <main className="kore min-h-screen bg-ink text-bone">14      <Hero title="Passo firme." sub="Zero ruído." cta="Ver drop" />15      <DropBand sku={sku} price={price} stock={stock} accent="#e11d48" />16      <SizePicker sizes={SIZES} onPick={(s) => add(sku, s)} cartCount={count} />17      <LookGrid looks={LOOKS} columns={4} gap="1.5rem" />18      <AnimatePresence>19        {count > 0 && (20          <motion.aside className="cart-drawer" initial={{ x: 40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} />21        )}22      </AnimatePresence>23    </main>24  )25}26 27export function Hero({ title, sub, cta}: HeroProps) {28  return (29    <section className="hero relative overflow-hidden">30      <h1 className="display text-6xl font-black tracking-tight">{title}</h1>31      <p className="mt-3 text-lg text-muted">{sub}</p>32      <button type="button" className="btn-primary mt-8">{cta}</button>33    </section>34  )35}1import { motion, AnimatePresence } from "framer-motion"2import { Hero, DropBand, SizePicker, LookGrid } from "@/components/kore"3import { useCart, useDrop } from "@/hooks"4 5const SIZES = [ 36, 37, 38, 39, 40, 41, 42, 43, 44 ] as const6const LOOKS = [ "graphite", "bone", "oxide", "night" ]7 8export function Home() {9  const { add, count} = useCart()10  const { sku, price, stock} = useDrop("kore-01")11 12  return (13    <main className="kore min-h-screen bg-ink text-bone">14      <Hero title="Passo firme." sub="Zero ruído." cta="Ver drop" />15      <DropBand sku={sku} price={price} stock={stock} accent="#e11d48" />16      <SizePicker sizes={SIZES} onPick={(s) => add(sku, s)} cartCount={count} />17      <LookGrid looks={LOOKS} columns={4} gap="1.5rem" />18      <AnimatePresence>19        {count > 0 && (20          <motion.aside className="cart-drawer" initial={{ x: 40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} />21        )}22      </AnimatePresence>23    </main>24  )25}26 27export function Hero({ title, sub, cta}: HeroProps) {28  return (29    <section className="hero relative overflow-hidden">30      <h1 className="display text-6xl font-black tracking-tight">{title}</h1>31      <p className="mt-3 text-lg text-muted">{sub}</p>32      <button type="button" className="btn-primary mt-8">{cta}</button>33    </section>34  )35}

Seu projeto. Seu código.

Arquivos prontos pra abrir no seu computador, sem depender do Felix.

Um clique. Um link.

Publique quando quiser e compartilhe o resultado com seu cliente ou time.

Em breve

Você não precisacomeçar do zero

Escolha uma base e o Felix cria a partir dela. Navegue pelos nossos templates e escolha o que combina mais com o seu projeto.

Idealize&Descreva&Ajuste&Publique.

Sem plano pago publicado. Crie a conta, abra a Studio e gere. Cobrança quando o produto estiver pronto pra escala.

Criar conta

Perguntas frequentes

O essencial pra decidir se o Felix encaixa no seu fluxo — sem enrolação.

Landing pages e protótipos de app em React — com preview ao vivo na Studio. Você descreve o brief; o Felix monta o workspace e você itera no próprio resultado.