Kami: Constraint-Based Document Design for AI
Today I discovered Kami (紙, “paper” in Japanese), a design system and Claude Code skill that solves the “every AI-generated document looks like generic gray garbage” problem. The fix isn’t better prompting. It’s better constraints. Same thesis I explored with Impeccable for UI code and Effective HTML + Archify for diagrams, but applied to documents: resumes, reports, slide decks, landing pages.
The Core Idea
AI is already good at content. The problem is presentation. Without a ruleset, every generation looks different. Ask Claude to “make a one-pager” ten times and you get ten visually inconsistent layouts. Kami fixes this by providing a strict but small design language: colors, type, spacing, and components that any agent can follow reliably.
If DESIGN.md is the constraint file for UI components and Impeccable is the quality gate for frontend code, Kami is the equivalent for print-ready documents. Same pattern: text-native specifications that agents read before generating output. The difference is the surface area. DESIGN.md constrains your app’s look. Kami constrains your deliverables’ look.
It’s part of a trilogy by tw93: Kaku writes code, Waza drills habits, and Kami delivers documents.
Setup
# Install as a Claude Code skill
npx skills add tw93/kami -a claude-code -g -yOnce installed, no slash command needed. Natural prompts auto-trigger it: “make a one-pager for my startup”, “turn this research into a long doc”, “design a slide deck for my talk.”
The Design Language
The visual system is deliberately minimal:
| Element | Constraint |
|---|---|
| Background | Parchment #f5f4ed (never pure white) |
| Accent | Ink blue #1B365D (single color, no alternates) |
| Neutrals | Warm only (no cool gray) |
| Typography | Serif-led hierarchy (Charter EN, YuMincho JP) |
| Shadows | Ring and “whisper” only (no hard drop shadows) |
| Spacing | 4pt grid with named scales (xs-3xl) |
What It Produces
Kami supports ten document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, changelogs, and landing pages. Outputs are HTML exportable to PDF, PNG, or editable PPTX. It also includes fourteen inline SVG diagram types (architecture, flowcharts, bar charts, donut charts) embedded directly in the doc. The HTML-as-output thesis applies here too: agents produce better visual artifacts when they write to a format they can read.
For personalization, you can create ~/.config/kami/brand.md with your identity context (name, brand color, tone, page size). Kami uses it only when the request is ambiguous, so your documents feel consistently “yours” without becoming clones of each other.
The Pattern Keeps Repeating
This is now four data points in the same direction:
| Tool | Surface | Constraint Mechanism |
|---|---|---|
| DESIGN.md | UI components | Token file in repo root |
| Impeccable | Frontend code | 25 anti-pattern rules + scanner |
| Effective HTML / Archify | Diagrams | Reference example corpus |
| Kami | Documents | Strict design language + brand profile |
The mechanism varies but the thesis is identical: AI agents produce consistently better output when you shrink the design space rather than expand the prompt. Skills with bundled taste beat long prompts describing taste.
What I Learned
- Constraints beat freedom for consistent AI output. The smaller the design space, the more reliable the results
- The parchment + ink blue + serif formula works because it references editorial print design, not web defaults
- Auto-triggering from natural language means zero friction. No slash commands, no template selection
- The brand profile concept (
~/.config/kami/brand.md) mirrors DESIGN.md’s role for apps: low-resolution identity that influences without dominating - Kami works across Claude Code, Codex, OpenCode, and Claude Desktop. One design system, many agents
- The constraint-based skill pattern is converging across every output type: UI, diagrams, video (HyperFrames), and now documents
Building with AI design skills? I’d love to hear what document workflows you’re automating. Reach out on LinkedIn.