Maintainer of this skill?
by alextraykov
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.
# Add to your Claude Code skills
git clone https://github.com/alextraykov/glyph-kitSee how glyph-kit compares with popular alternatives.
glyph-kit is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by alextraykov. 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. It has 54 GitHub stars.
glyph-kit's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/alextraykov/glyph-kit" and add it to your Claude Code skills directory (see the Installation section above).
glyph-kit is primarily written in HTML. It is open-source under alextraykov on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh glyph-kit against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Get the point across clearly, cheaply, in an aesthetic that doesn't date.
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 ║
╚═════════════════╝
Describe a figure on glyph-kit.traykov.cc and the builder draws it live, with nothing to 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".
| 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, palette, colour roles, 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.
What's measured and what isn't: benefits. Text tokens aren't measured yet, and the kit says so.
"data": "@results.csv".--compact for plain ASCII when a drawing must go into a model's context.Figures are coloured by role, never for decoration: problems, passes, data and lines. Pick one of five palettes, or your own colours and tokens; every colour is checked for contrast. In a terminal the text is coloured too, and NO_COLOR turns it off. Without colour, every figure reads the same. Guide: colour.
A figure in Markdown can keep its spec beside it. Change the spec and redraw draws it again in place; edit a table, checklist or board by hand and read writes the change back to its spec. check lists every problem with a spec at once. Guide: editing.
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
node skills/glyph-kit/scripts/glyph-kit.mjs check notes.md
node skills/glyph-kit/scripts/glyph-kit.mjs redraw notes.md
The kit is MIT licensed. Use it in commercial work, change it, ship it inside your own tools; keep the licence notice in copies of the code. Figures you draw with it are yours, with no credit needed. If you'd like to credit it, "Drawn with Glyph kit" and a link is plenty.
Departure Mono, which the HTML pages embed, has its own licence (SIL Open Font License); its notice travels with every page that carries it.
New types, fixes, ports and integrations with editors and tools are all welcome. Start with CONTRIBUTING.md; to add a type, adding a type walks through one end to end. The kit has no dependencies and keeps it that way.
MIT. Made by Alexander Traykov. The story behind it: Four characters.