{
"markdown": "\n\n
\n \n \n \n
\n\nA Claude Skill that codifies the visual and editorial conventions of [Distill.pub](https://distill.pub), the now-archived web-native ML research journal.\n\nThe system targets the modern article template. Tokens, component sizes, link styling, and stroke palette were validated against live `distill.pub` via a 10-article DOM audit. The earlier outlier — Georgia serif body, custom `` element — is out of scope.\n\n## Capabilities\n\nCoverage spans the full Distill corpus — 10 articles, 131 source figures audited and distilled into reusable primitives.\n\n| Category | Prompt | Output |\n|---|---|---|\n| Editorial in Distill voice | *\"Write a long-form on [topic] in Distill style\"* | Article with TOC, hover citations, math, 7-section canonical footer |\n| Editorial in Distill voice | *\"Rewrite this paragraph in Distill voice\"* | First-person plural, no marketing superlatives, no exclamation points, math-verbs verbed |\n| Diagrams — core | *\"Diagram an attention mechanism over memory\"* | Composed primitives: `TensorVector`, `Arrow`, `OperatorNode`, `SubNetBlock`, `PointerGlyph`, on the salmon/blue/lavender palette |\n| Diagrams — FiLM | *\"Visualize this model FiLM-style\"* | Pre-built scenes — concat, bias, scaling, FiLM-network, interactive scrubber |\n| Diagrams — RL | *\"Show a cliffworld with the optimal policy and value function\"* | `GridWorld` for cells, paths, agents, goal and penalty cells; `ValueHeatmap` for opacity-encoded V(s) and Q(s,a); `PolicyArrows` for 4-direction stochastic policy |\n| Diagrams — graphs and trees | *\"Beam search lattice for CTC\"* / *\"Argumentation tree\"* | `GraphNode`, `GraphEdge`; `BeamSearchTree` with active, pruned and neutral states; `DebateTree` with claim and counter sides; `HMMState` with subscript labels |\n| Diagrams — sequence and attention | *\"Attention heatmap over tokens\"* / *\"CTC alignment matrix\"* | `AttentionHeatmap` — 1D, opacity-modulated; `CellGrid` for CTC DP and Game of Life; `RecurrentArrow` for LSTM/GRU feedback; `VariableTensor` with per-cell width |\n| Diagrams — CNN | *\"Receptive field with stride 2 padding 1\"* | `ConvGrid` — input grid, kernel overlay, padding ring, output cell linkage; output size auto-computed |\n| Diagrams — specialized | *\"Benzene molecule\"* / *\"e+ e− → q q̄ Feynman diagram\"* / *\"Game of Life evolution\"* / *\"GNN validation accuracy boxplot\"* | `MoleculeViewer`, `FeynmanDiagram`, `AutomataGrid`, `DistillBoxplot`, `ImageWithAnnotations` for raster overlays with categorical circles |\n| Cloud architecture | *\"Multi-region observability diagram\"* | Hand-drawn vendor-agnostic SVG using the `service-` line-art icon library — 29 symbols across edge, compute, data, messaging, observability, networking, storage, identity |\n| Slide decks | *\"8-slide deck on [paper]\"* | Paper-warm background, system sans, one idea per slide, figure breakouts, citations at the foot |\n| Product styling | *\"Style my dashboard like Distill\"* | Drop-in `tokens/colors_and_type.css` tokens; TSX components copy-paste-ready |\n| Product styling | *\"Convert this brand to a scholarly-editorial system\"* | Brand-to-token mapping with diagram primitives |\n| Mockups | *\"Quick mockup of [feature]\"* | Standalone HTML artifact |\n| Mockups | *\"Lay out 6 variants side-by-side\"* | Uses [templates/design-canvas.tsx](plugins/distill-design/templates/design-canvas.tsx) — pan, zoom, drag-reorder, focus mode |\n| Mockups | *\"Add a live tweaks panel for primary color and font size\"* | Uses [templates/tweaks-panel.tsx](plugins/distill-design/templates/tweaks-panel.tsx) — floating panel, postMessage-persisted |\n| Visual reference | *\"Show me how Distill diagrams [concept]\"* | 131 source figures from 10 articles in [sources/](plugins/distill-design/sources/) |\n\n## Commands\n\nSeven slash commands wrap the most common workflows. Each one loads the skill and adds focused instructions plus the project's hard constraints — no emoji, no marketing superlatives, no year literals, English-only, palette and stroke rules.\n\n| Command | Args | What it does |\n|---|---|---|\n| `/distill-design:article` | topic / paper / brief | Long-form article scaffold — TOC, hover citations, math, 7-section canonical footer |\n| `/distill-design:diagram` | one-line topic | Single SVG diagram, with primitive-file selection guidance baked in |\n| `/distill-design:cloud-arch` | architecture brief | Vendor-agnostic cloud architecture SVG using the `service-` icon library |\n| `/distill-design:cover` | project name + pitch | 1600×500 README cover banner in the article-hero pattern |\n| `/distill-design:rewrite` | text to rewrite | Text in Distill voice — first-person plural, no superlatives, sentence case |\n| `/distill-design:slides` | topic / paper | 16:9 slide deck — one idea per slide, paper background, system sans |\n| `/distill-design:brand-map` | brand brief | Map a product brand onto Distill tokens — override CSS, component adapter notes, voice translation table |\n\nSource files live under [plugins/distill-design/commands/](plugins/distill-design/commands/) — each is a Markdown prompt template with a `description` frontmatter and a body that loads the skill before doing the task.\n\n## Examples\n\nReference architecture diagrams in the system's visual language — vendor-agnostic, hand-drawn line art, paper-warm palette, dashed arrows for failover, replication, and observability.\n\n### Multi-region observability\n\n\n\n### Multi-tier app with RDS\n\n\n\n## Install\n\n### Claude Code marketplace\n\n```bash\n/plugin marketplace add geo-mena/distill\n/plugin install distill-design@distill-design-marketplace\n```\n\nRestart Claude Code. Invoke with `/distill-design`, or describe an editorial or diagrammatic task — the skill activates by description match.\n\n### Claude Code local symlink\n\n```bash\n./scripts/install-claude.sh\n```\n\nSymlinks `plugins/distill-design/` to `~/.claude/skills/distill-design`. For iteration on the skill itself.\n\n### Other agents\n\nPer-tool adapters under [configs/](configs/): [Codex](configs/codex/AGENTS.md), [Cursor](configs/cursor/distill-design.mdc), [OpenCode](configs/opencode/AGENTS.md), [OpenClaw](configs/openclaw/AGENTS.md), [Pi](configs/pi/AGENTS.md). Each adapter points the target agent to the canonical skill at `plugins/distill-design/`.\n\n## Repository map\n\n```text\n.\n├── README.md, CHANGELOG.md, LICENSE\n├── package.json # Pi package metadata\n├── .claude-plugin/ # marketplace.json + plugin.json\n├── configs/ # per-agent adapters\n│ ├── codex/AGENTS.md\n│ ├── cursor/distill-design.mdc\n│ ├── opencode/AGENTS.md\n│ ├── openclaw/AGENTS.md\n│ └── pi/AGENTS.md\n├── scripts/\n│ ├── install-claude.sh # symlink to ~/.claude/skills/distill-design\n│ └── bump-version.sh # release helper, sync version across manifests\n└── plugins/distill-design/ # canonical Skill\n ├── SKILL.md # manifest, read by Claude on invocation\n ├── DESIGN-SYSTEM.md # voice, color, typography, iconography, caveats\n ├── tokens/colors_and_type.css # three palettes, type scale, spacing, radii, motion\n ├── fonts/ # Geist Pixel Square, mono only\n ├── assets/ # pointer-glyph, wordmark, ICONOGRAPHY.md\n ├── ui_kits/article/ # 7 .tsx files + assembled index.html\n │ ├── Primitives.tsx # TensorVector, Arrow, OperatorNode, SubNetBlock, ...\n │ ├── Chrome.tsx # ArticleNav, ArticleHeader, TOCDrawer, ArticleFooter\n │ ├── Diagrams.tsx # FiLM scenes — concat, bias, scaling, network, scrubber\n │ ├── RL.tsx # GridWorld, ValueHeatmap, PolicyArrows\n │ ├── Graph.tsx # GraphNode, GraphEdge, BeamSearchTree, DebateTree, HMMState\n │ ├── Heatmap.tsx # AttentionHeatmap, CellGrid, RecurrentArrow, VariableTensor, ConvGrid\n │ ├── Specialized.tsx # MoleculeViewer, AutomataGrid, FeynmanDiagram, ImageWithAnnotations, DistillBoxplot\n │ └── index.html # serve via HTTP — Babel standalone fetches .tsx via XHR\n ├── templates/ # author tools\n │ ├── design-canvas.tsx # Figma-style canvas wrapper\n │ └── tweaks-panel.tsx # floating live-tweak panel\n ├── preview/ # 48 reference cards, one per token or component\n ├── sources/ # 131 source figures from 10 articles\n └── resources/diagrams/ # output diagrams + _service-icons.svg (29 symbols)\n```\n\n## Out of scope\n\n- Emoji.\n- Marketing superlatives — \"revolutionary\", \"powerful\", \"game-changing\".\n- Exclamation points in body text.\n- Gradients, glassmorphism, fixed or sticky elements in articles.\n- Simplification of math notation. Density is part of the identity.\n- Multi-color or filled icons.\n- Earlier Distill template, predating the current `` reader.\n\n## Community\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines and how to submit PRs.\n\nAI / vibe-coded PRs welcome.\n\nThanks to all contributors:\n\n[](https://github.com/geo-mena/distill/graphs/contributors)\n",
"bytes": 10326,
"sha": "67e0217f302e668913897f2282fce002a2d82d01f9c678440527cf2cd17544bc",
"repo_slug": "geo-mena/distill",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/plg_geo_mena_distill_distill_design_39998e74/readme"
}
![\"Release](\"https://img.shields.io/github/actions/workflow/status/geo-mena/distill/release.yml?branch=main&label=build&style=for-the-badge\")
\n ![\"Latest](\"https://img.shields.io/github/v/release/geo-mena/distill?include_prereleases&style=for-the-badge\")
\n ![\"MIT](\"https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge\"){kind=icon}
\n