Learning Prisma Studio

Aprenda a transformar ideias em software com IA

A trilha de Prisma Studio ensina como sair de briefing, gerar app ou site, editar visualmente, conectar dados e publicar uma experiência funcional.

O Prisma Studio é o Studio de criação do AbstractOS: ele transforma comandos em apps, sites e protótipos com IA, preview, editor visual, backend e publicação.

Ver guias da trilha Abrir Prisma Studio

Prisma StudioFluxo pronto

Prisma Studio

Olá, vamos transformar uma ideia em app, site ou protótipo funcional.

Crie um app de gestão de propostas com CRM, pipeline, checkout e área do cliente.

Modernoclaro

CRM para vendas B2BSaaS de métricasMarketplace localAgenda com pagamentos

Créditos

1.240

Apps

Cota semanal

2/5

CRM Imobiliáriodrafthá 8 min

Finance Dashboardpublished/finance-pro

Agenda Clínicadraftontem

Learning Prisma Studio

O que aprender primeiro no Prisma Studio

Comece criando uma experiência simples, depois aprenda editor, backend, preview, publicação e iteração.

Planejamento IA

Transforme ideia vaga em requisitos, escopo e plano antes de gerar o app.

Resultado esperado: um fluxo de Planejamento IA aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender planejamento

App PlanningBlueprint gerado

Template: SaaS AnalyticsBlueprintEstratégiaCusto 10 · Saldo 1.240

Launchpad Chat

Selecione um template ou site

O chat usa o contexto escolhido para montar o plano.

Pergunte sobre escopo...

Roadmap

Nenhum roadmap gerado

Clique em gerar blueprint para receber tarefas de execução.

Starters e templates

Escolha o ponto de partida certo para dashboard, landing, CRM, ecommerce e ferramentas.

Resultado esperado: um fluxo de Starters e templates aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender templates

Template PickerTemplate selecionado

TemplateGallery37 starters

TodosSaaS / AdminE-commerceMarketingProdutividadeComunidadeNegócios

✦

Começar em branco

Projeto vazio com App.tsx, Tailwind e preview

Modelos recomendados

Minimal

Dashboard Financeiro

SaaS / Admin

24 arquivos

Vibrant

CRM de Vendas

SaaS / Admin

31 arquivos

Minimal

Agenda e Booking

Produtividade

22 arquivos

Dark Pro

Inbox Helpdesk

Produtividade

28 arquivos

rolar galeria

Resumo do blueprint

selecionado

matchCriteriaCRM com funil, contatos e permissões

themeHintvibrant-colorful

base files31 arquivos copiados

App Builder com IA

Descreva o app, gere interface, componentes, estados e lógica inicial.

Resultado esperado: um fluxo de App Builder com IA aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender app builder

Publicar

ChatLinha do tempoArquivos

Um painel de finanças com gráfico e metas.

Prisma · Gemini

Descreva o aplicativo que deseja criar…

Pré-visualizaçãofinancas.abstract.app

Finanças

Saldo total

R$ 12.480

Receita

+18%

Metas

3/5

Nova meta

Site Builder com IA

Crie páginas, landing pages e experiências comerciais a partir de briefing.

Resultado esperado: um fluxo de Site Builder com IA aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender site builder

Editor visual · meu-site

Publicar

studiobella.com

SBStudio Bella

SobreServiçosContato

Beleza pra você se sentir bem.

Cortes, finalização e cuidado para um look que dura a semana toda.

Agendar agora →Mais de 200 clientes

Nada selecionado

Cor

Tamanho

28px

Espaçamento

Tudo no editor. Sem código.

Editor visual

Selecione elementos, ajuste estilo, veja responsividade e refine a interface.

Resultado esperado: um fluxo de Editor visual aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender editor visual

Prisma Studio / Modo Designer

button

Comprar agora

button

DesignConteúdoAvançado

NormalHoverFoco

