From Prompt to Prototype in 60 Seconds — With Your Own AI

Your AI + Our Canvas = Magic

You've heard the pitch: describe a UI, get a prototype. But here's what makes Playas different — you're using your own AI. Your Claude Pro subscription. Your ChatGPT Plus account. Your Cursor setup. Whatever AI you already pay for.

No credits to buy. No tokens to ration. Just your AI, talking directly to the Playas canvas.

Let's walk through it.

Step 1: Connect Your AI via MCP

First, sign up at Playas and create a project. You'll land in the editor with a blank canvas.

Now, connect your AI. Playas uses MCP (Model Context Protocol), an open standard that lets AI clients interact with external tools. Here's how to set it up:

For Claude Desktop: Open Claude Desktop settings, go to the MCP section, and add Playas as a server. Paste the connection URL from your Playas project settings. Done.

For ChatGPT: In ChatGPT's tool settings, add Playas as an MCP tool using your project's connection URL.

For Cursor / VS Code: Add the Playas MCP server to your editor's MCP configuration. Now your code editor's AI can design UIs too.

The connection takes 30 seconds. You do it once per project.

Step 2: Describe What You Want

Open your AI client — Claude Desktop, ChatGPT, Cursor, whatever you connected — and start talking.

Create a landing page for my SaaS product. Include a hero section with a headline, subtitle, and CTA button. Below that, a three-column feature grid with icons. Then a pricing section with three tiers.

Hit send. Your AI processes the prompt, calls Playas through MCP, and generates a node tree. Watch your Playas canvas — the design appears in real-time as the AI creates it.

Hero section. Feature grid. Pricing table. All with proper CSS flexbox layouts, responsive overrides, and real styling. In seconds.

That's it. You have a prototype.

Step 3: Iterate With Natural Language

Here's where the BYOAI model shines. Your AI has full conversational context. It remembers what it just created. So you iterate naturally:

Make the hero section taller with more whitespace. Change the CTA to a gradient purple button.

Your AI updates the existing design through Playas. No regeneration from scratch — it patches the specific nodes.

Add a testimonial section between features and pricing. Three cards with avatar, quote, and name.

New elements appear in the right place, without disturbing what's already there.

The pricing cards should highlight the middle tier. Make it slightly larger with a colored border and a "Most Popular" badge.

Targeted refinements. Your AI knows exactly which elements you mean because it created them moments ago.

The key insight: because you're using your own AI with its full conversational memory, iteration is seamless. Tools that wrap APIs start fresh with every prompt. Your Claude or ChatGPT carries the full context of your design conversation.

Step 4: Check Responsive Behavior

Switch to tablet or mobile view in Playas. Your design automatically adapts because Playas uses a single node tree with responsive overrides — real CSS breakpoints, not separate artboards.

If something needs adjustment, tell your AI:

On mobile, stack the feature grid into a single column and hide the pricing comparison table.

The AI applies overrides specifically for mobile. Your desktop design stays untouched. One tree, three breakpoints, zero duplication.

Step 5: Fine-Tune on the Canvas

AI gets you 90% of the way. For pixel-perfect adjustments, use the Playas editor directly.

Click any element to select it. The properties panel shows real CSS values — flexbox, padding, colors, typography. Adjust anything manually. Every change is tracked with full undo/redo.

You can even mix modes: adjust something manually, then go back to your AI and say "now add a footer below everything." The AI sees the current state of the design, including your manual changes.

What Just Happened (And What It Cost)

Let's break down what you just did:

Connected your AI to Playas via MCP (one-time setup, 30 seconds)
Described a landing page in natural language
Got a responsive prototype with real CSS layouts
Iterated through conversation
Fine-tuned on the canvas

Time elapsed: Under 60 seconds for the initial generation. A few minutes for iteration.

Cost from Playas: $0 in AI charges. Your $9/month subscription covers the canvas, rendering, and storage.

Cost from your AI: Whatever you're already paying. Your Claude Pro or ChatGPT Plus subscription that you'd pay for regardless. Zero incremental cost.

Compare that to any competitor: Bolt ($20-50/month in credits), v0 ($20/month in credits), Lovable ($25/month in credits). With Playas, you're designing with AI you already own.

Pro Tips for Better Results

Be structural, not visual. "A header with logo left, nav center, CTA right" beats "a nice-looking header." Give your AI layout intent.

Iterate in layers. Structure first ("create the layout"), then content ("add real copy"), then style ("make it more modern with a dark theme"). This mirrors how your AI thinks.

Use your AI's strengths. Claude is excellent at understanding complex layout hierarchies. ChatGPT is great at creative copy suggestions. Use whichever feels best for the current task — and switch anytime.

Reference the canvas. You can describe specific elements: "the third pricing card" or "the hero section's subtitle." Your AI can target them precisely through the MCP connection.

Don't ration your prompts. There are no Playas token limits. Ask for five different color schemes. Try three different layouts. Regenerate the whole thing and start over. Your Playas bill stays the same.

What You Can Build

Some ideas to get started:

A SaaS dashboard with sidebar, stats cards, and data tables
An e-commerce product page with gallery, pricing, and reviews
A mobile app onboarding flow
A landing page with hero, features, testimonials, and pricing
An admin panel with forms, tables, and navigation

Each takes a few prompts to generate and a few more to refine. Minutes, not hours.

Get Started

Your AI. Your canvas. Zero extra AI costs. This is what design feels like when the tool doesn't fight you — or charge you — for every generation.