sam/obsidian-vault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sam-4screen-desktop 2026-6-20:18:38:11

Browse Source
This commit is contained in:
Sam Rolfe
2026-06-20 18:38:11 +10:00
parent 9caac29967
commit 67f4d2cae7
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
100 inbox/AI Design.md
View File

@@ -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.