# tesseract-design

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 160
- Author: mirage-hq
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-design/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/tesseract-design

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/tesseract-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tesseract-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/tesseract-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/tesseract-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mirage-hq/Tesseract tesseract-design
```

2. **Manually: put the files in place**
- File: `.github/skills/tesseract-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mirage-hq/Tesseract --path skills/tesseract-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tesseract-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-design/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-mobile-apps](https://affpapa.org/en/nevibecode/skills/design-mobile-apps.md) — skill · 1000000 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [emil-design-eng](https://affpapa.org/en/nevibecode/skills/emil-design-eng.md) — skill · 388200 installs
- [apple-design](https://affpapa.org/en/nevibecode/skills/apple-design.md) — skill · 244500 installs

From the same set: [mirage-hq/tesseract](https://affpapa.org/en/nevibecode/by/mirage-hq/tesseract.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md