obsidian-vault/100 inbox/AI Design.md

created, modified, type, tags, aliases

created	modified	type	tags	aliases
2026-06-20 11:45	2026-06-20 11:52	reference	ai-agents open-source automation ai tool tools design dev-ops	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].

🎨 Adding Local Text-to-Layout Design Features to Pi

1. Install the Local Canvas Viewport

Bridge your terminal with a live graphical preview window to see your layouts update in real time:

bash npm install -g pi-canvas

• Usage: Run pi-canvas in a secondary terminal split to open a hot-reloaded browser window at http://localhost:3000.

2. Register the Design Skill

Create a custom agent skill to enforce structured layout rules, protect against unwanted UI design shifts, and handle local visual synchronization.

[!file] ~/.pi/agent/skills/ui-builder.skill

## Instructions
1. When creating UI layouts, always use semantic elements and modern layouts (Tailwind CSS, Flexbox, CSS Grid).
2. Isolate all visual tests inside the workspace's local `./preview.html` or a dedicated test harness file.
3. Read any local `tailwind.config.js` or token files before generation to match existing spacing and color systems. 
4. Do not rewrite unaffected code blocks during layout adjustments; isolate updates strictly to the requested components.
   
### 3. Iteration Workflow

1. **Initialize Viewport:** Start `pi-canvas` in one terminal window, and run `pi` in another. 
2. **Text to Layout:** `/skill ui-builder Create an isolated interactive Tailwind dashboard card in preview.html.`
3. **Change with Text:** *"The layout feels cramped. Make the card wider and change the primary button to a ghost variant."* 
4. **Layout to Code:** The code changes update instantly in the local file and live browser window, ready for backend integration.