# UI Design

> Pencil MCP reference and canvas conventions for designing kynetic-spec web UI

- Skill: `kynetic-ai/ui-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kynetic-ai/ui-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kynetic-ai/ui-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: kynetic-ai (https://skillmd.com/u/kynetic-ai)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/kynetic-ai/ui-design

---

<!-- kspec-managed -->
# 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_design` max ~25 operations per call — break larger changes into batches
- Always `get_screenshot` to validate after significant visual changes
- Use `find_empty_space_on_canvas` before 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_guide` for design inspiration when starting new screens

## Workflow

1. `get_editor_state` — check what's open and selected
2. `open_document` — open design.pen (or 'new' for fresh file)
3. `get_guidelines(topic)` — load relevant design rules before starting
4. `snapshot_layout` — understand existing layout before inserting
5. `find_empty_space_on_canvas` — find placement for new frames
6. `batch_design` — create/update nodes
7. `get_screenshot` — validate visually
8. 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