/ink

A Claude Code skill that creates beautiful digital artifacts. Tell it what you need — a report, a brief, a presentation, an infographic, or even an image — and Ink figures out the format and makes it stunning.

The Problem

You need a beautiful document. You don't have time to open Figma, learn LaTeX, or wrestle with Google Slides formatting for an hour. You just want to describe what you need and get something that looks like a designer made it.

How It Works

You: "Make me a one-pager summarizing our Q1 results"

/ink detects: brief format
    |
    v
Reads the Ink design system (base-styles.css)
    |
    v
Generates self-contained HTML with embedded CSS
    |
    v
Opens in browser --> Cmd+P --> Save as PDF

For images, Ink routes through Google's Gemini API (optional, ~$0.04/image):

You: "Generate a hero image for my landing page"

/ink detects: image format
    |
    v
Enhances your prompt with quality keywords
    |
    v
Generates via Gemini 2.5 Flash
    |
    v
Saves PNG to output/

Document Types

Type	Best For	Output
Report	PRDs, specs, analyses, multi-page docs	Cover page, TOC, section numbering, headers/footers
Brief	One-pagers, executive summaries	Concise single-page, key metrics strip, recommendation boxes
Infographic	Data presentations, dashboards	Stat callouts, metric cards, timeline elements, accent bars
Presentation	Stakeholder decks, team presentations	Slide-per-page layout, title slides, section dividers
Image	Hero graphics, illustrations, banners	PNG via Gemini API (optional)

Examples

The Ink Design System

Every document is built on a cohesive design system with one-variable theming:

• One accent color — Change --ink-accent and everything re-themes
• 8px spacing grid — Consistent rhythm across all layouts
• Print-optimized typography — 11-point scale from 36pt titles to 7.5pt annotations
• Card-based components — Stats, metrics, callouts, timelines, progress bars
• US Letter output — Optimized @page rules with proper margins

Quick Customization

Edit templates/base-styles.css:

:root {
  --ink-accent: #2563EB;     /* Change this one color */
  --brand-name: "Document";   /* Footer text */
  --brand-show: block;        /* Set to 'none' to hide */
}

Image Generation (Optional)

Ink can generate images using Google's Gemini API. This is entirely optional — Ink works great for documents without it.

Setup:

1. Get a free API key at Google AI Studio
2. Set it: export GOOGLE_API_KEY="your-key"

Cost: ~$0.04 per image via gemini-2.5-flash-image

If no key is configured, Ink will offer to create a styled document instead.

Installation

Claude Code

Drop the skill into your skills directory:

# Clone to your skills folder
git clone https://github.com/hurleywgly/ink.git ~/.claude/skills/ink

# Or copy manually
cp -r ink/ ~/.claude/skills/ink/

Then use it:

You: "Make me a report about X"
You: "Create a brief summarizing Y"
You: "/ink generate an infographic of our metrics"

Other Platforms

The Ink design system (CSS + HTML templates) works anywhere. The SKILL.md is optimized for Claude Code but the patterns are transferable to any LLM that can generate HTML.

File Structure

ink/
├── SKILL.md                        # Skill definition
├── templates/
│   ├── base-styles.css             # Ink design system (shared CSS)
│   ├── report-template.html        # Report HTML skeleton
│   ├── brief-template.html         # Brief HTML skeleton
│   ├── infographic-template.html   # Infographic HTML skeleton
│   └── presentation-template.html  # Presentation HTML skeleton
└── examples/
    └── (screenshots of generated output)

Design Principles

1. Generous whitespace — Let content breathe
2. Accent bar as punctuation — Solid accent in 1-2 places, never as background fill
3. Typography hierarchy — Title 0 only on covers, body at 10.5pt for print
4. Dark-on-light — Near-black text on white, accent blue for highlights
5. Card-based data — Stats and metrics in 20px-radius cards
6. Print density — Never waste a page on a heading and whitespace

License

MIT