skill CX Codex

tesseract-design — Claude Code skill: design and install

Q: How do I install tesseract-design in Claude Code?

Run `npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code`. The skill file is installed at `~/.claude/skills/tesseract-design/SKILL.md`.

Create editable Tesseract compositions and render them as PNGs. Use it for posters, slides, diagrams, and static interface mockups.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code

Open on GitHub

What tesseract-design does

The skill turns a brief into a Tesseract composition saved as .tsrct, then renders a PNG with tsrct preview. Text, shapes, and layout geometry stay on editable layers. It covers posters, social graphics, slides, diagrams, and web or UI mockups.

Its workflow calls for checking the installed CLI schemas instead of guessing API fields, then opening and reviewing the rendered image. A successful render alone does not mean the design is ready. The output is static: it does not include an implemented website, working interactions, or a PowerPoint file.

What it helps with

turn a brief and dimensions into a poster
prepare square social graphics from supplied assets
keep slide and diagram elements editable
adapt an interface mockup to a mobile width

Example prompts for the agent

Create a poster from this brief and save both the .tsrct source and PNG.
Turn these assets into a square social graphic.
Rework this interface mockup for mobile and render the PNG.

How to install tesseract-design

1Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code

2Manually: put the files in place

~/.claude/skills/tesseract-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/tesseract-design/

1Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a codex

2Manually: put the files in place

.agents/skills/tesseract-design/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a cursor

2Manually: put the files in place

.cursor/skills/tesseract-design/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install mirage-hq/Tesseract tesseract-design

2Manually: put the files in place

.github/skills/tesseract-design/SKILL.md

1Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a gemini-cli

2Platform CLI

gemini skills install https://github.com/mirage-hq/Tesseract --path skills/tesseract-design

Manually: put the files in place

.devin/skills/tesseract-design/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about tesseract-design

How do I install tesseract-design in Claude Code?

Run npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code. The skill file is installed at ~/.claude/skills/tesseract-design/SKILL.md.

What does tesseract-design do?

It creates static visual compositions in editable Tesseract files and renders them as PNGs. The .tsrct source stays available for revisions.

Does it build a working website from a UI mockup?

No. It produces a static design image and an editable Tesseract source, not an implemented site or interactive UI.

Similar skills

Everything for Design →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-mobile-apps designed-by-ai Designs mobile screens via the Sleek REST API and translates them into React Native or HTML code. CX Codex +1 1,000,000installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs emil-design-eng emilkowalski This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review. CX Codex +1 388,200installs apple-design emilkowalski Translates Apple's fluid interface principles from WWDC talks into web code with Pointer Events and spring physics. Essential for gesture-driven sheets, drags, and sliders. CX Codex +1 244,500installs

From the same set4

tesseract-motion Create editable motion graphics in Tesseract, from animated type and diagrams to overlays on supplied footage. The skill focuses on graphic work, not assembling a complete video edit. CX Codex +1 3,000installs tesseract-video An agent skill for editing existing footage locally with Tesseract: cuts, dialogue cleanup, sound mixing and graphics where they help. CX Codex +1 3,000installs tesseract-editor Build or change a browser-based editor for Tesseract .tsrct projects. The skill covers interface controls, previews, and saving project data. CX Codex +1 1,200installs