Glyph kit skill
Glyph kit draws product design in block characters: funnels, flows, roadmaps and wireframes whose bars always match their numbers.
- 85 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill runs a local Node.js script for export and adds no network calls for the agent.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/glyph-kitDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill runs a local Node.js script for export and adds no network calls for the agent.
This is third-party code. Review the repository files before installing.
What it does
Glyph kit is a skill for Claude Code and Codex. The agent writes a small spec and code draws the figure in four shades of block characters and a few lines. It covers research results, funnels and tests, user flows, roadmaps, screen wireframes, design system docs, handoff checklists, motion specs and moving diagrams. One spec can become Markdown for a pull request, a deck, a PDF report, an SVG for a slide or a prototype built with your design system. The command `node skills/glyph-kit/scripts/glyph-kit.mjs export file.json --to pdf` also works without an agent.
Who it is for. Product designers and developers who need clear diagrams in pull requests and discussions without graphic editors.
Good fit when
- Survey results must appear in a pull request as bars that match the data.
- A settings screen wireframe is needed, agreed in text before layout.
- A toast animation must be described together with reduced motion.
- A roadmap needs to be exported to a deck or a PDF.
Not a fit when
- You need precise brand graphics with logos and brand fonts.
- The diagram must be interactive rather than text based.
- The result must be a high fidelity raster mockup.
Example request
Draw a signup funnel from these numbers and turn it into a PDF report for a team discussion.Limitations
Figures are text: alignment needs a monospace font with block characters, and the author recommends the free Departure Mono. PDF and other exports go through a Node.js script, so Node is required. The skill is limited to product design and will not replace an illustration editor. Building on a specific design system, as the README describes, needs your own code. The project is young: the `skills` installer covers Cursor and other agents, but Claude Code and Codex are the stated targets.
How to disable. Remove the plugin with `/plugin uninstall glyph-kit@traykov` or delete the `glyph-kit` folder from `~/.claude/skills/` or `~/.agents/skills/`.
FAQ
How do I install it in Claude Code as a plugin?
Run `/plugin marketplace add alextraykov/glyph-kit`, then `/plugin install glyph-kit@traykov`. Such a plugin updates.
Can I try it without installing?
Yes, the builder on `glyph-kit.traykov.cc` draws a figure from a description in the browser.
Which fonts are needed?
Any monospace font with the ░▒▓█ characters and box drawing works. The author suggests Departure Mono, which is free under the SIL OFL.
What can one spec become?
Markdown, a deck, a PDF report, an SVG for a slide and a prototype built with your design system.
How do I install by hand?
Download the zip from the latest release and unzip it into `~/.claude/skills/` or `~/.agents/skills/`.
Discussion
No questions or reviews yet.
Related
SkillsA Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
Claude Design Card
claude-design-card
A skill creating cards in 14 formats, including covers, on Claude design tokens. The README is in Chinese, no license
A skill for Claude Code and Codex: the agent writes animation scenes, a browser player shows them, export to MP4 and Lottie.
A set of skills for Claude Code and Codex that assemble detailed image prompts from an element library and composition schemes
About a hundred skills for Claude Code: meetings, research, publishing, TDD, Telegram, email and personal analytics
Skills give Claude Code three ways to make images: code-drawn graphics, Three.js 3D scenes and Flux diffusion on Cloudflare.
README in short
A skill for product design in text graphics: four shades and a few lines. One spec, several output formats, with a builder in the browser.