Vibecode Webflow
track this build5 phases, 15 steps, beginner friendly0%KINDA · weekend project
A personal visual website builder is possible with existing editors, but Webflow's CMS, designer, hosting, animations, components, SEO, and client workflows are deep.
the project pack5 files · written for this build, step by step
You are building a lean indie version of Webflow. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # Webflow · indie build Build a block-based static marketing site generator with editable content files. Estimated effort: **multi-day**. Work `BUILD_PLAN.md` top to bottom · every phase ends in a check that has to pass before the next one starts. ## Stack | Part | Choice | Why | | --- | --- | --- | | Runtime | Python 3.12+ and Flask | A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. | | Storage | JSON/Markdown source files; generated dist/ | Content remains editable without running a database. | | Interface | Jinja HTML templates, CSS and vanilla JavaScript | Implement the specified screens directly with labelled controls and progressive enhancement. | | Verification | Python unittest and browser acceptance fixtures | Check invariants and the actual user workflow before the next phase. | | Focused libraries | markdown, bleach | Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. | ## Before you start Have every one of these ready. The plan assumes them from step one. - [ ] **Python 3.12 or newer and a terminal** · Python is free; this local prototype requires no hosting subscription. - Why: The local backend, tests and storage use Python. - Get it: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. - Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. - [ ] **A current desktop browser and text editor** · No paid service required for this local step. - Why: You need to view the local interface and edit generated project files. - Get it: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. - Verify: You can create a text file in the project folder and open browser developer tools. - [ ] **Webflow acceptance sample** · No paid service required for this local step. - Why: This fixture makes the first end-to-end check reproducible. - Get it: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. - Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. - [ ] **Confirm the bounded replacement** · No paid service required for this local step. - Why: The full commercial product is larger than this guide. - Get it: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. - Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. ## Quick start ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` Then copy `.env.example` to `.env` and fill in the values it documents. ## Honest limits This build deliberately does not replace: - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling If one of those is essential to you, that is the reason to keep paying for Webflow, and the README should say so rather than pretend. ===== BRIEF.md ===== # Build brief · Webflow The one-shot brief this plan expands. `BUILD_PLAN.md` (or `MILESTONES.md`) is the same sequence broken into steps and checks; where the two disagree, the plan wins. Build me a block-based static marketing site generator with editable content files as a bounded replacement for Webflow. Build it in phases in the order below. Do not write the whole product in one pass. Finish the current phase, run its Done when checks, fix failures, then continue. Indie mode completes Phases 1-5. Phase 6 is required before shared or public deployment. ### Stack (fixed, do not substitute) - Runtime: Python 3.12+ and Flask. A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. - Storage: JSON/Markdown source files; generated dist/. Content remains editable without running a database. - Interface: Jinja HTML templates, CSS and vanilla JavaScript. Implement the specified screens directly with labelled controls and progressive enhancement. - Verification: Python unittest and browser acceptance fixtures. Check invariants and the actual user workflow before the next phase. - Focused libraries: markdown, bleach. Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. ### Data model (create this before Phase 1) - pages/<slug>.json contains title, description and ordered blocks - posts/*.md contains title/date front matter - assets/ holds owned images - theme.json defines colors, spacing and typography - build manifest maps source hashes to dist files - Use stable ids and explicit relationships; add auxiliary tables named by the phases before those phases use them. - Acceptance fixture: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. ### Prerequisites and configuration - Python 3.12 or newer and a terminal: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. Cost: Python is free; this local prototype requires no hosting subscription. - A current desktop browser and text editor: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. Verify: You can create a text file in the project folder and open browser developer tools. Cost: No paid service required for this local step. - Webflow acceptance sample: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. Cost: No paid service required for this local step. - Confirm the bounded replacement: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. Cost: No paid service required for this local step. - Configuration: DATA_DIR, SECRET_KEY, APP_MODE, SITE_URL. Ship .env.example, replace placeholders and exclude secrets from git. ### Phase 1 · Local foundation and data contract Build: Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. - Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Commands, after creating the named files: `python -m venv .venv`; `python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach`; `python -m pip freeze > requirements.txt`; `python -m flask --app app run --host 127.0.0.1`. - For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Commands, after creating the named files: `python manage.py init`; `python manage.py seed`. - Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. - Trap: The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. Done when: The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. Restarting preserves the seeded records or canonical files; running init again deletes nothing. A cross-origin state-changing request to an admin route is refused. Do not build yet: Do not start content contract and renderer until these checks pass. ### Phase 2 · Content contract and renderer Build: Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: This generates the specific site; a visual design editor is not part of the build. Done when: An unknown block makes the build fail naming its page and block index. The angle-bracket title renders as text, not markup. Do not build yet: Do not start collections and design until these checks pass. ### Phase 3 · Collections and design Build: Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: User-authored Markdown still needs a safe rendering policy. Done when: Both posts appear in the listing and link to their own pages. At 360px and 1280px no block causes horizontal overflow. Do not build yet: Do not start publishable output until these checks pass. ### Phase 4 · Publishable output Build: Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: A contact link is not hosted form delivery; server processing is a separate feature. Done when: Serving dist on a static server produces no missing asset requests. Changing one page and rebuilding changes its output and manifest hash. Do not build yet: Do not start portable delivery and clean-start proof until these checks pass. ### Phase 5 · Portable delivery and clean-start proof Build: Finish the Webflow replacement with a documented first-run path and a recoverable export. - Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. - Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. - Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Commands, after creating the named files: `python -m pip install -r requirements.txt`; `python -m unittest discover -s test`. - Trap: Export without an import or restore rehearsal is not verified portability. Done when: A new folder reaches the documented fixture outcome using only README instructions. A backup restored in isolation preserves the proof data and can be opened. Do not build yet: Do not start operate and share with access controls until these checks pass. ### Phase 6 · Operate and share with access controls (product-builder only) Build: Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. - Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. - Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Commands, after creating the named files: `waitress-serve --listen=127.0.0.1:5000 app:app`. - Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. - Trap: Product mode is additional engineering, not a switch that makes a local prototype production-ready. Done when: An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. Do not build yet: Do not add new providers or vendor-scale features until the release gates are recorded. ### Out of scope (and why) - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity: retain the paid product if this capability is essential; it is outside this bounded build. - CMS: retain the paid product if this capability is essential; it is outside this bounded build. - hosting: retain the paid product if this capability is essential; it is outside this bounded build. - animations: retain the paid product if this capability is essential; it is outside this bounded build. - client handoff: retain the paid product if this capability is essential; it is outside this bounded build. - marketplace/templates: retain the paid product if this capability is essential; it is outside this bounded build. - forms: retain the paid product if this capability is essential; it is outside this bounded build. - SEO tooling: retain the paid product if this capability is essential; it is outside this bounded build. ### README must contain - Exact install, configure, initialize, start, test and recovery commands for a clean folder. - The schema, fixture, acceptance results, private data locations and export format. - Every prerequisite and secret source, actual running costs and deliberately excluded capabilities. - An honest distinction between tests actually run and checks still awaiting real credentials or deployment. - Dependency documentation reviewed 2026-09-05: https://flask.palletsprojects.com/en/stable/installation/ ; https://docs.python.org/3/library/sqlite3.html ; https://flask-wtf.readthedocs.io/en/1.2.x/csrf/ ; https://docs.pylonsproject.org/projects/waitress/en/stable/usage.html ; https://python-markdown.github.io/reference/ ; https://bleach.readthedocs.io/en/latest/clean.html. Recheck before upgrading; freeze the versions actually tested. ===== AGENTS.md ===== # Agent instructions · Webflow indie build - Read `README.md` and `BUILD_PLAN.md` before writing code. The stack is fixed: Python 3.12+ and Flask, JSON/Markdown source files; generated dist/, Jinja HTML templates, CSS and vanilla JavaScript, Python unittest and browser acceptance fixtures, markdown, bleach. Do not substitute. - Work one phase at a time, in order. Do not start a phase until every "Done when" item of the previous one passes. - Prefer the fewest moving parts that satisfy the step. No frameworks, services or dependencies the plan does not name. - Secrets live in `.env`, never in source or logs. Keep `.env.example` current when a variable is introduced. - Do not invent cryptography, security guarantees, APIs or compliance claims. - Add a focused test for every destructive, security-sensitive or data-loss path the plan names. - Run the project checks before declaring a phase complete, and record any deliberate shortcut in the README under "Tradeoffs". ## Known traps - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. - This generates the specific site; a visual design editor is not part of the build. - User-authored Markdown still needs a safe rendering policy. - A contact link is not hosted form delivery; server processing is a separate feature. - Export without an import or restore rehearsal is not verified portability. ===== BUILD_PLAN.md ===== # Build plan · Webflow Build a block-based static marketing site generator with editable content files. Phases are in dependency order. Each ends in a "Done when" list; treat an unticked item as a blocker, not a note. ## Phase 1 · Local foundation and data contract Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. ### Steps 1. Create and start the local application Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Files: `app.py`, `requirements.txt`, `.env.example`, `.gitignore` ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` 2. Implement storage and seed the named fixture For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Files: `schema.sql`, `db.py`, `manage.py`, `fixtures/README.md` ```sh python manage.py init python manage.py seed ``` 3. Protect the local request boundary Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. Files: `app.py`, `templates/base.html`, `test/test_foundation.py` ### Done when - [ ] The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. - [ ] Restarting preserves the seeded records or canonical files; running init again deletes nothing. - [ ] A cross-origin state-changing request to an admin route is refused. ### Watch out - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. ## Phase 2 · Content contract and renderer Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. ### Steps 1. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Files: `features/content_contract_and_renderer.py`, `templates/content_contract_and_renderer.html` 2. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Files: `features/content_contract_and_renderer.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_content_contract_and_renderer.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] An unknown block makes the build fail naming its page and block index. - [ ] The angle-bracket title renders as text, not markup. ### Watch out - This generates the specific site; a visual design editor is not part of the build. ## Phase 3 · Collections and design Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. ### Steps 1. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Files: `features/collections_and_design.py`, `templates/collections_and_design.html` 2. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Files: `features/collections_and_design.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_collections_and_design.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Both posts appear in the listing and link to their own pages. - [ ] At 360px and 1280px no block causes horizontal overflow. ### Watch out - User-authored Markdown still needs a safe rendering policy. ## Phase 4 · Publishable output Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. ### Steps 1. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Files: `features/publishable_output.py`, `templates/publishable_output.html` 2. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Files: `features/publishable_output.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_publishable_output.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Serving dist on a static server produces no missing asset requests. - [ ] Changing one page and rebuilding changes its output and manifest hash. ### Watch out - A contact link is not hosted form delivery; server processing is a separate feature. ## Phase 5 · Portable delivery and clean-start proof Finish the Webflow replacement with a documented first-run path and a recoverable export. ### Steps 1. Write the user-facing runbook Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. Files: `README.md`, `.env.example` 2. Create and rehearse a recoverable backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Files: `OPERATIONS.md`, `scripts/backup.py` 3. Reproduce the first-run experience Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Files: `README.md`, `verification.md` ```sh python -m pip install -r requirements.txt python -m unittest discover -s test ``` ### Done when - [ ] A new folder reaches the documented fixture outcome using only README instructions. - [ ] A backup restored in isolation preserves the proof data and can be opened. ### Watch out - Export without an import or restore rehearsal is not verified portability. ## Not in this build - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling ## After v1, if you want it - Extend publishable output only after the fixture and recovery checks pass. - Before adding another integration, document its credentials, limits, cost and failure behavior with primary-source links. ===== .env.example ===== # Copy to .env and fill in. Never commit .env; this file documents it. # Required. A new private folder this application creates on first run; never serve it as static files. DATA_DIR=./data/webflow # Required · secret. Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. SECRET_KEY=replace-with-a-random-secret # Required. Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. APP_MODE=indie # Required. The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. SITE_URL=http://127.0.0.1:5000
You are building a lean indie version of Webflow. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # Webflow · indie build Build a block-based static marketing site generator with editable content files. Estimated effort: **multi-day**. Work `BUILD_PLAN.md` top to bottom · every phase ends in a check that has to pass before the next one starts. ## Stack | Part | Choice | Why | | --- | --- | --- | | Runtime | Python 3.12+ and Flask | A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. | | Storage | JSON/Markdown source files; generated dist/ | Content remains editable without running a database. | | Interface | Jinja HTML templates, CSS and vanilla JavaScript | Implement the specified screens directly with labelled controls and progressive enhancement. | | Verification | Python unittest and browser acceptance fixtures | Check invariants and the actual user workflow before the next phase. | | Focused libraries | markdown, bleach | Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. | ## Before you start Have every one of these ready. The plan assumes them from step one. - [ ] **Python 3.12 or newer and a terminal** · Python is free; this local prototype requires no hosting subscription. - Why: The local backend, tests and storage use Python. - Get it: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. - Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. - [ ] **A current desktop browser and text editor** · No paid service required for this local step. - Why: You need to view the local interface and edit generated project files. - Get it: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. - Verify: You can create a text file in the project folder and open browser developer tools. - [ ] **Webflow acceptance sample** · No paid service required for this local step. - Why: This fixture makes the first end-to-end check reproducible. - Get it: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. - Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. - [ ] **Confirm the bounded replacement** · No paid service required for this local step. - Why: The full commercial product is larger than this guide. - Get it: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. - Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. ## Quick start ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` Then copy `.env.example` to `.env` and fill in the values it documents. ## Honest limits This build deliberately does not replace: - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling If one of those is essential to you, that is the reason to keep paying for Webflow, and the README should say so rather than pretend. ===== BRIEF.md ===== # Build brief · Webflow The one-shot brief this plan expands. `BUILD_PLAN.md` (or `MILESTONES.md`) is the same sequence broken into steps and checks; where the two disagree, the plan wins. Build me a block-based static marketing site generator with editable content files as a bounded replacement for Webflow. Build it in phases in the order below. Do not write the whole product in one pass. Finish the current phase, run its Done when checks, fix failures, then continue. Indie mode completes Phases 1-5. Phase 6 is required before shared or public deployment. ### Stack (fixed, do not substitute) - Runtime: Python 3.12+ and Flask. A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. - Storage: JSON/Markdown source files; generated dist/. Content remains editable without running a database. - Interface: Jinja HTML templates, CSS and vanilla JavaScript. Implement the specified screens directly with labelled controls and progressive enhancement. - Verification: Python unittest and browser acceptance fixtures. Check invariants and the actual user workflow before the next phase. - Focused libraries: markdown, bleach. Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. ### Data model (create this before Phase 1) - pages/<slug>.json contains title, description and ordered blocks - posts/*.md contains title/date front matter - assets/ holds owned images - theme.json defines colors, spacing and typography - build manifest maps source hashes to dist files - Use stable ids and explicit relationships; add auxiliary tables named by the phases before those phases use them. - Acceptance fixture: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. ### Prerequisites and configuration - Python 3.12 or newer and a terminal: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. Cost: Python is free; this local prototype requires no hosting subscription. - A current desktop browser and text editor: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. Verify: You can create a text file in the project folder and open browser developer tools. Cost: No paid service required for this local step. - Webflow acceptance sample: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. Cost: No paid service required for this local step. - Confirm the bounded replacement: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. Cost: No paid service required for this local step. - Configuration: DATA_DIR, SECRET_KEY, APP_MODE, SITE_URL. Ship .env.example, replace placeholders and exclude secrets from git. ### Phase 1 · Local foundation and data contract Build: Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. - Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Commands, after creating the named files: `python -m venv .venv`; `python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach`; `python -m pip freeze > requirements.txt`; `python -m flask --app app run --host 127.0.0.1`. - For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Commands, after creating the named files: `python manage.py init`; `python manage.py seed`. - Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. - Trap: The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. Done when: The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. Restarting preserves the seeded records or canonical files; running init again deletes nothing. A cross-origin state-changing request to an admin route is refused. Do not build yet: Do not start content contract and renderer until these checks pass. ### Phase 2 · Content contract and renderer Build: Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: This generates the specific site; a visual design editor is not part of the build. Done when: An unknown block makes the build fail naming its page and block index. The angle-bracket title renders as text, not markup. Do not build yet: Do not start collections and design until these checks pass. ### Phase 3 · Collections and design Build: Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: User-authored Markdown still needs a safe rendering policy. Done when: Both posts appear in the listing and link to their own pages. At 360px and 1280px no block causes horizontal overflow. Do not build yet: Do not start publishable output until these checks pass. ### Phase 4 · Publishable output Build: Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: A contact link is not hosted form delivery; server processing is a separate feature. Done when: Serving dist on a static server produces no missing asset requests. Changing one page and rebuilding changes its output and manifest hash. Do not build yet: Do not start portable delivery and clean-start proof until these checks pass. ### Phase 5 · Portable delivery and clean-start proof Build: Finish the Webflow replacement with a documented first-run path and a recoverable export. - Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. - Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. - Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Commands, after creating the named files: `python -m pip install -r requirements.txt`; `python -m unittest discover -s test`. - Trap: Export without an import or restore rehearsal is not verified portability. Done when: A new folder reaches the documented fixture outcome using only README instructions. A backup restored in isolation preserves the proof data and can be opened. Do not build yet: Do not start operate and share with access controls until these checks pass. ### Phase 6 · Operate and share with access controls (product-builder only) Build: Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. - Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. - Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Commands, after creating the named files: `waitress-serve --listen=127.0.0.1:5000 app:app`. - Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. - Trap: Product mode is additional engineering, not a switch that makes a local prototype production-ready. Done when: An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. Do not build yet: Do not add new providers or vendor-scale features until the release gates are recorded. ### Out of scope (and why) - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity: retain the paid product if this capability is essential; it is outside this bounded build. - CMS: retain the paid product if this capability is essential; it is outside this bounded build. - hosting: retain the paid product if this capability is essential; it is outside this bounded build. - animations: retain the paid product if this capability is essential; it is outside this bounded build. - client handoff: retain the paid product if this capability is essential; it is outside this bounded build. - marketplace/templates: retain the paid product if this capability is essential; it is outside this bounded build. - forms: retain the paid product if this capability is essential; it is outside this bounded build. - SEO tooling: retain the paid product if this capability is essential; it is outside this bounded build. ### README must contain - Exact install, configure, initialize, start, test and recovery commands for a clean folder. - The schema, fixture, acceptance results, private data locations and export format. - Every prerequisite and secret source, actual running costs and deliberately excluded capabilities. - An honest distinction between tests actually run and checks still awaiting real credentials or deployment. - Dependency documentation reviewed 2026-09-05: https://flask.palletsprojects.com/en/stable/installation/ ; https://docs.python.org/3/library/sqlite3.html ; https://flask-wtf.readthedocs.io/en/1.2.x/csrf/ ; https://docs.pylonsproject.org/projects/waitress/en/stable/usage.html ; https://python-markdown.github.io/reference/ ; https://bleach.readthedocs.io/en/latest/clean.html. Recheck before upgrading; freeze the versions actually tested. ===== AGENTS.md ===== # Agent instructions · Webflow indie build - Read `README.md` and `BUILD_PLAN.md` before writing code. The stack is fixed: Python 3.12+ and Flask, JSON/Markdown source files; generated dist/, Jinja HTML templates, CSS and vanilla JavaScript, Python unittest and browser acceptance fixtures, markdown, bleach. Do not substitute. - Work one phase at a time, in order. Do not start a phase until every "Done when" item of the previous one passes. - Prefer the fewest moving parts that satisfy the step. No frameworks, services or dependencies the plan does not name. - Secrets live in `.env`, never in source or logs. Keep `.env.example` current when a variable is introduced. - Do not invent cryptography, security guarantees, APIs or compliance claims. - Add a focused test for every destructive, security-sensitive or data-loss path the plan names. - Run the project checks before declaring a phase complete, and record any deliberate shortcut in the README under "Tradeoffs". ## Known traps - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. - This generates the specific site; a visual design editor is not part of the build. - User-authored Markdown still needs a safe rendering policy. - A contact link is not hosted form delivery; server processing is a separate feature. - Export without an import or restore rehearsal is not verified portability. ===== BUILD_PLAN.md ===== # Build plan · Webflow Build a block-based static marketing site generator with editable content files. Phases are in dependency order. Each ends in a "Done when" list; treat an unticked item as a blocker, not a note. ## Phase 1 · Local foundation and data contract Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. ### Steps 1. Create and start the local application Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Files: `app.py`, `requirements.txt`, `.env.example`, `.gitignore` ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` 2. Implement storage and seed the named fixture For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Files: `schema.sql`, `db.py`, `manage.py`, `fixtures/README.md` ```sh python manage.py init python manage.py seed ``` 3. Protect the local request boundary Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. Files: `app.py`, `templates/base.html`, `test/test_foundation.py` ### Done when - [ ] The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. - [ ] Restarting preserves the seeded records or canonical files; running init again deletes nothing. - [ ] A cross-origin state-changing request to an admin route is refused. ### Watch out - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. ## Phase 2 · Content contract and renderer Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. ### Steps 1. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Files: `features/content_contract_and_renderer.py`, `templates/content_contract_and_renderer.html` 2. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Files: `features/content_contract_and_renderer.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_content_contract_and_renderer.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] An unknown block makes the build fail naming its page and block index. - [ ] The angle-bracket title renders as text, not markup. ### Watch out - This generates the specific site; a visual design editor is not part of the build. ## Phase 3 · Collections and design Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. ### Steps 1. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Files: `features/collections_and_design.py`, `templates/collections_and_design.html` 2. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Files: `features/collections_and_design.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_collections_and_design.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Both posts appear in the listing and link to their own pages. - [ ] At 360px and 1280px no block causes horizontal overflow. ### Watch out - User-authored Markdown still needs a safe rendering policy. ## Phase 4 · Publishable output Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. ### Steps 1. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Files: `features/publishable_output.py`, `templates/publishable_output.html` 2. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Files: `features/publishable_output.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_publishable_output.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Serving dist on a static server produces no missing asset requests. - [ ] Changing one page and rebuilding changes its output and manifest hash. ### Watch out - A contact link is not hosted form delivery; server processing is a separate feature. ## Phase 5 · Portable delivery and clean-start proof Finish the Webflow replacement with a documented first-run path and a recoverable export. ### Steps 1. Write the user-facing runbook Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. Files: `README.md`, `.env.example` 2. Create and rehearse a recoverable backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Files: `OPERATIONS.md`, `scripts/backup.py` 3. Reproduce the first-run experience Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Files: `README.md`, `verification.md` ```sh python -m pip install -r requirements.txt python -m unittest discover -s test ``` ### Done when - [ ] A new folder reaches the documented fixture outcome using only README instructions. - [ ] A backup restored in isolation preserves the proof data and can be opened. ### Watch out - Export without an import or restore rehearsal is not verified portability. ## Not in this build - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling ## After v1, if you want it - Extend publishable output only after the fixture and recovery checks pass. - Before adding another integration, document its credentials, limits, cost and failure behavior with primary-source links. ===== .env.example ===== # Copy to .env and fill in. Never commit .env; this file documents it. # Required. A new private folder this application creates on first run; never serve it as static files. DATA_DIR=./data/webflow # Required · secret. Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. SECRET_KEY=replace-with-a-random-secret # Required. Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. APP_MODE=indie # Required. The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. SITE_URL=http://127.0.0.1:5000
You are building a production product version of Webflow. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== PRODUCT.md ===== # Webflow · product brief ## Problem A personal visual website builder is possible with existing editors, but Webflow's CMS, designer, hosting, animations, components, SEO, and client workflows are deep. ## Product outcome An operated version of a block-based static marketing site generator with editable content files, with authorized access, restore evidence and honest scope limits. ## Target user A builder who needs a maintainable product foundation, not a one-off demo. ## Required capabilities - visual builder/editor - CMS database - static export/build - hosting - asset manager - auth ## Explicit non-goals for v1 - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling ## Success criteria - An unknown block makes the build fail naming its page and block index. - Both posts appear in the listing and link to their own pages. - Serving dist on a static server produces no missing asset requests. - A private-data authorization check passes using a second identity. - An off-host restore drill has a date, observed result and recovery time in OPERATIONS.md. - README names the excluded vendor capabilities and actual provider/hosting costs. ===== BRIEF.md ===== # Build brief · Webflow The one-shot brief this plan expands. `BUILD_PLAN.md` (or `MILESTONES.md`) is the same sequence broken into steps and checks; where the two disagree, the plan wins. Build me a block-based static marketing site generator with editable content files as a bounded replacement for Webflow. Build it in phases in the order below. Do not write the whole product in one pass. Finish the current phase, run its Done when checks, fix failures, then continue. Indie mode completes Phases 1-5. Phase 6 is required before shared or public deployment. ### Stack (fixed, do not substitute) - Runtime: Python 3.12+ and Flask. A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. - Storage: JSON/Markdown source files; generated dist/. Content remains editable without running a database. - Interface: Jinja HTML templates, CSS and vanilla JavaScript. Implement the specified screens directly with labelled controls and progressive enhancement. - Verification: Python unittest and browser acceptance fixtures. Check invariants and the actual user workflow before the next phase. - Focused libraries: markdown, bleach. Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. ### Data model (create this before Phase 1) - pages/<slug>.json contains title, description and ordered blocks - posts/*.md contains title/date front matter - assets/ holds owned images - theme.json defines colors, spacing and typography - build manifest maps source hashes to dist files - Use stable ids and explicit relationships; add auxiliary tables named by the phases before those phases use them. - Acceptance fixture: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. ### Prerequisites and configuration - Python 3.12 or newer and a terminal: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. Cost: Python is free; this local prototype requires no hosting subscription. - A current desktop browser and text editor: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. Verify: You can create a text file in the project folder and open browser developer tools. Cost: No paid service required for this local step. - Webflow acceptance sample: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. Cost: No paid service required for this local step. - Confirm the bounded replacement: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. Cost: No paid service required for this local step. - Configuration: DATA_DIR, SECRET_KEY, APP_MODE, SITE_URL. Ship .env.example, replace placeholders and exclude secrets from git. ### Phase 1 · Local foundation and data contract Build: Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. - Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Commands, after creating the named files: `python -m venv .venv`; `python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach`; `python -m pip freeze > requirements.txt`; `python -m flask --app app run --host 127.0.0.1`. - For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Commands, after creating the named files: `python manage.py init`; `python manage.py seed`. - Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. - Trap: The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. Done when: The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. Restarting preserves the seeded records or canonical files; running init again deletes nothing. A cross-origin state-changing request to an admin route is refused. Do not build yet: Do not start content contract and renderer until these checks pass. ### Phase 2 · Content contract and renderer Build: Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: This generates the specific site; a visual design editor is not part of the build. Done when: An unknown block makes the build fail naming its page and block index. The angle-bracket title renders as text, not markup. Do not build yet: Do not start collections and design until these checks pass. ### Phase 3 · Collections and design Build: Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: User-authored Markdown still needs a safe rendering policy. Done when: Both posts appear in the listing and link to their own pages. At 360px and 1280px no block causes horizontal overflow. Do not build yet: Do not start publishable output until these checks pass. ### Phase 4 · Publishable output Build: Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: A contact link is not hosted form delivery; server processing is a separate feature. Done when: Serving dist on a static server produces no missing asset requests. Changing one page and rebuilding changes its output and manifest hash. Do not build yet: Do not start portable delivery and clean-start proof until these checks pass. ### Phase 5 · Portable delivery and clean-start proof Build: Finish the Webflow replacement with a documented first-run path and a recoverable export. - Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. - Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. - Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Commands, after creating the named files: `python -m pip install -r requirements.txt`; `python -m unittest discover -s test`. - Trap: Export without an import or restore rehearsal is not verified portability. Done when: A new folder reaches the documented fixture outcome using only README instructions. A backup restored in isolation preserves the proof data and can be opened. Do not build yet: Do not start operate and share with access controls until these checks pass. ### Phase 6 · Operate and share with access controls (product-builder only) Build: Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. - Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. - Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Commands, after creating the named files: `waitress-serve --listen=127.0.0.1:5000 app:app`. - Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. - Trap: Product mode is additional engineering, not a switch that makes a local prototype production-ready. Done when: An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. Do not build yet: Do not add new providers or vendor-scale features until the release gates are recorded. ### Out of scope (and why) - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity: retain the paid product if this capability is essential; it is outside this bounded build. - CMS: retain the paid product if this capability is essential; it is outside this bounded build. - hosting: retain the paid product if this capability is essential; it is outside this bounded build. - animations: retain the paid product if this capability is essential; it is outside this bounded build. - client handoff: retain the paid product if this capability is essential; it is outside this bounded build. - marketplace/templates: retain the paid product if this capability is essential; it is outside this bounded build. - forms: retain the paid product if this capability is essential; it is outside this bounded build. - SEO tooling: retain the paid product if this capability is essential; it is outside this bounded build. ### README must contain - Exact install, configure, initialize, start, test and recovery commands for a clean folder. - The schema, fixture, acceptance results, private data locations and export format. - Every prerequisite and secret source, actual running costs and deliberately excluded capabilities. - An honest distinction between tests actually run and checks still awaiting real credentials or deployment. - Dependency documentation reviewed 2026-09-05: https://flask.palletsprojects.com/en/stable/installation/ ; https://docs.python.org/3/library/sqlite3.html ; https://flask-wtf.readthedocs.io/en/1.2.x/csrf/ ; https://docs.pylonsproject.org/projects/waitress/en/stable/usage.html ; https://python-markdown.github.io/reference/ ; https://bleach.readthedocs.io/en/latest/clean.html. Recheck before upgrading; freeze the versions actually tested. ===== ARCHITECTURE.md ===== # Architecture · Webflow ## Stack | Part | Choice | Why | | --- | --- | --- | | Runtime | Python 3.12+ and Flask | A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. | | Storage | JSON/Markdown source files; generated dist/ | Content remains editable without running a database. | | Interface | Jinja HTML templates, CSS and vanilla JavaScript | Implement the specified screens directly with labelled controls and progressive enhancement. | | Verification | Python unittest and browser acceptance fixtures | Check invariants and the actual user workflow before the next phase. | | Focused libraries | markdown, bleach | Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. | ## Modules Each module has one owner concern and a documented way to replace it. | Module | Owns | How to replace it | | --- | --- | --- | | Data and identity | pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files | Keep stable ids and a versioned repository interface; migrate storage behind it with a fixture round-trip. | | Content contract and renderer | Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. | Keep the acceptance contract: An unknown block makes the build fail naming its page and block index. Replace only this module after replaying its fixture; preserve ids and existing records. | | Collections and design | Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. | Keep the acceptance contract: Both posts appear in the listing and link to their own pages. Replace only this module after replaying its fixture; preserve ids and existing records. | | Publishable output | Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. | Keep the acceptance contract: Serving dist on a static server produces no missing asset requests. Replace only this module after replaying its fixture; preserve ids and existing records. | | Operations | Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. | Change host or backup destination only after an isolated restore and authorization check. | ## Configuration Every runtime setting is an environment variable documented in `.env.example`, validated at startup, with a safe local default wherever one exists. - `DATA_DIR` · required · A new private folder this application creates on first run; never serve it as static files. - `SECRET_KEY` · required, secret · Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. - `APP_MODE` · required · Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. - `SITE_URL` · required · The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. ## Production baseline - Security: least privilege, input validation at every boundary, secret redaction in logs, rate limits on abuse-prone paths, no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore procedures that have been exercised. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, timeouts. - Observability: structured logs with request or operation ids, an error-tracking hook, and health and readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, one end-to-end test of the critical path. ## Decision records For each dependency in the stack table, keep a short note: why it was chosen, its failure mode, and how it is replaced. Do not add infrastructure until a requirement in `PRODUCT.md` justifies it. ===== AGENTS.md ===== # Agent instructions · Webflow product build - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. The stack is fixed: Python 3.12+ and Flask, JSON/Markdown source files; generated dist/, Jinja HTML templates, CSS and vanilla JavaScript, Python unittest and browser acceptance fixtures, markdown, bleach. - Implement milestone by milestone from `MILESTONES.md`; keep each change reviewable and leave the application runnable at every commit. - Treat authentication, payments, encryption, imports, webhooks and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a check pass. - Put every external service behind an interface with a deterministic fake for tests. - Add migrations and rollback or recovery notes for every persistent data change. - Log useful operational context without credentials, tokens, passwords or personal data. - Update documentation and run every check before completing a milestone. ## Known traps - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. - This generates the specific site; a visual design editor is not part of the build. - User-authored Markdown still needs a safe rendering policy. - A contact link is not hosted form delivery; server processing is a separate feature. - Export without an import or restore rehearsal is not verified portability. - Product mode is additional engineering, not a switch that makes a local prototype production-ready. ===== MILESTONES.md ===== # Delivery milestones · Webflow Estimated effort: **multi-day** for the indie phases; the production-only milestones add the trust and operability layer. ## M1 · Local foundation and data contract Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. ### Steps 1. Create and start the local application Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Files: `app.py`, `requirements.txt`, `.env.example`, `.gitignore` ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` 2. Implement storage and seed the named fixture For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Files: `schema.sql`, `db.py`, `manage.py`, `fixtures/README.md` ```sh python manage.py init python manage.py seed ``` 3. Protect the local request boundary Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. Files: `app.py`, `templates/base.html`, `test/test_foundation.py` ### Done when - [ ] The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. - [ ] Restarting preserves the seeded records or canonical files; running init again deletes nothing. - [ ] A cross-origin state-changing request to an admin route is refused. ### Watch out - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. ## M2 · Content contract and renderer Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. ### Steps 1. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Files: `features/content_contract_and_renderer.py`, `templates/content_contract_and_renderer.html` 2. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Files: `features/content_contract_and_renderer.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_content_contract_and_renderer.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] An unknown block makes the build fail naming its page and block index. - [ ] The angle-bracket title renders as text, not markup. ### Watch out - This generates the specific site; a visual design editor is not part of the build. ## M3 · Collections and design Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. ### Steps 1. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Files: `features/collections_and_design.py`, `templates/collections_and_design.html` 2. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Files: `features/collections_and_design.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_collections_and_design.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Both posts appear in the listing and link to their own pages. - [ ] At 360px and 1280px no block causes horizontal overflow. ### Watch out - User-authored Markdown still needs a safe rendering policy. ## M4 · Publishable output Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. ### Steps 1. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Files: `features/publishable_output.py`, `templates/publishable_output.html` 2. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Files: `features/publishable_output.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_publishable_output.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Serving dist on a static server produces no missing asset requests. - [ ] Changing one page and rebuilding changes its output and manifest hash. ### Watch out - A contact link is not hosted form delivery; server processing is a separate feature. ## M5 · Portable delivery and clean-start proof Finish the Webflow replacement with a documented first-run path and a recoverable export. ### Steps 1. Write the user-facing runbook Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. Files: `README.md`, `.env.example` 2. Create and rehearse a recoverable backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Files: `OPERATIONS.md`, `scripts/backup.py` 3. Reproduce the first-run experience Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Files: `README.md`, `verification.md` ```sh python -m pip install -r requirements.txt python -m unittest discover -s test ``` ### Done when - [ ] A new folder reaches the documented fixture outcome using only README instructions. - [ ] A backup restored in isolation preserves the proof data and can be opened. ### Watch out - Export without an import or restore rehearsal is not verified portability. ## M6 · Operate and share with access controls (production only) Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. ### Steps 1. Establish owner access before exposure Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. Files: `ARCHITECTURE.md`, `OPERATIONS.md` 2. Deploy a monitored service Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Files: `Caddyfile`, `OPERATIONS.md` ```sh waitress-serve --listen=127.0.0.1:5000 app:app ``` 3. Rehearse loss and recovery Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. Files: `OPERATIONS.md`, `release-checklist.md` ### Done when - [ ] An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. - [ ] A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. - [ ] Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. ### Watch out - Product mode is additional engineering, not a switch that makes a local prototype production-ready. ===== OPERATIONS.md ===== # Operations · Webflow ## Backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. ## Restore Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Do a restore drill before the first real user, and write the date here when it passes. ## Monitoring Check HTTP availability, free disk, backup age and domain failures for Content contract and renderer, Collections and design, Publishable output. Alert without logging private payloads. ## Incident checklist Pause outbound jobs and public intake as appropriate, preserve redacted diagnostics, restore an isolated verified backup, rotate affected credentials and reconcile uncertain effects before reopening. 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified backup when needed. 5. Document the root cause, the remediation and the regression test. ## Release gate - [ ] An unknown block makes the build fail naming its page and block index. - [ ] Both posts appear in the listing and link to their own pages. - [ ] Serving dist on a static server produces no missing asset requests. - [ ] A private-data authorization check passes using a second identity. - [ ] An off-host restore drill has a date, observed result and recovery time in OPERATIONS.md. - [ ] README names the excluded vendor capabilities and actual provider/hosting costs. ## Launch constraint Do not market omitted Webflow capabilities as implemented. The non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered. ===== .env.example ===== # Copy to .env and fill in. Never commit .env; this file documents it. # Required. A new private folder this application creates on first run; never serve it as static files. DATA_DIR=./data/webflow # Required · secret. Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. SECRET_KEY=replace-with-a-random-secret # Required. Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. APP_MODE=indie # Required. The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. SITE_URL=http://127.0.0.1:5000
README.md
# Webflow · indie build Build a block-based static marketing site generator with editable content files. Estimated effort: **multi-day**. Work `BUILD_PLAN.md` top to bottom · every phase ends in a check that has to pass before the next one starts. ## Stack | Part | Choice | Why | | --- | --- | --- | | Runtime | Python 3.12+ and Flask | A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. | | Storage | JSON/Markdown source files; generated dist/ | Content remains editable without running a database. | | Interface | Jinja HTML templates, CSS and vanilla JavaScript | Implement the specified screens directly with labelled controls and progressive enhancement. | | Verification | Python unittest and browser acceptance fixtures | Check invariants and the actual user workflow before the next phase. | | Focused libraries | markdown, bleach | Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. | ## Before you start Have every one of these ready. The plan assumes them from step one. - [ ] **Python 3.12 or newer and a terminal** · Python is free; this local prototype requires no hosting subscription. - Why: The local backend, tests and storage use Python. - Get it: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. - Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. - [ ] **A current desktop browser and text editor** · No paid service required for this local step. - Why: You need to view the local interface and edit generated project files. - Get it: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. - Verify: You can create a text file in the project folder and open browser developer tools. - [ ] **Webflow acceptance sample** · No paid service required for this local step. - Why: This fixture makes the first end-to-end check reproducible. - Get it: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. - Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. - [ ] **Confirm the bounded replacement** · No paid service required for this local step. - Why: The full commercial product is larger than this guide. - Get it: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. - Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. ## Quick start ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` Then copy `.env.example` to `.env` and fill in the values it documents. ## Honest limits This build deliberately does not replace: - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling If one of those is essential to you, that is the reason to keep paying for Webflow, and the README should say so rather than pretend.
BRIEF.md
# Build brief · Webflow The one-shot brief this plan expands. `BUILD_PLAN.md` (or `MILESTONES.md`) is the same sequence broken into steps and checks; where the two disagree, the plan wins. Build me a block-based static marketing site generator with editable content files as a bounded replacement for Webflow. Build it in phases in the order below. Do not write the whole product in one pass. Finish the current phase, run its Done when checks, fix failures, then continue. Indie mode completes Phases 1-5. Phase 6 is required before shared or public deployment. ### Stack (fixed, do not substitute) - Runtime: Python 3.12+ and Flask. A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. - Storage: JSON/Markdown source files; generated dist/. Content remains editable without running a database. - Interface: Jinja HTML templates, CSS and vanilla JavaScript. Implement the specified screens directly with labelled controls and progressive enhancement. - Verification: Python unittest and browser acceptance fixtures. Check invariants and the actual user workflow before the next phase. - Focused libraries: markdown, bleach. Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. ### Data model (create this before Phase 1) - pages/<slug>.json contains title, description and ordered blocks - posts/*.md contains title/date front matter - assets/ holds owned images - theme.json defines colors, spacing and typography - build manifest maps source hashes to dist files - Use stable ids and explicit relationships; add auxiliary tables named by the phases before those phases use them. - Acceptance fixture: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. ### Prerequisites and configuration - Python 3.12 or newer and a terminal: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. Cost: Python is free; this local prototype requires no hosting subscription. - A current desktop browser and text editor: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. Verify: You can create a text file in the project folder and open browser developer tools. Cost: No paid service required for this local step. - Webflow acceptance sample: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. Cost: No paid service required for this local step. - Confirm the bounded replacement: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. Cost: No paid service required for this local step. - Configuration: DATA_DIR, SECRET_KEY, APP_MODE, SITE_URL. Ship .env.example, replace placeholders and exclude secrets from git. ### Phase 1 · Local foundation and data contract Build: Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. - Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Commands, after creating the named files: `python -m venv .venv`; `python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach`; `python -m pip freeze > requirements.txt`; `python -m flask --app app run --host 127.0.0.1`. - For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Commands, after creating the named files: `python manage.py init`; `python manage.py seed`. - Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. - Trap: The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. Done when: The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. Restarting preserves the seeded records or canonical files; running init again deletes nothing. A cross-origin state-changing request to an admin route is refused. Do not build yet: Do not start content contract and renderer until these checks pass. ### Phase 2 · Content contract and renderer Build: Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: This generates the specific site; a visual design editor is not part of the build. Done when: An unknown block makes the build fail naming its page and block index. The angle-bracket title renders as text, not markup. Do not build yet: Do not start collections and design until these checks pass. ### Phase 3 · Collections and design Build: Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: User-authored Markdown still needs a safe rendering policy. Done when: Both posts appear in the listing and link to their own pages. At 360px and 1280px no block causes horizontal overflow. Do not build yet: Do not start publishable output until these checks pass. ### Phase 4 · Publishable output Build: Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: A contact link is not hosted form delivery; server processing is a separate feature. Done when: Serving dist on a static server produces no missing asset requests. Changing one page and rebuilding changes its output and manifest hash. Do not build yet: Do not start portable delivery and clean-start proof until these checks pass. ### Phase 5 · Portable delivery and clean-start proof Build: Finish the Webflow replacement with a documented first-run path and a recoverable export. - Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. - Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. - Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Commands, after creating the named files: `python -m pip install -r requirements.txt`; `python -m unittest discover -s test`. - Trap: Export without an import or restore rehearsal is not verified portability. Done when: A new folder reaches the documented fixture outcome using only README instructions. A backup restored in isolation preserves the proof data and can be opened. Do not build yet: Do not start operate and share with access controls until these checks pass. ### Phase 6 · Operate and share with access controls (product-builder only) Build: Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. - Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. - Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Commands, after creating the named files: `waitress-serve --listen=127.0.0.1:5000 app:app`. - Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. - Trap: Product mode is additional engineering, not a switch that makes a local prototype production-ready. Done when: An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. Do not build yet: Do not add new providers or vendor-scale features until the release gates are recorded. ### Out of scope (and why) - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity: retain the paid product if this capability is essential; it is outside this bounded build. - CMS: retain the paid product if this capability is essential; it is outside this bounded build. - hosting: retain the paid product if this capability is essential; it is outside this bounded build. - animations: retain the paid product if this capability is essential; it is outside this bounded build. - client handoff: retain the paid product if this capability is essential; it is outside this bounded build. - marketplace/templates: retain the paid product if this capability is essential; it is outside this bounded build. - forms: retain the paid product if this capability is essential; it is outside this bounded build. - SEO tooling: retain the paid product if this capability is essential; it is outside this bounded build. ### README must contain - Exact install, configure, initialize, start, test and recovery commands for a clean folder. - The schema, fixture, acceptance results, private data locations and export format. - Every prerequisite and secret source, actual running costs and deliberately excluded capabilities. - An honest distinction between tests actually run and checks still awaiting real credentials or deployment. - Dependency documentation reviewed 2026-09-05: https://flask.palletsprojects.com/en/stable/installation/ ; https://docs.python.org/3/library/sqlite3.html ; https://flask-wtf.readthedocs.io/en/1.2.x/csrf/ ; https://docs.pylonsproject.org/projects/waitress/en/stable/usage.html ; https://python-markdown.github.io/reference/ ; https://bleach.readthedocs.io/en/latest/clean.html. Recheck before upgrading; freeze the versions actually tested.
AGENTS.md
# Agent instructions · Webflow indie build - Read `README.md` and `BUILD_PLAN.md` before writing code. The stack is fixed: Python 3.12+ and Flask, JSON/Markdown source files; generated dist/, Jinja HTML templates, CSS and vanilla JavaScript, Python unittest and browser acceptance fixtures, markdown, bleach. Do not substitute. - Work one phase at a time, in order. Do not start a phase until every "Done when" item of the previous one passes. - Prefer the fewest moving parts that satisfy the step. No frameworks, services or dependencies the plan does not name. - Secrets live in `.env`, never in source or logs. Keep `.env.example` current when a variable is introduced. - Do not invent cryptography, security guarantees, APIs or compliance claims. - Add a focused test for every destructive, security-sensitive or data-loss path the plan names. - Run the project checks before declaring a phase complete, and record any deliberate shortcut in the README under "Tradeoffs". ## Known traps - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. - This generates the specific site; a visual design editor is not part of the build. - User-authored Markdown still needs a safe rendering policy. - A contact link is not hosted form delivery; server processing is a separate feature. - Export without an import or restore rehearsal is not verified portability.
BUILD_PLAN.md
# Build plan · Webflow Build a block-based static marketing site generator with editable content files. Phases are in dependency order. Each ends in a "Done when" list; treat an unticked item as a blocker, not a note. ## Phase 1 · Local foundation and data contract Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. ### Steps 1. Create and start the local application Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Files: `app.py`, `requirements.txt`, `.env.example`, `.gitignore` ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` 2. Implement storage and seed the named fixture For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Files: `schema.sql`, `db.py`, `manage.py`, `fixtures/README.md` ```sh python manage.py init python manage.py seed ``` 3. Protect the local request boundary Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. Files: `app.py`, `templates/base.html`, `test/test_foundation.py` ### Done when - [ ] The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. - [ ] Restarting preserves the seeded records or canonical files; running init again deletes nothing. - [ ] A cross-origin state-changing request to an admin route is refused. ### Watch out - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. ## Phase 2 · Content contract and renderer Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. ### Steps 1. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Files: `features/content_contract_and_renderer.py`, `templates/content_contract_and_renderer.html` 2. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Files: `features/content_contract_and_renderer.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_content_contract_and_renderer.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] An unknown block makes the build fail naming its page and block index. - [ ] The angle-bracket title renders as text, not markup. ### Watch out - This generates the specific site; a visual design editor is not part of the build. ## Phase 3 · Collections and design Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. ### Steps 1. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Files: `features/collections_and_design.py`, `templates/collections_and_design.html` 2. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Files: `features/collections_and_design.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_collections_and_design.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Both posts appear in the listing and link to their own pages. - [ ] At 360px and 1280px no block causes horizontal overflow. ### Watch out - User-authored Markdown still needs a safe rendering policy. ## Phase 4 · Publishable output Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. ### Steps 1. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Files: `features/publishable_output.py`, `templates/publishable_output.html` 2. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Files: `features/publishable_output.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_publishable_output.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Serving dist on a static server produces no missing asset requests. - [ ] Changing one page and rebuilding changes its output and manifest hash. ### Watch out - A contact link is not hosted form delivery; server processing is a separate feature. ## Phase 5 · Portable delivery and clean-start proof Finish the Webflow replacement with a documented first-run path and a recoverable export. ### Steps 1. Write the user-facing runbook Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. Files: `README.md`, `.env.example` 2. Create and rehearse a recoverable backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Files: `OPERATIONS.md`, `scripts/backup.py` 3. Reproduce the first-run experience Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Files: `README.md`, `verification.md` ```sh python -m pip install -r requirements.txt python -m unittest discover -s test ``` ### Done when - [ ] A new folder reaches the documented fixture outcome using only README instructions. - [ ] A backup restored in isolation preserves the proof data and can be opened. ### Watch out - Export without an import or restore rehearsal is not verified portability. ## Not in this build - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling ## After v1, if you want it - Extend publishable output only after the fixture and recovery checks pass. - Before adding another integration, document its credentials, limits, cost and failure behavior with primary-source links.
.env.example
# Copy to .env and fill in. Never commit .env; this file documents it. # Required. A new private folder this application creates on first run; never serve it as static files. DATA_DIR=./data/webflow # Required · secret. Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. SECRET_KEY=replace-with-a-random-secret # Required. Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. APP_MODE=indie # Required. The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. SITE_URL=http://127.0.0.1:5000
PRODUCT.md
# Webflow · product brief ## Problem A personal visual website builder is possible with existing editors, but Webflow's CMS, designer, hosting, animations, components, SEO, and client workflows are deep. ## Product outcome An operated version of a block-based static marketing site generator with editable content files, with authorized access, restore evidence and honest scope limits. ## Target user A builder who needs a maintainable product foundation, not a one-off demo. ## Required capabilities - visual builder/editor - CMS database - static export/build - hosting - asset manager - auth ## Explicit non-goals for v1 - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity - CMS - hosting - animations - client handoff - marketplace/templates - forms - SEO tooling ## Success criteria - An unknown block makes the build fail naming its page and block index. - Both posts appear in the listing and link to their own pages. - Serving dist on a static server produces no missing asset requests. - A private-data authorization check passes using a second identity. - An off-host restore drill has a date, observed result and recovery time in OPERATIONS.md. - README names the excluded vendor capabilities and actual provider/hosting costs.
BRIEF.md
# Build brief · Webflow The one-shot brief this plan expands. `BUILD_PLAN.md` (or `MILESTONES.md`) is the same sequence broken into steps and checks; where the two disagree, the plan wins. Build me a block-based static marketing site generator with editable content files as a bounded replacement for Webflow. Build it in phases in the order below. Do not write the whole product in one pass. Finish the current phase, run its Done when checks, fix failures, then continue. Indie mode completes Phases 1-5. Phase 6 is required before shared or public deployment. ### Stack (fixed, do not substitute) - Runtime: Python 3.12+ and Flask. A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. - Storage: JSON/Markdown source files; generated dist/. Content remains editable without running a database. - Interface: Jinja HTML templates, CSS and vanilla JavaScript. Implement the specified screens directly with labelled controls and progressive enhancement. - Verification: Python unittest and browser acceptance fixtures. Check invariants and the actual user workflow before the next phase. - Focused libraries: markdown, bleach. Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. ### Data model (create this before Phase 1) - pages/<slug>.json contains title, description and ordered blocks - posts/*.md contains title/date front matter - assets/ holds owned images - theme.json defines colors, spacing and typography - build manifest maps source hashes to dist files - Use stable ids and explicit relationships; add auxiliary tables named by the phases before those phases use them. - Acceptance fixture: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. ### Prerequisites and configuration - Python 3.12 or newer and a terminal: Install Python from python.org. Open a terminal in a new empty project folder. On Windows, use py -3 where this guide says python if python is not on PATH; on macOS/Linux use python3 if needed. Create .venv and activate it before installing packages. Verify: python --version reports 3.12+ and python -c "import sqlite3" succeeds. Cost: Python is free; this local prototype requires no hosting subscription. - A current desktop browser and text editor: Use an installed Chrome, Firefox or Edge browser. Open the empty project folder in your editor; open the terminal there, not in this catalog repository. Verify: You can create a text file in the project folder and open browser developer tools. Cost: No paid service required for this local step. - Webflow acceptance sample: Create synthetic sample data before implementation: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Save it under fixtures/ with the expected results in fixtures/README.md; use no real credentials or customer records. Verify: The fixture files and expected outcomes exist and can be inspected without a vendor account. Cost: No paid service required for this local step. - Confirm the bounded replacement: The deliverable is a block-based static marketing site generator with editable content files. Read every exclusion below. Indie mode runs locally; any public or shared use requires the product access and deployment gates first. Verify: You can name the primary workflow and the vendor features this version deliberately leaves out. Cost: No paid service required for this local step. - Configuration: DATA_DIR, SECRET_KEY, APP_MODE, SITE_URL. Ship .env.example, replace placeholders and exclude secrets from git. ### Phase 1 · Local foundation and data contract Build: Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. - Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Commands, after creating the named files: `python -m venv .venv`; `python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach`; `python -m pip freeze > requirements.txt`; `python -m flask --app app run --host 127.0.0.1`. - For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Commands, after creating the named files: `python manage.py init`; `python manage.py seed`. - Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. - Trap: The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. Done when: The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. Restarting preserves the seeded records or canonical files; running init again deletes nothing. A cross-origin state-changing request to an admin route is refused. Do not build yet: Do not start content contract and renderer until these checks pass. ### Phase 2 · Content contract and renderer Build: Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. - Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: This generates the specific site; a visual design editor is not part of the build. Done when: An unknown block makes the build fail naming its page and block index. The angle-bracket title renders as text, not markup. Do not build yet: Do not start collections and design until these checks pass. ### Phase 3 · Collections and design Build: Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. - Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: User-authored Markdown still needs a safe rendering policy. Done when: Both posts appear in the listing and link to their own pages. At 360px and 1280px no block causes horizontal overflow. Do not build yet: Do not start publishable output until these checks pass. ### Phase 4 · Publishable output Build: Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. - Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. - Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Commands, after creating the named files: `python -m unittest discover -s test`. - Trap: A contact link is not hosted form delivery; server processing is a separate feature. Done when: Serving dist on a static server produces no missing asset requests. Changing one page and rebuilding changes its output and manifest hash. Do not build yet: Do not start portable delivery and clean-start proof until these checks pass. ### Phase 5 · Portable delivery and clean-start proof Build: Finish the Webflow replacement with a documented first-run path and a recoverable export. - Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. - Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. - Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Commands, after creating the named files: `python -m pip install -r requirements.txt`; `python -m unittest discover -s test`. - Trap: Export without an import or restore rehearsal is not verified portability. Done when: A new folder reaches the documented fixture outcome using only README instructions. A backup restored in isolation preserves the proof data and can be opened. Do not build yet: Do not start operate and share with access controls until these checks pass. ### Phase 6 · Operate and share with access controls (product-builder only) Build: Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. - Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. - Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Commands, after creating the named files: `waitress-serve --listen=127.0.0.1:5000 app:app`. - Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. - Trap: Product mode is additional engineering, not a switch that makes a local prototype production-ready. Done when: An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. Do not build yet: Do not add new providers or vendor-scale features until the release gates are recorded. ### Out of scope (and why) - This generates the specific site; a visual design editor is not part of the build. - This is a block-based static marketing site generator with editable content files; full Webflow feature parity, vendor hosting and support are not included. - designer fidelity: retain the paid product if this capability is essential; it is outside this bounded build. - CMS: retain the paid product if this capability is essential; it is outside this bounded build. - hosting: retain the paid product if this capability is essential; it is outside this bounded build. - animations: retain the paid product if this capability is essential; it is outside this bounded build. - client handoff: retain the paid product if this capability is essential; it is outside this bounded build. - marketplace/templates: retain the paid product if this capability is essential; it is outside this bounded build. - forms: retain the paid product if this capability is essential; it is outside this bounded build. - SEO tooling: retain the paid product if this capability is essential; it is outside this bounded build. ### README must contain - Exact install, configure, initialize, start, test and recovery commands for a clean folder. - The schema, fixture, acceptance results, private data locations and export format. - Every prerequisite and secret source, actual running costs and deliberately excluded capabilities. - An honest distinction between tests actually run and checks still awaiting real credentials or deployment. - Dependency documentation reviewed 2026-09-05: https://flask.palletsprojects.com/en/stable/installation/ ; https://docs.python.org/3/library/sqlite3.html ; https://flask-wtf.readthedocs.io/en/1.2.x/csrf/ ; https://docs.pylonsproject.org/projects/waitress/en/stable/usage.html ; https://python-markdown.github.io/reference/ ; https://bleach.readthedocs.io/en/latest/clean.html. Recheck before upgrading; freeze the versions actually tested.
ARCHITECTURE.md
# Architecture · Webflow ## Stack | Part | Choice | Why | | --- | --- | --- | | Runtime | Python 3.12+ and Flask | A small local HTTP application with readable server-side handlers and no JavaScript build pipeline. | | Storage | JSON/Markdown source files; generated dist/ | Content remains editable without running a database. | | Interface | Jinja HTML templates, CSS and vanilla JavaScript | Implement the specified screens directly with labelled controls and progressive enhancement. | | Verification | Python unittest and browser acceptance fixtures | Check invariants and the actual user workflow before the next phase. | | Focused libraries | markdown, bleach | Use these only for the specific file, parsing or provider operations named in the phases; freeze tested versions. | ## Modules Each module has one owner concern and a documented way to replace it. | Module | Owns | How to replace it | | --- | --- | --- | | Data and identity | pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files | Keep stable ids and a versioned repository interface; migrate storage behind it with a fixture round-trip. | | Content contract and renderer | Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. | Keep the acceptance contract: An unknown block makes the build fail naming its page and block index. Replace only this module after replaying its fixture; preserve ids and existing records. | | Collections and design | Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. | Keep the acceptance contract: Both posts appear in the listing and link to their own pages. Replace only this module after replaying its fixture; preserve ids and existing records. | | Publishable output | Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. | Keep the acceptance contract: Serving dist on a static server produces no missing asset requests. Replace only this module after replaying its fixture; preserve ids and existing records. | | Operations | Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. | Change host or backup destination only after an isolated restore and authorization check. | ## Configuration Every runtime setting is an environment variable documented in `.env.example`, validated at startup, with a safe local default wherever one exists. - `DATA_DIR` · required · A new private folder this application creates on first run; never serve it as static files. - `SECRET_KEY` · required, secret · Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. - `APP_MODE` · required · Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. - `SITE_URL` · required · The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. ## Production baseline - Security: least privilege, input validation at every boundary, secret redaction in logs, rate limits on abuse-prone paths, no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore procedures that have been exercised. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, timeouts. - Observability: structured logs with request or operation ids, an error-tracking hook, and health and readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, one end-to-end test of the critical path. ## Decision records For each dependency in the stack table, keep a short note: why it was chosen, its failure mode, and how it is replaced. Do not add infrastructure until a requirement in `PRODUCT.md` justifies it.
AGENTS.md
# Agent instructions · Webflow product build - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. The stack is fixed: Python 3.12+ and Flask, JSON/Markdown source files; generated dist/, Jinja HTML templates, CSS and vanilla JavaScript, Python unittest and browser acceptance fixtures, markdown, bleach. - Implement milestone by milestone from `MILESTONES.md`; keep each change reviewable and leave the application runnable at every commit. - Treat authentication, payments, encryption, imports, webhooks and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a check pass. - Put every external service behind an interface with a deterministic fake for tests. - Add migrations and rollback or recovery notes for every persistent data change. - Log useful operational context without credentials, tokens, passwords or personal data. - Update documentation and run every check before completing a milestone. ## Known traps - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. - This generates the specific site; a visual design editor is not part of the build. - User-authored Markdown still needs a safe rendering policy. - A contact link is not hosted form delivery; server processing is a separate feature. - Export without an import or restore rehearsal is not verified portability. - Product mode is additional engineering, not a switch that makes a local prototype production-ready.
MILESTONES.md
# Delivery milestones · Webflow Estimated effort: **multi-day** for the indie phases; the production-only milestones add the trust and operability layer. ## M1 · Local foundation and data contract Create the runnable local foundation for a block-based static marketing site generator with editable content files, including the real schema and acceptance fixture. ### Steps 1. Create and start the local application Run the venv command first, then stop and activate it before running the remaining commands. Use your OS instructions: Windows .venv\Scripts\activate.bat in cmd, or .venv\Scripts\Activate.ps1 in PowerShell; macOS/Linux source .venv/bin/activate. Then install the listed packages. Create app.py exposing app, load .env with python-dotenv, and add a /healthz route. Freeze tested dependency versions to requirements.txt. Create .env manually from .env.example; replace SECRET_KEY before launch. Files: `app.py`, `requirements.txt`, `.env.example`, `.gitignore` ```sh python -m venv .venv python -m pip install Flask Flask-WTF python-dotenv waitress tzdata markdown bleach python -m pip freeze > requirements.txt python -m flask --app app run --host 127.0.0.1 ``` 2. Implement storage and seed the named fixture For database-backed state create schema.sql and db.py using this model: pages/<slug>.json contains title, description and ordered blocks; posts/*.md contains title/date front matter; assets/ holds owned images; theme.json defines colors, spacing and typography; build manifest maps source hashes to dist files. Add the auxiliary relationships explicitly used in later phases; use stable ids, foreign keys, parameterized values and transactions. For canonical files use atomic replacement and hashes instead. Implement python manage.py init and python manage.py seed to create only synthetic data: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Re-running init must not erase data. Files: `schema.sql`, `db.py`, `manage.py`, `fixtures/README.md` ```sh python manage.py init python manage.py seed ``` 3. Protect the local request boundary Install Flask-WTF CSRF protection for forms and same-origin fetches, validate Host and Origin against SITE_URL, bound inputs and escape output. Deliberately public intake endpoints get bounded validation and rate limits; signed provider webhooks use signature checks instead of browser CSRF tokens. All other admin routes stay local until product authentication exists. When a later phase tests viewer/member permissions, implement the users, hashed passwords, expiring server sessions and role checks in this foundation first; product mode must never use a fabricated identity from request input. Add error, empty, keyboard-focus and retry states now. Files: `app.py`, `templates/base.html`, `test/test_foundation.py` ### Done when - [ ] The documented start command serves /healthz and the initial screen at http://127.0.0.1:5000. - [ ] Restarting preserves the seeded records or canonical files; running init again deletes nothing. - [ ] A cross-origin state-changing request to an admin route is refused. ### Watch out - The Flask development server is for local development only. Loopback binding alone does not replace CSRF and origin validation. ## M2 · Content contract and renderer Content contract and renderer for Webflow: Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. ### Steps 1. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Implement a Python build command reading JSON pages and rendering Jinja templates for a fixed block allowlist. Files: `features/content_contract_and_renderer.py`, `templates/content_contract_and_renderer.html` 2. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Validate block fields and slug paths before writing dist; escape all text and reject unknown block types. Files: `features/content_contract_and_renderer.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: An unknown block makes the build fail naming its page and block index. Then check: The angle-bracket title renders as text, not markup. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_content_contract_and_renderer.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] An unknown block makes the build fail naming its page and block index. - [ ] The angle-bracket title renders as text, not markup. ### Watch out - This generates the specific site; a visual design editor is not part of the build. ## M3 · Collections and design Collections and design for Webflow: Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. ### Steps 1. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Render Markdown posts with raw HTML disabled and sanitize the resulting HTML; build listing/detail routes. Files: `features/collections_and_design.py`, `templates/collections_and_design.html` 2. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Create responsive hero, features, FAQ and CTA templates with shared design tokens and explicit image dimensions. Files: `features/collections_and_design.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Both posts appear in the listing and link to their own pages. Then check: At 360px and 1280px no block causes horizontal overflow. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_collections_and_design.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Both posts appear in the listing and link to their own pages. - [ ] At 360px and 1280px no block causes horizontal overflow. ### Watch out - User-authored Markdown still needs a safe rendering policy. ## M4 · Publishable output Publishable output for Webflow: Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. ### Steps 1. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Generate sitemap, metadata and an output manifest; produce relative asset links for a portable static folder. Files: `features/publishable_output.py`, `templates/publishable_output.html` 2. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Add a contact mailto link for v1 and document a clean static hosting procedure without claiming a form backend exists. Files: `features/publishable_output.py` 3. Exercise the acceptance fixture Use A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Check: Serving dist on a static server produces no missing asset requests. Then check: Changing one page and rebuilding changes its output and manifest hash. Add a focused regression for the failure case under test/ using a temporary database or folder and fake external services; also perform the visible workflow in a browser. Files: `test/test_publishable_output.py` ```sh python -m unittest discover -s test ``` ### Done when - [ ] Serving dist on a static server produces no missing asset requests. - [ ] Changing one page and rebuilding changes its output and manifest hash. ### Watch out - A contact link is not hosted form delivery; server processing is a separate feature. ## M5 · Portable delivery and clean-start proof Finish the Webflow replacement with a documented first-run path and a recoverable export. ### Steps 1. Write the user-facing runbook Document prerequisites, every configuration variable, data locations and the three domain workflows: Content contract and renderer; Collections and design; Publishable output. Include the exclusions, actual costs and source check date 2026-09-05. Commands shown earlier that reference project files are files the builder must implement before running them. Files: `README.md`, `.env.example` 2. Create and rehearse a recoverable backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Files: `OPERATIONS.md`, `scripts/backup.py` 3. Reproduce the first-run experience Use a new folder and only README instructions to reach the fixture outcome. Install from requirements.txt, initialize storage, run the tests and exercise the UI at 375px and 1280px; use keyboard-only controls and inspect browser errors. Record exactly what passed; do not mark unrun checks complete. Files: `README.md`, `verification.md` ```sh python -m pip install -r requirements.txt python -m unittest discover -s test ``` ### Done when - [ ] A new folder reaches the documented fixture outcome using only README instructions. - [ ] A backup restored in isolation preserves the proof data and can be opened. ### Watch out - Export without an import or restore rehearsal is not verified portability. ## M6 · Operate and share with access controls (production only) Product-builder only: make a block-based static marketing site generator with editable content files operable for its stated audience before allowing remote access. ### Steps 1. Establish owner access before exposure Add owner/member/viewer authorization as appropriate, password hashes through Werkzeug, expiring server-side sessions, CSRF and login rate limits. Add users, sessions and audit schema migrations plus an owner-init command prompting securely for its password. Enforce ownership on every private read/write/download and fail closed when product setup is incomplete. Existing learner or admin identities must use this same boundary. Files: `ARCHITECTURE.md`, `OPERATIONS.md` 2. Deploy a monitored service Publish only dist/ on a static host; keep the local authoring app private. If remotely operating that authoring app, serve app:app with Waitress on loopback behind Caddy HTTPS. Configure trusted proxy headers narrowly, Secure/HttpOnly/SameSite cookies, upload limits, request ids and structured logs without private content. Run background jobs as a separate supervised process when the domain workflow requires them. Files: `Caddyfile`, `OPERATIONS.md` ```sh waitress-serve --listen=127.0.0.1:5000 app:app ``` 3. Rehearse loss and recovery Add a scheduled encrypted off-host backup using this procedure: Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. Monitor health, disk space, failed jobs and backup age. Stop the service to test an alert; rehearse recovery with outbound effects disabled and record recovery time. Rotate any exposed credentials and require reconciliation before resuming queues. Files: `OPERATIONS.md`, `release-checklist.md` ### Done when - [ ] An unauthenticated visitor cannot read private records, download private files or mutate the admin surface. - [ ] A viewer cannot mutate data by making a direct request, and guessed ids cannot cross ownership boundaries. - [ ] Stopping the service triggers the configured alert and the latest off-host backup restores the fixture in isolation. ### Watch out - Product mode is additional engineering, not a switch that makes a local prototype production-ready.
OPERATIONS.md
# Operations · Webflow ## Backup Archive source pages, posts, assets and theme with their manifest; dist is reproducible output. ## Restore Restore into a separate empty directory or isolated deployment, with all outbound actions and schedules disabled. Recreate this proof: A homepage with hero, feature grid and FAQ, two posts and a title containing angle brackets. Compare ids/counts and open the result before recording the restore date. Never test a restore over the only live copy. Do a restore drill before the first real user, and write the date here when it passes. ## Monitoring Check HTTP availability, free disk, backup age and domain failures for Content contract and renderer, Collections and design, Publishable output. Alert without logging private payloads. ## Incident checklist Pause outbound jobs and public intake as appropriate, preserve redacted diagnostics, restore an isolated verified backup, rotate affected credentials and reconcile uncertain effects before reopening. 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified backup when needed. 5. Document the root cause, the remediation and the regression test. ## Release gate - [ ] An unknown block makes the build fail naming its page and block index. - [ ] Both posts appear in the listing and link to their own pages. - [ ] Serving dist on a static server produces no missing asset requests. - [ ] A private-data authorization check passes using a second identity. - [ ] An off-host restore drill has a date, observed result and recovery time in OPERATIONS.md. - [ ] README names the excluded vendor capabilities and actual provider/hosting costs. ## Launch constraint Do not market omitted Webflow capabilities as implemented. The non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
.env.example
# Copy to .env and fill in. Never commit .env; this file documents it. # Required. A new private folder this application creates on first run; never serve it as static files. DATA_DIR=./data/webflow # Required · secret. Generate with python -c "import secrets; print(secrets.token_hex(32))" and save only in .env. SECRET_KEY=replace-with-a-random-secret # Required. Use indie for loopback-only personal work. Product mode must refuse to start until owner login and the deployment gates are configured. APP_MODE=indie # Required. The origin used for local forms and links; replace with the chosen HTTPS origin in product mode. SITE_URL=http://127.0.0.1:5000
$ choose a build depth, inspect the files, then open the complete pack in your agent
They pay because a designer can ship and maintain a production site without engineering every component.
xdesigner fidelity
xCMS
xhosting
xanimations
xclient handoff
xmarketplace/templates
xforms
xSEO tooling
share on X ↗"I just replaced Webflow ($25/mo) with one prompt"
Don't feel like building it? These folks already made it free.
WebstudioThe closest honest replacement: visual CSS, reusable components and CMS data, with free custom domains only when self-hosted.open source↗
PlasmicA hosted visual builder and CMS with custom domains free; the badge stays and the mental model leans React.open source↗
MicroweberDrag-and-drop pages and CMS content in one PHP app; capable, quieter and decidedly self-hosted.open source↗all 5 free alternatives to Webflow →· no votes, no pay-to-list · just what's real
Webflow pricing
| plan | monthly | annual (per mo) | what you get |
|---|---|---|---|
| site starter | $0/workspace | $0/workspace | Webflow.io subdomain; 2 static pages; 50 CMS items; 1 GB bandwidth; 50 form submissions total |
| site basic | $25/workspace | $15/workspace | 1 custom-domain site; 300 static pages; no CMS; 10 GB bandwidth; unlimited form submissions |
| site premium | $39/workspace | $25/workspace | 1 custom-domain site; 300 static pages; 20,000 CMS items; 40 CMS collections; 50 GB base bandwidth; unlimited forms |
| platform team | — | $2500/workspace | Annual contract; 10 full seats included; up to 100 CMS collections, about 500 static pages and up to 30 TB bandwidth, plus enterprise workflow/localization controls |
| platform enterprise | custom | — | Custom traffic, seat, governance, security and service limits |
| ecommerce standard | — | $29/workspace | 500 ecommerce items; 2,000 CMS items; 50 GB bandwidth; 2% Webflow transaction fee |
| ecommerce plus | — | $74/workspace | 5,000 ecommerce items; up to 10,000 CMS items; 100 GB bandwidth; 0% Webflow transaction fee |
| ecommerce advanced | — | $212/workspace | 15,000 ecommerce items; up to 10,000 CMS items; 100 GB bandwidth; 0% Webflow transaction fee |
| workspace starter | $0/workspace | $0/workspace | 2 staging sites; 2 pages/site; 50 CMS items/site; 200 AI credits; 1 full seat |
| workspace core | — | $19/user | 10 staging sites; 300 pages/site; 300 AI credits; 1 full seat included; code export and shared libraries |
| workspace growth | — | $49/user | Unlimited staging sites; 300 pages/site; 400 AI credits; 1 full seat included; publishing and site-role controls |
| freelancer workspace starter | $0/workspace | $0/workspace | 2 staging sites; 1 full seat; 1 free client seat per paid site; 200 AI credits |
| freelancer workspace | — | $16/user | 10 staging sites; full CMS on staged sites; 1 free client seat per paid site; 300 AI credits |
| agency workspace | — | $35/user | Unlimited staging sites; 3 free client seats per paid site; 400 AI credits; roles, password protection and redirects |
free tierSite Starter: 2 pages, 50 CMS items, 1 GB bandwidth and 50 lifetime form submissions on a Webflow.io domain; free Workspace tiers include 1 full seat, 2 staging sites and 200 AI credits
billingfree + monthly/annual Site billing; Workspace and Ecommerce annual effective prices shown, with some monthly amounts not publicly exposed in accessible markup; Platform Team is annual-contract-only
hidden costsA paid Site/Ecommerce plan and a paid Workspace can stack; extra Full seats are $39/month and Limited seats $15/month when billed yearly; 2,000 extra AI credits cost $20/month yearly; premium bandwidth starts at $20/month yearly or $30 monthly per extra 50 GB; Localize, Optimize and Analyze are separate; Ecommerce Standard adds a 2% Webflow fee plus processor fees; repeated traffic surges can trigger an automatic upgrade
verified 2026-08-14 · source ↗
Vibecode Webflow
Kinda. The core of Webflow is buildable in a weekend with the prompt on this page, but there are real gaps: designer fidelity, CMS. Read the honest list above before committing.
How much does Webflow cost?
Webflow costs about $25/month (Basic site, checked 2026-07-30), which is $300 per year.
What do I lose by replacing Webflow?
Honestly: designer fidelity; CMS; hosting; animations; client handoff; marketplace/templates; forms; SEO tooling. If any of those are load-bearing for you, keep paying.
Is there an open-source alternative to Webflow?
Yes: Webstudio (The closest honest replacement: visual CSS, reusable components and CMS data, with free custom domains only when self-hosted.) Plasmic (A hosted visual builder and CMS with custom domains free; the badge stays and the mental model leans React.) Microweber (Drag-and-drop pages and CMS content in one PHP app; capable, quieter and decidedly self-hosted.) All 5 curated free alternatives are at vibecodeit.com/webflow/alternatives. The prompt is for when you want it exactly your way.