Part 2: Functional Block Design — The Methodology In Part 1, we identified the problem: vibe coding collapses when projects grow beyond a handful of features. We discovered the core insight: AI thinks in functions, not systems. Now we need a methodology. This part introduces Functional Block Design (FBD) — a repeatable, four-phase process for building systems from AI-generated blocks. Phase 1: Decomposition — Break the system into functional blocks. Let us walk through each phase using a URL shortener as our running example. 2.1 Phase 1: Decomposition Goal: Break the system into functional blocks. Each block is a self-contained unit with a single, clear responsibility. In code, it becomes one function. Rule: Each block must be describable in one sentence. That sentence becomes the Description in the file header. Example: URL Shortener Decomposition Here is how we decompose a URL shortener into six functional blocks: Block Key Generator Storage Manager Redirect Handler Analytics Recorder API Router Why we stop here: We do not break the Key Generator into smaller blocks (e.g., "Generate Random String" and "Check Uniqueness") because the uniqueness check is integral to key generation. Splitting them would create coordination complexity that the AI handles better inside a single function. This is the functional integrity rule: a block should be a complete function, not an arbitrary fragment. 2.2 Phase 2: Block Specs Goal: For each block, create a .py file with a header containing two sections: Section Function signature Here is key_generator.py with the header only (code not yet generated): https://example.com") # returns "aB3xY9" ============================================================ The Description is short and human-friendly. The Prompt is detailed and AI-ready. Both live in the same file. No duplication. No separate files. The other five blocks (URL Validator, Storage Manager, Redirect Handler, Analytics Recorder, API Router) are created the same way. Each has its own .py file with Description and Prompt. 2.3 Phase 3: Generation Goal: Feed the Prompt to an AI and receive working code. Paste the generated code below the header. Process: Step Example: Complete key_generator.py (Header + Generated Code) https://example.com") # returns "aB3xY9" ============================================================ import random def generate_key(original_url: str) -> str: Args: original_url: A validated URL string. Returns: A unique 6-8 character alphanumeric key. Raises: ValueError: If original_url is empty. RuntimeError: If unable to generate a unique key after 10 attempts. """ if not original_url: raise ValueError("URL cannot be empty") chars = string.digits + string.ascii_letters for attempt in range(10): length = random.randint(6, 8) key = ''.join(random.choices(chars, k=length)) if not storage_key_exists(key): return key raise RuntimeError("Failed to generate unique key after 10 attempts") The generated code follows the Prompt precisely. The function signature matches. Inputs, outputs, and error handling match. Requirements are satisfied. The code is runnable. We repeat this process for the remaining five blocks. Each gets its own .py file with header and generated code. 2.4 Phase 4: Integration Goal: Connect the independently generated functions into a working system. Process: Step Role from url_validator import validate_url def handle_create_url(raw_url: str): https://short.url/{key}", 200 def handle_redirect(key: str, request_context: dict): # Non-blocking analytics: log and continue return create_redirect_response(original_url) app = route_request({ if name == "main": Notice: Each block is called as a simple function The final project has the following structure: project/ Each .py file is self-contained. A human can open any file, read the Description to understand what it does, read the Prompt to see the requirements, and see the generated code below. The system is complete and runnable. 2.6 Summary of the Four Phases Phase Decomposition Define block boundaries Suggest, clarify, critique List of functional blocks Block Specs Write Description and Prompt in .py file header Review, suggest improvements .py file with header (no code yet) Generation Copy Prompt to AI, review generated code, paste into file Generate code from Prompt .py file with header + working code Integration Define orchestration, validate Generate glue code, tests Working system 2.7 Key Benefits Demonstrated Benefit How It Appears Manageable pieces The URL shortener was broken into 6 independent blocks Clear interfaces Each block's Prompt defined inputs, outputs, and error handling AI works where it excels Each block was generated from a focused, detailed Prompt Human controls integration The main.py orchestration was written and validated by the human Reproducible Any block can be regenerated from its Prompt at any time Maintainable Changing one block does not affect others