Scale client site management without hiring more people: SiteGround AI Agent for WordPress for agencies

Abstract of agencies using SiteGround AI Studio to execute changes across many sites

Managing 20 client WordPress sites the same way you managed five doesn’t scale. It breaks. The SiteGround AI Agent for WordPress gives agencies a way to run repeatable tasks across multiple client sites through natural language prompts, without logging into each one separately. Available inside SiteGround AI Studio, it covers updates, content changes, user management, and WooCommerce tasks across a connected client portfolio.

Key takeaways

  • Agencies can manage more client sites without adding headcount by turning repeatable WordPress admin tasks into prompt-based workflows through SiteGround AI Agent for WordPress.
  • SiteGround AI Agent for WordPress connects to WordPress installations and executes real changes, including plugin updates, content edits, user-role assignments, SEO metadata updates, and WooCommerce product adjustments.
  • Traditional multi-site WordPress dashboards centralize visibility and reporting. SiteGround AI Agent for WordPress adds a conversational execution layer on top of that visibility.
  • The AI Agent works best as a supervised operations assistant. Agency teams stay responsible for QA, client strategy, custom development, and risk review.

The multi-site operations problem agencies hit first

More clients usually means more logins, updates, and repeat admin work

The operations math is straightforward: every new client site adds another WordPress dashboard, another update cycle, another set of credentials, and another round of the same tasks you ran last month. Agencies on care plans can easily spend 30–40% of their maintenance hours on tasks that follow the exact same pattern every single time.

WordPress performance depends on consistent maintenance. The problem is that consistent maintenance, at scale, is expensive when done manually.

Repetitive WordPress tasks become unbillable agency overhead

Care plan clients pay for outcomes: a maintained, secure, well-performing WordPress site. They don’t pay line-by-line for every last plugin update or every taxonomy cleanup. That means the time your team spends logging into individual sites, running updates, checking results, and logging back out again is either absorbed into a flat-rate care fee or quietly written off.

At a small portfolio, that’s fine, but at a growing one, it’s very much a margin problem. A senior developer spending two hours per week across 20 sites on routine updates is a senior developer not doing development.

Scaling revenue and scaling workload don’t have to move together

Agencies scale revenue by adding clients. They also scale workload when every new client adds a proportional volume of manual work. The two move together until something breaks the link.

The break point is usually an operations layer that handles repetitive execution so the team can focus on the work that actually needs their judgment. And that’s where the SiteGround AI Agent for WordPress comes in: it’s designed to sit at that layer, handling the execution while agency teams stay on strategy, QA, client communication, and development.

What is a WordPress AI agent for multi-site operations?

How SiteGround’s AI Agent for WordPress differs from a chatbot

A chatbot answers questions. The SiteGround AI Agent for WordPress executes tasks.

Multiple WordPress sites connected to SiteGround AI Studio so that changes can be made with the AI Agent for WordPress

The distinction matters for agencies. When you ask the AI Agent to update all plugins across three connected client sites, it doesn’t explain how to do it. It actually does it. When you ask it to update the support email address in footer content across a set of sites, it makes the change. 

That’s possible because SiteGround built a direct connection between AI Studio and your WordPress installations. Once the AI Agent by SiteGround plugin is installed on a client site, that site becomes available inside AI Studio and the agent can act on it directly. That’s what separates it from AI writing tools or dashboards that surface information without executing anything. For a broader explanation of the connection, supported tasks, and safety controls, see how the SiteGround AI Agent connects to and manages WordPress sites.

What multi-site operations means for an agency

Multi-site operations, in an agency context, means running the same class of tasks across a portfolio of independent WordPress installations. These are individual client sites that share a common maintenance pattern, and not a WordPress Multisite network.

Examples of multi-site operations tasks agencies run repeatedly:

  • Plugin, theme, and WordPress core updates across all care-plan sites
  • Footer and legal content updates when a client changes their business details
  • User role reviews when a client’s team changes
  • SEO metadata refreshes on recurring content
  • WooCommerce product updates for ecommerce clients on retainer

The AI Agent for WordPress handles this class of work by letting you address multiple connected sites in a single prompt session, rather than opening each site’s wp-admin separately. For broader publishing, WooCommerce, maintenance, SEO, and troubleshooting examples, explore these real-world AI Agent workflows.

Why natural language execution matters

Using natural language to get tasks done unlocks speed and accessibility in ways not previously possible. A well-structured prompt can now replace a 15-step manual process spread across multiple wp-admin dashboards and browser tabs. These AI Agent for WordPress prompt examples show how to define the sites, tasks, constraints, and review conditions.

It also means non-developer team members can run standard maintenance tasks without touching wp-admin directly. For example, an account manager can trigger a content update across five client sites via SiteGround AI Studio, with the developer reviewing results afterward instead of doing the work from scratch.

Can SiteGround’s AI Agent manage multiple WordPress sites at once?

Yes, it sure can. The SiteGround AI Agent for WordPress can execute tasks across multiple connected WordPress installations in a single session. You select the sites you want to work on inside SiteGround AI Studio, and the agent applies your prompt to each one.

How connected sites are selected in SiteGround AI Studio

Site selection happens inside SiteGround AI Studio, where, within the AI Agent for WordPress, you choose which WordPress installations you want the agent to work on before starting your prompt session. You don’t need a separate multi-site setup or a network configuration. Each site just needs to be connected to your SiteGround account.

How WordPress sites are connected via the SiteGround AI Agent for WordPress

Examples of one-prompt, multi-site actions

Here’s what a single AI Agent prompt can do across multiple connected sites:

  • Health report: “Generate a health report for each of these sites and summarize any issues.”
  • Plugin updates: “Update all plugins on these five sites and report what changed.”
  • Content changes: “Update the footer support email to support@agency.com on all selected sites.”
  • User management: “Add [name] as an Editor to the following three client sites. Here is their email and password.”
  • SEO metadata: “Update the meta description for the homepage on each of these sites to [description].”
  • WooCommerce: “Set the sale price on product ID 847 to $29 on these two client sites.”

All five are bulk operations across multiple sites, which means Power Mode is required for each. Power Mode is SiteGround AI Studio’s confirmation layer that requires you to review and approve the agent’s plan before it executes. The agent drafts a plan first, confirms the details with you, and executes once Power Mode is active.

Where agencies still need review and approval

Not every action should run to completion without a human checkpoint. High-impact changes, WooCommerce order data, custom-code sites, and anything touching client-facing revenue flows should have a review step between the prompt and the final confirmation. For those actions, the agent requires Power Mode safety controls before it will execute. It detects the high-impact action, pauses, and won’t proceed until Power Mode is enabled and the plan is reviewed.

Alert from the SiteGround AI Agent for WordPress that Power Mode is required for a change

Note that Power Mode is disabled by default. You can enable Power Mode in two ways: through the AI Agent plugin in your WordPress admin, or directly inside a chat session (as shown above) when the agent detects a high-impact action and pauses to prompt you. Once enabled, it stays on until you turn it off via the plugin interface.

Enable Power Mode in the SiteGround AI Agent for WordPress

How agencies can use SiteGround AI Agent for bulk WordPress updates

Plugin, theme, and WordPress core updates

Bulk plugin and theme updates are the clearest use case for AI-assisted multi-site operations. The task is identical across every site: check for updates, apply them, verify the site still loads, report back. Running that loop manually across 20 sites takes hours. Running it through the AI Agent takes a prompt and a review cycle.

And it’s not a trivial task: WordPress security depends heavily on keeping plugins, themes, and core current, as outdated plugins are one of the most common attack vectors on WordPress sites. For agencies managing care plans, that makes plugin update cadence a direct client risk that goes beyond a simple maintenance chore.

Enter the AI Agent, which can run these kinds of update tasks across selected sites and return a summary of what changed, what succeeded, and what flagged an error. Your team reviews outcomes rather than running the process step by step.

Backup-first update workflows

The correct update sequence is: backup, update, verify, report. Before opening an AI Agent session, confirm that a recent backup exists for each site you’re updating — either through SiteGround’s backup system if the site is hosted with SiteGround, or through whatever backup solution is in place for that client.

Once that’s confirmed, a typical AI Agent prompt sequence looks like this:

  1. Run plugin updates across selected sites
  2. Check that each site’s REST API is responding correctly after updates
  3. Summarize update results and flag any errors

This is the execution work a developer would run manually, handled at portfolio scale.

Update confirmation and post-update checks

After bulk updates run, the AI Agent can check that each site is responding correctly and return a summary. This doesn’t replace a full QA review for complex or custom-code sites, but it does surface obvious failures quickly.

Agencies managing 20+ sites can use this summary as a first-pass filter: sites that pass the post-update check get cleared from the queue, and sites that return errors get escalated to a developer for manual review. That’s a significant time saving even before you account for the update execution itself.

Applying the same changes across WordPress client sites

Update footers, policies, business details, and disclaimers

This is the task that wastes the most agency time per change. A client changes their support email. Their privacy policy updates. Their business address changes. Their cookie disclaimer needs a new line. The change itself takes 30 seconds on one site. Across 20 client sites, that 30 seconds becomes a two-hour afternoon.

The SiteGround AI Agent for WordPress handles these changes in a flash. You write the prompt once: “Update the footer support email address from old@email.com to new@email.com across these sites.” The agent applies it across your selected installations and confirms what changed.

Legal content updates are particularly well-suited to this workflow because they’re genuinely identical across sites: the same text, the same placement, the same change. Prompt, review, done.

Standardize settings across a client portfolio

New clients often come with inconsistent WordPress configurations: different comment settings, different permalink structures, different media sizes, different user role setups. Bringing a new portfolio site into your agency’s standard configuration is a repetitive audit-and-fix task.

The AI Agent can apply a standard configuration checklist across a site through prompts, reducing the setup time for onboarding a new care-plan client. It’s also useful for quarterly configuration audits: checking that sites in your portfolio still match your agency’s baseline settings and flagging anything that’s drifted.

Manage users and roles across multiple sites

User management across a client portfolio is another class of work that compounds with scale. Maybe a client’s team changes, a new account manager needs access, a former employee needs to be removed, or a collaborator needs Editor access on three of your agency’s client sites. All tedious tasks, but by using the AI Agent, user-role management across connected sites becomes a single prompt operation.

Automating repetitive WordPress tasks that don’t justify billable time

SEO metadata, alt text, and internal linking cleanup

SEO cleanup tasks accumulate on every care-plan site. They’re too small to bill for, too important to skip, and too numerous to handle manually across a growing portfolio. The result is WordPress SEO that quietly slips on sites nobody has time to fix.

The AI Agent can run SEO cleanup tasks across content on connected sites, whether that’s updating missing meta descriptions, flagging empty alt text fields, or reviewing title tags for format consistency. The output is a task list and a set of changes, not a finished SEO strategy. But the time-consuming execution layer is tackled.

Taxonomy, category, and tag cleanup

Over time, WordPress sites accumulate taxonomic clutter such as duplicate tags, unused categories, inconsistent naming conventions, and orphaned terms with no posts attached. On a site that’s been running for two or three years, this cleanup is a true pain.

The AI Agent addresses this, running taxonomy audits and cleanup tasks across selected sites, identifying inconsistencies and applying fixes through natural language prompts. This is a good use case for account managers who aren’t developers: the task requires attention and consistency, not technical judgment.

WooCommerce product updates for agency clients

Agencies managing WooCommerce clients on retainer handle the same product updates on repeat: seasonal pricing changes, sale price toggles, inventory flags. Each one is a wp-admin task that requires logging into the store, finding the product, and making the change. Multiply that across a client portfolio and it adds up fast.

For simple products, the AI Agent handles these updates across connected WooCommerce stores through prompts. “Apply a 20% discount to all products in the [category] category” or “Set all out-of-stock items to hidden” are instructions, not afternoon projects.

Every WooCommerce update triggers a plan first. The agent identifies the target products, calculates the changes, and presents a summary for review before anything goes live. That’s the right sequence for live store data: prompt, review, confirm, execute.

Content refresh tasks across care-plan sites

Content maintenance is a core care-plan deliverable: updating outdated statistics, refreshing publication dates, updating author bios, replacing deprecated shortcodes. None of this requires creative judgment, but it does require precision and volume.

The AI Agent handles this class of work through surgical text replacement, finding specific strings across dozens of pages without touching surrounding content or block formatting. In practice that means:

  • Swapping outdated statistics or dates across every post in a single prompt
  • Updating author bios or team descriptions across the full site
  • Replacing deprecated shortcodes with current versions across a multi-site portfolio

These tasks rarely justify senior developer time and don’t justify skipping either, because outdated content creates real SEO and credibility problems for clients. The AI Agent for WordPress handles the execution so the work gets done, and your team stays on the QA and strategy work that actually justifies the care-plan value.

How the AI Agent for WordPress fits into SiteGround’s agency ecosystem

SiteGround Client Area as the control layer

The SiteGround Client Area is where agencies manage hosting accounts, site connections, billing, collaborators, and access. It’s the organizational layer for your client portfolio, where sites live and accounts are structured.

For agencies, the Client Area also manages white-label hosting workflows: connecting client sites to your account, managing collaborator access so your team can work across sites without sharing primary credentials, and keeping your agency’s branding in front of clients throughout the hosting relationship.

SiteGround AI Studio as the prompt and execution layer

The SiteGround AI Studio is where AI Agent sessions happen. It’s separate from the Client Area and designed for prompt-based workflows: selecting sites, writing prompts, reviewing what the agent did, and managing token usage.

In practice that means selecting which client sites the agent works on, writing and refining prompts, reviewing the agent’s plan before it executes, and checking the summary afterward. The session history stays private to your agency account, which matters for keeping your workflows proprietary. Token usage is tracked inside AI Studio so you can monitor capacity across the month without logging into a separate dashboard.

Collaborators, client access, and white-label workflows

SiteGround’s collaborator system lets agencies give clients access to their own sites while keeping the agency in control of the WordPress hosting account. In practice that means:

  • Clients log in with their own credentials and can access Site Tools for their specific site, but are completely walled off from other clients’ accounts, billing, and configurations
  • AI Studio sessions, prompts, and chat histories are private to the agency’s account — clients see the outcome, not the execution behind it
  • On GoGeek and Cloud plans, white-label hosting means clients see your agency’s branding throughout Site Tools, not SiteGround’s

SiteGround AI Agent for WordPress vs traditional multi-site WordPress dashboards

Most agencies already use a dashboard tool like ManageWP or MainWP to monitor their client portfolio. What those tools don’t do is take action on what they surface. That’s the gap the SiteGround AI Agent for WordPress fills.

Dashboards centralize visibility

Traditional multi-site dashboards aggregate information from across a portfolio and surface it in one place. You can see update status, backup status, security scan results, and uptime data without logging into each site. That’s truly useful for monitoring and client reporting.

What dashboards don’t do, by design, is take action based on natural language input. You click buttons, run batch update functions, and schedule tasks through the dashboard UI. The decision-making is yours; the dashboard executes what you tell it to click.

AI agents execute natural-language tasks

The SiteGround AI Agent for WordPress takes the input as a prompt and figures out the execution. “Update all plugins on these three sites, flag any errors, and give me a summary when done” is a complete instruction. The agent interprets it, runs the steps in order, and reports back.

That’s a fundamentally different interaction model. It’s faster for experienced users who know what they want, and it’s accessible to team members who aren’t WordPress developers. And because each connection to an individual WordPress site runs securely through SiteGround’s infrastructure, agencies can extend that access across an entire client portfolio without compromising site integrity.

When agencies may use both together

Many agencies will use a traditional monitoring dashboard alongside the SiteGround AI Agent for WordPress, not instead of it. The dashboard surfaces what needs attention; the AI Agent handles the execution once priorities are set.

A practical workflow: check the dashboard for update flags and security alerts each Monday, then open AI Studio and prompt the AI Agent to run updates, verify results, and prepare a client-ready summary. The dashboard provides the visibility; the agent does the work.

CapabilityTraditional dashboard toolsSiteGround AI Agent for WordPress
See multiple sitesYesYes, through SiteGround-connected site selection
Run updatesYes, through dashboard actionsYes, via natural language prompts
Apply repeated content changesLimited or manualStrong use case for prompt-based execution
Manage usersOften supportedSupported as an AI Agent task category
Natural-language task executionNot the core modelCore differentiator
Best fitMonitoring, reporting, visibilityExecution, repeat tasks, agency workflows

Example agency workflows for managing more client sites without hiring

New client onboarding workflow

When a new client site joins a care plan, the onboarding checklist is the same every time: confirm the site is connected, run a configuration audit against your agency baseline, set up the correct user roles, verify backup settings, and run a first-pass update cycle.

Prompt the AI Agent to walk through this checklist across the new site, report any configuration gaps, and apply standard settings. What used to take 45 minutes per new client can run in under 10.

Weekly care-plan maintenance workflow

Before starting, confirm that a recent backup exists for each site you’re updating — through SiteGround’s backup system if the site is hosted with SiteGround, or through whatever backup solution is in place for that client.

Once that’s confirmed, a weekly care-plan workflow through the AI Agent looks like this:

  1. Select all care-plan sites in AI Studio
  2. Run available plugin and theme updates across all sites
  3. Review the agent’s post-update health check, which flags any site that didn’t respond correctly after updating
  4. Generate a maintenance summary for client reporting

A typical summary breaks down like this: sites updated, plugins updated, errors flagged, and post-update health status for each site. The developer doesn’t touch the 18 sites that updated cleanly. They spend their time on the two that flagged an error.

That’s the rebalancing the workflow creates: execution handled by the agent, judgment reserved for the work that actually needs it.

Monthly SEO cleanup workflow

Monthly, select care-plan sites and prompt the AI Agent to audit meta descriptions for empty or duplicate values, check image alt text completion rates, and flag internal links pointing to 404 responses. The agent returns an SEO Health Report and Task List, allowing the team to focus on high-level content strategy while the Agent handles the bulk metadata and media updates.

WooCommerce client update workflow

For WooCommerce clients with recurring update needs, the AI Agent handles the maintenance tasks that keep a store current. Each month, use the agent to:

  • Apply seasonal discounts or revert sale prices across specific product categories
  • Flag out-of-stock or low-inventory items for client review
  • Scan for simple products missing descriptions, images, or SEO metadata

Note that the agent is currently optimized for simple products. Variable products with size or color variants, and shipping class configurations, are outside what the agent can modify through the API at this point.

Because these actions have a direct financial impact, they run through Power Mode. Before anything goes live, the agent presents a detailed plan showing exactly which products will change and by how much. The agency reviews, confirms, and execution runs.

Emergency update workflow

When a critical plugin vulnerability is disclosed, you need to update the affected plugin across every client site the same day. The emergency workflow: confirm which connected sites are running the vulnerable plugin, back up all affected sites, run the update across all of them, verify post-update responses, and report. With the AI Agent, that’s a 20-minute session instead of a half-day of individual site visits.

What agencies should not automate completely

High-impact changes still need human review

The AI Agent is a supervised operations assistant, not an autonomous one. High-impact changes, including anything that touches revenue flows, authentication, client-facing content, or custom-code integrations, should have a human review step before they go live.

This isn’t a limitation of the technology. It’s a risk management position. An agency that lets AI-assisted updates run to completion on WooCommerce stores without review is accepting a risk that’s entirely avoidable with a 10-minute confirmation step.

When to use staging before production changes

For sites with custom plugins, custom themes, or non-standard configurations, run the AI Agent against a staging environment before applying changes to production. SiteGround’s staging tools let you create a copy of a client site, apply the AI-assisted changes there first, and verify results before pushing to live.

This is especially important for securing a website against update-related conflicts: a plugin update that breaks a custom integration is a client emergency on production, but a three-minute fix on staging.

How to keep QA inside the agency workflow

QA is the one thing the AI Agent explicitly doesn’t replace. The agent executes; your team validates.

Build QA into every AI-assisted workflow as a non-optional step:

  • After bulk updates: human reviews the summary and spot-checks at least two or three sites
  • After content changes: human confirms the change appears correctly on a live site
  • After user management changes: human verifies the new user can access what they need and can’t access what they shouldn’t
  • After WooCommerce changes: human checks the front-end product display before the session closes

Scale the work, not the headcount

SiteGround AI Agent for WordPress doesn’t change what agencies need to do, but rather it changes how long it takes. The update cycles still run. The content still gets refreshed. The user roles still get managed. The difference is that an experienced team member can prompt the agent to handle the execution layer across dozens of client sites, then spend their time reviewing outcomes and doing the work that actually requires their judgment.

For agencies building a practice around WordPress care plans, that’s not a minor efficiency gain. It’s the difference between a portfolio that grows your revenue and one that just grows your workload.

Start managing more client sites with SiteGround agency hosting and AI Studio

Frequently asked questions

What is a WordPress AI agent?

A WordPress AI agent is an AI assistant that can perform WordPress management tasks through natural language prompts. Unlike a chatbot that only answers questions, SiteGround’s AI Agent for WordPress connects to WordPress installations and executes real changes such as content edits, plugin tasks, WooCommerce actions, and user management.

How can agencies use a WordPress AI agent for multi-site operations?

Agencies can use a WordPress AI agent for multi-site operations to run repeatable tasks across client sites, including plugin updates, content edits, SEO metadata changes, user-role updates, and WooCommerce product adjustments. The main value is reducing repetitive admin work while keeping human review for QA and client strategy.

Can SiteGround’s AI Agent manage multiple WordPress sites at once?

Yes. SiteGround’s AI Agent for WordPress can manage several connected WordPress sites at once, including updates, content changes, and user-management tasks across multiple installations. Sites are selected inside SiteGround AI Studio before each session.

Can SiteGround AI Agent for WordPress manage sites hosted outside of SiteGround?

Yes. The AI Agent connects to WordPress installations regardless of where they’re hosted. Agencies managing a mixed portfolio (some sites on SiteGround, others on different hosts) can connect and manage all of them through SiteGround AI Studio.

How does the SiteGround AI Agent for WordPress help agencies manage more client sites without hiring?

SiteGround AI Agent for WordPress helps agencies manage more client sites by turning repeatable WordPress tasks into prompt-based workflows. Instead of logging into each site separately, an agency can select connected sites and ask the agent to perform updates, apply changes, or prepare summaries across the portfolio.

Can agencies bulk update WordPress plugins across multiple sites with AI?

