Build Your First Site
The fastest way to see what Oxygen does is to have your agent build something real, then
change it yourself. One prompt gets you a finished page; a click gets you into it. Here is
the whole loop, start to finish.
1. Describe the site you want
Send your agent one prompt. Here's the one that built the site in this article:
> Build me a one-page website for an auto repair shop called Redline Auto Repair in Austin, Texas. Use stock photos, and follow the design guidance at https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
> Built and published Redline Auto Repair as your home page: a hero, the services you'd expect from a shop, an itemized estimate example, hours and directions, and a footer. I found five openly licensed photos, imported them into your media library and credited them in the footer. The address, phone number and hours are placeholders — give me the real ones and I'll swap them in. Everything on the page is real Oxygen elements, so you can open any of it in the builder.
Then leave it alone. A whole site is a big job — ours took about half an hour.
2. Look at what you got
Your agent set the page it built as your front page, so your site's home page is the
new site — open it and there it is.
To find the page itself, go to Pages in wp-admin. The page your agent created is in
the list; hover it and click View to see it on the front end, or Edit in Oxygen to
open it in the builder.
3. Change something by hand
Nothing your agent built is locked or generated code you can't touch. Every heading,
button and image on that page is a normal Oxygen element, so you can open the page in the
builder and change any of it by hand.
Open it with Edit in Oxygen — from the Pages list, or from the button in the WordPress
editor's toolbar. Once the builder loads, double-click any text to edit it in place,
and click any element to select it and see its settings in the panel on the right. That's
the whole basic gesture; Editor overview
covers the panels properly.
Try it on the phone number. Click it in the header. The panel on the right shows that element's
content — a Text field and a URL field. Type your real number into both, then
click Save.
4. Ask for the rest
That number is in four other places — the hero button, two buttons in the Visit section,
and the footer. Don't hunt for them:
> I changed the phone number in the header to (512) 555-0199 by hand in the
Oxygen builder. Update the rest of the page to match.
> Updated to (512) 555-0199 in the four remaining places: the hero button, the Call button in the Visit section, the "Text the shop" sms: link, and the footer phone. Your header edit came through with both the label and the tel: link changed, so nothing needed fixing there.
That's the whole loop
You have a real WordPress site — pages in Pages, photos in the Media Library,
elements you can open and restyle, all of it on your own hosting and your own database.
From here you talk to your agent for the big moves and open the builder for the details.
Neither one locks the other out.
Next:
- Manual edits — how the builder and
your agent share the same page. - One prompt, whole site — going
past a single page to headers, templates, and multiple pages. - Editor overview — the builder's panels,
once you want to do more than retype text.
Tips
Ask for stock photos
Use stock photos in the prompt is what gets you real photography instead of empty
frames. Ours found five openly licensed shots, imported them into the media library, and
credited them in the footer.
Point your agent at a design guide
The link in the prompt is a public design guide any agent can fetch, and it's the
difference between a generic AI layout and a page with a point of view.
Troubleshooting
Your agent's changes disappeared after you saved
If a builder tab was already open while your agent worked, that tab is still holding the
version of the page it loaded. Saving from it writes that older version back over
everything your agent changed in the meantime — including parts of the page you never
touched — and you don't get a warning.
Reload the builder tab (or close it) after your agent edits the page. If you've already
lost work, every save is kept: click the button in the builder's top-right
toolbar — third from the left in that cluster, just after Undo and Redo — choose
History, and switch to the Revisions tab. Your agent's saves are in that list
alongside your own, newest first.
Your agent doesn't have any Oxygen tools
Ask it to list the tools it has for this site. You're looking for names that start with
oxygen — oxygen-html-to-page, oxygen-edit-post, oxygen-set-home-page and friends
are what it builds with. If they aren't there, the connection is the problem, not the
prompt:
Connect your agent has the fixes.
The page isn't your home page
An agent normally sets the page it built as your front page. If yours didn't, go to
Settings → Reading, choose A static page, and pick the new page as Homepage.
The result isn't the site you had in mind
Say what's wrong in the same conversation rather than starting over. The agent still has
the whole page in context, and a follow-up — "the hero photo is too dark", "swap the
timeline section for testimonials" — edits the page you're already looking at instead of
building a second one.
The address and phone number are made up
They will be. An agent has no way to know your real hours, address, testimonials, or
prices, so it writes plausible placeholders to keep the design honest. Ours said so
unprompted. Give it the real details — paste them in and ask it to replace the
placeholders — before you show the site to anyone.