How to Build a Website With AI in 2026: ChatGPT, Figma, Clerk, Convex and Vercel for Beginners

Building a website in 2026 no longer requires hiring a designer, backend engineer and SEO agency before you can launch. A practical AI-assisted workflow combines ChatGPT or Claude for planning and code, Figma for editable design, Clerk for authentication, Convex for a real-time backend, GitHub for version control, Vercel for deployment and Google Trends for free content research. The result can be a real website with pages, accounts, data, analytics and a publishing workflow—not merely a generated screenshot.

Here is the important budget reality first: a $20 AI subscription plus a domain can be enough to build a small website during a single month, then cancel the AI subscription and keep an eligible low-traffic, non-commercial project online using free infrastructure tiers. That does not mean every commercial website costs only $20 for twelve months. ChatGPT Plus and Claude Pro cost approximately $20 per month in the United States, subject to taxes and regional pricing. The domain is separate, AI API calls may cost extra, free tiers have limits and Vercel Hobby is restricted to non-commercial personal use. If you keep a $20 subscription all year, the AI subscription alone totals $240 before the domain.

This tutorial is for first-time builders creating a portfolio, community prototype, learning project, niche content website or MVP. If your goal is a monetized blog, client website or production business, budget for hosting and services whose commercial-use terms permit your use. Prices and documentation were checked against providers' published information on October 15, 2026.

ChatGPT Plus or Claude Pro is your project planner, research assistant, code reviewer and integration coordinator. You do not need to buy both. ChatGPT Plus is $20 per month; Claude Pro is $20 when billed monthly, or $200 per year on Anthropic's listed annual plan. ChatGPT Pro is a different and substantially more expensive tier, not the $20 option. The developer APIs for OpenAI and Anthropic are separate products with their own usage-based billing.

Figma is the design canvas. Use it to create desktop and mobile layouts, design tokens, navigation, buttons, forms and reusable components. Its MCP server can share design context with compatible AI coding tools and support supported design-editing operations. The free Starter plan has limits; Figma's published pricing lists 20 MCP tool calls per month for that tier as of the date checked. A Figma design file is not automatically a deployed site.

Clerk manages sign-up, sign-in, sessions and user profiles. Its Hobby tier includes up to 50,000 monthly retained users per application, with limitations such as paid production multi-factor authentication and plan-specific features. Convex stores website records, supports live queries and server functions, and provides an MCP server. GitHub stores your code and tracks changes. Vercel connects to a repository, builds your Next.js website, provisions HTTPS and serves the resulting site. Google Trends and Google Search Console support research and measurement; they do not guarantee Google rankings.

The recommended architecture is simple: visitors use the Next.js frontend on Vercel; Clerk authenticates them; Next.js and authorized client components call Convex for data; GitHub provides the source-of-truth code; Figma provides the visual source of truth. An AI assistant helps implement and inspect every layer.

Before opening any MCP tool, write a one-paragraph product brief. Specify your target audience, the problem they have, the primary call to action, the five most important pages and what needs a database. A brochure site does not need login, while a membership dashboard probably does. Adding Clerk and Convex to a simple five-page portfolio can create unnecessary setup and maintenance.

Example: "I am launching an English-language website teaching freelance designers how to find clients in the United States and Canada. It needs a homepage, about page, service directory, editorial articles, contact page and member dashboard. Visitors read for free; registered members save useful resources. The visual style is editorial, fast and accessible. My priority is a reliable launch, not maximum animations."

Now ask AI to separate must-have launch features from possible later upgrades. A high-quality answer includes a sitemap, user journeys, database entities, acceptance tests and a list of decisions that require your approval. This reduces the common AI-building failure of generating multiple disconnected pages before agreeing on architecture.

Choose ChatGPT Plus or Claude Pro based on which development workflow and available connectors you prefer. You can build with either, or use a free tier if it supports enough of your needs. Do not buy ChatGPT Pro solely because a tutorial says "Pro": the Plus plan is the approximately $20/month option in this example; Pro tiers carry higher prices.

Verify the connected tools in the product UI before assuming you can use Figma, GitHub, Vercel or Convex from a particular conversation. Availability depends on account, client, supported integration, permissions and rate limits. A $20 consumer subscription does not necessarily include unrestricted coding agents, external tool calls, API tokens or paid provider services.

Create one dedicated project or workspace for the website. Upload the product brief, audience profile, approved color palette, logo guidelines, feature priorities and a short sample of what "good" content looks like. This is not retraining the underlying model; it is supplying persistent task context and instructions that help the assistant work consistently.

Place the following operating brief in your AI project's custom instructions or an equivalent repository guidance file. Adjust it for your niche and stack:

