The reusable foundation

Take the idea. Keep the working parts.

A readable system for the next build. Start with the handoff, then take the components, tokens, assets, and experience code that fit the work.

Ready for your next Claude Code prompt.

The handoff connects this direction to your candidate’s PLAN and existing integration points. It distinguishes the working demonstration from the production behavior to implement.

Execute the candidate Builder's PLAN.md and its adopted audits together with docs/BUILDER-OVERNIGHT-HANDOFF.md. Complete the full application in this run, including substantial rewrites, supporting models and writers, integration, verification and the final tested candidate package. Treat phases as internal checkpoints and continue without another prompt. Read docs/BUILDER-PLAN-REVIEW.md for the evidence behind the corrections.

Use docs/CLAUDE-HANDOFF.md for this studio's brand and interface integration guidance. The studio supplies a visual direction and reusable working specimens. Existing code may be extended or replaced wherever it holds back the desired experience; carry forward user work and real-data meaning while updating the connected implementation.

Use public/css/foundation.css and public/css/builder.css with public/css/builder-automation.css and public/css/builder-creative.css. Load public/js/builder-automation.js and public/js/builder-creative.js before public/js/builder.js. Provide window.ML.toast(message) and window.ML.copy(text) host adapters before mounting; copying needs truthful feedback and an accessible manual fallback. Use public/css/components.css and public/js/components.js for the separate component lab. Carry the customer-centered principles in docs/BRAND-STRATEGY.md into websites and generated content. Keep operator UI separate from the recipient's website experience.

Deliver every workspace's intended workflow, including creation, editing, persistence, reopening, undo or recovery and cross-workspace consequences where applicable. A partial existing feature, visual stub or locally simulated service does not establish completion. Keep prototype fixtures distinguishable from production data. Preserve supplied SVG masters and use the theme-matched working exports. Finish with the packaged full-width application reviewed in both themes, keyboard paths, and checks against the final executable.
Read the full handoff
Brand strategyAudience, transformation, VVV / VALUE, voice, visual expression.↗Experience specificationThemes, components, interaction, motion, access, and media.↗Builder implementation handoffThe PLAN connection, workspace recipes, and integration sequence.↗Complete overnight runFull assignment, substantial rewrites, finished workflows and final package verification.↗Builder PLAN reviewYour quoted requirements compared with the plan, its audits and current code.↗Create with any AIA reusable brief, source routing, and recipes across media.↗Complete token libraryIdentity primitives and semantic roles, including both themes.↗Live studio foundationLocal fonts, exact colors, surfaces, focus, and shared browser styles.↗Logo asset manifestPreserved masters, working exports, theme roles, and source notes.↗Sources, assets & licensesOriginal SVG provenance, generated imagery, fonts, and research.↗Open, reuse & customizeHow the files fit together.↗

One system. Distinct workspaces.

Four deep interactive specimens establish the behavior. The remaining workspaces have specific implementation recipes in the handoff.

WORKING SPECIMEN

Website + Patterns

Page preview, section catalog, selected content, direct editing, viewport choice, and inspector.

WORKING SPECIMEN

Automations

Node canvas, branching context, step selection, editable settings, add step, and undo.

WORKING SPECIMEN

Creative

Visual library, large selected image, wipe comparison, placement, and history.

WORKING SPECIMEN

Lists / People

First-class lists, searchable membership, filters, profile, and contextual follow-up.

IMPLEMENTATION MAP

Branding

Guide / Tokens / Assets / Compare. Edit atoms in context; inspect contrast and asset roles.

IMPLEMENTATION MAP

Interactivity

Component → guard → endpoint → records → messages → automations → tracking → destinations.

IMPLEMENTATION MAP

Email

Full-height catalog, rendered message stage, subject and preheader inspector.

IMPLEMENTATION MAP

Tracking + Funnels

A shared query model with distinct journey, cohort, branch, and drop-off views.

IMPLEMENTATION MAP

Advertising

Campaign, ad, and creative relationships with provider account state and explicit changes.

IMPLEMENTATION MAP

Calendar

Campaign bars across month, week, quarter, and agenda. Drag with a keyboard alternative.

IMPLEMENTATION MAP

Search + Reports

Metadata and search previews; six report subjects with linked range, comparison, and filters.

IMPLEMENTATION MAP

Documents + Setup

Documents house plans. Notes stay contextual. Setup is a global settings surface.

Find a working color.

These are the live studio’s semantic roles. Select a row to copy its CSS declaration. Switch the studio theme to inspect the matching values.

A small, understandable codebase.

FileResponsibilityReuse
public/css/foundation.cssShared theme and basic controlsMap the variables into the candidate’s semantic token owner.
public/js/builder.js + public/css/builder.cssWorking application specimenMount with MLBuilder.mount(host); adapt state to real services.
public/js/components.js + public/css/components.cssInteractive component labMount with MLComponents.mount(host); copy complete patterns.
public/examples/Two standalone customer websitesUse the layouts and interaction patterns with real client content.
src/ + content/builder-site.jsonThis brand presentationPages, patterns and editable copy; public/js/studio.js supplies the specimens' behavior and host adapters.

The Builder also requires builder-automation.js and builder-creative.js, with their matching CSS. Load both workspace modules before builder.js, as the studio layout does. An extracted Builder needs the host adapters window.ML.toast(message) and window.ML.copy(text); the handoff explains the contract. The live application profile is also available in ui.tokens.json.

Open enough for the next good idea.

The identity has a center. The creative work has room. Choose typography, imagery, structure, and motion for the person and the purpose. Develop a stronger expression when the subject calls for it; make its reasoning and reusable parts clear.