Build Your First Project
This walkthrough follows one project from an initial idea to a published site. It uses the same loop as the Quickstart, but shows it as a concrete example so you can see what each decision looks like in practice.
The example: a website for a customer research service, with service packages and a way for visitors to book a call.
1. Start with a clear outcome
Section titled “1. Start with a clear outcome”On Home, describe the result you want. You do not need a full product brief; start with the outcome, audience, and primary action.
Create a website for a customer research service. Explain the offer, show three service packages, and help visitors book a call.
Press Send. Castaly creates a Project, gives it a working name, and opens the Project workspace.
2. Answer the product questions
Section titled “2. Answer the product questions”Castaly reads your request in Chat and starts forming the first version of the Project Spec. If a product decision changes what should be built, it asks before writing it in.
For this project, Castaly might ask:
Should the “Book a call” action open a scheduling link, or collect details in a form first?
Answer naturally. A short reply is enough:
Use a form first, then show scheduling after submission.
Your answer becomes part of the product definition. Castaly uses it to update the Spec and the Graph.
3. Review the Graph and Spec
Section titled “3. Review the Graph and Spec”When the first pass is ready, open the Graph. It shows the structure Castaly understood: pages, feature groups, and features.
For this project, the Graph might include a Home page with features such as Hero, Service packages, Proof, and Booking flow. New nodes are marked so you can quickly see what Castaly just added.
Use the Spec when you want the exact source of truth: page goals, content requirements, flows, and rules. If something is missing or too broad, refine it in Chat:
- “Make the three packages easier to compare.”
- “Speak to startup founders, not enterprise buyers.”
- “Add a short proof section before the call to action.”
Each refinement updates the Spec before any code is generated.
4. Approve the Build Plan
Section titled “4. Approve the Build Plan”When the structure matches your intent, press Build. Castaly validates the current Spec and creates a Build Plan in Chat.
The Build Plan is generated from the Spec. It shows what Castaly will implement before execution begins, so you can confirm the scope or keep editing first.
Press Accept to start the build.
Code changes only begin after you approve the Build Plan.
5. Test the Preview
Section titled “5. Test the Preview”When the build finishes, the Project reaches Preview ready. Open the Preview tab and use the site like a visitor would.
For this example, check the main path:
- the offer is clear from the first screen
- the packages are easy to compare
- the booking flow asks for the right information
- the page feels credible enough to share
If something is off, send feedback in Chat. When possible, use Inspect in Preview to point at the exact element. Castaly can then fold the feedback back into the Spec, and you can build again from the updated definition.
6. Publish the first version
Section titled “6. Publish the first version”When the Preview matches your intent, press Publish. Castaly creates a Project Version from the reviewed Spec and code.
That published version is stable and shareable. The Project remains open, so the next improvement follows the same loop: refine the Spec, approve a Build Plan, test the Preview, and publish the next version.
What to explore next
Section titled “What to explore next”- Learn what happens when you start implementation in Start a Build.
- See how to test and inspect the result in Preview Your Project.
- Understand Project Versions in Publish Your Project.