Cor

Espaçamento

12px

margin

Histórico e branches

Teste mudanças, revise drafts e restaure versões sem perder o app principal.

Resultado esperado: um fluxo de Histórico e branches aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender versões

BranchesDiff revisado

3 versões

agoraGPT-4.1+184 -32

Adicionar checkout Stripe ao pricing

18minGemini+42 -11

Corrigir roles no Supabase adapter

1hPrisma+620

Primeiro preview navegável

Files changed+184 -32

components/Pricing.tsx

+82 -12

lib/stripe.ts

+64 -0

app/api/webhooks/route.ts

+38 -20

components/Pricing.tsx

- button label="Assinar"

+ checkout = await stripe.session()

+ Badge plano Pro

@@ webhook route conectado

Supabase e dados

Conecte banco, autenticação, tabelas e permissões para apps com dados reais.

Resultado esperado: um fluxo de Supabase e dados aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender Supabase

Supabase ConnectRead/write ok

Supabase

Conecte por OAuth para gerar migrations e backend real automaticamente.

Use sua conta Supabase. Nada é colado manualmente.

Escolher existenteCriar novo

OAuth

abstract-crm-prod

xbrlqjyw

sa-east-1

finance-demo

pavmseoa

us-east-1

site-leads

qzleadmn

eu-west-1

Publicação e versões

Pré-visualize, ajuste, publique, baixe ou evolua a aplicação em ciclos.

Resultado esperado: um fluxo de Publicação e versões aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender publicação

Publish ChecklistRelease pronto

Publicar

Publicar aplicativo

Arquivos salvos

snapshot atual

Build estática

CDN bundle

Preview final

fluxo revisado

Link público

imob-crm

Preview finalimob-crm

Imob CRM

build estática

Leads

Visitas

Propostas

Checklist visual

aprovando

Salvar projeto

Gerar build estática

Revisar preview

4Publicar link

Deploy na Vercel

Publique apps gerados, configure variáveis e entenda quando usar deploy externo.

Resultado esperado: um fluxo de Deploy na Vercel aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender Vercel

Vercel DeployDeployment ready

Vercel

Publique direto na sua conta. Env vars Supabase entram automaticamente.

Avançado

Conectar Vercel

OAuth, sem PAT manual.

Conta conectada

target: production

DeployProgress

SSE

Projeto Vercel
Variáveis de ambiente
Build do app
Upload
Deployaguardando

> installing dependencies

> vite build

✓ compiled successfully

uploading static assets...

Publicado em 54s

imob-crm.vercel.app

GitHub e versionamento

Conecte repositório, commits e branches para levar apps gerados ao fluxo técnico.

Resultado esperado: um fluxo de GitHub e versionamento aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender GitHub

GitHub ConnectAutorizando

GitHub

Publique e sincronize o app direto no repositorio certo do Prisma Studio.

Avancado

Conectar GitHub

OAuth via AbstractOS, sem token colado manualmente.

Retorno ao Studio

connected

OAuth seguro

sem PAT manual

Conta GitHub

vinixnc

Repositorios

listar e vincular

github_link.status = connected

owner: vinixnc

next: escolher repositorio

Stripe e pagamentos

Conecte produtos, preços e checkout para apps que precisam vender ou cobrar assinaturas.

Resultado esperado: um fluxo de Stripe e pagamentos aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender Stripe

Stripe ConnectConta conectada

Stripe

Conecte sua conta para vender assinaturas, liberar acesso e testar checkout.

Connect

Conectar Stripe

A primeira conexão entra em modo test para validar sem cobrar clientes.

Conta conectada

test

Account ID

acct_1PrismaTest

Modo

test

Webhook

aguardando evento

Export GitHub/ZIP

Leve o código gerado para revisão técnica, versionamento ou deploy externo.

Resultado esperado: um fluxo de Export GitHub/ZIP aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender exportação

