One design, three ways to edit it
Canvases, slide decks, design systems, dashboards, documents and motion pieces are plain files under projects/. You click, drag and retype on screen; a fast model rewrites what you point at in a few seconds; Claude Code edits the files directly. All three work on the same source, and every edit writes back only the characters that changed, so the files stay reviewable in git and pleasant to write by hand.
| |
|---|
| Direct manipulation | Click any text and type, drag to move, resize on the stage. Instant. |
| Fast AI | Point at something and say what you want; jQuery statements run as they stream in. Seconds. |
| Claude Code | Whole files, several at once, from the prompt bar or a terminal. Minutes. A project keeps one Claude Code conversation, so the next request, from the editor or the command line, carries on where it stopped. |
| Minimal write-back | Template holes like {{price}}, loops and your own formatting survive every edit. Tick a checkbox or change a colour and the git diff is one line. |
| Numbers you can check | Every figure on a dashboard names the cell it comes from; anything that disagrees with its data is reported. |
Beyond the editor: CLI, skill, MCP
All three need Node 20 or newer, and claude (Claude Code) for the AI parts. In this repository, write pnpm tingly-design for npx tingly-design.
Install once (optional). npm i -g tingly-design puts two commands on your PATH, tingly-design and the short td; they are the same program, so every npx tingly-design … below is also td …. Without installing, npx tingly-design fetches it on demand.
CLI. Create a project, open it in the editor, ask Claude Code to change it:
npx tingly-design new slides pitch --title "Q3 pitch" # create (a path such as ./pitch puts it in your own folder)
npx tingly-design open pitch # start the editor and open it in your browser; stays up until Ctrl+C
npx tingly-design prompt pitch "Tighten the title slide" # in a second terminal: Claude Code edits, the open editor changes live
After npm i -g tingly-design the same three are td new slides pitch --title "Q3 pitch", td open pitch and td prompt pitch "Tighten the title slide".
npx tingly-design alone opens the launcher; serve runs the server without a browser.
Skill. Teach Claude Code the file formats, then just talk to it in your folder:
cd my-work && npx tingly-design skills add # copies each kind's format reference into .claude/skills/
npx tingly-design new slides ./pitch # a project inside this folder
claude # "Make a Q3 pitch deck in ./pitch"; watch it with: npx tingly-design open ./pitch
MCP. Give any MCP-capable agent the same commands as tools:
claude mcp add tingly-design -- npx -y tingly-design mcp # then ask: "Create a slide deck called pitch with tingly-design"
Keep npx tingly-design running in a terminal to watch the agent's edits in the editor; the MCP server finds it. See command line.
Also in the box
- Any folder, and git. Open or create a project anywhere on disk; commit it from the change log, which says which repository and branch first.
- A whole project as one
.zip. Export it with its history and installed design systems, import it on another machine.
- Video that renders in the tab. MP4 and GIF without installing anything; the command line renders frame by frame with Chrome and ffmpeg, and writes a single-file player anyone can open.
Six kinds, one workspace
Five file formats follow Claude's Design, Slides, Design System, Dashboard and Docs artifact types; Tingly Design is an open-source re-creation of their two-way editing. The sixth, Motion, is our own: timed scenes that export to video. Click a picture for its guide.
Sample workspace
Six sample projects introduce our own two projects, Tingly Design (this repository) and Tingly Box, the open-source AI gateway that connects any agent to any model. They share the Tingly design system; usage figures in the dashboard and console mockups are demo data. Click a kind for its guide.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
