Knowledge Base

SOP: Build and Launch a Client Website Using Claude, Awesomate, n8n, and WordPress

Objective

This SOP outlines the end-to-end process for extracting an existing website, generating a design system, provisioning hosting, connecting automation tools, building the redesigned site, and validating key functionality. It is intended to help a team member reproduce the workflow efficiently and with minimal guesswork.

Key Steps

1. Extract the existing website into a local project folder 0:00

• Open Claude Code or a similar extraction tool.
  

• Point it at the client’s existing website so it can crawl and collect assets, copy, images, CSS, and logos.
  

• Save everything into a dedicated local project folder (for example, Barefoot Design).
  

• Wait for the extraction to complete before moving to the next stage.
  

2. Prepare brand inputs for the design system 0:42

• Open Claude Design and start a new design system from the extracted project.
  

• Use an LLM such as ChatGPT or Claude to generate missing inputs like:
  

  • company name
    

  • short blurb
    

  • design system name
    

  • other notes
    

• Add any extracted logos into the branding section.
  

• Keep the project folder attached so the design system can reference the extracted assets.
  

3. Register the domain and point nameservers 3:46

• Purchase the client’s domain through a registrar such as GoDaddy.
  

• Confirm the domain name matches the brand.
  

• Complete the purchase and add the domain to your account.
  

• Update the nameservers to point to the hosting provider (Awesomate) so the domain can later resolve to the new site.
  

4. Create the Awesomate account and complete onboarding 7:05

• Open a fresh browser profile or guest session to avoid using a personal account.
  

• Sign up for Awesomate using the client domain and business details.
  

• Choose the Essentials plan first if you want to demonstrate the upgrade path later.
  

• Enter email, phone, and billing details.
  

• Use a test payment method if this is a demo account.
  

• Open the magic link from email to log into the Awesomate hub.
  

5. Set up n8n and activate the community license 10:21

• In the Awesomate onboarding flow, create a new n8n user/account.
  

• Request and verify the community license by following the emailed verification step.
  

• Confirm the account is activated before proceeding.
  

• Set the timezone to the client’s location (for example, Sydney).
  

6. Add required API credentials 11:38

• Generate an OpenRouter API key and add it to the account.
  

• Generate or retrieve a Gina.ai API key and add it as well.
  

• Use OpenRouter for model access and Gina for web search capability.
  

• Verify each credential after saving it.
  

• For production accounts, avoid short-lived or limited keys unless intentionally testing.
  

7. Install the Business Identity Manager and starter agents 12:53

• Install the Business Identity Manager agent.
  

• Enable chat if required so the agent can run properly.
  

• Allow the agent to scan the website and store business details as variables.
  

• Install the starter agents provided in the platform.
  

• Confirm the agents appear in the personal agents section.
  

8. Provision hosting and WordPress 15:48

• Go to the Sites section in Awesomate.
  

• Create hosting for the new domain.
  

• Wait for cPanel and WordPress to be provisioned.
  

• Confirm the domain loads a default WordPress site.
  

• Open WordPress Admin and cPanel to verify access.
  

9. Upgrade to Support Plus for shell access 17:21

• Check whether shell/CLI access is available on the current plan.
  

• If not, upgrade from Essentials to Support Plus.
  

• Wait for the plan status to update in the dashboard.
  

• Re-run the connection setup after upgrading so fresh tokens are generated.
  

• Confirm shell access is authorized before continuing.
  

10. Connect Claude Code to the hosting environment 18:20

• In Awesomate, generate the Claude Code setup details.
  

• Open Claude Code and start a new chat tied to the correct local project folder.
  

• Paste the connection/setup instructions into Claude Code.
  

• Approve the temporary access request so Claude can download tools and connect.
  

• Confirm the connection is successful by making a small test change to the site.
  

11. Test the live connection with a simple site edit 25:08

• Ask Claude Code to make a small visible change, such as changing the footer color.
  

• Let Claude snapshot the site and update the theme files.
  

• Refresh the website to confirm the change appears live.
  

• Use the built-in preview or markup tools to request additional refinements.
  

• Verify that edits can be made directly through the Claude connection.
  

12. Wait for the design system to finish generating 29:27

• Monitor the Claude Design system build until it completes.
  

