101 lines
5.4 KiB
Markdown
101 lines
5.4 KiB
Markdown
---
|
|
created: 2026-06-20 11:45
|
|
modified: 2026-06-20 11:52
|
|
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].
|
|
|
|
## 🎨 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`
|
|
```markdown > # UI Builder Skill > Enforces web-standard design rules and manages local visual canvas synchronization.
|
|
|
|
## 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.
|