Final Prompt for Claude Design

Deliverable AThe scorecard

Create five files: report.html, scorecard-data.json, build.mjs, verify-scorecard.mjs, README.md.

The report must work directly through file://, need no server and no package installation, make no network requests, use no external fonts, scripts, stylesheets, images, frameworks or CDNs, stay readable with JavaScript disabled, support system light and dark, be responsive down to roughly 390px, and show the scorecard immediately near the top.

Business context

Ten small, unglamorous AI-enabled service businesses, judged for a solo founder, United States first, web-delivered, several verticals sharing one backend, high fulfillment automation after stabilization, roughly $1,500 monthly operating contribution per vertical, and fast paid pilots before substantial custom development.

Scale

Raw scores are integers 1 through 5 and higher is always more favorable. On the labor, automation and risk criteria, 5 means easier automation, lower labor, lower risk.

Criteria and weights

Weights total exactly 100.

Formulas

overall  = sum(raw score × criterion percentage weight) / 100
speed    = (reach + sales + mvp + dataEase) / 4
ease     = (mvp + dataEase + automation + lowRisk) / 4
longTerm = (roi×20 + wtp×20 + margin×15 + retention×15
            + scale×15 + differentiation×10 + lowRisk×5) / 100

Recompute every composite from the raw scores at build time. Treat the published values as assertions, never as inputs. Display at exactly two decimal places with trailing zeros kept.

Canonical data

All forty composites below were independently recomputed from the raw scores and every one matches. Overall runs strictly descending from 4.13 to 3.29.

Raw scores

Page structure

Exact reading order, with nothing above the scorecard: eyebrow THE SCORECARD; H1 AI Service Option Scorecard; the intro; the recommendation callout; the decision summary table; the criteria table; the caveat. No navigation, chart, executive summary or landing screen first.

Decision summary columns in order: Rank, Business, Overall, Speed, Ease, Long-term, Decision. Ten rows ascending by rank. Pill styling only on Best with hauler access and Recommended first. Criteria table columns: Criterion, Weight, A score of 5 means.

Design tokens

Set color-scheme: light dark and the viewport meta. Font stack system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. Body 16px/1.5. Main min(1380px, calc(100% - 32px)), margin 32px auto 72px. Eyebrow 12px at .08em. H1 clamp(30px,5vw,56px) at line-height 1.05. Cards get radius 16, padding 20, and box-shadow: 0 6px 22px rgba(0,0,0,.05). The callout takes var(--good) plus a 5px accent left border. Tables sit in an overflow:auto wrapper at min-width:900px with sticky 12px uppercase headers, right-aligned tabular numerals, a bold first row and var(--good) on hover.

Implementation

build.mjs uses Node built-ins only. It reads the JSON, validates the schema, confirms twelve criteria, weights totalling 100, ten options, integer 1 to 5 raw scores with no unknown or missing keys, unique ranks covering 1 to 10, all four composites recomputed to within 0.01 of expectation, descending rank order, and the two anchors: rank 1 Dump-ticket charge packets at 4.13 and rank 2 Paper work-order missed billables at 4.02. It fails loudly with every violation listed and exits non-zero before writing anything. Then it generates the complete HTML with all data embedded.

The browser must never fetch the JSON at runtime, because a file:// page can be blocked from reading local files. Read it at build time only. Do not introduce React, Next.js, Vite, Tailwind, a charting library, or any build system.

verify-scorecard.mjs is a second opinion, so re-implement the four formulas rather than importing them. A verifier that reuses the code under test only proves the code agrees with itself. It then checks the HTML: title, all ten names, all twelve labels, two-decimal formatting, no http:// or https://, no script or stylesheet or iframe or external asset, viewport meta, all fourteen colour tokens, section order, verbatim copy, column order, and exactly two pills.

Deliverable BThree launch-ready websites

Three sites for one business: paper work-order missed-billables auditing, the option the scorecard recommends first. Three, not one, because the business has three genuinely different buyers who cannot be sold with the same page. They share one backend, one database, one Stripe account, one fulfillment pipeline. They share no CSS. Working brand: Unbilled.

Done means a stranger can land, understand the offer, see a credible number, pay, upload their work orders, and receive a report, with no human in the loop until the exceptions queue.

What the product does

Field-service companies still run paper work orders. A technician writes down an extra hour, a replaced capacitor, a second trip, disposal fees, and that paper reaches the office days later. Whoever invoices it misses lines. The industry loses roughly 2% to 8% of billable revenue this way and nobody notices, because the invoice looks complete. The customer sends photos; the pipeline extracts every line item, normalises it against their price book, compares it to what was invoiced, and produces a report with a dollar figure, a confidence score, and a re-bill packet they can send the same day.

Pricing

Three Standard customers come to $1,497, a rounding error short of the $1,500 target; the fourth clears it outright. The paid pilot exists so money arrives before any custom integration work. Hold that line. Contingency pricing is out of scope: verifying the customer re-billed and got paid is a collections product.

Services

Prefer a service already connected, prefer the one with the least setup, and never make the customer carry the cost of an integration choice. Every added vendor is a login the founder maintains and a subprocessor the Option B buyer will ask about.

