Skillget

glyph-kit

agent
Security Audit
Warn
Health Warn
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 5 GitHub stars
Code Warn
  • process.env — Environment variable access in film/launch-v1/render.mjs
  • network request — Outbound network request in film/launch-v1/scene.js
  • process.env — Environment variable access in film/render.mjs
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

Product-design figures as text: research, flows, wireframes, plans and motion in four shades and a few lines. A skill for Claude Code and Codex.

README.md

Glyph kit

Get the point across clearly, cheaply, in an aesthetic that doesn't date.

The Glyph kit site: the name in Departure Mono, the install commands, and a moving rework loop drawn in block characters.

A skill for Claude Code and Codex that draws product-design work in four shades and a few lines: research results, funnels and tests, flows, roadmaps, wireframes, design-system docs, handoff checklists, motion specs and moving diagrams. The agent writes a small spec, and code draws the figure, so the bars always match their numbers. The same spec becomes Markdown for a PR, a deck you present, a report as a PDF, an SVG for a slide, or a prototype built with your design system.

┌─────────────────┐
│   open export   │
└────────┬────────┘
         │
         ▼
┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐           ┌─────────────────┐
┆    has data?    ├─── no ───►│   empty state   │
└┄┄┄┄┄┄┄┄┬┄┄┄┄┄┄┄┄┘           │  → import data  │
         │ yes                └─────────────────┘
         ▼
╔═════════════════╗
║    download     ║
╚═════════════════╝

Try it in the browser

Describe a figure on glyph-kit.traykov.cc and the builder draws it live, with nothing to install.

The builder: a moving signup funnel in the preview, suggestion chips, and a prompt box with a Build button.

Install

Any agent (Claude Code, Codex, Cursor and others):

npx skills add alextraykov/glyph-kit

Claude Code, as a plugin that updates:

/plugin marketplace add alextraykov/glyph-kit
/plugin install glyph-kit@traykov

By hand: download the zip from the latest release and unzip it into ~/.claude/skills/ (Claude Code) or ~/.agents/skills/ (Codex).

Font, recommended: Departure Mono, free under the SIL Open Font License. It draws every block and box character at exactly one cell, so figures line up. Any monospace font that covers ░▒▓█ and box drawing works; the kit doesn't require it.

Then ask for what you need, the way you'd ask a colleague: "chart these usability results for the PR", "a wireframe for the notification settings", "a motion spec for the toast, including reduced motion".

What it draws

Eight areas of figures drawn by the kit: survey ratings, a funnel, a flow with failures, a roadmap, a settings wireframe, spacing tokens, a redline and a motion card.
Area Types
Research data Likert answers, themes by participant, affinity counts, quote card, task results, journey feeling
Experiments and metrics Funnel, retention cohorts, test result, metric panel, bar chart, comparison, forecast, meter, sparkline, heatmap, calendar strip
UX flows Flow with decisions, linear flow, state machine, journey map, tree or sitemap
Planning Now/next/later, impact and effort, swimlane, timeline, status key, decision log
Wireframes Screen, responsive pair
Design system Spacing scale, type scale, contrast check, component states, layer stack, token table, table
Handoff and QA Spacing redline, QA checklist, before and after
Motion Motion timing, motion intent, transition spec, stagger, frame strip, easing tokens
Processes Rework loops, queues, rollouts, loading sequences, state machines
Moving diagrams Rework loop, funnel, state machine, work queue, staged rollout, loading sequence

See every one at traykov.cc/glyph-kit.

Why text

  • Cheap to make. A figure takes microseconds to draw and is a few hundred bytes, about 65× smaller than a screenshot of it.
  • Exact. Code draws from the numbers, so a bar can't disagree with its value, and the same spec always gives the same figure.
  • Works anywhere text does. PRs, tickets, READMEs, Slack, terminals, a model's context, print.
  • A baseline, not a dead end. Agree the structure in text, then raise the same spec to a prototype, a deck, a report or production code.

What's measured and what isn't: benefits. Text tokens aren't measured yet, and the kit says so.

Guardrails

  • No source, no numbers. A figure with numbers needs a source.
  • Made-up data is stamped SAMPLE DATA in every format.
  • Data from your files: "data": "@results.csv".
  • Each type refuses data that can't be true, in plain words.
  • Pass specs, not drawings, between agents; --compact for plain ASCII when a drawing must go into a model's context.

Without an agent

Node 18 or later, nothing to install:

node skills/glyph-kit/scripts/glyph-kit.mjs types
node skills/glyph-kit/scripts/glyph-kit.mjs render skills/glyph-kit/examples/product/settings.spec.json --to markdown
node skills/glyph-kit/scripts/glyph-kit.mjs export skills/glyph-kit/examples/reports/motion-audit.json --to pdf

Contributing

Issues and ideas are welcome. Run node --test tests/*.test.mjs before a pull request. The kit has no dependencies and keeps it that way.

License

MIT. Made by Alexander Traykov. The story behind it: Four characters.

Reviews (0)

No results found