"Act as the product designer, full-stack engineer, technical SEO specialist and release reviewer for this website. Stack: Next.js with TypeScript, Figma for design, Clerk for login, Convex for data, GitHub for version control and Vercel for hosting. Start by checking the existing repository before modifying anything. Match approved Figma components and tokens. Write responsive accessible UI. Keep secrets out of source control. Require authentication AND server-side authorization for private data. Create tests for critical flows. Use one canonical URL per article, human-reviewed writing, descriptive metadata and a generated sitemap. Work in a feature branch, inspect the diff, run a build and ask for approval before production database changes or public deployment. Never claim that a feature, search ranking or deployment is successful without verifying it."

A project should also include a decisions document: which pages are public, what a member can access, which pages an editor can publish, and what would count as launch-ready. Save your design decisions and deployment steps in the GitHub repository as well, so they remain available if you stop paying for the assistant.

Connect Figma to your eligible AI client through its supported connector or MCP integration. Confirm which actions the connection supports: reading design context, creating files, editing layers and exporting assets can be separate capabilities. On the free plan, keep an eye on monthly MCP call limits and optional AI credit allowances.

Use this prompt: "Design a complete, accessible, responsive website for the product brief. Create an editable Figma design with desktop and mobile versions of the homepage, article page, listing page, login page, member dashboard, privacy page and contact page. Use a coherent type scale, reusable components, design tokens, empty states, form error states and a mobile navigation system. Provide realistic layout and interaction notes. Do not make a single uneditable image of the website."

Review the actual Figma file. Check whether buttons have consistent variants, whether mobile text is readable, whether forms show errors and whether screens use reusable components instead of arbitrary positions. Figma provides the design; your coding agent still needs to implement functional Next.js components. The official Figma MCP workflow is especially useful for carrying component and token context into code.

Ask your AI assistant to scaffold a Next.js application with TypeScript and the App Router, following current framework documentation. If using a local terminal, a standard starting command is:

Create a GitHub repository or have an authorized GitHub connector create it. Commit an initial, clean project and a README describing local setup. Use feature branches or pull requests for meaningful changes. GitHub Free includes unlimited public and private repositories, subject to product limits.

Prompt: "Inspect the project and linked Figma design, then implement the responsive layout using reusable React components. First build the homepage, header, footer and article template. Keep components small, add semantic HTML, and match design tokens rather than copying pixel coordinates blindly. Show the files changed, run type checking and list unresolved issues."

Avoid letting an AI agent overwrite your main branch repeatedly while the app is still unstable. A preview deployment for each pull request is safer than changing production on every small instruction.

For a site with member accounts, create a Clerk application and choose supported sign-in options such as email or Google. Follow Clerk's current Next.js setup guide, which recommends its CLI for new projects:

Clerk's setup can configure the Next.js SDK, authentication routes and environment settings. With Next.js 16+, the route protection file is named proxy.ts; on Next.js 15 or earlier it is middleware.ts. Follow the SDK's version-specific instructions rather than mixing examples from different releases.

Ask your agent to add the provider, sign-in and sign-up controls, profile menu and protection for the dashboard. Test anonymous access, a legitimate login, logout, expired sessions and the difference between ordinary users and editors. A hidden "Admin" button is not authorization; server functions must validate identity and permission.

Never paste a Clerk secret key into a public prompt, Figma canvas, GitHub commit or client-side component. Configure secret values in local environment files ignored by Git and in Vercel's project environment settings.

Create a Convex project and install the dependency. Its documented development workflow is:

Have your agent propose the data model before writing dozens of functions. A simple niche blog with member bookmarks might use articles, categories, bookmarks and user profiles. Articles need fields such as title, slug, excerpt, body, status, publishedAt, updatedAt and author. Bookmarks must be associated with the signed-in user. Add appropriate indexes and validation rules, not just generic collections.

To connect the Convex MCP server to a compatible client, Convex documents this command:

The actual MCP configuration belongs in the supported AI client's connector settings. Claude Code has its own recommended Convex plugin path, while other MCP-capable agents may run the command directly. Avoid enabling production database mutations until you understand exactly what the tools can do.

Integrate Clerk with Convex using the documented Clerk issuer configuration and ConvexProviderWithClerk for supported React/Next.js clients. Validate authorization inside Convex queries and mutations. A query that returns everyone else's private bookmarks is a security bug even if the page requires login.

If your site needs a blog, create a small editor panel instead of editing source files for every post. The minimum workflow is draft, preview, publish, update and archive. Only approved editor roles should be able to write or publish. Add a source-link field, image alt text, canonical slug, meta title, meta description and timestamps to each article.

