Short answer, be specific, build in layers, refine precisely #
Prompt craft is the skill of describing the end result clearly enough that BYOB does not have to guess. Traditional programming is imperative: you specify every step and bracket. AI-powered development is declarative: you describe what you want and the AI handles implementation. The barrier moves from syntax knowledge to clear explanation, which sounds easier until you try to explain a layout you have only ever felt.
Think of prompting as briefing a brilliant contractor who takes everything literally and never visits the site. Say build a wall and you get a wall, somewhere, of some material, at some height. Say build a garden wall three feet high in red brick along the north edge, with a cap row and a gap two feet wide at the east end, and you get your wall. The contractor was equally talented both times. Only the brief changed.
Every workflow follows the same loop: prompt, review, iterate. The getting-started guide (https://byob.studio/blog/getting-started-with-ai-development) centers this loop for a reason. Start with overall structure before details. Then refine with specific bounded requests, add behavior in plain language, and use real content. The AI also sees context beyond your message, including current files, project style, and previous chats, so it can resolve requests against actual components instead of imagined ones.
Why should you start with structure not polish? #
Start BYOB prompts with structure, not polish: list every required section first, because skipped sections are a coin flip while mentioned components are far more likely to appear. Scope: describe overall shape, such as a dashboard with sidebar navigation, charts area, and profile section, before colors or animations. Constraint: structure mistakes found after polish cost far more, since polish must be redone around every structural move.
Vague structure prompts produce generic output. The AI defaults to safe common patterns when information is missing, which is generous behavior that looks like mediocrity.
Instead of asking for a landing page, list every required section: hero with headline and email capture, feature cards, testimonials, pricing, and footer. Every component mentioned is a component you are more likely to receive. Skipped sections become a coin flip. OpenAI's prompt engineering guide (https://platform.openai.com/docs/guides/prompt-engineering) makes the same point from the model side: give reference material, state requirements explicitly, and the model stops improvising where you wanted decisions.
For a first build, describe overall shape first, such as a dashboard with sidebar navigation, main charts area, and profile section. Do not pick colors before walls exist. Get structure on screen, verify layout, then add animations, widgets, and polish. Structure mistakes found after polish cost ten times more, because polish must be redone around every structural move.
| Layer | What to state | Example detail | Why it helps |
|---|---|---|---|
| Structure | Sections and layout | Hero, pricing, grid, footer | Prevents missing pieces |
| Style | Visual direction | Theme colors and hover behavior | Aligns taste early |
| Content | Real copy | Headlines with true lengths | Fits layout to words |
| Behavior | Interaction | Modal and form success | Generates working logic |
How do you describe visual style with shared vocabulary? #
Describe visual style in BYOB with shared vocabulary: theme, color codes, gradient accents, glassmorphism effects, hover behavior, a familiar reference, and industry context. Scope: one clause of industry context sets fonts, restraint, spacing, and animation energy. Constraint: never ship the word nice without translation, and state responsive grid and navigation-collapse rules up front.
Nice means different things for different brands. Name direction explicitly, or the AI will spend your credits exploring taste you never asked about.
Use theme, color codes, gradient accents, effects such as glassmorphism, and hover behavior. Reference familiar products when useful: a clean hero with strong contrast and a floating product screenshot communicates typography, spacing, shadow, and mood without enumerating every property. Add industry context because it shapes hundreds of micro-decisions around fonts, color restraint, spacing, and animation energy. A fintech dashboard and a kindergarten site obey different physics, and one clause in your prompt sets the gravity.
Specify responsive behavior early. State grid behavior across desktop, tablet, and mobile, plus navigation collapse rules. Those few seconds of writing prevent later layout repair. Anthropic's docs (https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering) recommend the same front-loading: context, examples, and explicit instructions beat clever phrasing, and their prompt generator (https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/prompt-generator) exists because structured briefs outperform vibes.
How do you build in layers and use real content? #
Build complex BYOB apps in layers in 4 stages: basic structure first, then scroll animations, then pricing prominence, then extras such as widgets. Prerequisites: real headlines and body copy rather than placeholders. Constraint: one giant prompt forces too many simultaneous decisions whose inventions interact, so catch structural problems before polish compounds them.
Complex apps built in one giant prompt force too many simultaneous decisions. The model must invent structure, style, copy, and behavior at once, and inventions interact. Layered prompts work better because each layer constrains the next.
Ask for basic structure first. Then add scroll animations. Then make pricing more prominent. Then add extras such as a floating widget. Each step lets you catch structural problems before polish compounds them. Total effort is often lower than fixing a flawed single-shot generation, the way repainting one wall beats rebuilding a crooked house.
Use real headlines and realistic body copy rather than placeholders. Designs created around placeholder dimensions often break when real content arrives, because real words have awkward lengths and real hierarchies have opinions. Real content produces fitting layouts for actual word lengths. Write the headline first, even badly. A bad real headline teaches layout more than perfect lorem ipsum.
How do you describe behavior and give specific feedback? #
Static appearance is only half the request. Describe interactions: sticky headers that change after scrolling, cards that lift on hover, buttons with subtle animation, forms with success behavior. For logic, describe user experience directly, such as clicking a button opens a modal, submitting adds an item, and totals update. The AI generates the form, state handling, data update, and refresh from that description. Behavior described as experience converts cleanly. Behavior described as implementation second-guesses the builder.
When iterating, avoid vague judgments. Replace judgments with one observable change at a time: make the header smaller, change the primary button color, add padding to testimonials, or increase contrast between selected states. Precise feedback yields precise fixes. Vague feedback yields redecoration.
A practical prompt structure is Context, Instruction, and Artifact. Context sets who and what the situation is. Instruction states what to do. Artifact states expected format and constraints, including styling, browser behavior, and effects. You do not always need all three, but adding context usually fixes unexpected output, because most surprises come from the model assuming a different situation than yours.
Why should you ask for alternatives before over-refining? #
If direction is uncertain, do not endlessly refine one output. Five rounds of polish on a wrong direction produce a gleaming wrong thing. Ask for options with distinct constraints first, such as a minimal direction rich in whitespace, a product centered direction, and an editorial direction heavy on media. Generation is fast enough that exploring the space first often beats forcing one direction to work.
The first-app walkthrough (https://byob.studio/blog/building-first-app-with-byob) demonstrates this rhythm in miniature: build, look, steer. The consistent habit across the BYOB guides is simple. Provide purpose, structure, style, behavior, and content up front. Review against something visible. Break complex work into steps. Refine with exact language.
Try it: AI Website Prompt Builder
Try it on your current project today. Rewrite your vaguest recent prompt with structure, style, behavior, and real content spelled out, run it in a fresh session, and compare the first draft against the last round of refinements. Write your next prompt like a brief to a literal-minded genius, because that is exactly who is reading. Keep one running note of prompts that worked. Patterns repeat across projects, and a personal library of briefs beats reinventing structure every time. Save the winners.
What are the trade-offs? #
Structure first, layers next, real copy throughout: sections named, style in shared vocabulary, behavior described, alternatives before polish.
| Where craft wins | Where it loses |
|---|---|
| Closer first drafts with fewer credit burning reprompts | Throwaway sketches where generic output is fine waste the discipline |
| Layered prompts constrain each next choice | Uncertain direction needs distinct options before any refinement |
| Specific feedback fixes in one turn | Endless polish on a wrong direction just gilds it |
Pick a rough single prompt for sketches. Pick craft for work that ships.
Who this is for (and who should skip it) #
Prompt craft in BYOB fits writers of briefs who want structure first, then style and behavior in layers with real copy. Skip heavy craft for throwaway sketches where generic output is fine. Limit: vague asks force guesses across structure and style, while one giant prompt forces too many linked decisions at once.
This fits if you write briefs for BYOB and want structure first, then style and behavior in layers with real copy. Specific prompts turn guesswork into a closer first draft.
Skip heavy craft for a throwaway sketch where generic output is fine. Save the discipline for work that must ship.
One limit to know. Vague asks force guesses across structure and style, while one giant prompt forces too many linked decisions at once. Use real headlines and build in layers, or polish compounds structural mistakes.
- Best for beginners writing specific layered prompts with real content instead of vague asks.
- Best for freelancers describing structure first then behavior to get closer first drafts.
- Best for small business owners iterating with bounded follow-ups that fix one thing at a time.
What we learned building this #
Prompt craft in BYOB is supported by built-in prompt structure plus the website prompt builder tool. The builder reads your goal and the current project style held in the session, so specific structure and real content yield a closer first draft. Layered prompts with one clear objective per turn reduce reruns and keep credit use focused.