Yes, agencies can use AI-assisted workflows to update plugins across multiple connected WordPress sites. The recommended sequence is backup first, update second, verify third, and summarize last. Human review after high-impact changes is strongly recommended, especially for WooCommerce or custom-code sites.

Is the SiteGround AI Agent for WordPress included with agency hosting plans?

Yes. SiteGround’s AI Studio Essential plan is included for free with all hosting plans. This includes 20,000 monthly tokens, access to leading AI models, and the AI Agent for WordPress. For agencies on our higher-tier plans, we provide a higher monthly token allowance to support multi-site management: GoGeek Plans include 40,000 monthly tokens, and Cloud Plans include 100,000 monthly tokens. For agencies managing large portfolios that require even higher volume, additional tokens can be added via the AI Studio Plus plan in the SiteGround Client Area.

Does an AI agent for WordPress replace a maintenance team?

No. An AI Agent for WordPress is an operations assistant that handles repeatable execution, not a replacement for an agency maintenance team. Human team members stay responsible for QA, client strategy, custom development, design decisions, client communication, and risk review.

Can the SiteGround AI Agent for WordPress apply the same content changes across WordPress sites?

Yes. SiteGround’s multi-site AI Agent workflow supports repeated content or user-management changes across connected WordPress installations. Practical agency examples include updating footer text, privacy policy links, support email addresses, user roles, and recurring maintenance content.

How to start vibe coding: The way it works, what you can build, and your first steps

Diagram showing the four-step vibe coding workflow — Describe, Generate, Test, Refine — arranged in a cycle, with UI screenshots of a furniture store web app being built with an AI tool in the background.

To start vibe coding, pick one small project, describe what you want in plain language, let an AI builder, like Coderick AI, create a first version, then test and refine it until the main result works. Starting small, with a landing page, a portfolio, or a simple web app as a first vibe coding project, will get you further faster than trying to build everything at once.

Key takeaways:

  • The easiest way to start vibe coding is to choose one small project, generate a first version, and improve it one step at a time.
  • Vibe coding beginners should treat the first AI output as a draft that needs testing, edits, and review.
  • A good first vibe coding project is simple, useful, and easy to test, such as a landing page, lead form, portfolio, or small tracker.
  • Your first prompt should include the goal, audience, required pages or features, and what “done” looks like.
  • Vibe coding tool choice matters less than project fit: pick a tool that helps you preview, edit, and publish without extra setup.
  • Ask for help when the project involves payments, private data, user accounts, third-party integrations, or repeated errors you cannot explain.

What should beginners know before they start vibe coding?

Below are the most important things to know about vibe coding for beginners before your first session.

Vibe coding is fastest when the project is small

Vibe coding is an approach to building software where you describe what you want in plain language and an AI tool generates the first version. The clearer your description, the better the result. And at least when you’re first starting with vibe coding, small projects are simply easier to describe clearly.

One beginner’s mistake is starting too big. A landing page has one clear job. A portfolio has a defined structure. A small calculator has a fixed number of inputs. Those boundaries are actually what make the first session manageable, as the AI has less to guess at, and you have less to review.

The first AI output is a draft, not the final version

The AI interprets your project brief, makes assumptions about gaps, and fills in details you didn’t specify. That’s exactly what it should do. Your job is to review those assumptions and correct the ones that don’t match what you actually wanted.

Expect the first version to be roughly right, not exactly right. The goal of that first generation is a working draft you can test and improve.

What should you review?

Content accuracy, layout across screen sizes, links, and the main action (a button click, a form submission, a calculation) all need a check before you move on.

Reviewing isn’t optional, even for simple beginner projects. Check that the content is accurate, the layout works on different screen sizes, the links go to the right places, and the main action (a button click, a form submission, a calculation) produces the correct result.

If you’re using Coderick AI, version control makes that process less pressured: you can restore any previous version if something goes wrong, so experimenting doesn’t carry risk. The visual editor also lets you click directly on elements to adjust them without writing a new prompt every time — useful when the fix is small and obvious.”

Coderick AI version history panel showing a saved version named "Minimal Portfolio With Project Filter" from April 7, 2026, with the "Restore this version" option highlighted.

Not every project is a good beginner project

Some projects look simple on the surface but carry hidden complexity. Payments, private user data, login accounts, and third-party integrations like CRMs or booking platforms all come with technical and legal responsibilities that go beyond a first session. Tools like Coderick AI can handle many of these, but they work best as a second project, once you’re comfortable with the basic loop and confident in what you’re asking the AI to build.

Start with a project you can describe clearly and test on your own once it’s built.

How does vibe coding work step by step?

Vibe coding follows a short repeating loop: describe, generate, test, refine. Each pass tightens the result.

Describe what you want

The first step is writing your prompt: a clear description of the project. This isn’t a technical specification. It’s a plain-language brief that covers what you’re building, who it’s for, what it should do, and how simple the first version should be.

Generate the first version

The AI takes your description and builds a first draft. Depending on the tool and project, this might be a full web page, a working form, a functional calculator, or a basic web app layout. Review the output before you do anything else. Read what was built, click through it, and note what works and what doesn’t. This is the ground for your next steps.

Test what works

Testing means trying the project the way a real user would. Click the buttons, fill in the forms, resize the window. The gaps that appear during testing are the most valuable feedback you’ll get, because they show you where the AI interpreted your brief differently from what you intended. Note everything that needs improving; you’ll work through it one item at a time.

Refine one thing at a time

This is another step where most beginners go wrong. Go back to your notes and pick the single most important issue. Ask for that one change. Depending on the tool you use, you can either prompt it or make other changes. 

For example, with Coderick AI, you can describe the change you need in the chat, or, for something small like a text edit, click directly on the element and change it. One focused prompt produces a cleaner result than five problems lumped together — work through the list in order.

Your 30-minute vibe coding action plan

This is a practical first vibe coding session. It works regardless of what tool you choose (see how to choose the best one for your case) and the type of project: landing page, a portfolio, a lead form, or a small tracker. Do the steps in order.

  1. Choose one small project. Decide what you’re building before you open any tool. Write it in one sentence.
  2. Write one clear goal. What does success look like at the end of this session? “A live landing page with a working contact form” is a goal. “A good website” is not.
  3. Add the audience and context. Who is the page for? What do they need to understand or do when they see it? Add that to your brief.
  4. Generate the first version. Paste your brief into the tool and let it build. Don’t prompt again until you’ve read and clicked through the full result.
  5. Test the main action. Find the single most important thing a user would do on this page (clicking a button, submitting a form, reading a price) and test it. Note what works and what doesn’t.
  6. Ask for one focused improvement. Pick the most important gap from your test and write a focused prompt to fix it. One thing.
  7. Save the prompt or version that worked. You’ll want to reuse the ones that produced the best result.
  8. Decide the next step before ending the session. What would you improve in the next session? Write it down before you close the tab. You’ll thank yourself later.

What should your first vibe coding project be?

The best first vibe coding project has a clear goal, a simple structure, and a result you can judge on your own. The project should be simple enough that you know immediately whether it worked.

Simple business landing page

A landing page has one goal, one audience, and a handful of sections — headline, description, social proof, call to action. That structure is well-defined enough that AI tools produce a solid first draft quickly, and the quality is easy to judge: does it communicate what the business does, and does the call to action work?

Personal portfolio or service page

A portfolio or service page is a good beginner project because you already know the content. You don’t have to make up product details or invent testimonials. You can describe your work accurately, and the AI can focus on structure and layout rather than guessing at copy.

Lead capture form

A lead form has a clear outcome: someone fills it in or they don’t. That makes it straightforward to test and easy to measure. Keep the first version simple: a name, an email, maybe one other field. Avoid CRM or email integrations in the first session.

Small internal tracker

A tracker for personal use (tasks, expenses, a reading list, a simple habit log) is low-stakes and genuinely useful. Because you’re the only user, you set the rules and there’s no pressure to make it production-ready before you’re happy with it.

Simple calculator or generator

A calculator or generator has defined inputs, a defined output, and a result you can verify immediately. If the math is right, the project works. If it’s wrong, you know exactly what to fix.

First project options for beginners:

First projectWhy it works for beginnersAvoid at first
Landing pageSimple structure, clear goalComplex checkout flows
Portfolio / service pageYou already know the contentUser accounts or login
Lead capture formOne clear outcome, easy to testCRM or email integrations
Internal trackerLow-stakes, immediately usefulAdvanced permissions
Calculator or generatorResult is instantly verifiableExternal API connections

How do you choose your first vibe coding tool?

Vibe coding tool choice is a real decision, but it’s not the most important one. The project comes first. Choose your AI builder based on what you’re building, not based on which one has the most impressive demo or the longest feature list.

Choose by project type, not hype

Different tools are built for different outputs. Some let you preview the result in the browser and publish it live with one click. Others are built for backend logic or full-stack apps that expect you to run code in a terminal. 

Pick a tool that matches the output you need: a website, landing page, small web app, tracker, calculator, or form. If you don’t have a technical background, look for a tool where you write your prompt, it builds, and you’re looking at a live website. If a tool asks you to install something, write code, or configure a database and hosting separately, it’s probably not the right starting point.

Look for editing, preview, and publishing support

A useful vibe coding tool for beginners does three things: 

  1. It shows you the result as it builds 
  2. It lets you make edits without writing raw code 
  3. It handles the publishing step without asking you to set up hosting separately

These are the baseline for a tool that actually fits a beginner workflow.

Why Coderick AI is a good first tool for websites and web apps

Coderick AI is built for non-technical users who want to go from description to live result without a developer setup in the middle. You describe your website or web app in plain language, the AI website builder generates a working version, and you can preview, edit, and publish directly from the interface.

For beginners building a landing page, portfolio, service site, or small web app, that workflow covers the full loop: describe, generate, test, refine, publish. Coderick AI also supports visual editing alongside the AI prompting interface, so you can click directly on elements to adjust text, colors, or layout without writing a new prompt every time. There’s no separate hosting account to configure and no deployment pipeline to manage. The published URL is ready as soon as you decide the project is done.

What are your first 3 vibe coding prompts?

The three beginner prompts below follow the describe-generate-refine loop. Keep each one focused. A shorter, clearer prompt almost always produces a better first result than a long one that covers multiple goals. If terms like prompt, constraints, first version, or refinement still feel new, this vibe coding glossary can help you check the basics before writing your first prompt.

Prompt 1: describe the project

The first prompt starts the session and sets the scope for every output that follows. Include the project type, the audience, the goal, and the main sections or features. Keep constraints in the prompt too: if you want the first version to be a single page, say so.

Here’s your first prompt formula:

“Build a [project type] for [audience]. The goal is [main action or outcome]. Include [key sections or features]. [Any constraints — style, scope, what to leave out].”

Example: “Build a one-page landing page for a freelance copywriter. The audience is small business owners looking to hire someone for website copy and email campaigns. Include a short bio section, a list of services, two or three testimonials, and a contact form. Keep the design clean and professional.”

That’s enough for a solid first draft and here’s what Coderick AI generates from this first prompt:

Desktop view of a freelance copywriter website for Clara West, built with Coderick AI, featuring a hero section with the headline "Words that win customers & grow your business" and two call-to-action buttons: Start a Project and View Services.

Prompt 2: improve the first version

After reviewing the first output, pick one specific thing to change. Don’t list everything at once.

In our case, there are two competing CTAs in the hero section. “Start a Project” and “View Services” are both asking for attention, which splits the visitor’s focus at exactly the point where you want them to do one thing. If the goal is conversion, there should be one primary action.

Prompt 2 example: “Remove the ‘View Services’ button from the hero. The only action in that section should be ‘Start a Project’.”

One clear instruction, one specific area, one result to review. The result will be more accurate than asking for five changes in one go. And the result is clear:

Updated desktop view of the Clara West copywriter website built with Coderick AI, after iterating with AI, now showing a single "Start a Project" call-to-action button instead of two, reflecting a cleaner layout.

Prompt 3: test and fix issues

After testing the main action (in this case, the contact form), report the exact issue.

Going through our example website, the placeholder text in the message field reads “Tell me about your project, timeline, and budget.” This asks for three things before the visitor has even decided to reach out.

Contact section of the Clara West website showing a form with Name, Email, and Message fields, and a green confirmation message reading "Message sent! I'll be in touch soon." after submission.

For someone who just wants to ask a quick question, that level of detail can feel like too much commitment too soon and may stop them from sending the message at all. The fix is simple: describe the problem and the expected behavior in the same prompt.

Prompt 3 example: “Change the message field placeholder to ‘How can I help you?’ The current placeholder asks for a project, timeline, and budget upfront, which may put off visitors who aren’t ready to share that detail yet.”

That gives the AI both the fault and the fix target, and you’ll get a more accurate result than a vague “fix the form.”

And voila:

Contact section of the Clara West freelance copywriter website with a CONTACT label, the heading "Let's talk about your project," and a form containing Name, Email, and Message fields above a Send Message button.

What beginner mistakes should you avoid?

Now that you have the core prompts down, here are the mistakes worth watching out for before they slow you down.

Starting with a project that’s too large

A project is too big for a first session when the scope has too many moving parts to evaluate clearly. Multiple user roles, conditional logic, or integrations before you’ve built the core feature are all signs to break it down. The project itself is something you can judge on your own once it’s built.

  • Too broad: “Build a website for my freelance copywriting business with a homepage, services page, about page, blog, client portal, and a contact form with automated replies.”
  • Better: “Build a one-page site for a freelance copywriter. The main goal is to get potential clients to send an inquiry. Include a short bio, three service cards, and a contact form that shows a confirmation message after submitting.”

Giving vague instructions

First, think through what you want, then describe the goal, audience, pages or features, and constraints in as much detail as you can to the AI. “Make it look nice” is not a prompt. “Change the background to off-white and make the headline font larger” is. The AI generates what you describe, which means vague input produces vague output. 

Changing too many things at once

After the first version, it’s tempting to list every issue and ask for them all at once. That produces messy results. One change at a time is slower per prompt but faster overall. You spend less time untangling results that fixed one thing and broke three others.

Publishing without testing

A working draft and a publishable project are not the same thing. Before sharing anything publicly, click every link, test every form, check the page on a phone, and read the content out loud. Things that looked fine in the build view sometimes reveal problems the moment a real person tries to use them.

Ignoring errors you don’t understand

If the AI generates an error message you can’t explain, don’t skip past it. Either ask the tool to explain what the error means, or (for anything beyond a basic website) ask a developer before continuing. Errors in the early build are easier to fix than errors discovered after the project is live.

When should you ask a developer for help?

Vibe coding covers a lot of ground, but there’s a clear line where the project scope exceeds what a beginner should manage alone. Knowing that line before you hit it saves time and avoids building something that creates real problems later. Let’s examine where to draw that line.

When money or private data is involved

Payments, billing, and financial data require security standards that go beyond a first vibe coding session. That said, tools like Coderick AI support Stripe integration through a restricted key, which means the payment processing stays on Stripe’s side: a simpler and safer setup than building payment logic from scratch. 

The line to watch is when you start storing, handling, or taking responsibility for financial data yourself. The same applies to any project that stores personal information about other people: customer records, medical details, private communications. These need proper security review, compliance checks, and infrastructure that a beginner project won’t have by default.

When login or permissions matter

The moment your project needs to restrict who can see what, separate admin access from regular user access, or let people log in at all, login and permissions move from a feature request to a security decision. 

You become responsible for what users can access, how their data is stored, and what happens if an account is compromised. And those aren’t questions a prompt can answer. They require proper planning, security review, and in most cases, a developer.

When the project runs a core business operation

Some projects need more than a great website — they need custom backend logic, specific infrastructure, or compliance requirements that go beyond the scope of any website builder. If that’s the case, bring a developer in early.

When you see repeated errors

One error is a prompt problem. Two related errors might be a logic gap. Three or more errors in the same area that keep returning after you ask for fixes are a sign the underlying structure has a problem that prompting can’t resolve cleanly. That’s a developer conversation.

When you need custom integrations

Connecting to a payment gateway, syncing with a CRM, pulling data from an external API: these integrations have authentication flows, error handling requirements, and rate limit considerations that add up quickly. Getting it right the first time is much easier with a developer who’s built the integration before.

Ready to build your first vibe coded project?

The first session teaches you more than any guide can: what context the AI actually needs, how much scope is too much for a single prompt, and how quickly a clear goal produces a usable first version.

Coderick AI is built for this beginner workflow: a clear brief, a working first version, and a direct path from draft to live without a developer setup in the middle. If you’ve got a project in mind and 30 minutes, that’s enough to have something real to show.

[96]

Frequently asked questions about getting started with vibe coding

How do I start vibe coding as a beginner?

Start vibe coding by choosing one small project, describing what you want in plain language, generating a first version, and testing the main result. Don’t start with a large app. Begin with something you can understand, review, and improve in one short session.

What is the best first vibe coding project?

The best first vibe coding project is simple, useful, and easy to test. Good starter options include a landing page, portfolio site, lead capture form, small calculator, or internal tracker. Avoid projects that need payments, complex user accounts, or sensitive data until you’re comfortable with the basic loop.

Do I need coding skills to start vibe coding?

No. You don’t need coding skills to start vibe coding, but you do need to explain your goal clearly. Tools like Coderick AI can create a first draft from your description, but you still need to review the result, test it, and decide what should change.

What should my first vibe coding prompt include?

Your first vibe coding prompt should include the project type, audience, goal, required pages or features, and any constraints. A good prompt tells the AI what to build, who it’s for, what it should do, and how simple the first version should be.

How do I choose a vibe coding tool?

Choose a vibe coding tool based on the project you want to build, not the tool that sounds most advanced. For beginners, Coderick AI is a strong fit when you want to describe a website or web app, preview the result, edit it, and publish without extra setup.

What are the most common beginner mistakes in vibe coding?

The most common beginner mistakes are starting too big, writing vague prompts, changing too many things at once, skipping testing, and publishing before reviewing the output. Beginners get better results by working in small steps and testing after each meaningful change.

Can I use vibe coding to build a real business website?

Yes, vibe coding can produce a real business website if the site is simple, clear, and reviewed before publishing. Coderick AI is especially useful for service pages, landing pages, lead forms, portfolios, and small business sites where speed and clarity matter.

When should I ask a developer for help?

Ask a developer for help when the project involves payments, private user data, login and permissions, third-party integrations, or repeated errors you can’t resolve with a few focused prompts. These areas carry technical and security requirements that go beyond a beginner vibe coding project.

Claude Fable 5: What it is, how it compares, and whether your business needs it

Abstract of Claude Fable 5

Update, July 1, 2026: Following an official statement from Anthropic on June 30th, access to Claude Fable 5 has been restored. The US government had ordered Anthropic to suspend the model on June 12th while it investigated a potential security concern; that directive has now been lifted, and Fable 5 is available again across Claude.ai, Claude Code, Claude Cowork, and the Claude Platform. Mythos 5 has also been partially restored for a set of approved US organizations. All other Claude models were unaffected throughout. Read below to understand more about each model and how Fable 5 fits.

Anthropic just handed the public a model that was, until June 9, 2026, too powerful to release openly. Claude Fable 5 sits at the top of the Claude model family, built on the same foundation as the restricted Mythos 5 with safety guardrails added for general use. Whether it belongs in your workflow, though, is a different question.

Key Takeaways

  • Claude Fable 5 is Anthropic’s most capable publicly available AI model, released on June 9, 2026, and built on the same foundation as the restricted Claude Mythos 5.
  • It’s designed for long-running, autonomous tasks, including multi-step research, complex document analysis, and extended coding projects that previous models struggled to sustain.
  • The model costs $10 per million input tokens and $50 per million output tokens via API, roughly twice the price of Claude Opus 4.8.
  • For most everyday business tasks such as writing, summarizing, and basic research, Claude Sonnet 5 is the smarter, more cost-effective choice, with Opus 4.8 as the step up for work that needs the highest reliability.

What is Claude Fable 5?

Claude Fable 5 is Anthropic’s most capable publicly available AI model, launched June 9, 2026. It’s built for complex, long-running tasks that previous models struggled to sustain. It comes from a model tier Anthropic had, until now, considered too powerful to release openly.

What is Claude Mythos 5 and what does it have to do with Fable?

For the past year, Anthropic has been quietly developing a tier of models called Mythos: models powerful enough that the company considered them too capable for public release. The concern was specific. At Mythos-level reasoning, a model can identify and exploit security vulnerabilities and navigate sensitive areas of biology and chemistry with a degree of precision that raises real risks. Enticing, sure, but problematic.

Anthropic’s answer was to build two versions of the same model. Claude Mythos 5 stays restricted, available only to cyberdefenders, critical infrastructure providers, and select research partners through Project Glasswing. Claude Fable 5, on the other hand, is the same model with safety classifiers added on top, launched for general use on June 9, 2026. 

What are the safety filters and what happens when they trigger?

Because Fable 5 inherits Mythos-level reasoning, it comes with classifiers that monitor every request. So if a prompt touches restricted territory (such as detailed cyberattack tooling, dual-use biology, certain chemistry applications, or frontier AI model development), the model declines and for most of these categories automatically reroutes to Claude Opus 4.8, though behavior may vary depending on the specific topic flagged.

Anthropic reports this happens in fewer than 5% of sessions, so for normal business work you’re unlikely to ever see a refusal. One caveat: shortly after launch, some users reported false positives on completely benign prompts. Anthropic has acknowledged the issue and is working on fixes. If it happens, Opus 4.8 handles the task in the background and your workflow continues.

What’s actually different about Fable 5 — and what isn’t

Where Fable 5 pulls ahead of previous Claude models

The meaningful difference between Fable 5 and Opus 4.8 isn’t any single capability but rather how much further the model can run before it loses the thread. Previous models handle complex tasks well but tend to need check-ins. A long research project, a detailed document analysis, or a multi-step workflow will often require you to re-prompt, correct course, or fill in gaps. Fable 5 is built to sustain that work longer before that happens.

