3.8 KiB
3.8 KiB
created, modified, type, tags, aliases
| created | modified | type | tags | aliases | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <% tp.file.creation_date("YYYY-MM-DD HH:mm") %> | <% tp.file.last_modified_date("YYYY-MM-DD HH:mm") %> | reference |
|
|
🛠️ 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-Codervia Docker container [Ollama]. - Sync Pipeline: Shell script automation executing
rsyncto 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
watchexecorentrto monitor your React source directory. The split second Onlook or Goose modifies a file,rsynctriggers 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].