Rayvotech Tools
Build with AI
Topics & Navigation

Starting from Your First Prompt

Master prompt structure to generate precise, production-ready websites and software without back-and-forth ambiguity.

The 4-Part Prompt Anatomy

The quality of your initial generated application depends directly on the structure of your prompt. Top creators follow this 4-part formula:

1. Context & Business Domain

Specify who the project is for (e.g. "A boutique intellectual property law firm based in London").

2. Core Pages & Layout Structure

List required sections (e.g. "Hero with consultation booking CTA, practice areas grid, attorney bios, case results, and FAQ").

3. Visual Aesthetics & Design Direction

Define colors and tone (e.g. "Editorial minimalism, navy and warm ivory palette, refined serif typography, high-contrast borders").

4. Functional Interactions

Define interactive requirements (e.g. "Interactive consultation fee calculator, date picker for booking, and contact form").

Production Prompt Examples

Example A — E-Commerce Storefront
"Build a modern e-commerce storefront for an artisanal Japanese tea brand. Dark minimalist theme with slate background and matcha-accented details. Include an interactive product catalog with origin filters (Kyoto, Shizuoka), tasting notes pills, quantity selector, slide-over shopping cart drawer, customer review stars, and a checkout page."
Example B — SaaS Customer Dashboard
"Create a multi-tenant SaaS dashboard for API analytics. Include dark mode layout, sidebar navigation (Overview, Endpoints, Latency, Billing, Settings). Top stats row showing total requests, error rate, average latency (ms), and monthly bill. Main section should display an interactive hourly request volume chart and a filterable log table with HTTP status code pills."

Common Pitfalls to Avoid

• Overly vague prompts: Prompting simply "Make a website" forces the AI to guess your industry and aesthetic. Always specify your domain.

• Micromanaging CSS px values upfront: Start with structural intent. Refine pixel-level spacing in secondary refinement turns.

← Previous Building a Website & Landing Page Next → Migrating an Existing Project
No documentation found for ""
Type a keyword like database, custom domain, SDK, or prompting.