Trayce banner
RCellar RCellar

Trayce

Development community

Description

A hand-drawn sketch pad for Claude Code sessions. Draw in your browser, pick a session, submit — Claude sees your sketch as a PNG alongside your prompt.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

trayce logo

trayce

**A hand-drawn sketch pad for Claude Code sessions.**

Draw in your browser. Pick a Claude Code session. Submit. Claude sees your sketch as a PNG alongside your prompt.

[![CI](https://github.com/SDS-Mode/trayce/actions/workflows/ci.yml/badge.svg)](https://github.com/SDS-Mode/trayce/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/license-MIT-dc2626.svg)](LICENSE) [![Runtime: Bun](https://img.shields.io/badge/runtime-Bun-f9f1e1.svg?logo=bun)](https://bun.sh) [![Platforms](https://img.shields.io/badge/platforms-Linux%20%7C%20macOS%20%7C%20Windows-111111.svg)]()

Press ✏️ → Send ✉️ → Claude reads the image.


[!TIP] Use a tablet with a stylus for natural sketching, or a mouse for quick wireframes. Each Claude session gets its own isolated canvas that persists across page reloads.


🎯 Why trayce?

**Sketch a UI** and ask Claude to implement it. **Pin a screenshot** — drop numbered annotations, submit, get per-pin replies. **Draw a diagram** and ask Claude to build the architecture. **Iterate on a render** — Claude can push images and annotations back to your canvas.

Text prompts struggle with spatial intent. A quick sketch communicates layout, hierarchy, and motion in a single frame — things that would take paragraphs to describe. Structured annotations close the loop in the other direction: Claude resolves your pins by ID, replies inline, and pushes its own annotations on rendered output for a real review cycle.

📑 Table of contents