Skip to content

2026-10-11 — Canva descriptor editing, Ask box & site colours + LEMO "New site" post

Canva Design Skill — descriptor editing (P2)

Reframed the editor around change descriptors: a design is a real HTML file on disk, the browser never rewrites it, and edits are applied by the patcher (lib/patch.js). The model returns descriptors, never a document.

  • insert descriptor added ({ed, where, html}), sanitised (no <script>, no inline handlers, no javascript:).
  • catalog(html) — flat index of every element's exact ed path (tag/class/id/text) so the planner never hand-counts child indices.
  • lib/apply-descriptors.js — agent-side CLI to apply a JSON plan (dry-run default, --write persists, prints the diff).
  • /api/ask — natural language → plan of descriptors, each dry-run-validated. This replaced the old freeform /api/chat (removed).
  • Editor Ask panel stages changes into the iframe (applyToDom) with a pending list (Apply/Discard); insert undo via an insertedNodes map; image Add now persists via insert.

Canva Design Skill — site colours (P3)

  • New lib/palette.js (+ test-palette.js, 19 checks): extractSite(url) etc. Two-tier extraction — HTML tier (curl: theme-color meta, CSS tokens, ranked hex) and rendered tier (cached Chromium: body bg/text, h1, links, buttons, header, logo).
  • /api/ask now auto-detects a URL, fetches its palette, and enforces swatch membership server-side — the model may only use colours actually fetched. No palette → {"question"} rather than a guess.
  • Fixed: detectUrl needed two dot-segments (so linear.app never fetched); over-eager swatch truncation; parsePlan broke on bare-array output.

Verified: patch suite 321 pass, palette 19; linear.app → bg #08090a / text #f7f8f8 + Linear swatches; live "recolour using https://linear.app" → 6 cssvar descriptors → 6-line diff; ambiguous "violet" → {"question"}.

LEMO "NEW SITE COMING SOON" Instagram post

A real end-to-end use of the skill: a plain-language request → finished 2160×2160 render.

  • Built designs/lemo-coming-soon.html from templates/social-post.html via a descriptor plan.
  • Palette pulled live from lemo.com: brand blue #0079CA, navy #003399, black/white, plus LEMO UI greys.
  • Sourced real product photos from the Shopify CDN (via the product export CSV): EGG.0B.302.CLL and FGG.0B.302.CLAD52.
  • Iterations: dropped the scattered connector images; footer → johnbarry.com.au (removed @lemo.com); rewrote the sub copy; then swapped the "LEMO" pill for the real lemo.com logo (logo.svg, blue #0079CA, top-left).
  • Verified layout with a Playwright geometry probe (no text collisions); previewed on :8787, editable in the editor on :8790.

Business note: John Barry Sales (johnbarry.com.au) is the official LEMO agent (AU).

  • [[OpenCode Canva Design Skill]] — the skill, architecture, CLI usage
  • [[Canva Editor Improvement Backlog]] — prioritised editor upgrades
  • [[JBS LEMO Shopify Storefront]] — the store this content promotes
  • [[Index]]