Export Center48 arquivos

Arquivos do app

48 files

src/App.tsx

12 KB

src/pages/Dashboard.tsx

18 KB

package.json

deps

.env.example

4 vars

README.md

setup

Checklist de exportacao

Build atual

pnpm run build

Segredos fora

.env.example

README pronto

setup local

export target: github | zip

include: src, package.json, README.md, .env.example

Workspace Skills

Crie instruções reutilizáveis para orientar a IA em padrões, domínios e decisões recorrentes.

Resultado esperado: um fluxo de Workspace Skills aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender skills

Workspace Skills3 skills ativas

Workspace Skills

top 3 max

CRUD SaaS

workspace

crud, dashboard128 usos

Landing conversao

project

landing, oferta74 usos

LGPD forms

workspace

consentimento22 usos

Filtros reais

enabled

true

scope

project/workspace

trigger_keywords

obrigatorio

MCP e ferramentas externas

Conecte clientes e ferramentas compatíveis com MCP para operar o Prisma com contexto externo.

Resultado esperado: um fluxo de MCP e ferramentas externas aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender MCP

MCP ServerServidor conectado

MCP Server

Conecte um servidor que expõe tools e dados para a IA do AbstractOS.

Protocolo

URL do servidor

https://mcp.empresa.com/sse

Credencial

token criptografado

Escopo exposto

tools definidas no servidor

Tools descobertas

8 tools

list_customers

read

create_ticket

write

query_orders

read

delete_user

blocked

Comunidade e remix

Explore templates públicos, remixe apps e adapte para seu próprio caso de uso.

Resultado esperado: um fluxo de Comunidade e remix aplicado a um app, site, integração ou publicação.

Use quando uma ideia precisa virar software navegável com escopo, dados, versão, integração ou deploy bem definidos.

estruturar escopo técnico
validar antes de publicar

Aprender remix

Community Showcase24 templates

Comunidade Prisma

RecentesPopulares120 apps

SaaS CRM

popular18 remixes

Agenda Pro

recent9 remixes

Portal LMS

education12 remixes

Finance Ops

dashboard7 remixes

Prisma StudioFluxo pronto

Prisma Studio

Olá, vamos transformar uma ideia em app, site ou protótipo funcional.

Crie um app de gestão de propostas com CRM, pipeline, checkout e área do cliente.

Modernoclaro

CRM para vendas B2BSaaS de métricasMarketplace localAgenda com pagamentos

Créditos

1.240

Apps

Cota semanal

2/5

CRM Imobiliáriodrafthá 8 min

Finance Dashboardpublished/finance-pro

Agenda Clínicadraftontem

Mockup animado de Prisma

Fluxo recomendado de aprendizado

O mockup animado mostra prompt, geração, preview, ajuste visual e publicação no fluxo do Prisma Studio.

Escreva um briefing claro

Defina objetivo, usuário, páginas, dados e resultado esperado antes de gerar.

Gere a primeira versão

Use o agente para criar estrutura, interface e comportamento inicial.

Edite visualmente

Ajuste layout, copy, cores e responsividade com preview e inspector.

Publique e itere

Transforme o protótipo em URL funcional e continue refinando com base no uso.

Para que serve o Prisma Studio?

Ele serve para criar apps, sites e protótipos com IA a partir de linguagem natural, com preview, editor visual e publicação.

Preciso saber programar?

Não para começar. O Prisma Studio foi pensado para transformar briefing em experiência funcional, mas usuários técnicos também podem refinar com mais precisão.

O Prisma se conecta aos outros Studios?

Sim. Apps e páginas criadas no Prisma podem apoiar marketing, vendas, operação interna e fluxos do AbstractOS.

AbstractOS

Comece pela ideia, não pelo código.

Use a trilha para estruturar um briefing e o Prisma Studio para transformar esse briefing em software navegável.

Ver guias da trilha Abrir Prisma Studio