Web Builder

Area: IT Workflow: workflows/it/web-builder.json

Purpose

Orchestrates the full lifecycle of a client landing-page project — from brief intake through an 8-phase build pipeline to final deployment. Each phase ends with a dual review loop: the developer approves before notifying the client, and the client approves before the pipeline advances.

Pipeline

Webhook: Receive Project Brief
  → Set: Map Form Fields
  → Code: Normalize Project Name
  → Code: Build Branch Metadata
  → GitHub: Get Main Branch SHA
  → GitHub: Create Project Branch
  → Code: Build Assignment Email
  → Gmail: Notify & Await Dev Approval        (sendAndWait — dev approves/rejects)
  → IF: Dev Approved Project?
      TRUE  → Gmail: Notify Client — Project Approved
              → Gmail: Send Webhook URL to Dev
              → Wait: Hold Until Vercel Deploy  (resumes on Vercel deployment.succeeded webhook)
              → Code: Extract Deploy URL
              → [Phase I–VIII review loop — see Phases below]
              → Gmail: Ask Client — Credentials Ready
              → IF: Credentials Provided
                  TRUE  → Gmail: Request Deployment Credentials
                          → Wait: Collect Credentials Form
                          → Gmail: Dev Approves Credentials
                          → Merge: Combine Credential Paths
                  FALSE → Gmail: Help Client Get Credentials
                          → Merge: Combine Credential Paths
              → Gmail: Notify Client — Approve Deploy
              → Gmail: Request Bewomo Configuration
              → Wait: Bewomo Configuration Form
              → HTTP: Configure Bewomo CTA
              → Code: Parse Bewomo Response
      FALSE → No-op: Dev Rejected Project

Phase review loop (repeated for phases I–VIII)

Code: Build Phase N Doc
  → Gmail: Notify Dev — Phase N Review    (sendAndWait — dev approves)
  → Gmail: Notify Client — Phase N Done  (sendAndWait — client approves/rejects)
  → IF: Client Approved Phase N?
        TRUE  → advance to Phase N+1
        FALSE → No-op: Client Rejected Phase N

Phases

#	Name	What the developer does
I	Visual Identity	Extract color palette, typography, radius from the reference URL; configure main-theme.json, globals.css, layout.tsx, and DESIGN.md.
II	Structural Planning	Map section order, scaffold product routes, update src/app/page.tsx; produce docs/landing-plans/<slug>.md.
III	Copy Generation	Write all copy files (home-copy.json, seo-copy.json, ui-copy.json, product + use-case files); eliminate Lorem Ipsum.
IV	UI Implementation	Wire page.tsx to copy JSON, compose sections with Tier 4 wrappers, implement missing components, verify mobile-first layout.
V	Image & Asset Generation	Generate and optimize images; place assets in the project.
VI	Animations & Interactions	Add motion and micro-interactions using the project’s animation system.
VII	QA	Visual regression, cross-browser, accessibility, and functional checks.
VIII	SEO & Performance	Lighthouse audit, Core Web Vitals tuning, meta tags, and structured data.

After all phases pass, the pipeline collects deployment credentials from the client (via a native n8n form), deploys to production, and configures the Bewomo CTA widget via the Bewomo API.

Credentials

Credential type	Used by
httpHeaderAuth (GitHub)	GitHub: Get Main Branch SHA, GitHub: Create Project Branch
gmailOAuth2	All Gmail: nodes (send, sendAndWait)
Bewomo API (httpHeaderAuth)	HTTP: Configure Bewomo CTA

See credentials/README.md.

Tags

commercial.

Status

• active: false.
• Triggered by POST webhook from the client intake form.
• Vercel deployment.succeeded webhook URL is unique per execution — register it in Vercel before starting Phase I, delete after the pipeline resumes.

Open questions

• The Twilio nodes (Twilio: Send WhatsApp Test Message, Twilio: Send Template Message, Twilio: Direct Message, Twilio: Notify Client — Example) are not connected to the main flow — evaluate whether WhatsApp notifications should replace or supplement the Gmail sendAndWait pattern.
• Phase V–VIII phase-doc nodes (Code: Build Phase 5–8 Doc) generate dev + client emails but client approval currently just continues to the next phase — add explicit IF: Client Approved Phase N? guards matching the Phase I–IV pattern.
• Credentials collection (IF: Credentials Provided) checks $json.data.approved as a string "true" — align with the boolean operator used in earlier IF nodes.

Changelog

Area move

• Moved from bewomo/web-builder.json → it/web-builder.json; doc moved to docs/workflows/it/.
• Renamed unnamed Merge node → Merge: Combine Credential Paths.
• Tags simplified to commercial only.

Standardization pass

• Renamed file from WebBuilder.json to web-builder.json (kebab-case).
• Workflow display name: WebBuilder → Web Builder.
• Renamed all 13 code nodes from JS: * prefix to Code: * prefix.
• Gave all 9 NoOp nodes meaningful names (No-op: Dev Rejected Project, No-op: Client Rejected Phase 1–8).
• Renamed 5+ other nodes (Twilio, IF, Gmail) to follow the <Node Type>: <Imperative Description> convention.
• Gave all 16 sticky notes semantic Section: names.
• Translated Spanish content (Sticky Note1 and jsCode comments) to English.
• Updated all $('JS: ...') / $("JS: ...") expression references to $('Code: ...').
• Updated connections map keys and targets in lockstep.