Prompt: "Implement a secure editorial dashboard with article drafts and a preview. Editors can create and update content; visitors can read only published pages. Validate editor roles inside backend mutations, enforce unique slugs, preserve the original publication date during revisions, and record updatedAt when meaningful content changes. Provide an audit of access decisions and tests."

Keep public pages indexable and private user dashboards out of search results. Use proper status codes for deleted content and avoid accidentally including draft URLs in a public sitemap. Do not label an AI-generated article as independently reported journalism unless a human has checked the claims and sources.

Create a Vercel project linked to the approved GitHub repository. Select the intended production branch, configure the build settings, and add environment variables for Clerk and Convex. Confirm that your app is deployed with production credentials rather than leftover development credentials.

An eligible workflow is: AI changes code on a branch; GitHub records a commit; Vercel builds a preview; you inspect the preview on desktop and phone; the agent runs available tests; and an approved merge deploys to production. Vercel provides a vercel.app subdomain and supports connecting a separately purchased domain.

If the build fails, paste the relevant non-secret build log into the assistant and ask for a focused fix. Do not solve a broken build by simply disabling type checking, authentication, lint checks or security controls. Check production routing, the login flow and the database after deployment.

For monetized websites and business-client projects, do not rely on Vercel Hobby without reviewing its terms: the free plan is for non-commercial personal usage. Use a paid commercial tier or another hosting arrangement that explicitly permits your site and meets its expected traffic.

Choose a short, memorable domain aligned with the website's purpose. Domain prices depend on the extension, registrar, promotion, renewal price and optional privacy services. A discounted first-year price is not necessarily the price you will pay next year.

Connect the domain through the Vercel project's Domains settings, then add the exact DNS records Vercel specifies at your registrar. DNS changes may take time to propagate. Confirm that both the preferred hostname and redirects work over HTTPS, and choose either the www or non-www version as the site's canonical identity.

Keep domain renewal under your control. Losing an unpaid domain can break a perfectly functioning website regardless of whether the hosting itself is still free.

Open Google Trends Explore and enter a small number of topics relevant to your niche. Compare related questions and topics across the country you serve, such as the United States or Canada, and choose an appropriate time range. Search terms that appear to grow can reveal interest and seasonality, but Trends reports normalized relative popularity rather than exact monthly search-volume counts.

Example niche: building websites with AI. Research topics might include "how to build a website with AI," "Figma to Next.js," "Clerk authentication Next.js," "Convex vs Firebase," "free website hosting" and "Google Search Console sitemap." These are topic hypotheses, not a claim that any phrase is currently the top rising query. Confirm your actual related and rising results in Trends before presenting them as measured trends.

Ask AI to create a topical content map from those findings. Your first cluster could be a cornerstone website-building tutorial supported by detailed guides on Figma layouts, Clerk setup, Convex schemas, Vercel deployment, security and website maintenance. Each guide should solve a distinct reader problem, include tested instructions and link to relevant supporting articles.

Prompt: "For this niche and target country, use the Google Trends data I provide to generate 15 article ideas. Group them by user intent, explain the likely question each article answers, rank them by usefulness and our ability to supply first-hand examples, and produce a headline, outline, SEO description, FAQ questions and supporting internal links. Do not invent search volume, competitor rankings, screenshots or trend data. Cite primary documentation for technical claims."

Google's official guidance permits helpful uses of generative AI, but warns that generating large numbers of pages without adding value can violate its scaled-content-abuse spam policy. The goal is not 100 shallow posts in one day. It is an organized library of genuinely useful guides, transparent tests, original examples and source-backed answers.

A strong tutorial has a clearly defined problem, prerequisites, actual steps, tested commands, screenshots or original illustrations where useful, errors and fixes, a publication or revision date and FAQs that answer real questions. Avoid using Google Trends as an excuse to write irrelevant trending articles outside your niche. Check ownership and licensing of all uploaded images.

For on-page technical SEO, create unique descriptive page titles, sensible headings, page-specific meta descriptions, clean permanent URLs, internal links, image alt text and the appropriate structured data where it accurately describes the content. Make the mobile layout usable and maintain fast load times. Google may rewrite titles or snippets and does not guarantee indexing merely because metadata exists.

Verify the domain in Google Search Console and submit the sitemap generated by the site, commonly /sitemap.xml. Ensure pages intended for Google are publicly reachable, return HTTP 200, point to the correct canonical and are not blocked by noindex directives or robots.txt rules. Test articles using Search Console's URL Inspection when needed.