Specific areas where the gap is noticeable:

  • Long-horizon autonomous work: Tasks that previously needed to be broken into chunks and supervised can run end-to-end. Anthropic’s benchmarks on agentic performance show Fable 5 consistently ahead of Opus 4.8 on tasks requiring sequential decisions across extended runs.
  • Maintaining focus across long documents: Opus 4.8 could handle a 1-million-token context window, and so can Fable 5. But remembering early constraints, tracking long document threads, and avoiding contradictions across that full window is where Fable 5 shows a practical difference.
  • Vision and document analysis: Fable 5 posts the strongest vision benchmark scores Anthropic has published. Reading dense technical graphs, extracting data from multi-page PDFs, and interpreting complex screenshots all produce more reliable results.
  • Multi-step workflows: Tool use and agentic workflows, where Claude calls external services, processes the results, and continues working, are smoother. The model is less likely to stall when it hits an unexpected result.
  • Coding: This is where Fable 5 really shines. It’s Anthropic’s strongest coding model to date. It can write, review, and debug complex code with fewer errors and less back-and-forth than previous versions, which makes a real difference if you’re building or maintaining a website, app, or any custom tool.

What Fable 5 still won’t do well

Fable 5 still needs a clear, well-defined task to produce good results. If your brief is vague, the output will be too. It won’t push back and tell you the question you asked is the wrong one, and it can’t replace judgment on decisions that require real-world context.

The safety classifiers can also produce unexpected refusals on benign prompts. And for anything routine, the cost premium is hard to justify when Sonnet or Opus will get you most of the way there for less.

How much does Claude Fable 5 cost?

If you’re on a Claude subscription plan

If you’re using Claude through claude.ai, Fable 5 comes with a temporary usage allowance rather than a flat inclusion. Pro, Max, Team, and select Enterprise plans include it for a limited portion of weekly usage before it shifts to usage credits (check Anthropic’s usage credits page for the current terms). Standard Enterprise seats don’t get an included allowance at all and need usage credits enabled from day one. Opus 4.8, Sonnet 5, and Haiku remain on standard plans without this kind of cap

If you’re paying per token via the API

For developers and businesses accessing Claude through the API, pricing is per million tokens. Fable 5 sits at the top of the scale at exactly twice the price of Opus 4.8, following the same 5x output-to-input ratio consistent across all models.

ModelInput (per million tokens)Output (per million tokens)
Claude Haiku 4.5$1$5
Claude Sonnet 5$3$15
Claude Opus 4.8$5$25
Claude Fable 5$10$50

Source: Anthropic API pricing

*Sonnet 5 launched with introductory pricing of $2 per million input tokens and $10 per million output tokens, in effect through August 31, 2026. Standard pricing shown above applies after that date.

The list price is only part of the picture. Fable 5 thinks longer before it responds, running internal checks that improve output quality but increase token usage. A task that costs a dollar on Opus 4.8 may cost two dollars or more on Fable 5 in practice. For long autonomous jobs where Fable 5 completes something in one run that would take Opus 4.8 three supervised rounds, the math can favor Fable 5. For standard content and research tasks, it rarely does.

Sonnet 5 has a smaller version of the same issue. It runs on a new tokenizer, so the same text can translate to more tokens than it did on Sonnet 4.6. Anthropic set the introductory price to offset that, but it’s worth knowing the token count itself shifted, not just the sticker price.

The Claude AI model family, and which one is right for your business

Claude is not one model. It’s a family, with each tier designed for a different balance of speed, cost, and capability. 

ModelSpeedRelative cost
Claude Haiku 4.5FastestLowest
Claude Sonnet 5FastMid
Claude Opus 4.8ModerateHigher
Claude Fable 5SlowerHighest

Not sure which one fits your needs? Here’s a quick guide, with more detail in the sections below.

If you need to…Use this model
Handle high-volume, simple, repetitive tasksHaiku 4.5
Handle everyday writing, research, content, and agentic work like coding and tool useSonnet 5
Tackle detailed work where accuracy matters most, or complex tasks that need the highest reliabilityOpus 4.8
Run extended autonomous, multi-step, long-horizon tasksFable 5

If you’re also weighing Claude against other AI tools, our ChatGPT vs Claude vs Gemini guide covers the key differences across use cases.

When to use Haiku or Sonnet

Haiku is the right choice when you’re running high volumes of simple, structured tasks: classifying support tickets, tagging content, generating short product descriptions at scale. It’s fast and costs a fraction of the upper-tier models.

Sonnet 5 covers everyday business work and quite a bit more: drafting emails, writing blog posts, summarizing meeting notes, answering customer questions, building basic content. It’s also Anthropic’s most agentic Sonnet yet, closing much of the gap with Opus 4.8 on reasoning, tool use, and coding. 

For most small business owners using an AI assistant day-to-day, Sonnet is where to start, and it now handles a wider range of tasks than “start here” used to mean. Speed is good, quality is close to top-tier, and the cost is still the most manageable of the three paid tiers.

When Opus 4.8 is still the smart default

Opus 4.8 is the workhorse for work where accuracy and reliability matter most, short of a multi-day autonomous run. Detailed research reports, nuanced client documents, code reviews, and long-form analysis all fall comfortably within what Opus handles well. 

Sonnet 5 can take on a lot of this too now, so the honest dividing line is less about task type and more about how much margin for error you’re comfortable with. When the work is high-stakes enough that you’d rather not double-check it, Opus is worth the extra cost over Fable 5’s price.

If you’re weighing Claude Code pricing for a development project, Sonnet 5 will cover a large share of coding tasks at a lower cost, with Opus 4.8 as the step up when you need the extra reliability.

When Fable 5 is worth it

Fable 5 earns its cost when the task is genuinely large and benefits from running autonomously start to finish. Good candidates include:

  • Researching and writing a comprehensive market analysis or business report from scratch, pulling from multiple sources without you stepping in between each step
  • Running a full content audit across a large website and producing a prioritized action plan in one go
  • Analyzing a large set of customer reviews, support tickets, or survey responses to surface patterns and recommendations
  • Building out a multi-page proposal or pitch deck that requires synthesizing information from several documents

If the task could be completed with a few rounds of Opus 4.8 prompts, Fable 5 is probably not the right spend.

Claude chat window where you can select which Claude model to use

How to access Claude Fable 5

Claude Fable 5 is generally available across all of Anthropic’s main surfaces: Claude.ai (web and mobile), Claude Code, and Claude Cowork. It is also available through the Claude API, Amazon Bedrock, Google Cloud Vertex AI, and Microsoft Foundry.

The bottom line: matching the right Claude model to your needs

Claude Fable 5 is a genuinely significant release, but alas “significant” doesn’t mean “right for everyone.” For most small businesses, the model to reach for daily is Sonnet 5, with Opus 4.8 as the upgrade for anything where reliability matters more than cost. Fable 5 earns its place on tasks that are genuinely large, long-running, and autonomous: the kind of work where a skilled contractor completing a project unsupervised over several days is the right mental model.

SiteGround AI Studio chat window where you can select which LLM model to use

For the day-to-day work that makes up most of a small business’s AI needs, SiteGround AI Studio gives you access to ChatGPT, Claude, Gemini, and more than 15 specialized AI agents for SEO, social media, email marketing, and WordPress — all in one workspace, under one subscription.

[97]

Frequently asked questions

What is the difference between Claude Fable 5 and Mythos 5?

Fable 5 and Mythos 5 are the same underlying model with one key difference: Fable 5 includes safety classifiers that block and reroute requests in restricted categories: cyberattack tooling, dual-use biology and chemistry, and frontier AI model development.. Mythos 5 operates without those classifiers and is available only to vetted partners through Anthropic’s Project Glasswing program. For general business use, Fable 5 offers the same capabilities.

Is Claude Fable 5 free?

Fable 5 comes with a temporary usage allowance on Claude Pro, Max, Team, and select Enterprise plans, rather than being included at no cost indefinitely. Check Anthropic’s usage credits page for the current terms. It’s not available on the free tier. Via the API, it costs $10 per million input tokens and $50 per million output tokens.

Which Claude model is best for small businesses?

For the majority of small business tasks (content creation, research, email drafting, customer support) Claude Sonnet 5 offers the best balance of quality and cost, and now handles a fair amount of agentic work like coding and tool use too. Claude Opus 4.8 is the better choice when the work is high-stakes enough that reliability matters more than cost, things like long-form analysis or document-heavy projects where a mistake is expensive. Claude Fable 5 is worth considering only for genuinely large, autonomous, multi-step tasks where the extended run capability justifies the higher cost.

How does Claude Fable 5 handle sensitive or restricted topics?

Fable 5 includes classifiers that monitor for requests in restricted categories: detailed cybersecurity exploits, dual-use chemistry or biology content, and frontier AI model development. If a request triggers a classifier, the model declines and automatically reroutes to Claude Opus 4.8. Anthropic reports this affects fewer than 5% of sessions. For normal business work, refusals are rare. Shortly after launch, some false positives were reported on benign prompts; Anthropic has acknowledged this and is actively addressing it.

Do I need technical knowledge to use Claude Fable 5?

No. Fable 5 is available directly through Claude.ai on web, mobile, and desktop without any technical setup. If you are on a paid Claude plan, you can start using it today from the model selector in the interface. Developer access via API does require technical knowledge, but for everyday business use the standard Claude interface is all you need.

Vibe coding workflow and prompting playbook: plan, prompt, document, refine

Man relaxing on a couch with a laptop, with an AI prompt interface showing the steps Plan, Prompt, Document, and Refine for building a website

Random prompts get random results. A vibe coding workflow gives you a repeatable way to work with Coderick AI and other AI website and web app builders so each session builds on the last instead of starting from scratch.

A vibe coding workflow is a structured process for working with AI tools: you define one outcome, give the AI the right context, review the first output, refine with focused follow-up prompts, and document the decisions that shaped the project. The goal is a consistent, reviewable build process instead of a prompt session that spirals into something you can’t explain, repeat or undo.

Key takeaways:

  • A vibe coding workflow turns random prompting into a repeatable process: plan the outcome, prompt with context, review the output, refine one change at a time, document decisions, and test the result.
  • Start with one outcome before asking AI to build anything. The clearer the goal, the easier it is to judge the output.
  • Better AI outputs come from better context: audience, goal, constraints, examples, and what the first version should include.
  • Prompt refinement works best when you ask for one focused change at a time instead of rewriting the whole brief.
  • Prompt documentation helps you save useful prompts, track decisions, and restart with a clean context when the conversation gets messy.
  • Coderick AI works best when you describe the goal clearly, review the generated first version, and refine the project in small specific steps.

What is a vibe coding workflow?

A vibe coding workflow consists of the following points: 

  1. А defined start (the goal)
  2. А defined end (a result that meets your success criteria)
  3. А series of steps in between that keep the session on track

Workflow vs. random prompting

Random prompting is an unstructured approach: you open an AI tool, type whatever comes to mind, and evaluate the result by feel. There’s no defined goal, no way to judge whether the output is right, and no record of what you asked for. When the result is off, you rewrite the prompt from scratch and hope the next version lands closer.

Here’s a quick example of random prompting: 

“Build me a website for my HVAC business.” Result is off. “Make it better.” Still off. “Add more stuff.” 

A vibe coding workflow moves through defined phases, as covered earlier in this guide. Here’s what that looks like in practice:

Step 1. Describe: “Build a one-page site for a residential HVAC company. Main action: service request form. No ecommerce, no blog. Clean layout, phone number at the top.”

Step 2. Review: Result is close, but the form is below the fold and the heading is too generic.

Step 3. Refine: “Move the form above the fold.” Done. “Rewrite the heading to focus on same-day repairs.” Done.

Three prompts, one clear outcome. That’s the workflow.

Start with one outcome before you prompt

The clearest prompt you’ll ever write comes from a goal you’ve already defined on paper. Spend five minutes here and the rest of the session gets easier.

  1. Name the thing you want built

Be specific about the deliverable. “A website” isn’t a deliverable. “A three-page website for a yoga studio with a class schedule, a contact form, and an About page” is. The name of the thing sets the scope for everything that follows.

  1. Define who it’s for

The audience shapes every decision the AI makes: the language it uses, the features it includes, the layout it defaults to. “Homeowners needing HVAC repairs” and “facilities managers for commercial properties” are both potential audiences for the same type of service, but they expect very different experiences.

  1. Write the success criteria

A success criteriа is a check you can run after the first output to decide whether it worked. It doesn’t need to be long. “The main call-to-action button links to a contact form” is a success criterion. “The page looks good” isn’t.

Two or three criteria is enough for a first session. The goal isn’t to define everything the project will ever need; just enough to judge whether the first output is on track.

  1. Set the first-version boundary

The first version doesn’t need to include everything. A smaller scope produces a cleaner output and gives you a clearer baseline to build from. Decide what the first output must include and what it doesn’t need yet. This stops the AI from adding features you didn’t ask for and gives you a clean baseline to review.

What context should you give before prompting?

Context is what separates a useful first version from one that needs to be thrown away. The AI builds from the context you provide. If the description is incomplete, the output will fill the gaps with guesses.

Business context

Tell the AI what kind of business or project this is for. “Residential HVAC company serving suburban homeowners” gives the AI enough to make reasonable decisions about tone, layout, and functionality.

Audience context

Describe who will use the result. Age, technical confidence, and the specific thing they need to do all matter. “Homeowners who aren’t especially tech-savvy and want to book a repair quickly” is useful. “Regular people” is not.

Style and brand context

If there are visual or tonal constraints, say them upfront. Color preferences, an existing logo, a formal or casual voice. Without this context, the AI is more likely to produce generic output.

Feature context

List what the first version needs to include. The goal here isn’t to define the whole project — it’s to get a reviewable first draft. Three to five features gives the AI enough to build something concrete without producing an output that’s too complex to evaluate in one sitting. More detail can come in follow-up prompts once the structure is right.

Constraints and must-not-do items

What the AI should avoid is just as important as what it should include. No ecommerce. No user accounts. No multi-page navigation for now. These constraints prevent the AI from solving problems you didn’t ask it to solve.

Context typeWhat to includeExample
BusinessWhat you do“Residential HVAC company”
AudienceWho it’s for“Homeowners needing repairs”
GoalWhat should happen“Book a service call”
StyleTone and visual direction“Clean, minimal, blue and white”
ConstraintsWhat to avoid“No ecommerce features”

How should your prompting workflow work?

A prompting workflow has four moves: create, review, fix, and test. Each one has a job. Don’t combine them in a single prompt.

Prompt 1: create the first version

The first prompt is the broadest prompt in the workflow. Include the goal, the audience, the key context, and the first-version boundary. Ask for the first complete version. Don’t hold back important context here because you’re trying to keep the prompt short.

A first prompt for Coderick AI might look like: 

“Build a one-page website for a residential HVAC company. The audience is homeowners in suburban areas. The main action is filling out a service request form. No ecommerce, no blog, no user accounts. Clean layout with a phone number visible at the top.”

And here’s the first result that Coderick AI generates:

Updated hero section of the Summit Air website after a refinement prompt, now showing two call-to-action buttons — Schedule Service and Call (555) 234-8900 — alongside the same four service cards

Prompt 2: Review and improve structure

Before refining details, check whether the structure is right. Is the layout doing what you wanted? Is the information in a sensible order? Is the main action easy to find? A structural problem is harder to fix later, so catch it now.

Prompt 3: Fix one issue at a time

Once the structure is right, move to specifics. One change per prompt. “Move the contact form above the fold” is a good prompt. “Move the contact form, change the heading text, add a testimonial section, and make the buttons blue” is four prompts crammed into one, and the AI will handle some of them well and others poorly.

In our case, if we want the service request form to be the only action a visitor can take in the hero section, we’d use this prompt:

“Remove the phone number button from the hero. The only primary action should be the service request form.”

Hero section of the Summit Air website generated by AI, featuring a blue background, headline "Keep Your Home Comfortable Year-Round," and four service highlight cards: Same-Day Service, 100% Guaranteed, All Brands, and Upfront Pricing

Prompt 4: Test the main user action

Before you call the project done, test the one thing the project is supposed to do. For a booking site, that means going through the booking flow. For a landing page, that means reading it as a first-time visitor. What’s missing or broken?

Document what changed

AI sessions have no memory between prompts. When a session runs long, it’s easy to lose track of what you changed, why you changed it, and which version actually worked. A one-sentence note after each significant prompt — what you asked for and why — is enough to keep the session recoverable.

For example: “Removed the pricing section because it confused the target audience in testing.”

A session that runs four prompts deep already has three decisions worth keeping: what you built, what you changed, and why. Without a record, the next session starts from scratch. With one, it starts from where you left off.

In Coderick AI, every saved state is stored in version history, which means you can roll back to any earlier version if a change takes the project in the wrong direction. Pair that with a short decision log and you have two layers of recovery.

How do you review the first AI output?

Reviewing the first AI output is a specific skill, not just a gut check. Work through a short checklist before you ask for changes.

✅ Check if it matches the original goal

Does the output match what you asked for in the first prompt? Not whether it looks good, but whether it does the job you defined. A beautiful website that doesn’t have a contact form failed the brief.

✅ Check what’s missing

What did you ask for that isn’t there? Go back to your first-version boundary and compare it to the output line by line.

✅ Check what’s wrong

What’s present but incorrect? Wrong copy, wrong layout, wrong tone. Note each issue separately so you can fix them one at a time.

✅ Check what’s too complicated

What did the AI add that you didn’t ask for? AI tools tend to add features. Anything you didn’t request is a candidate for removal before the project gets bigger.

✅ Check what needs human judgment

Some things the AI can’t decide for you: 

  • Whether the copy sounds like your brand
  • Whether the color palette fits your audience
  • Whether the flow makes sense to someone who doesn’t know the product 

Mark those for a manual review pass.

How does prompt refinement work?

Prompt refinement is the discipline of improving the AI output with targeted follow-up requests. It’s not rewriting the whole brief from scratch. It’s asking for one specific change, checking whether it worked, and deciding what to do next.

For example: instead of going back to the AI with “redo the whole page, it’s not quite right,” you’d say “move the service request form above the fold.” Check the result. Then: “rewrite the heading to focus on same-day repairs.” Check again. 

Ask for one change at a time

This is the most important rule in the refinement loop. One change per prompt keeps the output predictable and the session recoverable. When you ask for three things at once, the AI changes all three but you can only evaluate one at a time, so you don’t know which change caused the result you’re looking at.

Reference the previous output

Tell the AI what it just built. “In the version you just created…” or “Keep everything from the last version except…” grounds the follow-up prompt in a specific state. Without this, the AI may drift back to defaults.

Give the reason for the change

“Simplify the navigation because users are arriving from mobile and need to reach the contact form in one tap” is a better prompt than “simplify the navigation.” The reason helps the AI make a proportionate change instead of guessing what level of simplification you want.

Avoid rewriting the whole request

Rewriting the whole prompt from scratch restarts the context window and loses decisions you already made. The AI forgets the decisions you’ve already made. Work from the existing output, not from a blank slate.

Stop when the output meets the success criteria

Go back to the success criteria you wrote before the first prompt. If the output clears them, stop. You don’t need perfection. You need something that works well enough to test with real users or review with a real audience.

Why prompt documentation matters

Prompt documentation is the habit of recording what you asked for, what changed, why it changed, and what you kept. It’s the difference between a session you can hand off, restart, or learn from and one that only makes sense in the moment.

Save the prompt that worked

When a prompt produces a result you want to keep, save it. Save it somewhere outside the AI session. The session context gets messy over time, and what worked in turn 3 is easy to lose by turn 15.

Record what changed

Note every significant change you made and why. Not every tiny adjustment, but every decision that affected the direction of the project.

Track decisions you don’t want to lose

Some decisions aren’t about prompts, they’re about the project. “Decided to remove the pricing page because it confused the target audience” is a decision worth recording even if it happened in a conversation, not a prompt.

Keep a short changelog

A changelog doesn’t need to be formal. A date, a description, a reason, and a result is enough. This is the pattern that makes sessions restartable.

Context rot is what happens when a long AI session accumulates so many follow-up prompts and partial rewrites that the AI’s responses stop being consistent with the original goal. A changelog is the best defense against it because it lets you restart a clean session with a summary of the goal, decisions, and current version.

DatePrompt/changeWhy it changedResult
May 3Simplified homepage CTAToo many actions on the first versionCleaner user path
May 4Removed pricing sectionEarly user confusionLeaner page
May 5Added testimonials blockBrief required social proofAdded above fold

Restart with clean context when needed

When a session gets long enough that the AI starts contradicting earlier outputs or forgetting constraints, start a new session. Paste in a short summary of the goal, the decisions made so far, and the current state of the project. You’ll get cleaner results from a fresh context than from a conversation that’s been running for fifty turns.

When should you stop prompting and start reviewing?

There’s a point in every session where more prompting makes things worse, not better. Knowing when you’ve hit that point is part of the vibe coding workflow.

Stop prompting when:

  • The same issue keeps coming back after you’ve addressed it twice
  • The output from the last prompt is worse than the output from the previous one
  • You can’t clearly explain what change you’re about to ask for
  • The next change involves a judgment call that only you can make
  • The first version is good enough to test with a real audience

At any of these points, the right move is to stop prompting and review manually, test with a real user, or start a new session with a cleaner brief. For higher-risk builds, run the security checks before publishing.

A reusable vibe coding workflow template

Use this template at the start of any new project. Fill it in before you open Coderick AI or any other AI website and web app building tool.

1. Outcome: What should this build accomplish?
2. Audience: Who is it for?
3. Context: What does the AI need to know about the business, style, and constraints?
4. First prompt: What should the AI create in the first version?
5. Review: What’s missing, wrong, or too complicated in the first output?
6. Refine: What one change should happen next?
7. Document: What decision should be saved before moving on?
8. Test: What result proves the current version works?

Put the workflow into practice with Coderick AI

Everything in this vibe coding workflow maps directly to how Coderick AI is built. You describe the goal, Coderick AI generates the first version, and you refine the project without switching tools or managing infrastructure.

The Visual Editor handles credit-free refinements for design changes you want to make without reprompting. Version history works as your decision log: every saved state is a checkpoint you can roll back to or reference when you start a new session. Publishing happens inside Coderick AI, with hosting and SSL included.

The result is that the full workflow: plan, prompt, review, refine, document, test, publish — happens in one place. No separate tools, no technical decisions before you can start.

Test the full workflow free for 14 days.

[96]

Frequently asked questions about vibe coding workflow

What is a vibe coding workflow?

A vibe coding workflow is a repeatable process for working with AI to build websites, apps, or other projects. You define the goal, provide context, write the first prompt, review the output, refine with focused follow-ups, and document what changed. It replaces random prompting with a structured session that produces reviewable, consistent results.