Already connected · zero setup

Must connect · ranked by ease against return

Nothing else. Resist analytics suites, chat widgets, popups, review widgets and heatmaps. Cloudflare Web Analytics is cookieless, needs no consent banner, and is enough at this volume.

Platform

Cloudflare for the edge, Supabase for data and identity. A single-vendor Cloudflare stack with D1 and hand-rolled magic links is defensible and marginally cheaper, but it costs you Supabase Auth and RLS, the two things that most reduce both build time and the chance of a cross-tenant data bug. Take the two-vendor answer.

Key tables: organizations (with parent_org_id for portfolio children), users, subscriptions, payments, batches, documents (with UNIQUE(org_id, sha256) so a re-uploaded folder is never billed twice), work_orders, line_items, invoices, findings, price_book_items, reports, processed_webhooks, and an events audit log.

Enable RLS on every tenant table, and write a test that explicitly attempts a cross-tenant read and asserts it fails. Money is always integer cents, never a float, never a formatted string in the database. A product whose entire value proposition is arithmetic accuracy cannot afford a rounding artifact visible to a controller.

Extraction pipeline

1. Reject over 25 MB or outside JPEG, PNG, HEIC, PDF.
2. Split PDFs to pages, normalise orientation, downscale to 2000px on the long edge. Larger costs more and reads no better.
3. Extract with claude-sonnet-5, one page per call, forced to a strict JSON schema via tool use. Never parse prose. Require per-field confidence and a bounding box per line item.
4. Escalate anything below 0.75 minimum confidence to the highest-tier Claude model on the account. Still below 0.75 routes to the exceptions queue.
5. Normalise against the price book by fuzzy match; unmatched items keep a lower confidence.
6. Compare against invoices joined on work-order number. Emit findings.
7. Never auto-accept a finding above $500 or below 0.90 confidence. Do not relax this to improve throughput.
8. Render to PDF, store, email the link.

Research before designing

Search Mobbin for the pattern before designing any screen, and cite what you used. Already researched:

• Option A hero. Ramp puts one enormous dollar figure at the centre with the input below it and the comparison as a footnote. That is the layout. Also ClickUp for inputs-left, itemised-result-right, and Varo for a calculator with no submit button.
• Pricing with a pilot tier. Humble is almost exactly our structure: time-boxed pilot, struck-through price, explicit refund guarantee, and pilot fees credited to the first month. Steal the guarantee framing. Superpower for one clean card with an honest footnote.
• Option B register. Parker AI shows how far a flat editorial ground, a serif, and torn-paper stamps get you without gradients or glass.
• Option C register. Spade uses raw JSON as page texture flanking the headline. That is how to make data feel like substance instead of decoration. Slash for restrained serif on near-black.

Assets and the anti-AI rule

Generate all photography and video with Higgsfield. The single most important constraint: nothing may look AI-generated. An owner-operator who smells a synthetic stock image stops reading, and a controller who spots one stops trusting the numbers.

Every prompt names a film stock or sensor, a focal length, a time of day and light quality, one or two physical imperfections, "no people", "no text overlay", and an explicit documentary or editorial register. Three reference prompts were generated and confirmed to read as photographs; match everything to their grade.

Icons are hand-authored inline SVG on a 24px grid at each system's stroke weight, currentColor only. Do not generate icons with an image model: they come out inconsistent in weight and alignment.

The three design systems

Each site gets a complete, independent system with its own CSS file and its own custom properties. There is no shared stylesheet.

A page built to convert an owner-operator on a phone reads as unserious to a CFO evaluating a $42,000 annual commitment. A page built for that CFO reads as slow and corporate to someone who wants a number before their next call. The marginal cost is CSS and copy; the marginal benefit is that each buyer sees something built for them.

Payments

Self-serve uses a Checkout Session with automatic tax and customer creation, landing on the upload screen. Provision from the webhook, never from the success URL: a redirect is not proof of payment. Sales-led creates a Customer then an Invoice at net-15 with ACH, provisioning on invoice.paid.

The webhook verifies the signature before parsing anything, inserts the event id into processed_webhooks first and returns 200 on conflict, because Stripe retries and double-provisioning is a real bug. Return 200 within 10 seconds and queue anything slow. Use the Customer Portal for cancellation rather than building one. Set a recognisable statement descriptor: an unrecognised one is the top cause of chargebacks.

Quality gates

The repository's .claude/rules/ui-quality.md applies in full. Screenshot every page at 360px and 1280px and inspect before claiming done. Overlapping text, rules crossing text, clipped content, horizontal scroll and misalignment are build failures. Flexbox and grid only, no absolute positioning for layout, never a fixed pixel height on anything containing text, no negative margins, no overflow:hidden to hide a layout problem. If no browser tooling is available, say so and mark the work visually unverified.

Plus: Lighthouse mobile ≥ 95 on performance and accessibility for all three, LCP under 2.0s on simulated 4G, WCAG 2.2 AA throughout, every site working with JavaScript disabled through to payment, and zero console errors.

Acceptance tests

