Components is a deterministic style factory. You feed it a real website (or a niche plan); it reverse-engineers that site's design into a reusable, token-driven Style Guide, then lets you dress structural sections in it and check the whole thing for rigour. The output feeds Slipstream, which assembles the finished client site. Nothing here is generated by vibe — every value is captured, derived by a named rule, or flagged as missing.
Catalogue every component type that can exist (the spec). Library one set of structural decisions — how it does separators, density, weight (anatomy, not colour). Teardown the captured facts mined from one real site. A Style Guide = the per-client colours/fonts/rounding; a Library + a Style Guide together replace Bootstrap.
Provenance is law: A-side = captured facts only · B-side = labelled proposals · C-side = derived by rule from the capture. A derived value may never contradict a captured one.
Left-to-right, this is the path from a real site to a part Slipstream can assemble. Steps 1–3 are the everyday loop; 4–6 are how parts get authored and shipped.
Paste a URL. The teardown engine mines the live CSS into captured DNA (brand colours, fonts, rounding, spacing, shadows) and bakes a complete token preset — deriving only what wasn't captured, by named rule. This is where a Style Guide comes from.
Style teardown toolOpen the teardown's three sides — A captured, B proposed, C derived — and confirm the brand, type scale and rounding read true. Check where it sits against other sites and Bootstrap on the distinctness map.
Style scores Showcase (teardown × library)Decide the aesthetic floor. Compare 20 real CSS frameworks under your Style Guide, then lock a base and make a few deliberate changes — the "3 changes on a beautiful framework" recipe — to pull it toward a distinct character. Copy the recipe as a Style-Preset seed. optional
Framework comparison Framework presetsA page is an ordered list of sections (nav, hero, feature-grid, testimonial, footer…), each a structural part bound to data fields. The workbench renders a section across three axes — Library (anatomy) × Preset (your Style Guide) × Niche (fixture data) — so you see the same part in any look.
Section Workbench Section surfacesThe processor reads a slipstream-sections package and proves it: every template slot is bound to a field (✓) or flagged orphan (✗); every style value is a token or flagged ungoverned; and the Spec-vs-output diff checks a fixture actually renders what the bindings promise. Log any missing field as a request.
Section ProcessorRun the QA gate over every library and teardown — provenance, no phantoms, token coverage, distinctness, no generic "AI-look" tells. Green means the parts are coherent and ready for Slipstream to assemble into the client site.
QA — the rigour gateIf you know what you want, jump straight in.
| Teardown tool | Capture a real site → Style-Guide preset + character report. |
| Style scores | The distinctness map — how far each captured site is from the others and Bootstrap. |
| Showcase | A captured Style Guide dressed across library anatomies. |
| Framework comparison | 20 frameworks, same components, your Style Guide dovetailed in. |
| Framework presets | Base framework + Style Guide + 3 deltas → a portable preset recipe. |
| Adoption test | Proves the theming actually lands per framework (✓/✗). |
| Section Workbench | Render a section across Library × Preset × Niche. |
| Section surfaces | A section in four background states, all derived from the brand. |
| Section Processor | Prove a section package: field bindings, style governance, spec-vs-output diff. |
| Component library | The catalogue vs the base library, with gaps shown. |
| QA gate | One deterministic audit over every library and teardown. |
| Bootstrap spec | Our token vocabulary beside Bootstrap's — proof it's a finite spec. |
| Glossary | The shared language, in full. |
New here? Do steps 1 → 2 → 6 once with any URL to feel the loop: capture a site, look at the three sides, run QA. Everything is live at components.makelabs.com.au and recomputed deterministically — the same input always yields the same output.