Why do I need a workflow for vibe coding?

AI output depends heavily on the instructions and context you provide. Without a defined process, prompts drift, changes accumulate without a record, and the project gets harder to steer over time. A workflow keeps each step tied to one clear outcome, so you can judge progress against something specific.

What should I do before writing the first prompt?

Define the project goal, the audience, the main action the project needs to support, and the constraints. In Coderick AI, that means describing the business, what the website or app should do, who will use it, and what the first version must include. Five minutes of planning before the first prompt significantly changes the quality of what comes back.

What should a good prompting workflow include?

A good prompting workflow covers the goal, context, first prompt, a review pass, a refinement step, and documentation. The sequence moves from broad to specific: create the first version, check the structure, then fix one issue at a time.

How does prompt refinement work?

Prompt refinement means improving the output with targeted follow-up requests. Keep what works and ask for one specific change: simplify a section, fix a layout, adjust the copy, remove an unnecessary feature. One change per prompt keeps the output predictable and the session recoverable.

What is prompt documentation?

Prompt documentation is the habit of saving useful prompts, recording key decisions, and tracking changes. A short decision log that notes what you asked for, why it changed, and what result you kept is all you need. It makes sessions restartable and decisions reversible.

How do I know when to stop prompting?

Stop when the output meets your success criteria, when the same issue keeps recurring, or when the AI starts making the result worse. At that point, test the project manually, review it with a real audience, or start a clean session with a shorter, clearer brief.

Is a vibe coding workflow the same as writing app requirements?

No. A vibe coding workflow covers the overall process of planning, prompting, reviewing, refining, and documenting. App requirements go further: they define users, data models, screens, business rules, and acceptance checks for a production web app. The workflow supports the requirements process but doesn’t replace it.

Claude Code pricing in 2026: what changed and how to keep building affordably

Abstract of Claude Code versus prompting AI to create a website

Claude code pricing stops at the code, whereas getting to a live site? That’s on you. Building, launching, hosting, securing, and maintaining what you create with that code adds costs that the plan price simply doesn’t cover.

Claude Code can be accessed through Claude subscription plans or API usage, but the real cost goes beyond this, as it depends on usage limits, usage credits, project complexity, and the production stack around the code. Developers may already plan for hosting, databases, deployment, monitoring, and maintenance. But non-technical users should ask whether they need Claude Code at all, or whether Coderick AI is a more predictable all-in-one path for a website or а web app.

Key Takeaways

  • Claude Code pricing in 2026 isn’t just the plan price. Usage limits, usage credits, API billing, and production costs all affect the real budget.
  • Claude Code is built for code-first users. It makes sense when you need source code control, Git workflows, custom architecture, and developer-managed deployment.
  • The hidden cost is the production stack. Hosting, SSL, domains, databases, monitoring, updates, and maintenance often sit outside the Claude Code subscription.
  • Coderick AI isn’t a Claude Code deployment layer. It’s a separate path for users who don’t need a codebase and want a predictable all-in-one option for a website or simple web app.

What is Claude Code?

Claude Code is an agentic coding assistant built by Anthropic, and understanding its full cost starts with knowing what it actually is. Unlike the Claude chat interface you use in a browser, Claude Code lives in your computer’s terminal and works directly alongside your code. It can read files, write and edit code, run commands, and work through multi-step development tasks, all from the command line.

If you’ve been vibe coding with Claude in the browser and are wondering whether Claude Code is the next step, it’s worth stopping here. Claude Code is designed for people who are already comfortable in a development environment. If terms like “terminal”, “repository,” and “command line” made you pause just now, that’s actually useful information because it’s worth understanding what Claude Code involves before you commit to a plan that includes it.

What is Claude Code pricing in 2026?

Claude Code doesn’t have its own separate price tag. It’s included in certain Claude subscription plans, or you can access it through Anthropic’s API and pay based on how much you use. There’s no free Claude Code plan. The free Claude tier covers chat only.

Claude Pro pricing

Claude Pro costs $20 per month, or $17 per month if you pay annually ($200 upfront). It’s the entry-level plan that includes Claude Code, and for most individuals it’s the natural starting point. You get access to Claude’s main models and a usage budget that refreshes every few hours.

Who it’s for: Individuals and solo developers who want to try Claude Code without a heavy commitment. Good for focused sessions, smaller projects, and getting started.

One thing worth knowing upfront: your Claude Code usage and your regular Claude chat usage share the same budget. If you spend a long session building something in Claude Code, that can eat into what’s available for your other Claude work in the same window. It’s one shared pool, not two separate ones, so a big morning Claude Code-exploration session could leave you feeling a bit short-changed by lunchtime.

Claude Max pricing

Claude Max comes in two tiers. Max 5x costs $100 per month and gives you five times the usage capacity of Pro. Max 20x costs $200 per month and gives you twenty times. Both are monthly only. There’s no annual discount.

Who it’s for: Developers who regularly hit Pro limits and need more daily headroom. Max 20x is for full-day heavy users where the flat rate works out cheaper than paying per use.

Max makes sense once you’re consistently running out of capacity mid-session. Most people starting out won’t need it right away. And if you’re not sure whether you need it, you probably don’t.

Claude Team pricing

Claude Team plans are for organizations and small teams that need shared billing, administration, and seat-level access. There are two seat types. Standard seats cost $20 per seat per month annually (or $25 billed monthly). Premium seats cost $125 per seat per month (or $100 annually) and give five times more usage headroom, making it the right choice for developers using Claude Code heavily throughout the day. There’s a minimum of five seats, but you can mix Standard and Premium seats on the same account.

Who it’s for: Teams with a mix of heavy and light Claude Code users. Premium seats suit developers using Claude Code intensively throughout the day; Standard seats work for anyone who needs Claude Code occasionally or mainly uses Claude chat. Premium seats include five times more usage capacity per session than Standard seats.

Claude API pricing

An API is essentially a direct line to Claude’s brain. There’s no subscription, no plan, just a connection your developer (or your tools) can tap into and pay for exactly what they use. Think of it like a pay-as-you-go meter rather than an all-you-can-eat plan. Usage is measured in tokens, which are roughly three-quarters of a word each, and billed per million. As of June 2026, the rates are:

ModelInput (per MTok)Output (per MTok)
Claude Haiku 4.5$1.00$5.00
Claude Sonnet 4.6$3.00$15.00
Claude Opus 4.8$5.00$25.00

Who it’s for: Developers and teams building automated workflows or tools on top of Claude Code, where usage is variable and unpredictable. For regular daily use, a flat subscription plan is simpler and usually cheaper.

One trap worth flagging: if you’re a developer and you have an Anthropic API key configured in your setup, Claude Code may bill at these per-use rates instead of through your subscription, even if you have an active plan. It’s one of those things that’s obvious in hindsight and annoying in real life. Worth double-checking before a long session if you’re not sure which billing path is active.

What changed with Claude Code pricing and limits in 2026?

The main 2026 changes to Claude Code aren’t new plan tiers or price increases. They’re about Claude Code rate limits, and specifically how much you can do within your plan before hitting one.

Higher Claude Code usage limits

On May 6, 2026, Anthropic doubled the usage limits on Claude Code for all paid plans: Pro, Max, Team, and Enterprise. The change came alongside a large compute expansion through a partnership with SpaceX’s Colossus 1 data center. In plain terms: you can do roughly twice as much in a single session before hitting a usage limit.

The doubling applies to the per-session limit, not the weekly one. Weekly limits stayed the same in this announcement, though a separate temporary promotion from May 13 through July 13, 2026 added a further 50% on top of that across all plans.

Removed Pro and Max peak-hour reductions

Before May 6, 2026, Pro and Max users got less Claude Code capacity during busy periods of the day, when lots of people were using Claude at the same time. Anthropic was quietly throttling usage during those windows, which meant your plan felt less powerful at the exact times you were most likely to be working. Not ideal. That’s now permanently gone for Pro and Max. Your plan delivers the same capacity at 10am as it does at 10pm.

Usage credits became more important for heavy users

In 2026, Anthropic added an option that lets you keep working after you’ve hit your plan’s included limit, by switching to pay-as-you-go pricing for the overage. You set a monthly spend cap so it doesn’t run away from you; you can also toggle on and off whether you tap into your credits. Both are useful safety valves, but the option does mean your monthly cost may no longer be strictly fixed. Usage credits are billed separately from your subscription, so it’s worth keeping an eye on them if you’re using Claude Code heavily.

Claude Code usage and buying extra credits

How do Claude Code usage limits affect the real cost?

Usage limits are where the plan price and what you actually spend start to diverge. The subscription tells you the floor. Your usage patterns, credits, and API billing determine the ceiling.

Claude and Claude Code share the same usage limits

If you’re on Pro or Max, your Claude chat and Claude Code usage come out of the same pot. That means a long Claude Code session in the morning can leave you with less capacity for regular Claude work later in the day. It’s not a separate Claude Code limit. It’s the same budget being used in two places at once. 

Usage credits can add separate pay-as-you-go costs

When you hit your plan’s limit and usage credits are enabled, you keep working but the meter switches to pay-as-you-go. Those overage charges are billed separately on top of your flat subscription. For a Pro subscriber who triggers this regularly, the combined monthly cost can start creeping toward what Max 5x would have cost outright. It’s worth knowing how often you’re hitting your limit before deciding whether to upgrade your plan or rely on credits.

API-key usage can create different billing behavior

This one’s mainly relevant if you or your developer have set up Claude Code with an API key directly. In that setup, all Claude Code activity is billed at per-use rates rather than through your subscription plan, even if you have an active subscription. It’s a common source of unexpected charges and easy to miss if no one’s watching the API account.

What are the hidden costs of building with Claude Code?

Claude Code pricing covers access to the AI assistant, but doesn’t cover the infrastructure needed to put what you’ve built somewhere the rest of the world can actually reach it. That’s where the bill (and list of things to do) has a habit of quietly growing. So while not every Claude Code user is building something that needs to go live (some use it for internal tools, existing codebases, and so on), if the goal is a standalone website or web app there will be separate costs. Hosting, SSL, domains, and ongoing maintenance are all outside the subscription. As such, some users may find a managed path the more straightforward route.

Hosting and deployment

Code generated or edited through Claude Code doesn’t run anywhere by default. It sits on your machine, being code. Deploying it requires somewhere for it to live: a cloud platform, managed hosting, a VPS, or a containerized runtime. Monthly costs range from a few dollars for static sites to several hundred for production web applications with real traffic. None of that is covered by the Claude subscription. Neither is the process of implementing it.

Example of coding a website in Claude Code

Custom domains and SSL

Your project also needs a domain name and an SSL certificate (the padlock in the browser bar that tells visitors the site is legit). Domain registration typically runs $10 to $20 a year, and while SSL is often included with hosting, the DNS setup and domain configuration take time even when the certificate itself is free. Users who are comparing cost because Claude Code feels too technical can also look at Claude Code alternatives for beginners.

Databases, backend services, and monitoring

Any application that stores user data, handles authentication, or processes payments needs a database and backend services. Managed databases on platforms like AWS or Google Cloud add a database cost that scales with storage and query volume. Application monitoring, error logging, and uptime alerting typically mean additional subscriptions. These are standard costs for any code-first project, regardless of which AI tool helped write the code.

Maintenance, updates, and debugging time

Code written today needs attention later. Dependencies go stale. APIs change their minds. Bugs show up in production that had no business being there. Each update cycle takes developer time, and for non-technical users without a developer available, that maintenance cost has a market rate. This is especially true when comparing an AI prototype to published website costs, where the production layer often turns out to be the real ongoing cost.

Do you need Claude Code, or a predictable all-in-one website path?

The decision between Claude Code and a managed builder path isn’t really about AI capabilities. It’s about whether you need a codebase, who’s going to manage the infrastructure it requires, or whether you can build a website without Claude Code in the first place. And the reality is, for a lot of people, the answer to the first question is no.

Coderick AI — SiteGround’s managed AI website and app builder — is relevant when the budget question isn’t “how do I deploy my Claude Code project more cheaply?” but “do I need a Claude Code project at all?” If the goal is a business website, landing page, portfolio, booking flow, dashboard, or web app, it can be a more predictable cost path than Claude Code with separate hosting, SSL, domains, backend setup, deployment, and maintenance on top. And honestly, it’s a whole lot easier.

Use Claude Code when you need codebase control

Claude Code is a developer tool. It works in the terminal and connects to Git workflows, deployment pipelines, version control, and test runners. It’s the right choice when the project needs custom architecture, third-party integrations, specific backend logic, or the ability to read and modify every line of code. Developers who already manage infrastructure can treat the production stack as a known and expected cost.

Use Coderick AI when you don’t need a code-first workflow

Coderick AI is SiteGround’s managed website and app builder. You describe what you want to build, and Coderick AI generates it. From there, publishing, hosting, SSL, version control, and updates are all handled within the platform — no separate tools, no deployment pipeline, no developer required. There are different plan tiers depending on how much you want to build, but all of them include everything you need to go live.

Example of vibe coding a website using a single prompt via Coderick AI

For founders, freelancers, marketers, and small business owners whose goal is a working website or simple web app, the total cost and time comparison matters more than the feature comparison. Coderick AI replaces the code-first workflow rather than following it — and if you’re curious how that works in practice, the process of building a web app with an AI builder is more straightforward than it sounds.

Think in total project cost, not only AI subscription cost

A fair comparison between Claude Code and a managed builder path looks like this: Claude subscription cost plus hosting plus SSL plus domain plus database plus deployment time plus ongoing maintenance. Not just the subscription price. For many non-technical users, the production stack adds more to the monthly budget than the AI subscription itself; the same cost-and-complexity question also applies when comparing OpenAI Codex alternatives for beginners.

Ready to build without the infrastructure overhead?
Coderick AI is SiteGround’s managed website and app builder — AI-assisted building, hosting, SSL, publishing, updates, and expert around-the-clock support, all in one place. If you don’t need a developer-controlled codebase, you don’t need the infrastructure headache that comes with one. Find out more about Coderick AI.

Can you build in Claude Code and then use Coderick AI?

Coderick AI isn’t a full Claude Code project deployment platform

Coderick AI isn’t the standard path for deploying a Claude Code project. It’s not a GitHub import tool, a repository connector, or a way to hand off a full Next.js or React app from your local environment to a managed host. The two tools serve different starting points.

Some files can be used as references or starting points

Coderick AI supports uploading specific text-based file types as reference material or starting points: HTML, CSS, SCSS, JS, JSX, TSX, and Markdown. In some cases, individual files from a Claude Code workflow can be uploaded into Coderick AI as inputs for a new build. That’s not the same as importing and deploying a full project repository, though. A partial component, an HTML layout, or an artifact-style file can be a useful starting point, especially when turning a Claude Artifact into a real website, but a complete multi-file application can’t be imported as-is.

The main decision is code-first workflow vs managed workflow

The more practical question is which workflow to choose from the start, not how to connect them after the fact. If the project needs a codebase, Git history, custom backend logic, and developer-managed deployment, start with Claude Code. If it needs to be live and managed without developer overhead, start with Coderick AI. 

How can you keep building affordably with Claude Code?

Pick the right Claude plan for your actual usage

The most common Claude Code overspend comes from choosing a plan based on how you imagine you’ll use it rather than how you actually do. Pro at $20 a month is the right starting point for most individual developers doing focused daily work. Upgrading to Max 5x ($100 a month) only makes sense once you’re regularly exhausting Pro limits mid-session. Max 20x ($200 a month) earns its keep for developers using Claude Code as a full-day primary tool, where the flat rate runs cheaper than equivalent API billing.

Monitor usage before enabling more credits

Usage credits let you keep working after plan limits run out, but they add variable costs on top of your flat subscription. Before enabling them, it’s worth checking whether you’re actually hitting limits or just getting close. Turning credits on without monitoring how often they trigger can quietly push a Pro bill toward Max territory for a fraction of the capacity.

Separate experiments from production builds

Exploratory sessions, big refactors of unfamiliar codebases, and prototype builds burn more tokens per task than focused feature work. Running experimental sessions separately from production work, and being deliberate about context size and model choice during exploration, keeps the core subscription budget predictable.

Decide early whether the project needs codebase ownership

The production stack costs for a Claude Code project aren’t always obvious at the start. A developer-owned codebase means deployment infrastructure, ongoing maintenance, and update cycles. Deciding early whether the project genuinely needs source code control avoids building a code-first project and then discovering the ongoing costs of managing it weren’t in the budget.

Avoid paying for both a code-first stack and a managed stack when one path is enough

Some users end up paying for a Claude Code subscription, a hosting service, and a managed builder tool simultaneously, which is a great way to spend money on three things when one would have done the job. If one path covers the project requirements, the other is just overhead. 

A Claude Code subscription plus separate hosting makes sense for developer-controlled projects. A managed builder path makes sense for websites and simple web apps where hosting, SSL, and publishing come included. Paying for both without a clear reason usually means the project scope wasn’t defined clearly at the start.

When is Coderick AI the more affordable path?

Coderick AI may be the more affordable path when the code-first stack costs more than the project needs. Here’s when that’s usually the case.

The project is a website or simple web app

Business websites, landing pages, portfolios, booking flows, dashboards, and content-driven web apps don’t need a user-managed codebase with version control and a deployment pipeline. If you’re a small business owner, building your website with an AI website builder without writing any code may be a more natural starting point than Claude Code.

Example of a site you can build just by prompting with Coderick AI

The user doesn’t need source-code ownership

Source code ownership matters when a project needs custom integrations, proprietary logic, multi-developer collaboration, or future portability. For a business website or simple web app maintained by one person, source code ownership adds cost and complexity without adding proportional value.

The user wants hosting, SSL, publishing, and updates handled together

A predictable managed website deployment bundles the production concerns that sit outside a Claude Code subscription into a single service. Hosting, SSL certificate provisioning, custom domain connection, and update management are part of the platform, not separate line items in the monthly budget.

The user wants predictable post-build costs

The ongoing cost of a Claude Code project is harder to predict than the subscription price. Maintenance, updates, and infrastructure usage all add variable costs after the initial build. A managed builder path with a fixed monthly cost is easier to plan around, particularly for non-technical users who’d otherwise pay a developer for every update cycle.

Which path is more cost-effective for your project?

Project situationMore cost-effective pathWhy
You need source-code control, tests, Git, custom architecture, or manual deploymentClaude CodeYou need a code-first workflow and should budget for infrastructure separately
You already have a developer or engineering workflowClaude CodeThe extra production stack is expected and controllable
You only need a business site, landing page, portfolio, booking page, dashboard, or simple web app without source-code ownershipCoderick AIA managed all-in-one path can avoid separate tooling, hosting, and infrastructure costs
You are non-technical and mainly want the project liveCoderick AIYou avoid paying for a coding workflow you don’t plan to manage
You have a partial HTML/CSS/JS component or exportDependsCoderick AI may use supported files as references or starting points, but it isn’t a full project importer

Ready to build without the infrastructure overhead?

If the goal is a working website or web app, not a developer-controlled codebase to maintain, Coderick AI bundles AI-assisted building, hosting, SSL, publishing, updates, and expert around-the-clock support into a single managed path. It’s not the right tool for every project. But for users who pay for a Claude Code subscription and then still need to solve hosting, deployment, and ongoing maintenance separately, it may be the more predictable and affordable place to start.

[96]

Frequently asked questions

How much does Claude Code cost in 2026?

Claude Code is included with Claude Pro, Max, Team Premium, and Enterprise plans. Pro costs $17 per month with annual billing or $20 per month on monthly billing. Max starts at $100 per month. Claude Code can also be used through API-based billing, charged per token with no monthly minimum.

What changed with Claude Code pricing in 2026?

The most important 2026 capacity change took effect on May 6, 2026. Anthropic doubled Claude Code’s five-hour rate limits for Pro, Max, Team, and seat-based Enterprise plans, and permanently removed peak-hour limit reductions for Pro and Max users.

Do Claude and Claude Code share usage limits?

Yes. Pro and Max usage limits are shared across Claude and Claude Code, so activity in both tools counts against the same limits. Heavy use of Claude Code can reduce the remaining capacity available for regular Claude work within the same window.

What are Claude usage credits?

Usage credits let paid Claude subscribers keep working after hitting included usage limits by switching to pay-as-you-go pricing. They’re charged separately from the subscription and billed at standard API rates.

What are the hidden costs of Claude Code?

They’re not extra Claude Code fees. They’re the costs of the code-first production stack: hosting, SSL, domains, deployment, databases, monitoring, updates, and maintenance. Developers tend to expect these because it’s just part of the deal. Non-technical users often discover them only after the code is written, which is less fun.

Is Coderick AI a deployment service for Claude Code projects?

Not exactly. Coderick AI isn’t the standard deployment layer after Claude Code. It supports uploading certain text-based files, but that’s not a full project import workflow. It’s a managed AI website and app-building platform for users who may not need Claude Code in the first place.

Can I build something in Claude Code and use it in Coderick AI?

Sometimes, but only in a limited sense. Coderick AI supports specific text-based file types: HTML, CSS, SCSS, JS, JSX, TSX, and Markdown. Those files can serve as references or starting points, but it’s not the same as importing and deploying a full Claude Code repository.

When is Coderick AI cheaper than Claude Code?

Coderick AI may be cheaper when you don’t need a codebase and would otherwise pay for Claude Code plus separate hosting, SSL, custom domains, databases, deployment, and ongoing maintenance. It’s a more predictable path for websites and simple web apps that don’t require source code ownership.

When should I still choose Claude Code?

Choose Claude Code when you need source-code control, Git workflows, tests, custom architecture, integrations, deployment flexibility, or developer-managed infrastructure. It’s a developer tool that works in the terminal and connects with the tooling developers already use for deployment, databases, monitoring, and version control.

How do I keep Claude Code costs predictable?

Choose the plan that matches your actual usage, monitor shared Claude and Claude Code limits, be careful with usage credits, separate experiments from production work, and decide early whether the project really needs codebase ownership. If the goal is a simple site or app, compare the total code-first cost against a managed builder path before you commit.

Stop sending boring emails: A guide to email marketing content

SiteGround Email Marketing dashboard showing a campaign being sent to subscribers and leads, with a promotional email preview displaying a 15% summer discount for a shoe store.

