How to go from a website audit document to a live password-gated client deliverable in a single session.
Claude Code is Anthropic's CLI tool that lets you run Claude directly in your terminal, connected to your local files, APIs, and browser. Unlike the chat interface, Claude Code can read and write files, run scripts, call external APIs, and take actions in sequence without you being involved at every step.
For this project, that meant Claude could:
Claude Code isn't just a better chat interface. It's an agent that can execute multi-step workflows end-to-end. The difference is that it can act on your computer, not just advise you.
Here's the exact sequence used to build the Cincy Mahjong Club deliverable package, from first message to live URL.
{% layout none %} Liquid template. The page renders as pure HTML with no theme wrapper./_next/image?url=...&w=...&q=.... The raw paths are URL-encoded inside the query string. Claude used this JS snippet in the browser to decode them:sessionStorage-based gate — the page hides all content behind a password form. One correct entry per browser session. No Locksmith, no app, no monthly fee. Embedded directly in the Shopify page's body_html.templates/page.HANDLE.liquid file with {% layout none %} strips all of that and serves just your HTML.POST /pages.json creates the page with body_html. (2) PUT /themes/{id}/assets.json uploads the Liquid template. Then PUT /pages/{id}.json sets template_suffix..claude/launch.json) to preview every HTML file before publishing. Screenshot tools confirm the render before any API calls.// Next.js image optimizer encodes the real path in the url= param
// Calling img.src directly triggers a "cookie/query string data" block
// Decode the url param instead:
[...document .querySelectorAll ('img' )]
.map (img => {
try {
return new URL (img.src).searchParams.get ('url' );
} catch { return img.src; }
})
.filter (Boolean)
.filter (src => !src.startsWith ('data:' ));
// Returns clean paths like /gallery/IMG_4688.jpeg
// Prepend the domain to build full URLs {%- liquid
layout none
-%}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>{{ page.title }}</title>
</head>
<body style="margin:0;padding:0;" >
{{ page.content }}
</body>
</html>
<!-- page.content renders the body_html from the Page object -->
<!-- All CSS, JS, and HTML is embedded in body_html --> import os, json, urllib.request
TOKEN = os.environ["SHOPIFY_ADMIN_TOKEN" ]
STORE = "your-store.myshopify.com"
API = "2026-04"
def shopify (method, path, body=None ):
url = f"https://{STORE}/admin/api/{API}/{path}"
data = json.dumps (body).encode () if body else None
req = urllib.request.Request (
url, data=data, method=method,
headers={
"Content-Type" : "application/json" ,
"X-Shopify-Access-Token" : TOKEN,
}
)
with urllib.request.urlopen (req) as r:
return json.loads (r.read ().decode ())
# Step 1: Create the page
page = shopify ("POST" , "pages.json" , {
"page" : {
"title" : "Your Page Title" ,
"handle" : "your-page-handle" ,
"body_html" : YOUR_HTML_STRING,
"published" : True
}
})["page" ]
# Step 2: Upload bare Liquid template
themes = shopify ("GET" , "themes.json" )["themes" ]
active = next (t for t in themes if t["role" ] == "main" )
shopify ("PUT" , f"themes/{active['id']}/assets.json" , {
"asset" : {
"key" : f"templates/page.{page['handle']}.liquid" ,
"value" : LIQUID_TEMPLATE_STRING
}
})
# Step 3: Point page to bare template
shopify ("PUT" , f"pages/{page['id']}.json" , {
"page" : {
"id" : page["id" ],
"template_suffix" : page["handle" ]
}
})
print (f"Live: https://your-domain.com/pages/{page['handle']}" )These are the actual prompt patterns used in this session. The key: be specific about the aesthetic you want, reference the live site, and tell Claude the output format explicitly.
Give Claude the business goal, not just the task. "She wants to push open plays as her biggest revenue driver" reshaped the entire content calendar — every week's posts were architected around that one revenue lever. Claude can't optimize for what it doesn't know.
npm install -g @anthropic-ai/claude-code. Requires an Anthropic account with API access.~/.zshenv as SHOPIFY_ADMIN_TOKEN.npx http-server /your/workspace -c-1. Configure in .claude/launch.json so Claude can preview HTML files before publishing.# 1. Create a private app in Shopify Admin
# Settings > Apps > Develop apps > Create an app
# Scopes needed: write_content, read_themes, write_themes
# 2. Store the token securely (never hardcode it)
echo 'export SHOPIFY_ADMIN_TOKEN="shpat_your_token_here"' >> ~/.zshenv
source ~/.zshenv
# 3. Verify it works
curl -s -H "X-Shopify-Access-Token: $SHOPIFY_ADMIN_TOKEN" "https://YOUR-STORE.myshopify.com/admin/api/2026-04/shop.json" | python3 -m json.tool | grep '"name"'{
"version" : "0.0.1" ,
"configurations" : [
{
"name" : "client-workspace" ,
"runtimeExecutable" : "npx" ,
"runtimeArgs" : ["http-server" , "/path/to/workspace" , "-c-1" ],
"port" : 8110 ,
"autoPort" : true
}
]
}
// Claude Code reads this file to start preview servers
// Use "preview_start" tool with the name to launch
// Then preview_screenshot to verify before publishing This workflow works for any local business with an existing website. Swap the audit document and API credentials, keep everything else the same.
You need a source document. Either write the audit yourself (score the website across 5-6 dimensions, note specific bugs, flag missing sections) or have Claude Code audit the live site directly — navigate to it, take screenshots, and ask Claude to score it.
You can skip a written audit entirely. Just navigate Claude Code to the live site and say: "Audit this website and build an HTML mockup showing what it could look like with all the issues fixed." Claude will observe the site, form its own critique, and build from there.
Before building the mockup, have Claude take a screenshot of the live site and identify the actual color palette, fonts, and visual style. The first mockup Claude builds will look too generic if it doesn't match the real site — real photos and matched aesthetic are the difference between "looks AI" and "looks like their site but better."
Stack your requests. While one deliverable is building, queue the next. This session produced a website mockup, social plan, and content calendar in parallel because Claude can write files independently. Don't wait for completion on each — overlap the work.
Whatever platform the client uses — Shopify, Webflow, WordPress, Notion — there's an API. Have Claude write a Python script that takes the finished HTML and publishes it. The script is reusable: swap the content, run the script, new page is live.
Clients don't know what to do with a folder of HTML files. One URL, one password, all the work in one scroll. The Shopify page approach works well, but any static host works — Cloudflare Pages, Netlify, even a GitHub Pages URL with a simple JS gate.
The value of this workflow isn't the specific tools — it's that Claude Code can hold the full context of a client project and act as an executor, not just an advisor. The prompts are short because Claude already knows the client's site, the audit, the brand aesthetic, and the business goal. Context accumulation across a session is the real leverage.