RCellar

Trayce — Development skill for Claude Code

Development community

A hand-drawn sketch pad for Claude Code sessions.

How to install Trayce

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

What Trayce does

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.

Alternatives in Development

Ian Handdrawn Ppt — 中文手绘技术 PPT 整页图像生成 Skill 21:9 封面 + 16:9 正文配图 PNG 输出 1.4k ★
Hand Drawn Styles — Claude Code skill：把内容套进内置手绘画风配方,产出可直接复制的生图提示词 930 ★
Img To Component — /agent-input/how-it-works/2.png 이미지에 대해서 다음 작업 수행하라 395 ★

README

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