If your open rates are dropping and you’re not sure why, the answer is usually in your sent folder. One content type, sent on repeat, trains subscribers to stop paying attention. This guide covers the six types of email marketing content that fix that, and a simple framework for putting them together so your email marketing actually gets somewhere.

Key takeaways:

  • A varied content mix keeps subscribers engaged between promotions and protects your sender reputation
  • Welcome emails have the highest open rates of any email type — most businesses underuse them
  • Sending only promotions trains your list to ignore you
  • 1–2 emails a week works well for most small businesses, but content type matters more than send frequency
  • Different subscribers need different emails — where they are in the relationship should drive what you send

What is email marketing content? 

Email marketing content is the message inside your email: what you actually say to your subscribers and why. It can serve different purposes: introducing your brand, teaching something useful, sharing a story, promoting an offer, or bringing inactive subscribers back. Together, these different content types cover the full customer journey, from the moment someone joins your list to the point they become a loyal buyer.

Why your content mix matters more than your send frequency 

Sending frequency gets a lot of attention in email marketing, but what you send matters more than how often you send it. When every message is a promotion, subscribers learn to treat your emails as noise. They stop opening, stop clicking, and eventually stop caring.

A varied content mix changes that dynamic. When subscribers get something useful or interesting between offers (a tip, a story, a resource) they stay engaged. And email engagement matters beyond the relationship: inbox providers evaluate senders based on spam complaint rates and overall subscriber behavior. 

According to Validity’s 2026 Email Deliverability Benchmark Report, keeping spam complaint rates below 0.1% is now the desired threshold. A list that only hears from you when you’re selling is more likely to generate spam complaints and a damaged sender reputation takes dedicated effort to recover, not just time.

Give different emails different jobs and keep reading to see what those jobs look like.

6 types of email marketing content and what each one does

Before reading about the six content types, do this one thing: pull up your last 10 sent emails and sort them into two piles: 

  1. Emails that asked for something 
  2. Emails that gave something

Count each pile. If you have seven promotional emails and three of everything else, that ratio is your problem, not your open rates, not your subject lines, not your send time. Write the numbers down. Then keep reading, because the rest of this guide is about fixing them.

Here are the six content types that make up a balanced email mix: what each one does, and when to reach for it.

Welcome emails

A welcome email is the first message a subscriber receives after joining your list, and statistically, the one they’re most likely to open. Its role in the mix is to set the tone before any ask is made: who you are, what they can expect, and why staying subscribed is worth their while. Send it immediately after signup, every time, without exception. Everything else you send builds on the foundation this email either creates or fails to create.Not sure where to start with your welcome email? SiteGround Email Marketing comes with a gallery of ready-made templates (including welcome emails) so you’re not staring at a blank canvas wondering how to introduce yourself.

SiteGround Email Marketing template selector showing Welcome Email Templates, including a waitlist sign-up, a founder introduction, and a sustainability-focused welcome email with a discount code.

Educational content and how-to emails

Educational emails are the workhorses of a healthy content mix. Their job is to build the kind of authority that makes your promotional emails land better when you do send them. Think of every educational email as a deposit: you’re building a track record of usefulness that subscribers will draw on when deciding whether to trust your recommendations. They work best when they’re specific: one concrete problem, one clear answer rather than broad topic overviews that could have been written by anyone.

Мake educational emails more interesting: before you write, finish this sentence — “After reading this email, my subscriber will know how to ___.” If you can’t complete it in one line, the topic is too broad. 
Then write the email like you’re explaining it to a friend over coffee, not presenting to a boardroom.

Newsletters

A newsletter job isn’t to teach or to sell — it’s to show up. Consistently, on a predictable schedule, with enough personality that subscribers recognize your voice the moment they open it. Think of it like that friend who checks in every few weeks. Not always with big news, but reliably there. That consistency is what keeps you familiar between purchase moments, and familiar is what makes people buy from you when you do have an offer.

The newsletters people actually look forward to: a recognizable voice. Read your newsletter back and ask yourself if it sounds like you or like a brand. If you’d never say any of it out loud, rewrite it until you would.

Promotional emails

Promotional emails are the ones you’ve probably already been sending — a discount, a launch, a limited-time offer. They’re the most direct content type in the mix and the most effective at driving immediate action, but only when the relationship behind them is already warm. A list that hears from you exclusively through promotions stops treating them as offers and starts treating them as noise. The other five content types on this list exist, in part, to make this one work.

Another quick tip: Read your promo back and count how many sentences start with “we,” “our,” or your business name. Then rewrite them to start with “you” instead. The offer doesn’t change. The way it feels to the reader does.

For example: “We’re launching our new skincare range this Friday” becomes “Your skin’s about to get an upgrade — our new range drops Friday.” Same information, completely different feeling.

Stories and behind-the-scenes

Behind-the-scenes emails are the easiest to skip when you’re busy; they don’t have an obvious ask, a clear conversion goal, or a deadline driving them. But they’re consistently the ones subscribers remember and respond to the most.

They don’t lead with a lesson or a pitch. They show the person behind the business through a real moment, a decision, a mistake. The teaching happens on the way, not as the point. For small businesses, this is a structural advantage: your story, your voice, your mistakes are yours alone. One honest email about a decision that nearly went wrong will do more for subscriber loyalty than ten polished newsletters.

A trick for writing these when you’re stuck: if you’re staring at a blank screen, start with the moment you almost got something wrong. A decision that nearly went sideways, a launch that nearly didn’t happen, a lesson that cost you something. That’s where the interesting email lives — not in the win, but in what happened just before it.

Re-engagement emails

Every list has subscribers who’ve gone quiet: they signed up at some point, stopped engaging, and have been silently inflating your list size ever since. A re-engagement email’s job is simple: find out who can be won back and let go of the ones who can’t. Do it intentionally, every 90 days or so, before deliverability quietly suffers.

Skip “we’ve missed you.” It’s the subject line equivalent of a form letter. “Still interested?” or “Should we break up?” gets opened. And often gets a reply.

Cheat sheet: nail every email element to your content type

Now that you know what each type does, here’s how they should actually feel when you’re writing them, from subject line to closing line:

Subject lineBodyCTAClosing
WelcomeDelivers on the signup promiseWho you are, what you offer + one immediate piece of valueOne soft next step (a link to a resource)What’s coming next and when
EducationalProblem-first, no hypeOne problem, one answer, one exampleOptional link to go deeper“Try this today”
NewsletterConversational, like a text from a friendA few updates or resources tied to one theme or momentLight, contextualConsistent personal sign-off
PromotionalOutcome-focused, reason to act nowOffer in the first two sentences, outcome before priceOne button, nothing competing with itRestate the deadline or key benefit
Story / BTSHonest, slightly unfinished-feelingOne specific moment + the tension behind itReply invitation or a soft link; not a hard sellLeave it open — invite a response
Re-engagementDirect and self-awareAcknowledge the silence + one reason to stayStay or unsubscribe: both equally easy to find“Either way, no hard feelings”

How to plan your email content mix

Knowing what each content type does is the easy part. The harder part is sitting down on a Monday morning and actually deciding what to send this week. These six steps take that decision off your plate, covering everything from where your subscribers are in the customer journey to what your metrics are telling you about your mix.

The steps below follow the customer journey: from the moment someone joins your list to the point they become a loyal, engaged buyer.

email customer journey stages diagram

1. Start with one goal per email

Before you pick a content type or open your email editor, decide on your email marketing goal: what do you want this email to do? Inform? Build trust? Drive a purchase? One email, one job.

This single habit is what separates a content strategy from a random send schedule. 

2. Match the content type to the relationship stage

Not everyone on your list needs the same email right now. Someone who signed up yesterday needs something different from someone who’s been opening every email for six months — and something very different from someone who hasn’t clicked anything in three.

Here’s how to match what you send to where they are.

Where they areWhat to sendWhy
Just joined your listWelcome email, educational contentBuild familiarity before making any ask
Opening emails but not buying yetNewsletters, how-to emails, storiesDeliver consistent value, establish personality
Clicking, engaging, buying occasionallyMix of value content and occasional offersKeep trust high while converting it into revenue
Bought from you beforeBehind-the-scenes, early access, rewardsDeepen the relationship with the people already sold on you
Haven’t opened in 90+ daysRe-engagement emailFind out who’s still interested before your deliverability suffers

3. Send the right email to the right part of your list

You don’t need complex segments to send more relevant emails. For a small business sending 2–4 emails a month, one split does most of the work. For instance, you can differentiate customers vs. non-customers using Groups in SiteGround Email Marketing.

  • Existing customers: lead with loyalty, exclusivity, and product depth; they already trust you
  • Non-customers: lead with education and value; they’re still deciding whether you’re worth their attention

That single split immediately makes every email feel more relevant to the person receiving it.

In SiteGround Email Marketing, you can organise your contacts into Groups and send separate campaigns to each one. If you’re running a WooCommerce store, the easiest way to build your customer segment is through the subscribe checkbox at checkout — anyone who buys and opts in can be assigned to a Customers Group from there. If you’re not on WooCommerce, a one-time CSV import of your existing customer list gets you set up. It’s not fully automated, but you only need to do it once.

Once you have your Groups set up, you’ll occasionally run into this: sometimes a subscriber will sit in more than one Group — a loyal customer who’s also gone quiet lately, or someone who bought once but never really engaged. Don’t overthink it. Educational emails and newsletters go to everyone regardless. 

For promotions, use your best judgement. Send to your most engaged Group first, then broaden if the offer is relevant to everyone. When in doubt, ask yourself what this person most needs to hear from you right now. That usually settles it.

4. Repurpose the content you already have

The most common reason small business owners fall off their content calendar isn’t lack of time — it’s running out of things to say. The fix is already sitting in your existing content.

Your blog posts, social media tips, podcast episodes, and videos are all email content waiting to happen:

  • Pick one piece of existing content: a blog post, a tip you shared on Instagram, a question a customer asked last week
  • Pull out one takeaway; not a summary, one specific immediately useful point
  • Write 200–300 words around it: enough for subscribers to get value without clicking anywhere, then link to the original for anyone who wants more

A 1,500-word blog post yields one solid educational email. A five-tip Instagram carousel yields five. You don’t need a new idea every week — just a different format for one you already have.

5. Decide on your content ratio, not just your frequency

For most small businesses, 2–4 emails a month is a sustainable starting point. But how often you send matters less than what you send across those emails.

A simple rule of thumb (and one that’s been around long enough to have earned its place): the 80/20 rule. Roughly 80% of your emails should give subscribers something genuinely useful: education, a story, a newsletter, a resource. The remaining 20% can ask for something in return. In practice, for every promotional email you send, aim for two or three that aren’t selling anything.

A concrete monthly mix might look like this:

WeekContent typeSelling anything?Example
Week 1Educational emailNo“3 things that are hurting your skin barrier (and what to use instead)”
Week 2NewsletterNoA roundup of what you’ve been testing, a customer tip you loved, one thing coming up next month
Week 3Promotional emailYes20% off your bestsellers, this week only
Week 4Story / BTSNo“We almost scrapped our bestselling moisturizer before launch”

📅 Planning around seasonal moments
Your subscribers think in seasons before they think in weeks. Black Friday, the January reset, spring launches, back-to-school — these moments are already on their radar, which makes them the perfect anchors for your content calendar.
The way to use them without blowing your 80/20 ratio: map one promotional email to each seasonal peak, then plan the two or three value emails that lead into it. The content type you lean on in the build-up depends on the moment:
Back-to-school: lead with educational emails — your audience is in problem-solving mode and receptive to practical advice
Black Friday: lead with stories and BTS — people want to know who they’re buying from before they spend
January: lead with newsletters — everyone’s in reset mode and looking for useful, low-pressure content
Spring launches: lead with educational or how-to content — new season, new goals, high motivation to learn something
The promotion lands at the end of that sequence, on a list that’s been warming up for weeks rather than one that hasn’t heard from you since October. Think of the seasons as your content calendar skeleton — fill in the value content around the promotions and the planning part largely takes care of itself.

6. Track what’s working and adjust

Good news: your subscribers tell you exactly what they want to read. You just have to know where to look. Every open, click, and unsubscribe is a vote. Аnd read across a month or two of sends, those votes add up to a pretty clear picture of what’s working in your content mix and what isn’t.

After each send, check three email metrics: 

  • Open rate is your relationship health check. A gradual drop over time isn’t a subject line problem. It’s your list telling you they’ve stopped expecting something worth opening.

→ If the open rate is trending down, check your ratio: more than 25% promotional sends is usually the culprit.

  • Click-through rate (CTR) is your content quality check. If people open but don’t click, the email didn’t deliver on what the subject line promised. For educational emails especially, a healthy CTR means the content was genuinely useful — not just opened and forgotten.

→ If your CTR is dropping, narrow your next educational email to one specific problem and make sure the subject line matches what’s actually inside.

  • Unsubscribes are your most honest feedback. A spike after a promo means the value content around it wasn’t doing enough work. A spike after an educational email means the topic missed.

→ If unsubscribes spiked after a promo, count how many value emails went out in the four weeks before it. If the answer is one or fewer, that’s your answer.

These three numbers won’t tell you everything, but they’ll tell you enough to know what to adjust in your mix. For a full breakdown of what those numbers mean and what to do about them, see our email marketing ROI guide.

Now go send some email marketing content worth reading

If you’ve made it this far, you already know more about email content strategy than the majority of small business owners sending emails right now. The ones who treat their list like a billboard — show up when there’s something to sell, go dark the rest of the time — are leaving a lot on the table. Not just revenue, but the kind of subscriber relationships that make email actually enjoyable to do.

Pick one content type you’re not sending yet and write that email this week. Don’t wait for a full content calendar or a slower month — that month isn’t coming. Start with one email and build from there.

Your list is already there. They signed up because they thought you’d be worth hearing from. Go prove them right.

SiteGround Email Marketing gives you the templates, AI writing tools, and send infrastructure to put everything in this guide into practice, without needing a marketing team behind you.

[58]

Frequently asked questions about email marketing content 

What types of content should I include in email marketing?

The six core types are welcome emails, educational content, newsletters, promotional emails, behind-the-scenes stories, and re-engagement emails. Each serves a different point in the subscriber relationship — welcome and educational emails build trust early, newsletters maintain presence, promotions convert that trust into revenue, stories build brand personality, and re-engagement emails clean your list of inactive subscribers.

How do I repurpose blog content for email marketing?

The most practical approach is to treat your blog post as the source and write a shorter version for email that delivers one key takeaway — not a summary of the whole post. Give subscribers enough to get value from the email itself, then link to the full article for readers who want to go deeper. A 1,500-word blog post typically yields one solid educational email.

How often should I send marketing emails?

For most small businesses, 2–4 emails per month is a sustainable starting point. Frequency matters less than consistency and content ratio — four emails of mixed types (educational, newsletter, promotional, story) will outperform four promotional emails at the same cadence.

What makes a good marketing email?

A clear purpose before you write it, content matched to where the subscriber is in the relationship, one call to action, and a subject line that earns the open without overpromising. The emails that perform best are the ones that give subscribers something worth their time before asking for anything in return.

Why is email marketing content valuable?

Because it’s the difference between a list that buys and a list that ignores you. A subscriber who only hears from you when you’re selling something learns to tune you out. One who regularly gets useful, interesting emails stays engaged — and when you do have an offer, they’re already paying attention.

How to turn a Claude Artifact into a real website

Blue gradient background showcasing website design process with mockups, wireframes, code editor, and finished website examples

Claude Artifacts live on claude.ai by default. To put one on your own domain, pick a production path: Coderick AI for managed hosting, Claude Code for developer control, or manual deployment.

A Claude Artifact runs on a claude.ai URL with no way to add a custom domain, no control of SEO metadata, no place to store form submissions, and no path for ongoing edits outside Claude. Adding those things is what makes a site production-grade. 

You have three practical paths for going live: publish the artifact from Claude for demos and sharing, use Claude Code and a developer deployment workflow, or hand the artifact files and production brief to Coderick AI, which can accept the artifact’s source files directly and rebuild them as a hosted site on SiteGround’s infrastructure.

Key takeaways:

  • A Claude Artifact becomes a real website only after you add the production layer: a custom domain, SSL, SEO control, forms or database handling, analytics, and ongoing maintenance.
  • Claude’s built-in publishing generates a public link on Free, Pro, and Max plans and supports embedding, which is enough for demos, internal sharing, and feedback but not for a production site.
  • Coderick AI accepts file uploads of up to 30 text-based files (.html, .css, .scss, .js, .jsx, .ts, .tsx, .md) totaling 500 KB, plus up to 10 images, so the artifact’s exported code becomes the literal starting point for a live project.
  • Coderick AI projects go live on SiteGround’s hosting the moment you publish, and SSL installs automatically once a custom domain points to SiteGround nameservers.
  • Claude Code is the developer-control path: it turns artifact logic into an owned, versioned codebase you deploy through platforms such as Vercel, Netlify, or Cloudflare Pages.
  • The single most important handoff asset is the artifact’s saved code plus a short brief describing what should happen after the site goes live.

What is a Claude Artifact?

A Claude Artifact is a standalone output that Claude creates in a side panel during a conversation. It can be a small web page, React component, SVG, chart, dashboard, calculator, form, game, or interactive prototype. Artifacts are useful because you build and refine the result visually while you chat, so instead of receiving only code in the conversation, you see how the artifact looks and behaves.

Claude interface showing an artifact in the side panel: a photography portfolio website (Northlight Photography) with hero section and booking buttons

Many artifacts use the same building blocks as websites: HTML, CSS, and JavaScript which live inside Claude’s environment. When you publish an artifact, it is served from Claude’s infrastructure, usually on a claude.ai URL. That is enough for a prototype, but not always enough for a public website.

That distinction is the core of the workflow: Claude helps you validate the idea, while the production path turns that idea into a website people can actually use. This is one version of the broader AI prototype to published website workflow.

Can you publish a Claude Artifact directly?

Yes. Claude includes built-in artifact publishing for sharing and demos. On Free, Pro, and Max plans, you can publish an artifact and share it via a public link. Anyone with the link can open it in a browser. On Team and Enterprise plans, artifact sharing may be limited to your organization, depending on the workspace settings.

Share artifact modal dialog showing sharing options with "Unshared" status and "Share & copy link" button

Claude also supports embedding published artifacts into another website. When embedding, you define which domains are allowed to load the artifact. You can also unpublish the artifact later to revoke access.

Claude publishing vs. a real website

Publishing the artifact directly works well when the goal is to share, test, or demo a prototype, not launch a production website. In such cases, the artifact works like a live mockup. It proves the interaction and helps people understand the idea faster than a static screenshot.

A published artifact stops being enough when the project needs to operate as a public business asset. At that point, you are no longer asking how to share a Claude Artifact. You are asking how to turn it into a real website.

When Claude publishing is enoughWhen you need a real website
Sharing or demoing a prototypeRunning a public business asset
A claude.ai URL worksBranded custom domain + SSL
Stakeholders or a small teamPublic visitors and search traffic
Form flow just needs to look realForms must store or route data
You’ll re-edit it in ClaudeSomeone owns and maintains it long-term

How to turn a Claude Artifact into a real website

Turning a Claude Artifact into a real website is a five-step process: finalize the artifact, save its code, write a short handoff brief, choose a production path, then build, publish, and test the live site.

1. Finalize the artifact in Claude

Keep iterating until the artifact reflects the site you want to launch. Review the design, functionality, copy, and user flow, and treat the final artifact as the visual and functional source of truth for the production version.

Claude chat interface with conversation about redesigning a LaunchForge AI landing page, showing design refinement discussion

2. Save the code and document the behavior

Open the artifact’s code view and download and save the relevant source files before starting the production handoff. Depending on the artifact, this is typically an .html file plus separate .css and .js files, or .jsx and .tsx files for React components. 

Code view of an artifact showing HTML file structure and Download all button to export source files

These are exactly the file types the production path can read directly, so save them individually rather than as a single screenshot or PDF.

Also take screenshots of important states, such as:

  • Default view
  • Mobile view
  • Empty state
  • Error state
  • Success state
  • Form validation state
  • Any modal, dropdown, or multi-step interaction

Screenshots and short notes help the production tool or developer understand intended behavior that static code does not make obvious.

3. Create a production handoff brief

Write a short brief that explains what the live website needs beyond the Claude Artifact.

Include:

  • Artifact purpose and target audience
  • Published artifact link
  • Screenshots of key screens and states
  • Saved artifact code
  • Page structure and navigation
  • Final copy and calls to action
  • Form fields and data-routing requirements
  • Domain and SSL requirements
  • Analytics or marketing integrations
  • Launch deadline
  • Ongoing maintenance owner

This step is easy to skip, but it’s what prevents the production build from making decisions that aren’t explained in the artifact. A clear handoff brief keeps production focused on building the site, not rediscovering decisions already made during prototyping.

Tip: You can ask Claude to help you generate the handoff brief, using the above as a prompt base.

4. Choose the right production path

Choose the production path based on who will own, update, and maintain the site after launch. 

  • Use Coderick AI for a managed production handoff where the site is built, hosted, published, and edited inside one SiteGround workflow, especially if you want to build without a Claude Code workflow. 
  • Use Claude Code if a developer needs to turn the artifact into a real codebase, manage it in Git, and deploy it through a technical pipeline. 
  • Keep the published Claude Artifact if the goal is only to share a working prototype.

Our pick: Coderick AI

The hard part isn’t launching. It’s editing the site six months later when the artifact is forgotten and the deployment setup is somebody else’s problem. Coderick AI keeps the build, the domain, and the edits in one place.

5. Build, publish, test, and maintain the live site

Once you choose a path, rebuild or import the artifact into the production environment, connect the domain, enable SSL, test the site, and define how future edits will happen. A website is not finished when it launches: it needs a clear owner, an update process, and a maintenance plan. The specific publishing and domain steps for the managed path are below.

How to hand off a Claude Artifact to Coderick AI

Instead of re-explaining your design in three paragraphs of prose, you give Coderick AI the supported artifact files, screenshots, and a short prompt and tell it where each file belongs. The sequence is:

  1. In your finalized Claude Artifact, open the code view and save the source files (for example, an .html file and its .css file, or the .jsx and .tsx files for a React component).
  2. In Coderick AI, drop those files directly into the chat. 
  3. Prompt Coderick AI with the role each file plays: “Apply this HTML as the homepage” works far better than “use this file,” because Coderick AI needs to know where the file goes and what it does.
