A MESSAGE FROM OUR SPONSOR
This paid post was made free for you by Granola, the AI notepad for back-to-back meetings. Upgrade to an annual paid Wonder Tools subscription to claim 4 months free on Granola’s business plan (10 seats, $560 in value).
ChatGPT Sites is one of the best new tools I've tried for making simple websites. I once spent hours drafting HTML by hand. I struggled with complex site-building software called Dreamweaver. Now making a good-looking site is as easy as creating a Google Doc.
Describe what you’re envisioning in a few sentences. Upload images or screenshots if you have a design in mind. Explain any special functionality you want, like linked buttons, embedded visuals, or interactive elements. ChatGPT Sites is in public beta and available for ChatGPT Plus, Pro, Business, Enterprise, and Edu plans.
To experiment this week, I made a companion guide for this post with ChatGPT Sites. Try it. I also created a new feedback page. Add your private input about this or any other Wonder Tools post. Read on for more examples of ChatGPT Sites, tips, caveats, and alternatives.
What I’ve Made with ChatGPT Sites 💬
Given that I have no coding skills, I’ve been surprised that each site I’ve envisioned with ChatGPT has turned out better than I expected. Some examples:
Wonder Tools Sponsorship Page A simple media kit page for potential advertisers.
What I’m Reading A quick page to share a few books I’m reading.
A Beginner’s Guide to MCP Why and how to link your tools to AI. This handout supplemented my newsletter post.
Music Lab A collection of music theory mini games for my daughters. You can try them too.
Wonder Tools Book Group. I made this landing page to share the list of books we’re discussing in our first season. (It’s a live online discussion group for paid subscribers.) Based on a background doc and context I shared, ChatGPT found and added cover thumbnails accurately. I prefer this site to the prior version I created with Claude Artifacts.
Notable Landing Pages Others Have Built
A guide to events in San Francisco. This looks much nicer than a typical Google Doc listing stuff to do during a visit.
A storefront for picnic supplies. A modern online store that lets you drag items into a basket. See the prompt and iterations.
A marketing campaign page for ChatGPT Work with embedded social posts.
An announcement that ChatGPT Sites is available in Europe.
Interesting Interactives
An art making tool called GoalFlow. Choose a country’s flag and “paint” a new version with its colors on a fluid-simulation canvas. The paint swirls and drifts like pigment in water. Made by artist Drue Kataoka.
A music collection with embedded tracks. This one celebrates Andrew Ambrosino’s batch of tracks about slop.
Games
Glass Towers. A jenga-like game with realistic physics. See the prompt and iterations used to build it.
Paper Glider. A simple arcade game where you guide a paper airplane through hoops. See the prompt and iterations.
Arcade Archive. A playable collection of 8 classic video games.
See OpenAI’s site gallery for more examples.
How to Make the Most of ChatGPT Sites
Get started. Select the Sites mode in ChatGPT. (Screenshot)
Specify your goal. Describe a landing page, dashboard, guide, or app you want to build. Tip: mention who it’s for. That will help shape the interface.
Add context. If you’re working within a ChatGPT Project, it will already have relevant context. It may have your style guide, logos, mission statement, and other files. If not, consider uploading whatever is relevant.
Provide visual guidance. Note preferences you have for style, colors, fonts, or imagery. Consider adding reference images or screenshots of sites whose design you like. Tip: Tell ChatGPT to ask you questions before finalizing its approach. That helps you steer the plan.
Draw something if you want. If you have a mockup in mind you can draw on paper, snap a photo of it and upload it as part of your query.
Give feedback. As soon as ChatGPT gives you its first draft, reply with comments about what you’d like to change. Use the annotate tool in the sidebar to mark specific parts of the site to fix. Note where you want a color or font to be changed, a different image, or revised text.
Publish and share. When your site is ready, publish the link to share it with others. Or keep it private if it’s a personal resource.
Pick a Project to Try
Make a new landing page or portfolio. If you don’t have a page showcasing your work, build one so people so people can learn more.
Make a community resource. Create a guide or topic overview based on your own insight or research. Share resources with students, friends, or the public.
Make a useful app for yourself. Address your own need. I made a private app to map out what I’m working on, pegged to publishing dates.
Make a game. Create something to make learning fun, or remake an old arcade/trivia title you loved. Customize its design and features so it’s distinct.
Caveats
It’s not yet available on free ChatGPT plans.
If you use ChatGPT Sites heavily, you might hit a beta limit at some point. That will temporarily prevent you from creating new Sites or keeping high-usage Sites publicly available. I haven’t encountered that limit yet.
Sites don’t appear instantaneously. Depending on the complexity of what you’re building, expect to wait 10 or 15 minutes after submitting a prompt for your site to be ready.
Help resources are limited. For more guidance, the OpenAI Academy has a few skills workshop recordings. Or watch this helpful video by Paul Lipsky.
Alternatives
I used Tilda years ago to make my own personal site. It has excellent templates and gives you more manual control than any AI-first tool. It’s modular: swap in and adapt sections of your site without building from scratch. I wrote about it in the early days of this newsletter.
Lovable and Bolt are AI-first tools designed specifically for building sites. They’ve gotten easier to use and more flexible since I first wrote about vibe coding sites in 2024. If you’re already paying for ChatGPT, you may not need these other subscriptions since you can now build with ChatGPT Sites.
Claude can make professional, interactive sites with Artifacts and Claude Design. It’s a superb choice if you’ve already provided Claude with deep context about your work and if you have a paid account. I’ve made lots of simple sites with Claude, and continue to use it alongside ChatGPT Sites.
I wonder if any of these tools take into consideration digital accessibility (specifically WCAG) when generating HTML output. This is a big issue that we see with vibe-coded websites (remember MySpace?), where fonts are too small, there are contrast issues, the code itself is not assistive-technology ready, etc.
Ah, Dreamweaver. And to think we once thought that Dreamweaver simplified website creation. A question for you, Jeremy: Do the sites created by Claude Artifacts and ChatGPT Sites live on the company subdomains, or do users need to provide custom domains that they pay for?