kynetic-ai UI Design
Pencil MCP reference and canvas conventions for designing kynetic-spec web UI.
Design file: design.pen (project root)
Pencil MCP Gotchas
- Variable names must NOT include
$prefix — Pencil strips it silently - Gradients CANNOT bind variable refs — they silently resolve to #000000; use raw values
batch_designmax ~25 operations per call — break larger changes into batches- Always
get_screenshotto validate after significant visual changes - Use
find_empty_space_on_canvasbefore placing new frames - Use
get_guidelines(topic)for domain-specific rules (topics: web-app, mobile-app, design-system, etc.) - Use
get_style_guide_tags+get_style_guidefor design inspiration when starting new screens
Workflow
get_editor_state— check what's open and selectedopen_document— open design.pen (or 'new' for fresh file)get_guidelines(topic)— load relevant design rules before startingsnapshot_layout— understand existing layout before insertingfind_empty_space_on_canvas— find placement for new framesbatch_design— create/update nodesget_screenshot— validate visually- Iterate 6–7 until correct
Canvas Organization
| Frame | Purpose | Location |
|---|---|---|
| Design System | Tokens, palette, type scale, spacing | TBD |
| Components | Reusable component patterns | TBD |
| Pages | Full page compositions | TBD |
Locations updated as frames are placed.
Component Inventory
Populated as components are designed.
| Component | Node ID | Key Descendants | Notes |
|---|---|---|---|
| — | — | — | — |
Pages to Design
Existing routes for reference:
- Dashboard (/) — counts, agent status, needs-attention
- Task list (/tasks) — filters, status, tags
- Task board (/tasks/board) — kanban
- Inbox (/inbox) — triage workflow
- Specs (/specs) — spec listing + detail
- Reviews (/reviews) — review records
- Agents (/agents) — agent status
- Sessions (/sessions) — session recordings
- Settings (/settings) — configuration