SiteGround Coderick AI interface with file upload area, showing index.html and instructions to import Claude-generated artifact
  1. Coderick AI reads the source and rebuilds it inside your project, keeping your structure, your styles, and the specific elements you uploaded, then builds on top to add pages, wire up functionality, or extend the layout.
Coderick AI project initialization screen with loading spinner and "Setting things up..." message

What Coderick AI handles after the handoff

After the handoff, Coderick AI covers the managed production layer: building the website or web app from your files and prompts, applying edits through chat, publishing and hosting on SiteGround’s infrastructure, applying SSL, creating responsive layouts, and supporting backend needs such as databases and user authentication. 

It also includes built-in version control, so you can experiment and roll back to an earlier version at any time, and the backend is auto-generated, so you never touch server-side logic unless you want to. For the user, this turns the artifact-to-website process into one guided managed workflow instead of a chain of disconnected tools.

How to publish and connect a custom domain

Publishing in Coderick AI puts your project live on SiteGround’’s hosting immediately; there is no separate hosting setup to arrange. 

To put it on a custom domain, go to Client Area > Websites > Coderick Projects, open the chosen project’s Actions menu, and select Change Primary Domain. 

SiteGround domain change form with input fields for new domain and confirmation button

Enter the new domain and confirm. 

Please note that using a custom domain for a Coderick project requires a paid Coderick plan. 

If the domain is registered with SiteGround, it is pointed automatically. If it is registered elsewhere, point it to the SiteGround DNS records shown on that screen. 

Success confirmation screen showing "You are all set!" with SiteGround DNS records (NS1.SITEGROUND.NET, NS2.SITEGROUND.NET) and instructions to point domain

SSL installs automatically once the domain points to SiteGround’s DNS. 

When Coderick AI is not the right path

Coderick AI is not the best fit when the project needs full source-code ownership, external infrastructure, Git branches and pull requests, or a custom CI/CD pipeline; in those cases Claude Code with a developer deployment workflow is more appropriate. Before choosing that route, factor in Claude Code pricing and deployment costs.

It may also be the wrong fit for projects that require bespoke API integrations, background jobs, or direct server-level configuration. Coderick AI is strongest when the priority is managed publishing: moving from a validated prototype to a hosted site without handling infrastructure separately. 

What to test after the artifact becomes a live website

Once the site is live, run a focused pre-launch check before sending visitors to it.

  • Custom domain and SSL – Confirm the site loads on the custom domain over HTTPS, check for mixed-content warnings in the browser console, and make sure redirects are in place if the site replaces an older URL.
  • Mobile layout – Open the site on a phone and tablet and check the header, navigation, hero section, forms, buttons, embedded media, and interactive elements. Mobile is where prototype-to-production issues show up first.
  • Forms and database actions – Submit every form, confirm the data reaches the correct destination, and confirm the visitor sees a clear success message. If the site includes accounts, test sign-up, login, logout, and password reset.
  • Page speed and accessibility – Run a basic performance check and look at Largest Contentful Paint and Cumulative Layout Shift, not only the overall score. Check that images have alt text, headings follow a logical order, links are descriptive, and the site works with a keyboard.
  • Ongoing edits and maintenance – Decide who owns the site and how future edits happen. On Coderick AI, updates happen through chat; in a developer workflow, updates happen in the codebase and redeploy through the pipeline. Without an owner and update process, even a successful launch can become outdated quickly.
.post-page__colored-blocks.post-page__colored-blocks–update p { margin: 15px 0px; }

Related workflows: Google Stitch and Claude Design

This article focuses on Claude Artifacts. If your starting point is a visual UI prototype from Google Stitch, or an Anthropic design project rather than an artifact, the production logic is similar but the handoff details differ. For exact workflow steps, see:

How to turn a Claude Design project into a real website
How to turn a Google Stitch design into a real website

Take the validated artifact into production with Coderick AI

The hardest part of taking an artifact live is not the artifact. It is everything that happens after you close the Claude tab. Coderick AI is the answer to “I’d rather not deal with the rest.”

[96]


FAQs

1. Can you turn a Claude Artifact into a real website?

Yes. A Claude Artifact can become a real website once you move beyond the prototype stage and set up production needs such as hosting, a custom domain, SSL, responsive testing, SEO metadata, and ongoing maintenance. You can publish or embed artifacts from Claude, use Claude Code for a code-based build, or use a managed path such as Coderick AI.

2. Is Coderick AI a replacement for Claude?

No. Coderick AI is not a replacement for Claude. Claude is useful for creating, testing, and refining the artifact, while Coderick AI can serve as the managed production path to turn a validated idea into a live website. You can also create a website or a web app from scratch in Coderick AI by describing what you want, then refining and publishing it through its managed website-building environment.

3. Can Coderick AI directly import Claude Artifact code?

Coderick AI is a managed production path rather than a direct Claude Artifact code importer. You can use the finished artifact, screenshots, copy, layout, and functionality notes as a clear blueprint, then recreate and publish the website inside Coderick AI’s managed building environment.

4. When should I use Claude Code instead of Coderick AI?

Use Claude Code when you need developer control, repository ownership, raw source-code editing, custom integrations, tests, or a GitHub-based deployment workflow. 

5. Can a Claude Artifact have a custom domain?

Claude’s artifact publishing is mainly for sharing and embedding artifacts. If the goal is a branded production website with a custom domain, users should move the artifact into a website deployment path. Coderick AI supports custom domains.

6. What is the best workflow for non-technical users?

For non-technical users, the best workflow is: build and refine the artifact in Claude, document the final version, then use Coderick AI as the managed production path. This avoids manual hosting, deployment, domain, SSL, backend, and maintenance tasks while keeping Claude as the creative and validation layer.

Build a website without Claude Code: The Coderick AI path for non-technical users

Abstract of using Claude Code versus a managed AI site builder like Coderick AI

Building a website with Claude Code no longer means opening a terminal. What you still need is everything that happens after the code: a host, a domain, SSL, a deploy step, and someone to keep it all running. If that list made you tired, Coderick AI skips it: describe the site you want, and it goes live on SiteGround hosting.

Key takeaways:

  • You can build a website with Claude Code without writing code or opening a terminal: the desktop app gives it a graphical interface, and Claude Code on the web runs in the cloud.
  • Claude Code builds the code, not the website around it. Hosting, a domain, SSL, deployment, and ongoing maintenance are still yours to set up.
  • In a browser, Claude Code on the web needs a connected GitHub repository, and it pushes finished work to a GitHub branch.
  • Coderick AI is SiteGround’s AI website and web app builder, made for non-technical users who want a live site without that setup.
  • Every Coderick AI project includes hosting, SSL, version control, and automatic deployment, so publishing is a single step.
  • Claude Code is still the better fit if you already have a codebase, an engineering team, or need full source-code control.

Can you build a website with Claude Code if you can’t code?

Yes. Claude Code no longer requires a terminal, and you can describe what you want in plain language while it writes the code. What it doesn’t come with is hosting, a domain, or a way to publish. Those are still yours to arrange.

The desktop app removes the terminal

The Claude Code desktop app swaps the command line for a graphical interface. You point it at a folder on your computer, ask for changes in plain language, and review what it did. You still end up with project files in a folder, not a website.

Claude Code on the web runs in the cloud, but needs GitHub

Claude Code on the web runs on Anthropic’s cloud infrastructure, so there’s nothing to install. The catch: it works from a GitHub repository you connect, and pushes finished work to a GitHub branch. That means a GitHub account, plus a way to get the code from GitHub onto a live site. Either way, you end up with code. Turning it into a website is where the real work starts.

When does Claude Code make sense for a website?

When Claude Code helps

Claude Code is genuinely useful when you already have a project, codebase, or a development workflow. It works inside a codebase (the full collection of source code files that make up a software project), so if there is an existing repository and a team of developers already comfortable working with code, it makes their work a lot faster and more efficient.

When Claude Code is unnecessary

Claude Code becomes unnecessary the minute you just want a live website. A landing page, a portfolio, a booking site, a small CRM, an invoice tracker, or a small business website. None of these require a codebase, much less technical knowledge, to exist. If that sounds closer to your situation, Claude Code alternatives for beginners can help you choose a simpler starting point.

When a managed website path is simpler

A managed path is simpler when the goal is the website outcome, not the development process. If the question is “how do I get a working site live today without configuring servers,” the answer is definitely a managed AI website builder. And definitely not a coding agent that expects a project folder, a deployment pipeline, and a computer science degree you never got.

What does Claude Code add to the website-building workflow?

Claude Code gives technical users precise control over the codebase and development workflow. That’s its strength. It is also, for non-technical users, the precise problem.

It works with codebases and project files

Claude Code is built to work inside projects that already have a file structure. It reads, edits, and creates files within that structure. You point it at a repository and work from there. There is no chat-to-live-site path; you start with code and end with code — you still require deployment, hosting, domains, SSL, and ongoing maintenance.

Example of code created in Claude Code

It can run commands, tests, and development tasks

Claude Code can run commands, execute test suites, and perform development tasks that would normally require manual effort. For a developer, that’s major time saved. For everyone else, it’s a lot of activity you’d struggle to check.

It fits GitHub, GitLab, and pull request workflows

Claude Code is designed to slot into professional development workflows that use version control. Branches, pull requests, commit histories — these are the natural environment for Claude Code. 

It still leaves you with launch and infrastructure decisions

Even if you’re on board with Claude Code building or modifying a codebase, the launch decisions remain. Where does the site live? Who handles hosting, DNS, SSL, and the deployment pipeline? These are essential questions to be addressed, and Claude Code doesn’t answer any of them. It hands you code, wishes you luck, and leaves the rest entirely up to you.

Why might non-technical users avoid Claude Code?

Claude Code is easier to start with than it used to be, but it’s still built around code, not websites. Here’s what stands between you and a live site if you try.

They don’t want to work inside a codebase

Every version of Claude Code works on project files, whether that’s a folder on your computer or a GitHub repository. The desktop app hides the command line, but not the code. You’re still reviewing file changes and error messages you didn’t write, one decision at a time. That’s a lot of homework for someone who just wants a portfolio site.

They don’t want to manage repositories or GitHub

In the browser, Claude Code needs a GitHub repository, and its workflow is built around branches and commits. That means setting up a GitHub account, connecting a repository, and understanding version control well enough to know what just changed. For a freelancer who wants a portfolio site, this is overhead that has nothing to do with the actual goal.

They don’t want to configure hosting, DNS, SSL, or deployment

After the code exists, it still needs to go somewhere. Configuring a hosting environment, pointing a custom domain, setting up SSL certificates, and wiring a deployment pipeline are infrastructure tasks that require technical knowledge. Claude Code doesn’t manage any of that.

They want a live website, not a developer workflow

This is the core tension. Claude Code gives you control over a development workflow. Most non-technical users don’t actually want a development workflow: they want a live website. Optimizing for control over the process is only useful when you understand the process. When the goal is a live website, the right tool is the one that gives you exactly that, and not a graduate course in deployment infrastructure.

What is the simpler path if you don’t want Claude Code?

Start with the website outcome, not the codebase

Describe what the site should do, not how to build it. The simplest path to a live website skips the technical infrastructure entirely and starts with the outcome: a plain-language description of what you need. AI website builders like Coderick AI make this possible without a repository, a framework decision, or a terminal session before the first page exists.

Example of a website being created by Coderick AI based on a simple prompt

Claude Code works the opposite way: you start with infrastructure, and the website is what eventually comes out the other end.

Choose a managed builder instead of a coding agent

A coding agent like Claude Code is built for developers who already know what to do next. A managed website builder handles the full path in one environment (creation, structure, hosting, and publishing) so no prior technical knowledge is required to get something live.

Keep publishing, hosting, and updates in one environment

Switching between tools creates friction, costs, and headaches, especially when you factor in Claude Code pricing and deployment costs. Building in one place, then exporting to a hosting provider, then configuring deployment is a multi-step process that requires understanding each layer. A managed environment where building and hosting are the same product removes that friction entirely (and often saves you costs in the process).

How does Coderick AI replace the technical setup around Claude Code?

Coderick AI is SiteGround’s AI website and web app builder, with no coding required. Here’s what that looks like in practice.

Already designed it in Claude Design or Google Stitch? Import it

If you’ve already designed your site in Claude Design or Google Stitch, you don’t have to start over. Export the design as a ZIP or HTML file, upload it when you start a new Coderick AI project, and adjust the pre-filled prompt to describe how it should work. Coderick AI builds a working website or web app from the design, hosted and ready to publish.

Describe the website or app instead of opening a code project

The starting point in Coderick AI is a plain-language description. The more detail you bring upfront, the stronger the first build, but you can start with something as simple as “a booking site for a vet clinic with an appointment form and a services page” and refine from there. Coderick AI interprets the intent, generates the user interface, creates the backend logic, and handles the technical work in the background. No repository, no terminal session, no framework decision required.

Coderick AI also accepts visual references, screenshots, and supported files as starting material. If you already have a design mocked up elsewhere, you can bring it straight in. If you designed something in Google Stitch, you can turn that Google Stitch design into a real website using Coderick AI. The same applies if you worked up something in Claude’s design tools. You can turn a Claude Design project into a website, or even a Claude artifact into a website using Coderick AI, all without starting from scratch. From there, you shape the project into something suited to your needs, all through the same chat interface.

Build structure, pages, forms, and simple functionality through prompts

Once the initial build is generated, changes happen through the same conversation. Add a page, adjust the layout, add a contact form, and change the navigation structure by using natural language prompts. The platform supports a wide range of use cases: business websites, portfolios, landing pages, internal tools, simple CRMs, booking systems, invoice trackers, and task planners. 

Users can also import existing code files (including .js, .jsx, .ts, .tsx, .html, .css, .scss, and .md) to bring existing work into a Coderick AI project. That makes Coderick AI useful for users who already have files from other prototyping tools and want to take them live without setting up infrastructure separately, including cases where the goal is to turn a Claude Artifact into a real website.

Publish without setting up a separate hosting workflow

When a project is ready, hitting Publish deploys it instantly to SiteGround’s hosting infrastructure. No domain configuration to manage. No hosting environment to configure. No deployment pipeline to set up. The site goes live on the same infrastructure that powers millions of SiteGround-hosted websites, and with built-in caching and a free CDN included.

Publishing a site in Coderick AI by simply prompting and hitting publish

Every Coderick AI project ships with hosting, SSL, version control, user authentication, and automatic deployment included. These are not add-ons. They are part of the product from the first build. For what that actually saves versus assembling the pieces yourself, see how to compare AI website builder pricing without getting burned.

Manage updates without editing a repository manually

Post-launch updates work the same way as the initial build: describe the change in chat and Coderick AI applies it. There is no need to check out a branch, edit files locally, push to a repository, or trigger a deployment. The managed environment handles the full update cycle ( building, versioning, and redeploying) so the workflow stays the same whether you are making the first page or the fifteenth update.

What do you avoid by using Coderick AI instead of Claude Code?

Every item below is a step that Claude Code requires and Coderick AI removes entirely. The same logic applies if you want to build a website without OpenAI Codex and avoid a coding-agent workflow altogether.

No installation or project setup

Coderick AI runs in your browser. Sign in with your SiteGround account, describe the project, and start building. There’s nothing to install, no folder to point it at, and no repository to connect before the first page exists.

No GitHub repository required for a simple site

Coderick AI has built-in version control. There’s no need to set up GitHub, initialize a repository, or manage commits manually. For users who want a business site, a portfolio, or a landing page, a GitHub repository is an unnecessary layer of complexity that Coderick AI removes by default.

No manual deployment pipeline

Deployment in Coderick AI is automatic. There is no build step to trigger, no automated pipeline to configure, and no server to target. Publishing is a single action.

No separate hosting or SSL setup

Hosting, SSL, and DNS are part of the Coderick AI managed environment. There’s no separate hosting account to provision, no SSL certificate to install, and no DNS record to configure for the initial launch. Custom domains are supported (users can connect a custom domain to a Coderick AI project through their account) but the base configuration requires no manual infrastructure work.

Less post-launch maintenance complexity

After launch, updates go through the same prompt-based workflow as the build. There are no server patches to apply, no deployment scripts to maintain, and no hosting configuration to revisit for routine content changes. The managed environment absorbs the operational complexity that would otherwise fall on the site owner.

When should you still choose Claude Code?

Claude Code is the right tool in a specific set of circumstances. Those circumstances generally involve existing codebases, engineering teams, or the need for precise technical control.

You need source-code control

If reviewing every code change, managing branches, and maintaining a full commit history is important to the project, Claude Code fits into that workflow. It’s built for teams that treat version control as a core part of how work gets reviewed and approved.

You already have a codebase or engineering team

Claude Code’s most natural home is an existing project. If there is already a codebase in a repository and a team working inside it, Claude Code adds speed to the work that team already does. For a non-technical user starting from nothing, that advantage is not relevant.

You need custom integrations or advanced architecture

Complex backend requirements, custom API integrations, non-standard data architecture, multi-service dependencies — these are cases where direct control over the codebase matters. Claude Code is suited to those requirements. Coderick AI is built for a different scope: functional websites and web apps that don’t require custom engineering depth or full source-code ownership.

You want GitHub, tests, pull requests, and manual deployment control

If the workflow involves pull request reviews, automated test runs, and manual deployment approval, Claude Code belongs in that pipeline. These are professional development workflows, and Claude Code is designed for them. They are not requirements for most small business websites, portfolios, landing pages, or internal tools.

Is Coderick AI the right path to build a website without  Claude Code?

For most non-technical users, yes — especially when the project does not need a developer-controlled codebase. The table below maps the most common situations to the most appropriate tool.

User situationBetter pathWhy
You want a live site without working in a codebaseCoderick AIThe workflow starts from the website or app outcome, not files and commands
You do not want GitHub, repositories, or deployment pipelinesCoderick AIThe managed path removes technical setup
You need hosting, SSL, and publishing handled togetherCoderick AISiteGround’s Coderick AI includes hosting, SSL, version control, and publishing as part of the builder experience
You already have a codebase and want to modify itClaude CodeClaude Code is built for working inside existing projects

Skip Claude Code. Launch your website instead. 

For users starting from scratch, the path is simpler than you might expect. Describe what you need, build it through conversation, and publish it in a single step.If you’re new to SiteGround, your first Coderick AI Essential plan starts with a 14-day free period, so you can build and launch your site before your first payment. The repository, the hosting, the deployment pipeline: none of it is your problem. Build a website without Claude Code using Coderick AI and spend your time on the business, not the infrastructure.

[96]

Frequently asked questions

Can I build a website with Claude Code without coding?

Yes, you can build a website with Claude Code without coding. Claude Code’s desktop app works without a terminal, and Claude Code on the web runs in the cloud, so you can describe what you want in plain language. You’ll still need to handle hosting, a domain, SSL, and deployment yourself, and review the code changes it makes. If you’d rather skip that setup, Coderick AI builds and publishes the site for you.

Does Claude Code need GitHub?

In the browser, yes. Claude Code on the web works from a GitHub repository you connect and pushes finished work to a GitHub branch. The desktop app works on a folder on your computer instead. Either way, you’ll still need somewhere to host the finished site.

When should I build a website without Claude Code?

You should build a website without Claude Code when your goal is a live site, not a developer-controlled codebase. If you don’t want to work with project files, GitHub repositories, hosting setup, DNS, SSL, or deployment pipelines, a managed builder like Coderick AI is the more direct path for landing pages, portfolios, booking sites, and small business websites.

Should I use Claude Code for a simple business website?

Probably not. A simple business website usually doesn’t require Claude Code unless you want custom development control. If you need a business site, landing page, portfolio, booking page, or simple web app, Coderick AI can be a more direct path because it avoids project files, repositories, and deployment setup.

Why would I avoid Claude Code?

You might avoid Claude Code if you don’t want to review code changes or manage project files, GitHub, hosting, DNS, SSL, or deployment. Its desktop and web versions remove the terminal, but Claude Code is still built around development workflows.

What is Coderick AI?

Coderick AI is SiteGround’s AI website and web app builder. It lets users create websites and simple apps by describing what they need, then customizing the result through conversation. It’s built for small businesses, freelancers, creators, and founders who want to launch without coding or complicated tools.

Can I bring a design from Claude Design or Google Stitch into Coderick AI?

Yes, you can bring a design from Claude Design and Google Stitch. When you start a new project, you can upload a ZIP or HTML export from Claude Design or Google Stitch, and Coderick AI turns it into a working site or app. Importing works for new projects only.

Is Coderick AI a replacement for Claude Code?

Not exactly. Claude Code is not a website builder per se: it’s for users who want to work with codebases, commands, Git workflows, and developer tools. Coderick AI is for users who want a managed website or web app-building path without having to handle the code and infrastructure layers manually.

What does Coderick AI help me avoid?

Coderick AI helps non-technical users avoid the technical setup around a code-first workflow: project files, repositories, deployment pipelines, separate hosting setup, SSL configuration, and manual infrastructure work. The value is not that it replaces every developer tool, but that it removes the need for one in simpler projects.

Can Coderick AI build a website from scratch?

Yes. Coderick AI can create a website or web app from a plain-language description. Users can build websites, dashboards, simple CRMs, booking systems, portfolio sites, and invoice trackers without coding or server setup.

Does Coderick AI include hosting and SSL?

Yes. SiteGround’s Coderick AI includes hosting, SSL, version control, and publishing as part of its AI website and app builder experience.

When should I still choose Claude Code?

Choose Claude Code when you want source-code control, custom engineering, tests, Git workflows, pull requests, or manual deployment. Claude Code is a better fit for developers and technical teams working inside a codebase.

This article was originally published in June of 2026 and then updated in October of 2026.

How to turn a Claude Design project into a real website

A woman smiling at her desk with Claude AI open on her laptop, surrounded by plants and a coffee mug

To turn a Claude Design project into a real website, finalize the design in Claude Design, document the design intent, and then choose a production path.

Developers can use Claude Design’s native handoff to Claude Code. Non-technical users can use Coderick AI as the managed production path after Claude Design. Coderick AI handles the full launch — hosting, SSL, custom domains, and deployment — without any manual setup. 

