GuideWebsite brief ↗
Use the starter prompt below to turn your idea into clear requirements.
- Cost
- Free resource
- Setup
- No installation
← All starter kitsGOAL GUIDE / WEBSITE STARTER KITFrom idea to
STEP 1 OF 7 TAKE THE PLAN INTO YOUR CODING ASSISTANT
From idea to
a website you can launch.
A practical path through planning, design, building, testing, and hosting—with the tools and resources for each step.
Your launch roadmap0 of 24 checks marked · opening your workspace
Plan the website
Define who it serves, what visitors need, and the action that matters.
Your next actions
Resources for this step
Use the resources that fit your project. Alternatives are choices, not extra requirements.
ServiceGitHub ↗
Keep your project history and a recoverable copy of your code.
- Cost
- Free and paid plans
- Setup
- Create an account
WHAT YOU SHOULD HAVE
A short brief with pages, content, scope, and budget.
Start with a better brief.
Fill in the brackets. This prompt follows your selected path: a public website.
Read the starter prompt
Help me build a public website for [project]. Audience: [people]. Main action: [action]. Pages and content: [details]. Budget and constraints: [details]. Inspect my existing project first. Recommend the smallest suitable stack and explain costs and tradeoffs. Plan milestones covering design, implementation, integrations, testing, deployment, and maintenance. Use installed skills only after checking availability. Do not install every listed tool or invent claims. Add a backend only if the requirements need it. Build a local preview, verify the main journey and accessibility, report checks actually run and unresolved issues. Ask for my approval before publishing, creating paid resources, or using production credentials.
Checks are your own progress notes, not automated tests or certification. Recommendations link to official resources; verify current pricing and terms. Documentation reviewed November 2026. This guide has not been tested as an end-to-end website build.
Browse related repositories →More learning resources.
Expand a topic for courses, documentation, and tools from the supplied learning curriculum. Links already recommended in the guide above are omitted.
Learn what makes a page work3 resources
Before opening an AI tool, know HTML structure and a few design rules so you can tell when the output is wrong.
courseMDN: Learn web development
The standard free curriculum for HTML, CSS and JavaScript, written by the browser makers.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
siteLaws of UX
A short, visual list of the human behaviours behind good interfaces (why fewer choices convert better, and so on).
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
courseRefactoring UI
Concrete rules for spacing, colour, type and hierarchy from the creators of Tailwind CSS; made for developers who are not designers.
- Cost / access
- paid
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Collect references before you build2 resources
Look at 10 to 20 real sites, screenshot what works, and write down why. Handing an AI agent real references gives far better results than 'make it modern'.
siteAwwwards
Award-winning sites plus inspiration collections and courses; good for the top end of motion and layout ideas.
- Cost / access
- unknown
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
siteMobbin
Searchable screens and flows from shipped products; best for how real apps handle sign-up, checkout and onboarding.
- Cost / access
- unknown
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Use ready-made components and a styling system2 resources
Do not hand-draw buttons, forms and dialogs. shadcn/ui gives you accessible components whose code you own, and Tailwind styles them.
docsTailwind CSS installation guide
The official setup for Tailwind v4 with Vite; shadcn/ui is styled with it.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
templateVercel Templates
Starter projects you can deploy in a few clicks and then edit, a quick way to see a working Next.js site.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Build with Next.js1 resources
Next.js is the most widely used React framework for sites that need pages, forms, an API and good search visibility in one project.
courseLearn Next.js
Vercel's free course: build a full dashboard app and learn routing, data and forms along the way.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Make it accessible and fast2 resources
Accessibility and speed are launch requirements, not polish: they help real visitors, search engines and AI assistants read your page. Measure before and after every big change.
docsHow to Meet WCAG (Quick Reference)
Filterable checklist of the WCAG 2.2 success criteria; use it as your pre-launch checklist.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
articleweb.dev: Web Vitals
Google's plain explanation of the three Core Web Vitals (loading, interactivity, visual stability).
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Deploy, then measure visitors3 resources
Ship early on Vercel, then add privacy-friendly analytics so you learn what visitors actually do. Read the Hobby plan terms first.
docsVercel documentation
Deploy from Git with a preview URL for every branch, plus domains, environment variables and rollbacks.
- Cost / access
- free tier
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
docsVercel Hobby plan
Warning: Vercel says the free Hobby plan is for non-commercial personal use only, so a paying client's site belongs on a paid plan.
- Cost / access
- free tier
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
docsUmami documentation
Open-source analytics you can use in its cloud or self-host, if you want your own data.
- Cost / access
- free · Service usage, hosting, or model access may be separate.
- Setup
- Follow the linked provider’s current instructions; check account and runtime requirements.
Additional curriculum comes from the supplied AI Frontiers playbooks. Resource descriptions and cost labels are source guidance, not a fresh verification of pricing, compatibility, or results. Open the official instructions before using a tool. Checklist marks are your own progress notes.