# Studio Prompt Library WASHME TV Digital Studio — Build. Launch. Earn. Version 1.0 · October 2026 · Owner: Program Director Every trainee uses these prompts in this order. Fill each `{{field}}` from the signed customer interview. Do not change the standards blocks. If a field is unknown, write `[NEEDS CONTENT]` — never guess. --- ## Before you start (gate checklist) - [ ] Signed customer agreement is on file. No signature, no build. - [ ] One Netlify project created for this customer only (separate previews, forms, billing). - [ ] Project connected to a GitHub repository (Agent Runners need a connected project or a manual deploy). - [ ] Project visibility set to Private or Password, scope "Previews only" or "Production and previews". - [ ] No passwords, payment details, or private records in any prompt. --- ## Prompt 0 — Customer Interview (ask the customer) Ask every question. Write answers word-for-word. Leave blank if the customer does not know. 1. What is the exact business name as it should appear on the site? 2. In one or two sentences, what do you do? 3. Who are your customers? (age, location, type of business, etc.) 4. What is the one main goal of the site? (more calls, more bookings, more orders, more quotes) 5. What are the top 3 things a visitor must be able to do? 6. Which pages do you need? (Home, About, Services, Menu, Contact, FAQ, Gallery…) 7. Which features do you need? (payment link, booking, login, forms, notifications, admin editing) 8. Do you want a regular website or an installable app (PWA) people can add to their home screen? 9. Brand colors? Do you have a logo? Any fonts? What tone: friendly, professional, or bold? 10. Paste your services, menu, prices, hours, address, phone, email, and social links exactly as they should appear. 11. Which tools do you already use? (Google Calendar, Square, Calendly, Stripe, Mailchimp…) 12. What date do you need to launch? 13. Do you have photos we are allowed to use? Who owns them? 14. Anything we must NOT say or show? --- ## Prompt 1 — Interview → React Component Specs ``` You are a senior front-end architect. Convert the customer interview below into a React component specification. Do not write code yet. Output JSON with: - site: { name, goal, buildType, tone, launchTarget } - pages: [{ route, title (≤60 chars), metaDescription (≤155 chars), primaryCTA, components: [{ name, purpose, props, contentSource: "brief" | "[NEEDS CONTENT]" }] }] - sharedComponents: PreviewBanner, SiteHeader, MobileNav, CTAButton, ContactForm (Netlify Forms + honeypot), LocalBusinessSchema, SiteFooter - integrations: [{ tool, purpose, needsAccount: true|false, setupNotes }] - needsContent: [every missing fact, one line each] Rules: use only facts in the interview. Every page gets one primary call to action. Mark missing content "[NEEDS CONTENT]". Never invent prices, hours, testimonials, awards, or certifications. INTERVIEW {{paste interview answers}} ``` --- ## Prompt 2 — Master Build (Agent Runner) ``` You are a senior web developer building a real website for a small local business. Use the customer brief below. Build a fast, mobile-first, accessible site that can be deployed on Netlify. BUSINESS BRIEF - Business name: {{name}} - What they do and who they serve: {{description}} - Main goal of the site/app: {{goal}} - Top 3 actions a visitor must complete: {{actions}} - Pages needed: {{pages}} - Features: {{features}} - Build type: {{website | installable web app (PWA)}} - Brand: colors {{colors}}, logo {{yes/no}}, fonts {{fonts}}, tone {{tone}} - Content: {{text, menu, prices, hours, address, phone}} - Tools to connect: {{tools}} - Launch target: {{date}} COMPONENT SPEC {{paste JSON from Prompt 1}} REQUIREMENTS 1. Mobile-first responsive design that looks good on phones. 2. Clean, simple layout, strong headline, clear call-to-action button above the fold. 3. Accessible: semantic HTML, alt text, color contrast, keyboard navigation. 4. SEO basics: page titles, meta descriptions, local business structured data, sitemap. 5. Contact/quote form using Netlify Forms with spam protection (honeypot). 6. If build type is PWA: add a web manifest, icons, a service worker for offline basics, and an "Add to Home Screen" prompt. 7. Use placeholder text only where content is missing, and mark each placeholder clearly with [NEEDS CONTENT]. 8. Do not invent facts, prices, testimonials, awards, or certifications. Use only what is in the brief. 9. Add a footer: "Built by WASHME TV Digital Studio" with a link to https://wwwwashmetv.org. 10. Add noindex to the preview so it stays out of search engines ( and an X-Robots-Tag header). 11. Add a "PREVIEW COPY: Not Live" banner at the top of every page. DELIVERABLES - A working site that builds and deploys on Netlify. - A short README listing pages, features, and every [NEEDS CONTENT] item. ``` --- ## Prompt 3 — Studio Style (black and gold) ``` Apply this style to the site: a black and gold palette with white used sparingly for text and small accents. Black backgrounds, gold headings and buttons, white body text on dark sections or dark text on white sections for readability. Keep contrast at WCAG AA or better. Use a bold sans-serif for headings, a readable sans-serif for body text, generous spacing, rounded buttons, and subtle hover effects. Do not use any other accent colors. Tokens to use: --black #0B0B0B · --black-2 #161513 · --gold #D4AF37 · --gold-hover #E6C35C --white #FFFFFF (sparingly) · --body-on-dark #EDEAE3 · --ink-on-light #141414 Buttons: gold background, black text (contrast ≈ 10:1). Gold text on black ≈ 9.8:1. Never put gold text on white (fails AA for body text). ``` --- ## Prompt 4 — Copy Rewrite ``` Review all pages. Rewrite any placeholder copy in a {{friendly | professional}} voice for {{audience}}. Keep sentences short, add a clear call to action on every page, and keep all facts exactly as provided. List anything you could not write because the information was missing. ``` --- ## Prompt 5 — Quality Audit ``` Audit the site for accessibility, mobile layout, broken links, missing alt text, slow images, form functionality, and SEO tags. Fix what you can, and list what remains. Confirm the form submits and shows a thank-you message. ``` --- ## Prompt 6 — Customer Feedback ``` Make these changes from the customer's feedback and keep everything else unchanged: {{paste feedback}} List exactly what you changed (file, section, before → after). ``` --- ## Prompt 7 — Convert to PWA ``` Convert this site into an installable web app (PWA). Add a web app manifest, icons in required sizes (192×192, 512×512, 512×512 maskable, 180×180 apple-touch-icon), a service worker that caches core pages and shows an offline page, and a custom install button. Keep the existing design and content unchanged. ``` --- ## Prompt 8 — Add Features ``` Add {{login | booking | ordering | notifications}} following the brief. Describe any feature that needs a third-party service or account before it can work, who must own that account (the customer, not the studio), and the exact setup steps. ``` Reference — what each feature needs: | Feature | Works with no account? | Needs | |---|---|---| | Contact/quote form | Yes | Netlify Forms (included); set notification email in Netlify | | Booking | No | Customer's Google Calendar appointment page, Calendly, or Square Appointments link | | Ordering / payments | No | Customer's Square or Stripe Payment Link; never collect card data on our site | | Login | No | Netlify Identity replacement / Auth0 / Supabase Auth — customer-owned | | Notifications | No | Push service + VAPID keys, or email via Netlify form notifications | | Admin editing | No | Decap CMS + Git gateway, or a headless CMS account | --- ## Making the preview safe and professional - Protect it. Deploy Previews can be opened by anyone who has the link unless you set protection. Netlify recommends setting the project to private or turning on Password Protection. - Credit-based plans: Project configuration → General → Visitor access → Project visibility → Password (Pro) or Private → Preview access: "Production and previews" or "Previews only". - Enterprise/legacy: Password Protection; "Non-production deploys only" is Enterprise-only on that path. - Source: https://docs.netlify.com/manage/security/secure-access-to-sites/password-protection/ - Share a clear link. Agent-run previews begin with `agent-` followed by a run ID (e.g. `agent-69a6140c…--site.netlify.app`). Pull-request previews begin with `deploy-preview-` (e.g. `deploy-preview-42--site.netlify.app`). Source: https://docs.netlify.com/deploy/deploy-overview/ - Always review before sharing. A mentor checks every page against the brief — hours, prices, phone numbers, claims. - Label it. "PREVIEW COPY: Not Live" banner on every page. Remove at launch. - Keep customer data out of prompts. No passwords, payment details, or private records. - Require a signed agreement before building. ## Launch checklist (Prompt 9) ``` Prepare this site for launch: remove the "PREVIEW COPY: Not Live" banner, remove the noindex meta tag and X-Robots-Tag header, set the production domain in canonical links, sitemap.xml, robots.txt, and structured data. Confirm every [NEEDS CONTENT] item is resolved. List every file you changed. ``` ## Studio setup - One Netlify project per customer. - Connect each project to GitHub (Agent Runners work with a connected project or a manual deploy). Source: https://www.netlify.com/blog/5-prompts-to-try-with-agent-runners/ - This library lives in the shared Google Doc "Studio Prompt Library".