From 08f0e3bb54b97b52271cfccc2c37c7e078e4d453 Mon Sep 17 00:00:00 2001 From: Sam Rolfe Date: Sat, 20 Jun 2026 11:53:11 +1000 Subject: [PATCH] sam-4screen-desktop 2026-6-20:11:53:11 --- .obsidian/workspace.json | 13 ++++---- 100 inbox/AI Design.md | 71 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 100 inbox/AI Design.md diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json index 9248692..d7a9116 100644 --- a/.obsidian/workspace.json +++ b/.obsidian/workspace.json @@ -13,12 +13,12 @@ "state": { "type": "markdown", "state": { - "file": "templates/tmpl_generic_note.md", + "file": "100 inbox/AI Design.md", "mode": "source", "source": false }, "icon": "lucide-file", - "title": "tmpl_generic_note" + "title": "AI Design" } } ] @@ -181,10 +181,10 @@ "state": { "type": "file-properties", "state": { - "file": "templates/tmpl_generic_note.md" + "file": "100 inbox/AI Design.md" }, "icon": "lucide-info", - "title": "File properties for tmpl_generic_note" + "title": "File properties for AI Design" } } ], @@ -207,9 +207,11 @@ "templater-obsidian:Templater": false } }, - "active": "c431d71763a4e2d5", + "active": "7066c9273c6fb936", "lastOpenFiles": [ "400 resources/410 Web Pages/Website Design AI.md", + "100 inbox/AI Design.md", + "templates/tmpl_generic_note.md", "Untitled.canvas", "200 projects/210 AI Resume/Tools.md", "300 areas/350 AI/Security NPM packages tools.md", @@ -234,7 +236,6 @@ "300 areas/360 Dev-Ops Network Computers/Local Wep Apps.md", "300 areas/360 Dev-Ops Network Computers/Bumblebee - The Open-Source Scanner for Messy Dev Machines.md", "300 areas/360 Dev-Ops Network Computers/Backup System — Borg, Kopia & Restic.md", - "200 projects/210 AI Resume/Local Hybrid Vector + Graph RAG Setup.md", "Clippings", "500 archive/540 Resources", "500 archive/530 Areas", diff --git a/100 inbox/AI Design.md b/100 inbox/AI Design.md new file mode 100644 index 0000000..5933a82 --- /dev/null +++ b/100 inbox/AI Design.md @@ -0,0 +1,71 @@ +--- +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].