• Review the generated components, fonts, colors, logos, and imagery.
  

• Accept the design system if it matches the existing brand direction.
  

• If needed, provide comments to refine specific visual issues.
  

• Download or export the completed design system when ready.
  

13. Build the new website design from the design system 31:01

• Return to Claude Code and attach the extracted project folder.
  

• Start a new build prompt using the completed design system.
  

• Ask Claude to rebuild the website using the new design system.
  

• Answer the clarification questions about pages, navigation, copy handling, and contact details.
  

• Let Claude generate the redesigned site structure and content.
  

14. Review, comment on, and refine the design 34:32

• Inspect the generated pages, including homepage, about page, portfolio, and blog posts.
  

• Use comments or markup tools to flag issues such as:
  

  • poor logo contrast
    

  • spacing problems
    

  • unnecessary sections
    

• Let Claude apply the requested refinements.
  

• Re-check the pages after each update to confirm the changes improved the design.
  

15. Export the redesigned project files 37:03

• Once satisfied, use the share/export option to download the project HTML.
  

• Save the exported files into the project folder or downloads folder.
  

• Unzip the package and confirm the full redesign files are present.
  

• Keep the folder organized so Claude can reference it in the next update step.
  

16. Update the live WordPress theme with the new design 37:25

• Return to Claude Code and point it to the folder containing the redesigned site.
  

• Ask Claude to update the WordPress theme using the new design files.
  

• Allow Claude to process the assets and deploy the updated theme.
  

• Confirm the live site reflects the new design.
  

• Review the site as a logged-out visitor to check the public-facing appearance.
  

17. Install SEO and other useful plugins 39:37

• Review the fresh WordPress install for missing essentials.
  

• Ask Claude to install the Yoast SEO plugin.
  

• Optionally install other plugins needed for the project.
  

• Confirm the plugin appears in the WordPress dashboard.
  

• Use the plugin to improve metadata and SEO settings across the site.
  

18. Connect the contact form to n8n 40:27

• Open the contact or inquiry form on the website.
  

• Ask Claude to create an n8n workflow that receives form submissions.
  

• Ensure the workflow stores the submitted fields and returns a response.
  

• Test the form by submitting a sample inquiry.
  

• Check n8n executions to confirm the submission was received successfully.
  

19. Improve SEO metadata across pages and posts 43:43

• Use Claude to update page and post metadata according to Yoast best practices.
  

• Focus on social metadata, SEO titles, descriptions, and readability.
  

• Review the Yoast indicators in WordPress to confirm improvements.
  

• Continue refining until most key indicators are green or acceptable.
  

• Re-check important pages and posts after the update.
  

20. Final QA and client-ready refinements 47:13

• Review the site as a visitor and identify any remaining spacing or branding issues.
  

• Use Claude to fix final visual problems, such as logo placement or hero spacing.
  

• Compare the new site against the original to confirm the redesign is an improvement.
  

• Make any last adjustments before presenting the site to the client.
  

• Document any remaining enhancement opportunities for future iterations.
  

Cautionary Notes

• Do not use personal accounts for client onboarding; use a fresh browser profile or guest session.
  

• Be careful when purchasing domains and upgrading plans, especially if this is a production client account.
  

• Limited or test API keys are fine for demos, but production accounts should use stable credentials.
  

• Shell/CLI access may require a higher-tier plan; confirm access before relying on Claude Code for deployment tasks.
  

• Always verify changes on the live site after Claude makes updates, especially for theme edits and form workflows.
  

• Keep backups or snapshots before major theme changes or file replacements.
  

Tips for Efficiency

• Use an LLM to draft missing business summary and branding text instead of writing everything manually.
  

• Keep the extracted site folder, design system, and exported redesign files in clearly named directories.
  

• Run the design system build and site extraction in parallel when possible to save time.
  

• Use small test edits first to confirm hosting and Claude Code connectivity before attempting a full redesign.
  

• Reuse the same workflow pattern for future client sites: extract, design system, provision, connect, build, refine, deploy.
  

• If the site is still evolving, focus on core pages first and leave secondary refinements for a later pass.
  

Link to Loom

https://loom.com/share/daed93c366bf4444a989c8f656625cf7