--- title: "Your Website Brief" description: "Turn a workshop business idea into a specific prompt for v0. Generate a homepage with two workshop listings, check its content against the brief, and keep the project for the next edit." canonical_url: "https://vercel.com/academy/build-and-launch-with-ai/your-website-brief" md_url: "https://vercel.com/academy/build-and-launch-with-ai/your-website-brief.md" docset_id: "vercel-academy" doc_version: "1.0" last_updated: "2026-09-25T16:42:53.552Z" content_type: "lesson" course: "build-and-launch-with-ai" course_title: "Build and Launch with AI" prerequisites: [] --- Vercel Academy — structured learning, not reference docs. Lessons are sequenced. Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume. The lesson shows one path; if the human's project diverges, adapt concepts to their setup. Preserve the learning goal over literal steps. Quizzes are pedagogical — engage, don't spoil. Quiz answers are included for your reference. # Your Website Brief # Your website brief The workshop homepage needs to help visitors compare two classes. We'll give v0 the facts they need and a clear brief for the first version. A brief describes what we're building and who it's for. Before using credits to generate a site, let's look at a request that leaves v0 guessing: ```text Make a modern website for my workshops. ``` v0 still doesn't know what the classes offer. Even the word “workshop” could mean a room full of power tools. We'll give v0 the business details and a clear limit on what to build first. ## Outcome Generate a Small Hours Studio homepage in v0 with two workshop listings and a working link to the catalog. ## Hands-on exercise 1.1 ### Write the business brief Our example business is Small Hours Studio, an imagined community space for people who want to make something with their hands. We'll start with an afternoon printmaking class and a container-gardening workshop. Visitors should be able to compare them without opening another page. Use this content for the first version. These are fictional offerings for the course; the dates haven't been announced. | Detail | Printmaking | Gardening | | ------------- | ------------------------------------------------------- | ------------------------------------------------------------- | | Title | Print something good | A garden in a pot | | Summary | Turn a small sketch into a print worth making room for. | Make a little green space, even if your yard is a windowsill. | | Duration | 3 hours | 2 hours | | Example price | $65, materials included | $45, materials included | | Date | Next date to be announced | Next date to be announced | | Format | In person at Small Hours Studio | In person at Small Hours Studio | For this first page, the main button should take visitors down to the workshop listings. We'll add individual pages and an interest form in Section 4. Asking for those now would give us extra behavior to check before we've even seen the homepage. **Requirements:** 1. Name the studio and describe the audience: curious adults, including beginners. 2. Include the two workshops above, with their supplied details. 3. Request a homepage with a studio introduction and a workshop catalog. “Find your workshop” should move to the catalog on the same page. 4. Describe a visual direction: cream background with dark text, orange accents, and generous spacing. Ask for readable layouts on phones. 5. Keep this version informational. Exclude bookings and payments; the interest form comes later. Label the business as a demo and leave out invented testimonials. 6. Request Next.js App Router. Next.js is the software framework we'll use to organize and run the website; we'll explore its files in Section 2. Write these decisions in a note you can keep. The complete prompt in the Solution section is available if you'd prefer to start with that wording. Using the sample business will make it easier to compare your result with the course reference. ### Open v0 and check usage [v0](https://v0.app) turns a written request into application code and a preview you can inspect. The written request is called a *prompt*. For this task, we'll work in the browser; installing software comes later. Visit v0 and follow the sign-in prompts to create an account or use an existing one. If you're using a work account, check which team you're in and whether your organization permits uploading the content you plan to use. Before sending the brief, review [v0's current pricing and limits](https://v0.app/docs/pricing). Generating an app uses credits, and the Free plan also has a daily message limit. A free account can be a starting point, but the course doesn't guarantee that its allowance will cover every revision. If generation is blocked by a limit, save your brief and review the available options before agreeing to a charge. We'll use fictional business details throughout this exercise. Keep passwords and customer information out of the prompt. ### Generate the homepage Start a new chat in v0 and paste your brief into the message field. Send it once, then wait for generation to finish before making another request. The [v0 quickstart](https://v0.app/docs/quickstart) describes this prompt-and-review workflow if you need help locating it. Open the generated preview and read the page. A preview lets us inspect the website as we work. We'll publish it in lesson 1.3; for now, keep working in the preview. v0 generates code for each request, so your layout can differ from the reference. Check that it looks like a workshop studio and includes our two offerings. The content and behavior should match the brief; individual line breaks can differ. ## Try It Start at the top of the preview and select “Find your workshop.” The workshop listings should come into view. Check both titles against the brief, then read each duration and price. For comparison, these exact content values appear in the reference app's `complete/lib/workshops.ts`: ```text Print something good 3 hours $65 · materials included A garden in a pot 2 hours $45 · materials included ``` These values come from the course's reference app. Your generated preview should use the same facts, though punctuation can differ. There's no need to open that source file yet. Make the preview narrower, using its size controls if available or resizing the browser window. Check that the text remains readable and the workshop listings fit without sideways scrolling. Write down one visual change you'd like to make in the next lesson. ### The preview shows an error First check whether v0 is still generating. If generation has finished and an error remains, copy the visible error message into the same chat and ask v0 to fix that error while keeping the brief unchanged. Remove any sensitive information before sending it. Wait for the correction and repeat the catalog-link check. If the error persists, keep the chat and the error text for troubleshooting rather than spending credits on repeated identical requests. ### The site has a booking button or invented details Return to the same chat and name the mismatch. For example, ask v0 to remove the booking button and keep “Find your workshop” as a link to the catalog. Then check that selecting it moves within the page. Review any dates or claims about availability, too. Our brief says “Next date to be announced.” A generated date needs correcting before we publish. ## Commit For this checkpoint, keep the brief in your notes and bookmark the v0 chat. Open the bookmark in another tab while signed in and confirm that you can return to the generated work. The chat link is for finding your work again; it isn't the public website URL we'll create later. We'll introduce Git, which records changes to project files, in Section 2. No Git commands are needed here. Label your note “Small Hours Studio: first homepage” so it's easy to find alongside future revisions. ## Done-When - [ ] The v0 preview displays Small Hours Studio and both workshop listings. - [ ] The titles, durations, and example prices match the brief. - [ ] “Find your workshop” moves to the catalog, and the narrow layout has no sideways scrolling. - [ ] The site is labeled as a demo and doesn't offer bookings or display invented dates. - [ ] The saved chat reopens, and the original brief is in your notes. ## Solution This prompt gives v0 the details for our first catalog. Paste it into a new v0 chat if you haven't generated your page yet. If you already have a working preview, compare the prompt with your brief without starting another generation. ```text Build a homepage for Small Hours Studio, a fictional community workshop space for curious adults, including beginners. Use Next.js App Router. Build only the homepage for now. Use the headline "Make time to make something." Add a short studio introduction. A "Find your workshop" link should move to a workshop catalog section on this page. Include navigation to the catalog and the studio introduction. Include two workshops: Print something good Summary: Turn a small sketch into a print worth making room for. Duration: 3 hours Example price: $65, materials included Date: Next date to be announced Format: In person at Small Hours Studio A garden in a pot Summary: Make a little green space, even if your yard is a windowsill. Duration: 2 hours Example price: $45, materials included Date: Next date to be announced Format: In person at Small Hours Studio Use a cream background with dark text and orange accents. Give the content generous spacing. Use simple decorative shapes rather than external photographs. Make the layout readable on phones and ensure links can be reached with a keyboard. Keep the page informational. Do not add individual workshop pages, forms, bookings, payments, or external services yet. Label this as a demo studio with illustrative prices. Omit testimonials and invented dates or availability. Avoid buttons that have no working destination. ``` The prompt supplies the facts we'll check in the preview and leaves room for v0 to arrange the page. Our locally authored reference uses this content; it isn't a captured output from this prompt. Once your preview passes the checks, keep the same chat for “Shape the Site” in lesson 1.2. --- [Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)