Track clicks, impressions, search queries, countries, page indexing, sitemap health, Core Web Vitals and actual conversions—not only a rising impression count. Search Console reporting has delays. You can use its free metrics to identify pages worth improving, but do not promise first-page rankings in seven days.

Set calendar reminders for domain renewal, dependency updates and content reviews. If you cancel your AI subscription after launch, existing code and deployed infrastructure generally do not disappear merely because you stopped using that assistant. But your site still needs someone to maintain it and respond when free-tier allowances or security requirements change.

Scenario A: build in one month using ChatGPT Plus or Claude Pro, then cancel. The AI subscription is approximately $20 for that one month, plus the domain price, plus tax where applicable. GitHub Free, Figma Starter, Clerk Hobby and a suitable Convex free tier can be $0 in subscription fees while you stay inside their policies and limits. A small personal, non-commercial website may also qualify for Vercel Hobby. This is the narrow scenario behind the appealing "$20 plus domain" claim.

Scenario B: keep the $20 AI subscription active for all twelve months. The AI subscription is $240 for the year, before the domain, taxes or infrastructure upgrades.

Scenario C: run a commercial website, affiliate blog or paying client's website. The $20-plus-domain claim is not a reliable full-year budget. Hosting must permit commercial use; Vercel Hobby does not. Other services can also require paid plans for higher capacity, custom features, email or SMS usage, stronger authentication, backups, image processing or storage. Budget these services separately.

For illustration only, suppose a domain costs $12 for the first year and you finish development using exactly one $20 month of AI access. Your up-front total is $32 before tax, provided the particular app legitimately stays within all free tiers afterward. This is arithmetic, not a provider quote or guarantee that a commercially operated site will run all year for $32.

The ownership principle matters more than the marketing headline: keep the GitHub code, registrar account, application environments and backups under your control. If a paid assistant subscription ends, you should still be able to operate and modify your website using ordinary development tools.

Open every main page at both desktop and narrow phone widths. Run a production build. Test new-user signup, login, logout and session expiration. Confirm that someone else's data cannot be accessed with a different account. Open and submit forms using realistic invalid and valid inputs. Test the editor's publish permissions, a draft's noindex behavior, and a published article's canonical URL.

Verify the domain certificate, robots.txt and sitemap. Inspect the HTML title and description for several article pages, not only the homepage. Check images have alt text and appropriate usage rights. Ensure private keys and backend credentials are not bundled into browser code or committed to GitHub. Review dependencies and configure an appropriate alerting or monitoring arrangement before considering the site launched.

You may be able to design and build a simple site within one $20 subscription month, but the subscription itself is recurring until cancelled, and the domain, paid integrations or hosting can add costs. ChatGPT Plus is not unlimited API access.

Potentially, if you make a one-time $20 AI-assisted build, purchase the domain separately, cancel the AI subscription and continue on free hosting and service tiers that allow your use case. It is not guaranteed. Commercial sites must satisfy the host's commercial-use terms and may need a paid plan.

No. It is an excellent design canvas when visual consistency and editable layouts matter. But a coding agent can also create a simple layout directly. Figma is especially valuable when multiple pages or contributors need a common design system.

Not necessarily. A fully public static blog may work without user accounts or a database. Use Clerk if users need authenticated experiences, and Convex if the product needs live application data, protected mutations or a content-management backend.

Yes, in a product configuration with an authorized GitHub connector or compatible coding agent, subject to its permissions. Review the changes and use branch protection before allowing public production changes.

No. Trends is a normalized indicator of relative interest. It can help prioritize and time content, but it is not an exact keyword-volume database or ranking guarantee.

Google evaluates content under its policies regardless of the production method, but mass-produced pages with little added value can violate spam policies. Original research, reliable sources, practical demonstrations and an audience-first focus matter more than publication volume.

The practical breakthrough is that one person can coordinate design, code, authentication, backend development, deployment and editorial research with a connected AI workflow. Start with a brief. Maintain dedicated project context. Create a real design in Figma. Build clean Next.js code, secure Clerk and Convex, push reviewed changes to GitHub and deploy through a suitable Vercel plan. Then publish genuinely helpful niche content informed by Google Trends and measure results in Search Console.

Treat "build it for $20" as a possible one-month starter experiment—not a universal guarantee of twelve months of commercial hosting. A reliable, maintainable site with transparent costs will serve you longer than a cheap demo that breaks the moment it attracts visitors.

Editorial note: All service prices and published product limits in this guide are attributed to first-party pricing or documentation available October 15, 2026. Features, plan terms and usage caps may change. This is an independent educational tutorial, not a claim that RecoupRev has independently audited every possible combination of plans and integrations.