diff --git a/100 inbox/AI Design.md b/100 inbox/AI Design.md
index cb30735..57dac27 100644
--- a/100 inbox/AI Design.md	
+++ b/100 inbox/AI Design.md	
@@ -69,3 +69,31 @@ Instead of drafting schemas from scratch, pull standard markdown design sheets f
 * **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.