ProjectFlowPro
Menu

Case study · Design method

WebsiteCreator

Implemented · builds new sites from Knowledge Base design guides

Creates new websites. It takes the Knowledge Base’s understanding of page design, writes a design guide for each site on a set structure of rules, in accordance with the Knowledge Base, and builds the pages from it.

Flowridge Plumbing home page at desktop width, top of the page
Flowridge Plumbing home page at phone width, top of the page
Flowridge Plumbing: Designed and built with WebsiteCreator from its design guide. The copy on the site is fictional.

Purpose

Creates new websites from the Knowledge Base: a design guide for each site, then the pages built from it.

The problem

Copying a reference produces a copy. A new page should draw on several references and on real design range without reproducing any one of them.

What it contributes

Website creation, in the WebWorks line: it writes each new site’s design guide on a set structure of rules, in accordance with the Knowledge Base, and builds the pages from it.

Principal capabilities

  • Data

    Reads the references into labelled sections and plans the new page from the Knowledge Base’s full set of layouts, card treatments, backgrounds and style systems.

    Knowledge Base (KB)

  • Verification

    A plan gate checks the planned page against the Knowledge Base’s range before any build; the build is checked against the plan, and the exported page against the build.

  • Frontend

    Each page is built in React with one measured style system, then exported as static Tailwind markup.

Built with

  • React
  • TypeScript
  • Python
  • Tokens

Implementation evidence

  • Flowridge Plumbing and ARC & MANE, shown in the gallery below, were designed and built this way.

Back to WebWorks website ecosystem

Visual evidence

Starting materialScreenshot or reference collectionObserved design patterns become structured inputs
WebsiteCreatorCompose a new page direction

Design guide · in accordance with the Knowledge Base

Illustrated page draft · not a product screenshot
Conceptual Illustration How references and the Knowledge Base become a new page; not a capture of the software.
Flowridge Plumbing home page at desktop width, top of the page
Flowridge Plumbing home page at phone width, top of the page

Home-service contractor

Flowridge Plumbing

A plumbing company home page planned from an idea book of nine reference pages: fifteen sections, a quote form, a process band, team, pricing and FAQ.

Designed and built with WebsiteCreator from its design guide. The copy on the site is fictional.

Full page, desktop Full page, phone

ARC & MANE home page at desktop width, top of the page
ARC & MANE home page at phone width, top of the page

Personal services studio

ARC & MANE

A hair and grooming studio home page with its own palette and type pairing, a service menu, a journal and booking, planned from a barber idea book.

Designed and built with WebsiteCreator from its design guide. The copy on the site is fictional.

Full page, desktop Full page, phone

Part of

WebWorks

Turn proven website designs into knowledge, create new sites from it, then sell and launch them automatically.

Other case studies in this project

  • Backend / Python

    WebWorks Generator (WWG)

    Turns an existing web page into a reusable React/Next.js page, separating components, content, theme and local assets. It then verifies the result against the source one dimension at a time, so approval is attached to the exact generated artifact rather than assumed from a successful build.

    Implemented · 9 production builds recorded, 5 operator-approved · 143 Python test files

  • Frontend

    Review console

    A local review harness for checking generated pages stage by stage. It renders the same component tree with successive layers enabled so an operator can tell whether a defect came from components, runtime behaviour, content, theme or the final composition before approving a dimension.

    Implemented · local · per-page rendering documented

  • Data

    Knowledge Base (KB)

    The design knowledge of the WebWorks line. It learns from the generator's processed pages how website pages are designed (layouts, sections, blocks, style systems, and card and background treatments) and supplies that knowledge to WebsiteCreator.

    Implemented · supplies WebsiteCreator

  • Frontend

    Checkout-to-activation storefront

    An online store where a small business chooses a website, pays by card and launches it on its own address without contacting anyone. After payment it receives an activation link, picks a name or connects its own domain, and the site is set up automatically.

    Implemented · tested

  • Cloud infrastructure

    Payments to provisioned HTTPS sites

    Automation that turns a card payment into a live, secure website. It records the purchase, sends an activation link, creates the customer's site and, if they bring their own domain, walks them through DNS setup and issues the certificate automatically, checking that everything works before declaring the site live.

    Implemented · tested (static) · deployment documented