What the studio is
- A gallery of every landing page, prototype and tool the team makes.
- A permanent link for every item, so anyone can open it on any device.
- On-brand by default. Every page uses the Properstar kit: Puzzle colors, Inter, PLZ buttons.
- Built by describing. You tell Claude Code what you want. It writes the page.
The words you need
| Word | What it means | Like in design tools |
|---|---|---|
| Repo | A folder that remembers every change | A Figma file with version history |
| GitHub | Where the repo lives online | Google Drive |
| Commit | Save a snapshot with a short note | Save version |
| Push / Pull | Send your changes up / get everyone else's | Upload / sync |
| Cloudflare Pages | Turns the repo into a live site on every push | Share prototype link |
| CLAUDE.md | The rulebook Claude reads every time | Brand guidelines for your assistant |
| Kit | Brand colors, fonts and components as code | A component library |
| Shell | A ready-made layout to start from | A template frame |
Get set up (once, about 20 minutes)
- Ask the studio admin to add you to the GitHub repo.
- Install Claude Code (the Claude desktop app works) and GitHub Desktop.
- In GitHub Desktop, choose Clone repository and pick
properstar-studio. - Open that folder in Claude Code and say:
Set me up in the studio. My name is Jane Doe. Turn on the folder guard for me.
Publish your first page
- In Claude Code, describe what you want:
Start a new WordPress page called spring-sale for me. It's for owners in Spain who want to sell to buyers abroad. Hero, three benefits, how it works, FAQ.
For a product screen, say so: "Start a product prototype called saved-search-alerts from the portal home shell."
- Preview it: ask Claude to "run the studio", then open the link it gives you.
- Change anything by saying it: "Make the hero shorter", "Swap benefits two and three".
- When you're happy: in GitHub Desktop, write a short note, click Commit, then Push.
- About a minute later your page is in the gallery with its own link.
From prototype to live page
- Share the link with whoever needs to see it and collect feedback.
- Make the changes by describing them to Claude, then push again. The link stays the same.
- When it's approved, ask Claude to "mark this page as done" and push.
- Send the approved link to the dev team. That's your last step.
You don't write anything else for the developers. Every page in the gallery has a Developer notes link that lists its blocks, headings, copy and buttons automatically, so they can build it in WordPress or in the product.
Website or product?
Website pages come in two kinds. WordPress pages, like About and Press, are the new standard: they sit inside the portal and are built from WordPress blocks. Dashboard pages, like the agency, franchise and pricing pages, are the older marketing pages with illustrations and big headlines. New website pages start as WordPress pages unless you ask for a dashboard page. When a page is approved, open Handoff notes and copy the block list into the ticket.
Product prototypes are screens of the Properstar app and portal: search, listings, favorites, messages. They use the Puzzle components the product team already builds with.
House rules
- Only change your own folder. Want something changed in someone else's page? Ask them.
- Keep each item self-contained: its own images, its own copy of the kit.
- No real customer data, ever. Anyone with the link can see it.
- Pull before you push.
- Keep the description and changelog current so the gallery stays useful.
- Use the kit and shells. On-brand by default.
- No invented numbers. Use approved stats or mark them as samples.
When something goes wrong
| You see | What it means | What to do |
|---|---|---|
| "Rejected, fetch first" | Someone pushed while you were working | Fetch, then Pull, then Push again |
| "Push blocked: would delete files outside your folder" | The folder guard caught a deletion | Ask Claude to restore the files. If it was on purpose, ask the admin |
| Page missing from the gallery | Missing prototype.json, a typo in it, or the deploy isn't done | Wait two minutes and refresh. Still missing? Ask Claude to check the item |
| Page looks unstyled | The kit isn't in the item's assets/kit/ | Ask Claude to copy the kit and fix the links |
| Anything else | Paste the message into Claude Code and ask it to explain and fix it |
Good fit, and not
Build it here: landing pages, clickable flows, motion and interactions, reusable sections, review links.
Keep in Figma or Adobe: one-off illustrations, photo retouching, print, early sketches and moodboards.
The rule: if it repeats, build it in the studio.