AbstractPrisma
Learning Prisma Studio

Learn to turn ideas into software with AI

The Prisma Studio path teaches how to go from brief to app or site, visually edit, connect data and publish a functional experience.

Prisma Studio is the creation Studio in AbstractOS: it turns prompts into apps, sites and prototypes with AI, preview, visual editor, backend and publishing.

View path guidesOpen 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.

Moderno
CRM para vendas B2BSaaS de métricasMarketplace localAgenda com pagamentos

Créditos

1.240

Apps

6

Cota semanal

2/5

CRM Imobiliáriodrafthá 8 min
Finance Dashboardpublished/finance-pro
Agenda Clínicadraftontem

Learning Prisma Studio

What to learn first in Prisma Studio

Start by creating a simple experience, then learn editing, backend, preview, publishing and iteration.

AI planning

Turn a vague idea into requirements, scope and plan before generating the app.

Expected result: a AI planning flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn planning
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 and templates

Choose the right starting point for dashboards, landings, CRM, ecommerce and tools.

Expected result: a Starters and templates flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

AI App Builder

Describe the app and generate interface, components, states and initial logic.

Expected result: a AI App Builder flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

AI Site Builder

Create pages, landing pages and commercial experiences from a brief.

Expected result: a AI Site Builder flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

8
16
24
32

Tudo no editor. Sem código.

Visual editor

Select elements, adjust style, see responsiveness and refine the interface.

Expected result: a Visual editor flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn visual editor
Prisma Studio / Modo Designer
button
Comprar agora
button
DesignConteúdoAvançado
NormalHoverFoco

Cor

Espaçamento

12px
margin

History and branches

Test changes, review drafts and restore versions without losing the main app.

Expected result: a History and branches flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn versions
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 and data

Connect database, authentication, tables and permissions for apps with real data.

Expected result: a Supabase and data flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

Publishing and versions

Preview, adjust, publish, download or evolve the application in cycles.

Expected result: a Publishing and versions flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn publishing
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

24

Visitas

8

Propostas

3

Checklist visual

aprovando
Salvar projeto
Gerar build estática
Revisar preview
4Publicar link

Vercel deploy

Publish generated apps, configure variables and understand when to use external deployment.

Expected result: a Vercel deploy flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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
  1. Projeto Vercel
  2. Variáveis de ambiente
  3. Build do app
  4. Upload
  5. Deployaguardando

> installing dependencies

> vite build

✓ compiled successfully

uploading static assets...

Publicado em 54s

imob-crm.vercel.app

GitHub and versioning

Connect repository, commits and branches to take generated apps into the technical flow.

Expected result: a GitHub and versioning flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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 payments

Connect products, prices and checkout for apps that need sales or subscriptions.

Expected result: a Stripe payments flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

GitHub/ZIP export

Move generated code to technical review, versioning or external deploy.

Expected result: a GitHub/ZIP export flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn export
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

Create reusable instructions to guide AI on patterns, domains and recurring decisions.

Expected result: a Workspace Skills flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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 and external tools

Connect MCP-compatible clients and tools to operate Prisma with external context.

Expected result: a MCP and external tools flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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

Community and remix

Explore public templates, remix apps and adapt them to your own use case.

Expected result: a Community and remix flow applied to an app, site, integration, or publication path.

Use it when an idea needs to become navigable software with clear scope, data, versioning, integration, or deployment.

  • structure technical scope
  • validate before publishing
Learn 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.

Moderno
CRM para vendas B2BSaaS de métricasMarketplace localAgenda com pagamentos

Créditos

1.240

Apps

6

Cota semanal

2/5

CRM Imobiliáriodrafthá 8 min
Finance Dashboardpublished/finance-pro
Agenda Clínicadraftontem
Prisma animated mockup

Recommended learning flow

The animated mockup shows prompt, generation, preview, visual adjustment and publishing in Prisma Studio.

1

Write a clear brief

Define goal, user, pages, data and expected result before generating.

2

Generate the first version

Use the agent to create structure, interface and initial behavior.

3

Edit visually

Adjust layout, copy, colors and responsiveness with preview and inspector.

4

Publish and iterate

Turn the prototype into a functional URL and keep refining based on usage.

What is Prisma Studio for?

It creates apps, sites and prototypes with AI from natural language, with preview, visual editor and publishing.

Do I need to code?

Not to start. Prisma Studio is designed to turn a brief into a functional experience, while technical users can refine with more precision.

Does Prisma connect to the other Studios?

Yes. Apps and pages created in Prisma can support marketing, sales, internal operations and AbstractOS workflows.

AbstractOS

Start with the idea, not the code.

Use this path to structure a brief and Prisma Studio to turn it into navigable software.

View path guidesOpen Prisma Studio