Key takeaways:

  • Claude Design is the design and prototype layer for creating and validating a website’s visual direction
  • Claude Code is the native developer handoff path for users who want codebase control
  • Coderick AI is where your validated Claude Design project becomes a live website; no repositories, no server setup, no deployment configuration
  • The safest workflow is Claude Design project → handoff brief → production website

What is Claude Design?

Claude Design is a research-preview workspace from Anthropic Labs where each design project lives on its own canvas. You describe what you want, Claude generates a visual version, and you refine it through chat, inline comments, direct edits, and layout sliders: all in the same place, without starting over.

Released on April 17, 2026, it runs on Claude Opus 4.7 and is available to Claude Pro, Max, Team, and Enterprise subscribers. Unlike most AI tools that respond to prompts with text, code, or images that disappear into the chat, Claude Design keeps your work in a persistent, shareable project that can be reviewed, refined, exported, or handed off.

Claude AI's design tool interface showing options to add a design system, screenshot, codebase, or Figma file, with the SiteGround Design System loaded as context

What you can create in Claude Design

In Claude Design, you can create:

  • Interactive prototypes
  • Product wireframes, mockups, and website concepts
  • Design explorations
  • Pitch decks and presentations
  • One-pagers, visual concepts, and presentation-style assets

During onboarding, Claude reads your codebase and existing design files and generates a design system (colors, typography, and component patterns) that carries through every project automatically.

How Claude Design supports design iteration and sharing

Iteration happens through two inputs:

  • Chat for broad changes to layout, color scheme, or structure
  • Inline comments for targeted edits to specific elements on the canvas

You can pin comments across multiple elements and send them as a single batch. Claude resolves everything in one turn.

Sharing is organization-scoped with three permission levels:

  • Private: visible only to you
  • View-only link: anyone in your organization with the link can see it
  • Edit access: collaborators can modify the design and chat with Claude together

Not every project needs to start in Claude Design. If you already know what you want to build and you are ready to go live, you can skip the design step entirely and start directly in Coderick AI. Claude Design earns its place when the visual direction needs validation before production; not every project does.

Why a Claude Design project is not the same as a live website

Claude Design can export to an internal URL, a .zip folder, Canva, PDF, PPTX, or standalone HTML, but none of those outputs are a live website. A Claude Design project has no hosting, no custom domain, no SSL certificate, no backend, and no deployment pipeline. It shows what a website should look like and how it should behave. It does not run as one.

Can a Claude Design project become a real website?

Yes. A Claude Design project can become a real website after the design intent, page structure, copy, user flow, and production requirements are documented.

Claude Design is built for the work that happens before production: aligning on layout and visual direction, testing user flow through an interactive prototype, presenting a concept to a client or stakeholder, and documenting design intent before handoff. When those things are done, its job is done.

Moving the design into production means translating the approved Claude Design project into a working site. The design intent, page structure, copy, and user flow carry over, but the prototype does not. This is one version of the broader AI prototype to published website process.

A production website needs hosting, an SSL certificate, a custom domain name, a deployment pipeline, and a system for ongoing updates. None of that exists inside Claude Design. It belongs to whoever owns the production path.

How to create a Claude Design

Claude Design works best when your prompt is specific. Open Claude.ai, click the palette icon in the left-hand navigation, and start a new project. The more detail you give upfront, like a visual direction, page structure, copy intent, and user flow, the closer the first output is to what you actually want. 

Here’s an example of a well-structured starting point:

