Build a site
Describe a site, watch Ploof Studio write it, and keep talking until it’s right. This chapter covers the prompt bar, the preview, borrowing a look from a site you like, adding your own images, and keeping your projects in order.
One or two sentences is plenty. You can change anything after the first build. Say what the site is for, who it’s for, and anything you already know you want, such as a section, a mood, or a color.
- “A one-page site for Sunny Cups, a lemonade stand that caters summer parties. Bright, friendly, with a menu and a booking form.”
- “A portfolio for a wedding photographer in Lisbon. Quiet and editorial, with a gallery, an about page, and a contact page.”
- “An event page for a two-day design meetup in Kraków on 14 and 15 May, with the schedule, the speakers, and a ticket link.”
Press Enter to send. Shift Enter starts a new line. A message can be up to 20,000 characters, and a counter appears as you get close.
Ploof Studio answers in the chat and writes the site at the same time. Each new file streams in as a code card, and each change to an existing file shows as a diff card with the lines it removed and added.
- Written means the file or the change is saved in your project.
- Not applied means Ploof Studio couldn’t place that change, so the file stayed as it was. Ask again, or describe the change another way.
The preview reloads each time a reply that changed files finishes.
The preview sits to the right of the chat. Until the first page is saved, it says Preview lands here. The toolbar above it holds these controls.
- Desktop fills the pane. Mobile shows the site 390 pixels wide, the width of a phone. A pane narrower than 640 pixels opens on Mobile.
- Reload preview loads the page again.
- Point lets you select an element and say what to change. Point and edit covers it.
- Deploy, at the right end, puts the site online. Deploy your site covers it.
Drag the divider between the chat and the preview to resize them. With the divider focused, the arrow keys resize too, and Enter resets it. In a narrow window, a Chat and Preview switcher at the top shows one at a time.
Links in the preview that lead to other sites open in your browser.
Type a site’s address anywhere in your message, such as stripe.com or a full https:// address. It turns into a chip. Ploof Studio reads that site’s colors, fonts, corners, and layout, and designs yours in the same spirit. You can name up to three sites in one message.
The reply first shows Reading stripe.com, then a folded card. Open it to see what Ploof Studio took from the site: the color scheme, the palette with each value, the fonts and weights, the type scale, the corner radii, shadows, the styles of headings, text, and buttons, and an outline of the page.
If a site can’t be read, the reply says so and builds without it.
Attach photos, logos, or screenshots to any message, and Ploof Studio uses them in the site.
- Select Attach images, the paperclip in the prompt bar.
- Paste an image into the prompt bar.
- Drag images onto the prompt bar and drop them.
You can attach up to 10 images to a message, in PNG, JPEG, WebP, GIF, or AVIF. Ploof Studio redraws each one as WebP, at most 2000 pixels on the long edge and 3 MB, and saves it in the project under assets/images/, so every export carries it.
Every message after the first changes the site you have. Ask for anything in plain words, such as “Make the header sticky”, “Add a pricing section with three plans”, or “Write the About page in a warmer voice”. Ploof Studio edits only the parts that need to change.
To change one specific thing on the page, Point is quicker. You select the element and Ploof Studio knows exactly which one you mean.
The sidebar lists your projects under Projects. A spinner shows on a project while it’s replying. Press ⌘ B to show or hide the sidebar.
- New project, or ⌘ N, goes back to the home screen to start a new site.
- Search, or ⌘ K, opens a palette of your projects. Type to filter, use the arrow keys to move, and press Enter to open one.
Ploof Studio names each new project from your first message. You don’t need to name it yourself.
Delete a project
Hover over the project in the sidebar and select its delete button.
Confirm
Select Delete project. The project and its whole conversation are removed from this Mac, and this can’t be undone. A site you already published stays where you published it.
Stuck on something?
Write to us and a person reads it and replies.