---
created: <% tp.file.creation_date("YYYY-MM-DD HH:mm") %>
modified: <% tp.file.last_modified_date("YYYY-MM-DD HH:mm") %>
type: reference
tags:
  - ai-agents
  - open-source
  - automation
  - ai
  - tool
  - tools
  - design
  - dev-ops
aliases:
  - Agentic UI Pipeline
---

## 🛠️ The Local Stack
* **Visual Prototyping Engine**: **Penpot** (Self-hosted via local Docker container [Penpot]).
* **Visual Code Mutator**: **Onlook** (Reads/writes directly to local React components in place) [Onlook].
* **Headless Visuals**: **Chai Builder SDK** (Open-source developer React/Tailwind visual engine) [Chai Builder SDK].
* **Terminal Agent**: **Goose** (Block's autonomous developer agent run locally via terminal) [Goose].
* **Local Inference**: **Ollama** running `Qwen2.5-Coder` via Docker container [Ollama].
* **Sync Pipeline**: Shell script automation executing `rsync` to a target machine managed by **Caddy**.

---

## 🎨 The Plain-Text Design Engine (Google Stitch & DESIGN.md)

### 💡 Core Mechanics
* **Google Stitch Paradigm**: An open standard developed by Google Labs to feed design guidelines directly to AI agents [Google Stitch].
* **DESIGN.md Structure**: A standalone markdown file placed in your project root combining YAML design tokens with markdown prose explaining the visual rationale [DESIGN.md].
* **Penpot Integration**: Use Penpot's built-in Model Context Protocol (MCP) server [Penpot MCP] to connect your terminal agents. This translates your design shapes, tokens, and layouts straight into a machine-readable context file, bridging your visual wireframes with your coding engine.

### 🗂️ Scaling with Awesome-Design-MD
Instead of drafting schemas from scratch, pull standard markdown design sheets from **awesome-design-md** [awesome-design-md]:
* **Ready-Made Blueprints**: Features 55+ design languages reverse-engineered from platforms like Linear, Vercel, Stripe, and Supabase.
* **Drop-In Protocol**: Drop the curated markdown file into your project tree. Tell your agent pipeline: *"Review DESIGN.md and generate a settings view matching these visual guardrails"*.

---

## 🔄 Execution Flows

### Flow A: The Fully Terminal Pipeline (Goose + Ollama)

[User Pipeline / Pi Prompt] ----> [Goose CLI] ----> [Parses local DESIGN.md context]
                                         |
                                         v (Generates clean .tsx / Tailwind)
                               [Local Repo Workspace]
                                         |
                                         v
                         [rsync Script ----> VPS with Caddy]

### Flow B: The Visual/Agentic Hybrid (Onlook + Penpot Local)

[Visual Adjustment in Penpot/Onlook] ----> [Mutates local .tsx code file instantly]
                                                  |
                                                  v (Triggers local git tracking)
                             [Goose agent fixes states & connects backend logic]
                                                  |
                                                  v
                               [rsync Script ----> VPS with Caddy]

---

## 🚀 Terminal Extensions & Skills for Pi Agent

* **Penpot MCP Bridge**: Expose your self-hosted Penpot canvas variables locally by connecting the Penpot MCP server key to your terminal execution environments [Penpot MCP].
* **Automated Design Context**: Inject design constraints directly by aliasing Goose to parse your schema file on launch: `goose run --instruction "$(cat DESIGN.md)"`.
* **Instant Refresh Loop**: Use `watchexec` or `entr` to monitor your React source directory. The split second Onlook or Goose modifies a file, `rsync` triggers to push the payload to Caddy.
* **Ollama Endpoint Spoofing**: Map your agent pipelines natively to local Docker execution layers by swapping your base API routing address to `http://localhost:11434/v1` [Ollama].