“I want to create a website for a freelance brand strategist called Mara Studio. The target audience is small business owners looking for brand identity work.
Visual direction: Clean and minimal. Warm off-white background (#FAF8F5), dark charcoal text (#1C1C1C), and a muted sage green accent (#6B7F6E) for CTAs and highlights. Use Inter for body text and Fraunces for display headings. Generous white space throughout.
Pages: Homepage, Services, About, Portfolio, and Contact.
Start with the homepage. It needs:
A full-width hero with a bold headline, one-line value proposition, and a single “Let’s talk” CTA in sage green
A services overview below the hero with three cards: Brand Identity, Logo Design, Brand Strategy
A short about teaser with a link to the About page
Two portfolio thumbnails with project name and category labels
A sticky navigation bar with links to all five pages
A simple footer with social links and a copyright line
Once the homepage looks right, generate the remaining four pages to match the same design system. Make the Contact page include a form with name, email, a project type dropdown (Brand Identity, Logo Design, Brand Strategy, Other), and a message field.
When all five pages are done, create an interactive prototype so I can click through the full user flow from the homepage to the contact form submission.”

And here’s the first result that Claude Design gives you:

Homepage of Mara Studio, a brand strategy portfolio site built with Coderick AI, featuring a hero headline, stats section showing 40+ brands and 6-week turnaround, and a minimalist logo mark

This is a starting point, not a finished design. Claude Design is iterative and the first output gives you something to react to, and you refine from there through chat and inline comments. When the design looks right and the user flow works, that is when the production path begins.

How do you turn a Claude Design project into a real website?

To turn a Claude Design project into a real website, follow these five steps.

Step 1: Finalize the Claude Design project

Finish all design iterations before the production build starts. Approve the layout, visual direction, page structure, and user flow. Confirm that the design intent is documented and that stakeholders have reviewed the interactive prototype. Changes cost more to fix in a production build than in Claude Design.

Before handing off, confirm five things are true:

CheckpointWhat it means
Design direction is approvedStakeholders have signed off. No major changes expected.
Design intent is documentedLayout decisions, component choices, and interaction patterns are captured in writing.
Page structure and content are clearEvery page, heading, call to action, and form field is defined.
Interactive prototype has been reviewedNavigation, form interactions, and state changes have been tested.
Production requirements are knownHosting, domain, backend needs, and the production path are decided.

Anything unresolved here gets decided by the builder, not the designer, which can create mismatches between the approved design and the live website.

Our original prompt covers the visual direction and homepage structure well, but it leaves three gaps: the inner pages (Services, About, Portfolio) are underspecified, the interactive prototype is requested but never reviewed against a defined user flow, and there is no production handoff summary to document design intent for production. 

Once you have reviewed the first output, use the production readiness checklist above to identify what is still missing. 

Here are the additions that turn the initial prompt into a complete handoff-ready brief:

“Apply this design system consistently across all pages.
Pages and structure:
Services: Page headline and one-line intro. Three service sections — Brand Identity, Logo Design, Brand Strategy — each with a title, three-line description, and starting price. A “Let’s talk” CTA at the bottom of the page.
About: Page headline. Short bio paragraph. Headshot placeholder. List of four working principles. A “See my work” link to the Portfolio page.
Portfolio: Page headline and one-line intro. Six-item image grid with project name and category label on each item.
User flow: Visitor lands on the homepage → reads the hero → scrolls to services → clicks “Let’s talk” CTA → lands on the Contact page → submits the form.
Also test that the navigation bar links work correctly on every page.
Finally, give me a handoff summary with the following:
Visual direction and design intent: colors, typography, spacing rules, and the reasoning behind key layout decisions
Component inventory: every component used, how it looks, and how it behaves
Page-by-page structure: sections, headings, CTAs, and form fields for each page
User flow: the full path from homepage to form submission
Any placeholder content, unresolved layout questions, or missing elements that need a decision before production starts”

Step 2: Choose your production path

Three production paths are available. Claude Design stays as the source of design intent, while Claude Code, Coderick AI, or a developer turns that intent into a live website.

PathBest forWhat happens next
Coderick AINon-technical users, founders, marketers, freelancers, and small teams that want a managed launch pathUse the finished Claude Design project as a production brief and build/publish the live site in a managed environment
Claude CodeTechnical users and teams that want codebase controlUse Claude Design’s handoff bundle or export files to move the design into a developer-controlled build
Developer or agencyProjects needing custom engineering, integrations, complex backend logic, or strict QAHand off the design intent, export files, user flows, and requirements for a manual production build

Claude Design has a native handoff to Claude Code, but not every user wants a developer-controlled workflow. Users who find that path too technical can explore Claude Code alternatives for beginners. If the project doesn’t require codebase ownership, a managed path can help users build without Claude Code while still moving the approved design toward a live site.

Step 3: Export or document the design intent

Export the project in the format that fits your chosen path.

If you chose Claude Code:

When a design is ready to build, Claude Design packages the project into a handoff bundle that can be passed to Claude Code with a single instruction — design to production code, inside Anthropic’s ecosystem. The handoff bundle packages the design intent, layout structure, and component context into a format Claude Code can read and act on.

Send the project to Claude Code when:

  • The design is approved and the page structure is clear
  • The team wants to own the source code and manage a Git repository
  • The build requires tests, custom deployments, or developer-controlled infrastructure

If the team is not using Claude Code directly, use the export that fits:

Export formatBest for
HTML bundleDeveloper working outside Claude Code
PPTX or PDFClient proposals, presentations, review documents
Shareable linkInternal stakeholder review and approval

If you chose Coderick AI:

The Claude Design project does not import directly into Coderick AI, but it does not need to. The validated design is the production brief. Export the project as a PDF, PPTX, or standalone HTML and upload it alongside your brief.

Coderick AI also accepts existing code files (.js, .jsx, .ts, .tsx, .html, .css, .scss, and .md) so any existing code or content comes with you too. The validated design becomes the production brief: describe the page structure, design intent, copy, user flow, functionality, domain requirements, and update needs, and Coderick AI builds from there.

Below is your everything-you-could-possibly-need list, not a homework assignment. If you are uploading an HTML export or code files from Claude Design, a good chunk is already covered. Focus on what the files cannot tell Coderick AI: your copy, user flow, forms, backend needs, domain, and how you plan to keep the site updated.


Use this as your reference and fill in what applies to your project:

FieldWhat to include
Claude Design project referenceDirect link to the finished project, or exported files if sharing externally
Exported filesScreenshots, (.png, .jpg, .jpeg, .gif, .webp) or HTML export of each page. Coderick AI accepts .js, .jsx, .ts, .tsx, .html, .css, .scss, and .md files — upload any existing code or content alongside the visual reference.
Goal of the websiteWhat the site needs to achieve and for whom
Target audienceWho will use the site and what they are trying to do
Pages neededFull list of pages with purpose and priority
Design intentDescribe in your prompt: the visual direction, tone, and layout logic behind the approved design
Brand colors and typographyExact hex codes, font names, sizes, and weight rules
Component behavior and visual statesButtons, cards, navigation, headers, footers — how they should look and behave
Final copyAll headlines, body text, CTAs, labels, and microcopy — ready to use
Calls to actionExact CTA text, placement, and destination for each page
User flowThe path from landing to conversion, with any branching or conditional steps
FormsFields, validation rules, and where form submissions should go
Backend/database needsAny data that needs to be stored, retrieved, or managed
Authentication needsLogin, sign-up, roles, or access control requirements
SEO title and meta descriptionPer-page SEO metadata, ready to paste
Custom domainThe domain to connect after publishing
Launch requirementsAny staging, review, or approval steps before going live
Ongoing update and maintenance expectationsHow often the site will be updated and by whom

The more specific the brief, the closer the first build is to the approved design.

With this checklist in mind, here are the fields the original Claude Design prompt does not cover — and what to add to your Coderick AI brief before you start the build:

“Claude Design project: [Link to the finished Mara Studio Claude Design project as HTML and upload it to Coderick AI. Include screenshots (.png or .jpg) of each page as visual reference.]
Backend/database needs: None beyond contact form submission handling. Form submissions go to hello@marastudio.com.
Authentication needs: None. The site is fully public with no login or member areas.
SEO title and meta description:
Homepage: “Mara Studio — Brand Identity for Small Businesses” / “Mara Studio helps small business owners build a visual identity that means something. Brand identity, logo design, and brand strategy.”
Services: “Brand Identity, Logo Design & Brand Strategy — Mara Studio” / “Explore Mara Studio’s brand services for small businesses. Clear pricing, considered process, and work that lasts.”
About: “About Mara — Mara Studio” / “Mara is a freelance brand strategist helping small businesses find their visual voice. Learn about her process and working principles.”
Portfolio: “Portfolio — Mara Studio” / “A selection of brand identity and logo design projects by Mara Studio.”
Contact: “Work With Mara — Mara Studio” / “Ready to start a brand project? Tell Mara about your business and she will be in touch within two working days.”

And this is what Coderick AI builds: not a prototype, not a design file, but a working website on live infrastructure with hosting, SSL, and a custom domain ready to connect.

Mara Studio portfolio homepage displayed in Coderick AI's preview mode, showing the hero section with brand strategy headline, stats, and minimalist logo mark

If you chose a developer or agency:

Hand off the exported files, design intent notes, page structure, user flow, and production requirements. Use the PPTX, PDF, or HTML export from Claude Design as the visual reference, and document anything that is not visible in the export — interaction logic, backend requirements, authentication needs, and launch criteria.

Step 4: Build, publish, and maintain the live website

Build from the approved design using the chosen path. With Coderick AI, publishing is one click: hosting, SSL, and deployment are included, and ongoing updates happen through the same chat interface. With Claude Code or a developer, hosting, SSL, and deployment need to be configured separately after the build is complete.

How can Coderick AI turn a Claude Design project into a managed website?

Once the brief is ready (design intent, page structure, copy, user flow, and functionality notes documented), Coderick AI takes it from there. This is the managed production path after Claude Design for building, publishing, hosting, and updating the live website, without a developer-controlled workflow.

Start with a full project description, then refine by section

Start with a framing prompt before sharing any files: something like “I am starting a new website project and will be sharing a Claude Design brief and files.” This prevents Coderick AI from building before your full brief is in. Then share everything together: the design intent, page structure, copy, user flow, functionality notes, and any exported files or screenshots from Claude Design.

SiteGround Marketplace page for Coderick AI, showing a prompt-based interface to build apps and websites, with example use cases like task planner, invoice tracker, and portfolio site

Build and refine the website inside Coderick AI

Building with Coderick AI works the same way as the Claude Design iteration process: describe what you want, review the output, and refine through chat. You can adjust layout, update copy, add pages, and change functionality without leaving the platform. 

Coderick AI is suitable for business websites, landing pages, portfolios, booking systems, membership areas, CRMs, dashboards, and internal tools. It also accepts existing files like .js, .jsx, .ts, .tsx, .html, .css, .scss, and .md, so you can bring in any existing code or content alongside the Claude Design brief.

Publish and update the site in a managed environment

When the build is ready, Coderick AI publishes it to SiteGround’s infrastructure with hosting, SSL, and automatic deployment included. That makes it a managed path without Claude Code for users who want the approved design to become a live site without handling infrastructure separately. Connect a custom domain, and the site is live. Ongoing updates, such as new pages, content edits, or feature additions, all happen through the same chat interface, without touching a codebase or logging into a separate hosting control panel.

Coderick AI builder interface showing a chat panel on the left and a desktop preview of Mara Studio's portfolio site on the right, with a Publish button highlighted

What should you test after the Claude Design project becomes a live website?

Testing after a Claude Design to production build is not a generic hosting checklist; it is a design-to-production QA pass. The goal is to confirm the live site matches the approved design and functions correctly for real users.

Visual match to the approved Claude Design project

Compare the live site against the approved Claude Design project page by page. Check that layout, spacing, typography, colors, and component styles match the design intent. Visual drift is common during production builds — catch it before users do.

Responsive behavior on mobile, tablet, and desktop

Test every page at three breakpoints: mobile, tablet, and desktop. Check that layouts reflow correctly, touch targets are large enough, navigation works on small screens, and no content is clipped or hidden unintentionally.

Mobile preview of a portfolio website for Mara Studio built with Coderick AI, showing responsive layout with hero text, a call-to-action button, and navigation menu

Navigation, forms, and interactive states

Test every navigation path in the site. Submit every form and confirm it reaches its destination. Check hover states, focus states, error states, and empty states. Interactive elements that work in the Claude Design prototype need to work the same way in the live build.

A contact page for Mara Studio generated with Coderick AI, featuring a headline, contact form with name, email, and message fields, and a Send message button

Accessibility, contrast, and readable typography

Check color contrast ratios against WCAG AA minimums. Confirm all images have alt text. Test the site with keyboard navigation. Verify that font sizes are readable at every breakpoint and that line lengths do not make body text hard to scan.

Page speed, image optimization, and layout stability

Run a Lighthouse or PageSpeed Insights audit on key pages. Check that images are compressed and served in modern formats (which is done automatically with Coderick AI). Confirm there is no layout shift on load — elements jumping as the page renders hurt both user experience and Core Web Vitals scores.

Custom domain, SSL, metadata, and indexability

Confirm the custom domain resolves correctly, and SSL is active. Check that every page has a unique title tag and meta description. Verify the site is not accidentally set to noindex.

Test that canonical URLs are correct and the sitemap is accessible. Before launch, also confirm the update workflow: in Coderick AI, test that chat-based edits apply correctly; for Claude Code or developer builds, confirm the staging environment is in place and the deployment process is documented.

This article covers the Claude Design workflow: from a finished Claude Design project to a live website via Claude Code or Coderick AI. Two other starting points lead to similar production questions but follow different paths.

Use the Claude Artifact workflow for interactive Claude prototypes

If the starting point is a Claude Artifact — an interactive component, tool, or prototype built inside Claude — the production path is different. See the Claude Artifact production workflow for how to move from an artifact to a live build.

Use the Google Stitch workflow for UI design screens

If the starting point is Google Stitch (Figma-style UI screens and components), as opposed to Claude Design, the design handoff and production requirements are a bit different. See the Google Stitch design workflow for that path.

Ready to take your Claude Design project live?

A Claude Design project gets the hardest part done — the visual direction, the page structure, the user flow, and the stakeholder sign-off. What comes next is a production decision, not a design one.

Most founders, freelancers, and small teams do not need a codebase. They need a live website. If that sounds like you, take the Claude Design project you just validated and bring it straight into Coderick AI.

Your design work is done. The infrastructure is handled. All that is left is the build. If you do need codebase control, the Claude Code handoff is there for you. But chances are, it’s not your next step; Coderick AI is.

[96]

FAQs about turning Claude Design projects into real websites

Can you turn a Claude Design project into a real website?

Yes. A Claude Design project can become a real website once the design direction, page structure, copy, user flow, and production requirements are clear. The next step is choosing a production path: Claude Code for developer control, Coderick AI for managed publishing, or a developer/agency for custom engineering.

Is Claude Design a website builder?

Claude Design is better understood as a design and prototype tool inside Anthropic’s ecosystem. It helps users create polished visual work such as designs, prototypes, slides, and one-pagers. A real website still needs production work such as hosting, custom domains, SSL, publishing, testing, and maintenance.

What is the Claude Design to Claude Code handoff?

The Claude Design to Claude Code handoff is Anthropic’s native developer workflow. When a design is ready to build, Claude can package it into a handoff bundle that can be passed to Claude Code with a single instruction. This path is best for users or teams that want codebase control.

Can Claude Design export files?

Yes. Claude Design supports export to HTML bundles, PPTX, PDF, and handoff to Claude Code. The right export depends on whether the next step is developer implementation, presentation, documentation, or production planning.

Where does Coderick AI fit after Claude Design?

Coderick AI fits after the Claude Design project has been validated, and the user wants a managed production path rather than the Claude Design-to-Claude Code developer workflow. The Claude Design project becomes the production brief: design intent, layout, copy, user flow, and functionality notes guide the live site build.

Can Coderick AI directly import a Claude Design project?

Coderick AI works best as a managed production path after the Claude Design project is ready. You can use the design project, exported files, screenshots, copy, page structure, user flow, and functionality notes as the blueprint for building and publishing the live website inside Coderick AI.

When should I use Claude Code instead of Coderick AI?

Use Claude Code when you want developer control, source-code ownership, Git workflows, custom integrations, tests, and manual deployment. Use Coderick AI when you want to move from a validated Claude Design project to a managed website or app without handling repositories, hosting, SSL, backend setup, or deployment manually.

What does Coderick AI handle after the handoff?

After the handoff, Coderick AI helps turn the validated Claude Design direction into a live website or web app. It supports building, editing, publishing, hosting, custom domains, responsive design, backend generation, security, version control, staging, and ongoing updates through a managed website-building environment.

What should a Claude Design to Coderick AI handoff include?

Include the Claude Design project link, exported files if available, design intent, page structure, screenshots, final copy, CTAs, user flows, brand rules, form fields, backend needs, SEO metadata, custom domain requirements, and maintenance expectations. The goal is to give Coderick AI a clear production brief.

What is the simplest workflow for non-technical users?

The simplest workflow is: create and validate the project in Claude Design, document the design intent and production requirements, then use Coderick AI as the managed production path. This avoids manual setup for repositories, hosting, deployment pipelines, SSL, domains, backend configuration, and ongoing maintenance.

Can I start directly with Coderick AI?

Yes. You do not need a Claude Design project to use Coderick AI. If you already know what you want to build (the pages, the layout, the copy, and the user flow) bring that brief straight into Coderick AI and start the build. Claude Design is useful when you need to validate the visual direction first. If that work is already done, skip it. 

How to turn a Google Stitch design into a real website

abstract of the creation of a website using Google Stitch and Coderick AI

Google Stitch can produce stunning UI designs for web and mobile apps in minutes. It has the pages, the layouts, the buttons, the copy. But Google Stitch design is not the same as a published website. Getting to a live website requires a proper production path: hosting, a domain, backend logic, and a way to turn your approved web design into something people can actually visit. 

Now, that path looks different depending on your project, your technical comfort, and who will manage the site after launch. So here is everything you need to know to choose the right way and make it happen.

Key Takeaways

  • The complete Google Stitch workflow runs in a rough sequence: project brief, UI design, handoff brief, then website build. Skipping steps creates gaps that cost more to fix than to get right upfront.
  • Google Stitch produces high-fidelity UI designs, interactive prototypes, and front-end code. It does not handle hosting, backend logic, authentication, or domain setup.
  • Before handing off to any builder, three things make the build accurate: a clear vision and goals, a technical handoff brief from Stitch, and the exported designs.
  • Coderick AI can use the approved Google Stitch design, screenshots, copy, and functionality notes as a production brief to build and publish a managed website or web app.
  • The right production path depends on technical comfort and project complexity: Coderick AI for most teams; Claude Code for developers; a custom build for complex engineering needs.

What is Google Stitch, and how does it help create website designs?

Google Stitch is a free AI-powered UI design tool from Google Labs that turns text prompts, sketches, uploaded images, and wireframes into high-fidelity interface designs and front-end code. It launched at Google I/O in May 2025 and got a serious upgrade in March 2026, adding multi-screen generation, an infinite design canvas, and voice input.

Built on Google’s Gemini models and available through Google Labs, its party trick is speed. Describe what you need and Stitch gets to work immediately, generating several complete UI directions from a single prompt in minutes. The kind of output that used to take a designer days now takes seconds.

Its speed and skill makes it a very handy tool for founders, product managers, small businesses, and designers who need to move from a rough concept to a usable visual reference without spending days (or heaps of money) on manual design work. 

But getting from a Stitch design to a live website requires more than a magic wand, and that’s what we’re tackling here.

What can you create with Google Stitch?

Stitch generates designs and user interfaces for web and mobile apps. Typical outputs include:

  • Landing pages
  • Dashboards
  • Onboarding screens
  • Product detail layouts
  • Multi-step forms

As of March 2026, Stitch also supports multi-screen projects, so you can map out a full user flow across several connected screens in a single canvas.

Example of Google Stitch capabilities with brand colors and web page designs

Notice that what we are talking about here are designs, not finished production websites. Stitch is also specifically a UI design tool. It is built for digital interfaces, not broader design work, so it does not produce:

  • Marketing materials
  • Presentations
  • Social graphics
  • Print assets

At the end of the day, its focus is UI design for digital products, and not a full production layer. Rest assured, we’ll get to the final deliverable part in a moment. 

How Google Stitch turns prompts into high-fidelity UI concepts

Stitch interprets natural language, uploaded sketches, images, and voice input as UI instructions, generating one or more visual variants with underlying HTML, CSS, and Tailwind code. The output is not a static mockup. It is a refinable, exportable design that can be connected across screens and previewed as an interactive flow.

Why a Google Stitch design still needs a production website workflow

Google Stitch generates the visual UI and front-end design, not a complete production website. The front-end code output covers layout and styling, but Stitch doesn’t handle hosting, SSL, custom domain setup, backend logic, authentication, database connections, or ongoing maintenance. All things that are absolutely essential for taking the Google Stitch output from idea to actual functioning product.

A Google Stitch design is the blueprint, not the keys to the house. Getting from one to the other requires a separate production path.

Can a Google Stitch design become a real website?

A Google Stitch design can become a real website once the UI direction, page structure, copy, and functionality requirements are documented and handed off to a production path. Before the design is ready for that, it may be useful for stakeholder sign-off, user testing, or internal alignment. But once the screens are approved, the work shifts from design validation to website production. This is one version of the broader AI prototype to published website process.

What changes when a design becomes a production website

A production website is not just a rendered version of the Google Stitch design. To actually work, it needs routing and navigation logic, server-side or client-side rendering, image optimization, form handling, SEO metadata, accessibility compliance, performance configuration, and connection to any backend services the product needs.

Each of these elements requires decisions and setup that go beyond what any UI design tool provides. That is why they are outside Google Stitch’s scope.

Why hosting, SSL, domains, and updates are still needed

A live website has to be served from somewhere, encrypted in transit, and reachable at a domain name people can type or click. It also needs to be updated when content changes, security patches are released, or new features are added. It is an ongoing process, not a one-off deliverable.

These are infrastructure requirements, not design requirements. Google Stitch does not address them. But your production path does.

How do you start a Google Stitch project?

You can jump straight into prompting in Google Stitch and get impressive results. But if you are planning to hand the project off to a developer or an AI builder, starting with a Project PRD will make the design and production handoff more accurate.

PRD stands for Product Requirements Document. It is the strategic foundation of the project: the “what” and the “why” before any screen design begins. To generate one, describe your project to Stitch and explicitly ask: “Create a project PRD for this site.” You do not need a polished brief ready. A brain dump of the key points is enough for Stitch to organize into a structured document.

What to give Stitch to generate a strong PRD

To produce a useful PRD, Stitch looks for four things:

  • The “Why” — vision and goals: What is the primary purpose of the site? Who is it for? A sentence or two on the goal and the target audience gives Stitch the context to make smart design decisions throughout the project.
  • The “What” — pages and features: Which pages does the site need? Are there specific interactive elements like filters, subscription signups, or a cart drawer? A rough list is enough.
  • The “Vibe” — brand and visual style: A few keywords go a long way. “Artisanal Radical,” “Clean and Corporate,” “Gritty and Brutalist.” Include how the brand should speak as well as how it should look.
  • Constraints and success metrics: Are there things you absolutely do not want? Assets that must be used? And how will you know the project is successful?

The PRD comes before the design

The sequence in a Google Stitch project runs in a specific order: PRD first, design second, handoff brief last. The PRD sets the vision. The design executes it visually. The handoff brief translates that visual execution into technical specifications a builder can follow precisely. Together, the three things give a production build everything it needs: the soul of the project, the look of it, and the exact specs to recreate it accurately.

When is a Google Stitch design ready for a website build?

The PRD is in place and the design work is done. Now comes the gate check: confirming the visual layer is complete and the operational requirements are documented before anything moves to production. If you’re new to this process, an AI website builder checklist can help frame what to expect.

Confirm in Google Stitch before handing off:

  • Final screen designs approved
  • Desktop and mobile layout direction confirmed
  • Full page list defined
  • Navigation bar structure and user flow mapped
  • Typography, colors, and spacing locked
  • Component states and interactions visible in the design

Add before the build starts:

  • Copy and calls to action with confirmed destinations
  • Form fields, types, and validation requirements
  • Button actions and link destinations
  • Login or authentication needs
  • Backend or database needs
  • SEO title and meta description for each page
  • Custom domain requirements confirmed

The final screens and layout direction are approved

Approved means signed off, not just finished. Review every Stitch screen against the original brief and confirm that the layout direction, visual hierarchy, and component arrangement are intentional decisions, not defaults the AI picked. If anything looks off, refine it in Stitch now. Changes requested after the build starts cost significantly more time than ones caught here.

The page structure and navigation are clear

Use Google Stitch to map every page that will exist on the live site, not just the ones with fully designed screens. Secondary pages, 404 error pages, and utility pages are easy to overlook in a design canvas but create gaps in the build if they are not listed. Confirm the website navigation structure reflects the full page list before the handoff, including any pages that exist in the user flow but were not explicitly designed in Stitch.

The mobile and desktop layouts are documented

Stitch supports both viewport sizes, so use it to confirm responsive behavior before the handoff. If a screen was only designed at desktop, generate the mobile version in Stitch and review it. Check that column stacking, navigation behavior, and image scaling are all visible in the mobile web design before it leaves Stitch. Responsive decisions made at the design stage are faster and cheaper to implement than ones made mid-build.

Example of mobile web designs in Google Stitch

Define typography, colors, and spacing in Google Stitch

Before moving on, confirm that your branding basics are defined, documented, and consistent across every screen. Use Stitch to lock the type scale, color palette, and design system, and check that these decisions are applied consistently across every page. The goal is not just visual consistency inside Stitch but a clear enough record that the next step can apply them accurately without guessing. 

The copy, calls to action, and content blocks are placed

Use Stitch to place final copy directly in the design before the handoff. Placeholder text creates layout assumptions that break when real content is added. If the copy is not ready, use realistic placeholder text that matches the intended length and tone rather than generic lorem ipsum. Calls to action need confirmed destinations before the build starts.

The buttons, forms, menus, and interaction states are defined

Use Stitch to confirm what each interactive element looks like before the handoff, and it will create a UI Kit for you with all the necessary details. A primary button needs a default state, a hover state, and a disabled state. A form needs visible field labels and an error state. A navigation menu needs both its open and closed positions designed. Note any states Stitch did not render as items the builder will need to define.

Example of UI kit from Google Stitch

How do you turn Google Stitch screens into a website build brief?

With the design confirmed, the next step is packaging everything into a brief a builder can act on. The Stitch handoff gives you the visual and structural layer. Your job now is to add the operational layer on top of it.

Generate the handoff brief from Google Stitch

Ask Stitch to produce a handoff brief directly from the design. The brief captures the visual and structural layer: colors, typography, spacing, page list, layout notes, component states, and responsive behavior.

Think of it as the bookend to the PRD. The PRD defined the vision at the start. The handoff brief captures the technical execution at the end. Together they form the complete production package.

What the handoff brief does not cover are the operational requirements: form behavior, button destinations, backend needs, SEO metadata, and domain setup. Those get added in the steps that follow.

Save the final Google Stitch project screens and visual references

With the handoff brief generated, export and organize everything from the Stitch canvas. Stitch allows you to download the full project as a zip file, or export to a specific format such as Figma, HTML/CSS, or DESIGN.md depending on your production path. To export, just select all the files on your canvas, click Export, and choose your export delivery preference.

The goal is a single organized package containing three things: the Project PRD, the handoff brief, and all visual references. Together these give a production build the vision, the technical specs, and the visual reference it needs to execute accurately.

Exporting final designs and files from Google Stitch

List form fields, button actions, menus, and interaction notes

While designing in Stitch, these elements are already shaping the layout. This step is about making them explicit. Go through every interactive element and define its behavior: field labels, validation rules, and submission destinations for forms; confirmed destinations for buttons and calls to action; dropdown and mobile behavior for menus. Keep this as a simple written list, specific enough that the builder does not have to make assumptions.

Define backend, database, and login requirements

Some websites are purely informational and need no backend. Others need functionality that runs behind the scenes: user accounts, a database, or a connection to an external service like a payment processor, email marketing, or CRM. Google Stitch can design the screens for all of these, but designing a screen and building what happens behind it are two different things. Before the build starts, identify whether your site needs any of this and be specific. The builder will use that requirement to configure the right functionality.

Add SEO metadata and launch requirements

SEO and domain requirements should already be taking shape during the design process. This step makes them explicit. Write an SEO title tag and meta description for each page, and make sure to follow an SEO checklist. Note any redirect rules or canonical tags, and include any staging needs or launch date constraints the builder needs to plan around.

Now you have everything needed to hand the project to whichever production path you have chosen.

How can Coderick AI turn a Google Stitch design direction into a live website?

Coderick AI is a managed website and web app builder from SiteGround that fits naturally after the Google Stitch design is approved. Stitch defines the interface. Coderick AI turns that direction into a live website or web app that can be built, edited, published, hosted, and updated within a single managed environment, with version control, user authentication, and automatic deployment included in every project.

The workflow for taking a Google Stitch design into Coderick AI follows five steps — a process that fits squarely within what the industry now calls vibe coding.

1. Use the Google Stitch design as the visual blueprint

Coderick AI accepts both text prompts and image uploads, so the exported Stitch files can go directly into the build prompt alongside the additional details you have defined above.

Prompting Coderick AI with a simple command to get a website started

Start with a framing prompt before uploading anything: something like “I am starting a new website project and will be sharing some design files.” This prevents Coderick AI from starting to build before your full package is in. After it takes you to the next screen, upload everything together: the Project PRD, the handoff brief, the operational requirements, and the exported screen images.

Giving Coderick AI the full handoff package from Google Stitch to create a website

The more complete this package is, the more accurately the build will reflect the approved design direction.

2. Recreate the page structure and layout inside Coderick AI

From there, review and refine one page at a time. For simpler sites, the full brief in a single, plain-language prompt is likely enough. For larger builds, focusing the prompt on one page at a time may produce more accurate results. Either way, use the approved Stitch screens as the benchmark for each page before moving to the next.

Recreating a Google Stitch design and website structure in Coderick AI

3. Refine copy, forms, backend needs, and functionality notes

With the visual structure in place, work through the Coderick AI chat to confirm the operational layer matches the brief. Check that form fields, validation rules, and submission destinations are implemented correctly. Verify that copy reads as intended in context, button actions work as specified, and any backend requirements like user authentication or database connections are configured correctly. 

Creating and checking forms on a website created by Coderick AI

4. Publish the website through Coderick AI’s managed environment

Publishing from Coderick AI means the site is live on SiteGround infrastructure immediately, without manual deployment steps. SSL is included. A custom domain can be connected from within the platform. The published site is production-ready from the moment it goes live.

Publishing a website created with Coderick AI

5. Update the site without managing deployment manually

After launch, all changes go through the Coderick AI chat interface. Describe the update: a new content block, a revised form, a layout change, a new page. Coderick AI applies it and deploys automatically.

What should a handoff from a Google Stitch project to Coderick AI include?

The five-step workflow above is only as good as the material you bring into it. The brief-building section covers the universal layer: screens, layout notes, typography, colors, page structure, navigation, forms, backend needs, and SEO metadata. What follows are the additional details specific to handing off to Coderick AI.

Custom domain and publishing requirements

Confirm the domain name that will be connected to the live site and note any redirect requirements. If you don’t have a domain yet, don’t worry: you can register one through SiteGround as part of the process. Once your domain is ready, connecting it to your live site is straightforward, as hosting and SSL are included automatically with Coderick AI, with no extra cost or manual setup needed.

Imagery, icons, and visual assets

Stitch generates placeholder imagery and reference images to support the layout. When writing your Coderick AI prompt, include any brand guidelines, visual style references, photography direction, or icon and illustration preferences. 

For the images themselves, the most practical approach is to let Coderick AI generate a first version, then refine from there using Visual Edit, where you can swap in your own images or generate new ones directly in the preview in seconds. Worth noting: uploading your own images via Visual Edit is free, while generating new AI images uses credits.

Maintenance and update expectations

Coderick AI handles deployment and hosting automatically, so updates after launch are straightforward. Changes go through the interactive chat interface and deploy without manual steps. Before launch, decide internally who will be responsible for requesting changes and how frequently the site will need to be updated. Having that process in place avoids ad hoc edits that create inconsistencies over time.

Should you use Coderick AI, Claude Code, or a developer after Google Stitch?

The right production path depends on the level of technical control needed, the complexity of the build, and who will manage the site after launch. All three paths can produce a live website from a Google Stitch design. But they differ in how much manual setup, code access, and ongoing maintenance responsibility each one requires.

Path after Google StitchBest forWhat happens after Google Stitch
Coderick AINon-technical users, founders, marketers, freelancers, and small teams who want a managed launch pathUse the approved Stitch design, screenshots, copy, page and layout structure, and functionality notes as the blueprint for building and publishing the live website in a managed environment
Claude CodeTechnical users who want to turn the Stitch design direction into a working codebaseUse the Stitch design as a visual reference, then use Claude Code to help build, edit, debug, and prepare the project for deployment
Developer or agencyProjects that need custom engineering, complex integrations, advanced backend logic, or strict design QAHand off the Stitch design, layout notes, user flows, and technical requirements so the developer can build, deploy, and maintain the production version
Stay in Google StitchEarly-stage ideas where the UI direction is not yet approvedKeep refining screens, layout, visual hierarchy, and user flow before moving into production

Let’s break this down.

Use Coderick AI when you want managed website publishing

Coderick AI is the right choice when you want a managed publishing path from an approved Google Stitch design to a live website without handling hosting, SSL, domain configuration, backend setup, deployment pipelines, or maintenance tasks manually. It fits founders, marketers, and small teams building everything from simple landing pages to web apps for small businesses, internal tools, and dashboards.

A note on SiteGround’s infrastructure 
Every Coderick AI project runs on SiteGround’s hosting infrastructure, which is built for speed, performance, and security. SiteGround powers millions of websites worldwide with enterprise-grade infrastructure, fast load times, and automatic security updates included in every plan.

Use Claude Code when you want to turn the design into a codebase

Claude Code is a command-line coding assistant that helps you write, edit, and debug code. Use the Stitch design as a visual reference and describe the screens, components, and interactions to Claude Code to generate the underlying codebase.

The end result is a codebase you own and can edit freely. It is not a live website. Deployment, hosting, SSL, and domain setup are handled separately through whichever hosting provider you choose.

This path suits technical users who want full code control, custom integrations, or a specific deployment setup. By contrast, Coderick AI supports a website build without Claude Code for users who want the design published through a managed platform.

Use a developer when the build needs custom engineering

Some projects need capabilities that go beyond what any AI builder provides: proprietary APIs, complex data models, enterprise authentication systems, or performance requirements that need hand-tuned infrastructure. For those projects, hand the Stitch design, layout notes, user flows, and technical spec to a developer or agency.

This path gives you the most control. It also gives you the longest timeline and the largest invoice. Development costs are significantly higher upfront, and ongoing changes (even small ones like updating copy or adding a new section) typically require going back to the developer. For projects that need frequent updates or evolving content, factor that dependency into the decision before committing to a custom build.

The Stitch design still serves as the visual brief. The developer translates it into a custom production build.

Keep Google Stitch as the source of visual direction

Regardless of which production path you choose, the approved Google Stitch design remains the visual reference throughout the build. Use it to check layout accuracy, review responsive behavior, and validate that the production site reflects the intended design direction.

What should you check when the Google Stitch design becomes a live website?

Once the production build is live, check it against the approved Stitch design and the functional requirements defined in the handoff brief. A thorough review before you point traffic at a new site catches problems that are much cheaper to fix at this stage than after launch.

Visual match to the approved Google Stitch design

Compare each live page to the corresponding approved Stitch screen. Check layout, spacing, color, typography, and component arrangement. Flag any sections where the production build drifts from the design direction.

Reviewing the final website design in Coderick AI and the final image of the homepage

Responsive behavior on mobile, tablet, and desktop

Resize each page across the three main breakpoints and verify that the layout adapts correctly across screen sizes. Check text size, image scaling, navigation behavior, and touch target sizes on mobile.

Navigation, buttons, forms, and interactive states

Click every link, button, and menu item. Submit every form with valid data and with intentionally invalid data to test validation. Verify that every interactive element behaves as specified in the handoff brief.

Accessibility, contrast, and readable typography

Check text contrast ratios against WCAG 2.1 AA requirements as part of good accessible web design practice. Verify that all images have descriptive alt text. Test keyboard navigation for users who do not use a mouse.

Page speed, image optimization, and layout stability

Run a Lighthouse or PageSpeed Insights audit on the homepage and the highest-traffic page. Check that images are compressed, served in a modern format, and use lazy loading so they only load when needed. Look for cumulative layout shift caused by images loading without defined dimensions, and confirm that browser caching is enabled.

If you built with Coderick AI, most of this is handled automatically. Images are optimized out of the box, and SiteGround’s infrastructure takes care of caching, CDN, and server response time without any manual configuration needed.

Custom domain, SSL, metadata, and indexability

Confirm the custom domain resolves correctly. Verify the SSL certificate is active and that all pages serve over HTTPS. Check that each page has a unique title tag and meta description matching the approved metadata. Confirm the site is not blocked from indexing by a robots.txt directive left over from staging.

This article focuses on Google Stitch designs. If your starting point is an interactive prototype inside Claude, use the Claude Artifact workflow. If your starting point is Anthropic’s design workflow, use the Claude Design workflow to turn it into a website. The production logic is similar, but the source asset and handoff details are different.

Start building from your Google Stitch design today

A finished Google Stitch design is the production blueprint, not the finished website. Once the vision is defined, the screens are approved, and the handoff brief is ready, the only thing left is to turn that Google Stitch design into a real website.

Coderick AI provides the managed path from an approved Google Stitch design direction to a live, hosted, maintainable website or web app. Bring your complete Stitch package into Coderick AI, build on SiteGround’s infrastructure, and publish without manual deployment steps.

[96]

FAQs about turning Google Stitch designs into a website

Can you turn a Google Stitch design into a real website?

Yes. A Google Stitch design can become a real website once the UI direction, page structure, copy, and functionality requirements are documented. The next step is production: hosting, SSL, custom domain setup, responsive testing, SEO metadata, and ongoing maintenance. Coderick AI can support this stage as a managed handoff and publishing path.

What is a Google Stitch project PRD and do I need one?

A Project PRD, or Product Requirements Document, defines the vision, goals, audience, pages, and brand direction of your project. You generate it in Stitch by describing your project and explicitly asking for one before design work begins.
You do not need it to use Stitch, but if you are handing the project to a builder, it gives them the strategic context the handoff brief alone cannot provide.

Is Google Stitch a website builder?

Google Stitch is an AI UI design and prototyping tool, not a website hosting platform. According to Google, Stitch generates UIs for mobile and web applications. The production website still requires publishing, hosting, domain setup, SSL, and maintenance through a separate workflow.

Where does Coderick AI fit after Google Stitch?

Coderick AI fits after the Google Stitch design is approved and the full package is ready: the project brief, the handoff brief, and the exported screen files. Bring that package into Coderick AI and build and publish the live website or web app in a managed environment on SiteGround’s hosting infrastructure.

Can Coderick AI directly import a Google Stitch design?

Coderick AI does not import external design files or project folders directly, but it does accept both text prompts and image uploads. The optimal path is to bring the complete package into your initial prompt: the project brief, the handoff brief, the exported screen images, and the operational requirements. Together these give Coderick AI everything it needs to build accurately from the approved design direction.

What should I include in a Google Stitch project to Coderick AI handoff?

The full package has three layers: the project brief covering vision, goals, and audience; the handoff brief covering colors, typography, spacing, and component specs; and the exported screen files. On top of that, add the operational requirements: form fields, button actions, backend needs, SEO metadata, and domain requirements.

When should I use Claude Code instead of Coderick AI?

Use Claude Code when you need developer-level control: repository ownership, raw code access, custom integrations, test suites, or a GitHub-based deployment workflow. Use Coderick AI when you want to go from an approved Google Stitch design to a managed, hosted website without handling server setup, deployment, or infrastructure tasks manually. If Claude Code feels too technical for the site you want to launch, Claude Code alternatives for beginners can help you choose a simpler starting point.

What does Coderick AI handle after the handoff?

After the handoff, Coderick AI helps turn the approved Google Stitch design direction into a live website or web app. It supports building, editing, publishing, hosting, custom domains, responsive design, backend features, security, version control, and ongoing updates within a single managed environment on SiteGround’s infrastructure.

Can a Google Stitch design have a custom domain?

A Google Stitch design is a visual prototype, not a hosted website with a domain. To use a branded domain, the design needs to move into a production path. Coderick AI supports custom domain connections with hosting and SSL provided through SiteGround.

What is the best workflow for non-technical users?

Start in Google Stitch with a project brief, design the UI, then generate the handoff brief before exporting everything as a complete package. Hand that package to Coderick AI as the managed production path. The entire process avoids manual server setup, DNS configuration, SSL management, deployment pipelines, backend setup, and ongoing maintenance tasks.