Prompt playbook (end-to-end)

Ready-to-use prompts for running a full Duda content/layout job with Claude, in order. Each block is a template — replace the <...> placeholders and paste it as your message. They assume the Dev Mode layout workflow and the supportsn/duda repo conventions.

Tip: paste one stage at a time and review the result before moving on. Claude will pause and ask for the things only you can do (duplicate/paste in Duda, share docs, log in).

1. Kick off from the ClickUp task

Here is the ClickUp task: <ClickUp task URL>.
Read it and the linked content workbook. Tell me:
- which pages/blog posts are in scope this round,
- the Duda site ID and live URL,
- the content doc link per page.
Don't build anything yet — just summarize the scope and what you need from me.

2. Synthesize the content workbook

Content workbook: <Google Sheet URL>.
Extract the per-page content doc links (use the xlsx hyperlink method — CSV/gviz
don't expose them), then pull each doc into content/<page>.md and a base64-stripped
content/<page>.clean.md. List the pages you found with their doc IDs.

3. Create the project structure

Create a new project folder for project "<X>" under projects/<x>/ following CLAUDE.md:
- README.md with site ID <site-id>, ClickUp link, workbook link, and the page list,
- scripts/ with duda-lib.js guarded to site ID <site-id> (domain <domain>), plus
  inspect-page.js / inspect-grid.js,
- content/, source/devmode/, screenshots/ folders,
- .env.example (real .env stays gitignored).

4. Hand off code, wait for the build

I'm going to paste the Dev Mode HTML for the <page> page next.
When I do: save it to source/devmode/<page>/<page>.html (this is also the rollback
copy), inspect it, and map the approved content from content/<page>.clean.md onto
the widgets (keep / update / drop; extra info to FAQ). Show me the mapping before building.

5. Build the NEW.html

Build source/devmode/<page>/<page>.NEW.html:
- edit in place by widget ID, keep all IDs/classes/CSS (never replace a whole section),
- rebuild tables as data-ext base64 (not raw <table>),
- rewrite any base/suburb links to the target city,
- check div balance and report any MISS.
Anything that can't be done in code (FAQ accordion, meta title, fullBleed background),
note it for me instead of inventing markup.

6. Paste back to Duda, then verify the preview

You paste *.NEW.html into Dev Mode and save. Then:

I pasted it and saved. Preview link(s):
<preview URL 1>
<preview URL 2>
Run the QA suite (scripts/qa-pages.js) against these and give me the report:
HTTP, content completeness, contrast, tables, and responsive incl. real mobile UA.
Confirm any contrast flags with a screenshot before calling them real.

7. UAT, then write the result to the ClickUp UAT doc

Do a UAT pass on the preview links against the content doc and the SOP checklist.
Then update the UAT Test doc/subtask in ClickUp (<UAT task or doc URL>) with:
- pass/fail per page, with the specific issues found (section, what's wrong),
- screenshots references,
- anything that is an editor-only or production issue vs a build fix.
Plain text, no emoji, bare URLs.

8. Read the UAT doc and fix

Read the UAT Test doc <UAT doc/subtask URL>. For each build-fixable issue:
- make the change in the <page>.NEW.html (edit by widget ID / CSS by section ID),
- skip editor-only and production issues but list them back to me.
Summarize what you changed and what still needs me / the editor.

9. Verify the fixes

I re-pasted the updated <page> and saved. Re-run scripts/qa-pages.js on the preview
link(s) and confirm every UAT issue from <UAT doc URL> is resolved. Flag any regressions.

10. End-to-end pass before go-live

Do a final end-to-end check across all <N> pages + the blog:
- all content present vs the docs, tables correct, contrast OK,
- responsive desktop/tablet/mobile, no stray base-suburb links,
- blog: 3 tables intact, no base64 leftover, banner/meta set,
- list every remaining editor task and any production bug.
Then draft the handover comment for ClickUp <task URL> (What was done / QA / Needs
design-editor / Production bug / Notes) and ask me before posting.

11. Go-live

Approved to go live on <page(s)>. Since these pages already exist and we edited the
Dev Mode HTML in place, go-live is just Publish in Duda (URL/SEO preserved). Confirm
the go-live steps and post a short "published" note on ClickUp <task URL>.

Notes

Replace placeholders every time; never leave a <...> in a prompt you send.
Claude needs your approval for any live-site change and will wait for you to duplicate/paste in Duda, share docs, or log in — that’s expected, not a failure.
For the underlying mechanics (build scripts, QA suite, gotchas) see Dev Mode layout builds.