• Commerce. Test card provisions and lands on upload; a decline shows a recoverable error; a replayed webhook provisions exactly once; portal cancellation revokes upload.
• Pipeline. Twenty work orders produce twenty sets of line items; the same file twice creates one document row; an illegible page reaches the exceptions queue rather than inventing a value; no finding over $500 is auto-accepted; report totals match accepted findings.
• Front-end. Renders at 360, 390, 768, 1280, 1440 in light and dark; no horizontal page overflow; forms reject a missing Turnstile token; full keyboard path from landing to payment.
• Data. A tenant cannot read another tenant's findings, attempted explicitly. Deleting an org cascades with nothing orphaned.

Build order

Do not build all three sites at once. Phase 3 is the milestone that matters. Everything before it is cost.

Section CPaste this

The block below is the handoff. Everything above is the specification it refers to.

Work in the current project. This prompt is self-contained: do not ask for
report.html, scorecard-data.json, or any local files.

DELIVERABLE 1: Build a self-contained AI Service Option Scorecard exactly to the
specification in section A: report.html, scorecard-data.json, build.mjs,
verify-scorecard.mjs, README.md. Node built-ins only, no dependencies, no
package.json. All data baked into the HTML at build time so the page works from
file:// with JavaScript disabled and makes zero network requests. build.mjs
validates 12 criteria, weights totalling 100, 10 options, integer 1-5 raw scores,
unique ranks 1-10, all four composite formulas recomputed against the expected
values within 0.01, descending rank order, and the two canonical anchors (rank 1
Dump-ticket charge packets 4.13, rank 2 Paper work-order missed billables 4.02) ,
failing loudly and exiting non-zero before writing anything. verify-scorecard.mjs
re-implements the formulas independently rather than importing them, then checks
the generated HTML. Use the exact section order, verbatim copy and CSS tokens
given. Note that <th> defaults to centre alignment: row headers need an explicit
left-align or the business names drift.

DELIVERABLE 2: Then build three complete, production-ready ecommerce websites
plus their shared backend, per section B. One business (paper work-order
missed-billables auditing), three buyers, three design systems, no shared CSS.

  A "Yard Sign"   owner-operator trades. Near-black and safety orange, Barlow
                  Condensed uppercase, 17px base, square corners, no shadows. A
                  live ROI calculator IS the hero, no email gate, honest range not
                  a point estimate. Self-serve Stripe Checkout at $750 landing
                  straight on the upload screen.
  B "The Ledger"  regional contractors, controller/CFO buyer. Navy and parchment,
                  Source Serif, hairline rules, 1.65 leading. A redacted sample
                  report IS the hero. Security is top-level nav. Includes a
                  "What we don't claim" section. Converts to a Cal.com walkthrough
                  then a $2,500 invoiced pilot with ACH.
  C "The Console" PE roll-ups, portfolio CFO buyer. Graphite and teal, Inter Tight,
                  14px base, 8px grid, dense data-viz. An interactive console with
                  clearly labelled demonstration data IS the hero. Converts to a
                  four-step assessment producing a forwardable estimate URL.

STACK: Cloudflare for the edge (Workers with Static Assets, CDN, Turnstile, Email
Routing, Access for admin), Supabase for Postgres + Auth + Storage + RLS, Stripe
for payments, Resend for transactional email, HubSpot for CRM and nurture,
Anthropic API for extraction, Higgsfield for media, Cal.com for Option B booking.
Magic-link auth only, never a password. Money always integer cents. Webhooks
signature-verified and idempotent. RLS on every tenant table with an explicit
cross-tenant read test. No finding over $500 or under 0.90 confidence is ever
auto-accepted.

ASSETS: Research every screen pattern on Mobbin before designing it, and cite
what you used. Generate all photography and video with Higgsfield, and it must not
look AI-generated: name a film stock, a focal length, a time of day, and one or two
physical imperfections; ask for handheld and off-centre framing; ban gradients,
glass, glossy 3D renders and floating devices; generate no people at all. Three
tested reference prompts are in section B, match everything to their grade.
Hand-author icons as inline SVG on a 24px grid at each system's stroke weight; do
not generate icons with an image model.

INTEGRITY: No AI-generated people presented as customers. No fabricated
testimonials, logos, awards or metrics. No implied certification the business does
not hold. Label every modelled estimate as an estimate on the same screen as the
number.

QUALITY: .claude/rules/ui-quality.md applies in full. Screenshot every page at
360px and 1280px and inspect before claiming anything is done. Lighthouse mobile
>= 95 performance and accessibility. WCAG 2.2 AA. No horizontal overflow at any
width. Run the full acceptance-test list in section B.

Build in the phase order: schema and pipeline first, then Option A end to end
through a real Stripe test payment, then B, then C. Do not start all three sites
in parallel.

Report exactly what you built, what you verified, the commands you ran, and what
remains unfinished. Do not report a phase complete without the screenshots and
tests required.

Source of record: docs/ecommerce-launch/FINAL_PROMPT.md on branch claude/code-handoff-complete-yrvokt. The scorecard data here is canonical and all forty composites were independently verified against the four formulas.