Transform complex information into beautifully designed, self-contained HTML documents.
18 visual templates x 28 content strategies x S/M/L/XL depth control. Brain -> Router -> Canvas architecture.
This is not template filling. This is consulting-grade visual intelligence.
See it in action · Install · How it works · Templates
Other Languages:
Most AI tools generate documents the same way: dump text into a template and call it done. You get a wall of bullet points in a generic card layout, maybe with a gradient blob for decoration. It looks like every other AI-generated document on the internet.
The problem is not generation speed. The problem is that no thinking happens before the pixels hit the screen.
A McKinsey consultant does not open PowerPoint first. They spend 80% of their time on analysis — identifying core tensions, challenging assumptions, mapping causal chains — and only 20% on the final deliverable. The document is the last mile, not the first.
make-doc-skill works the same way. It enforces a Brain -> Router -> Canvas pipeline that separates thinking from rendering:
- Brain reads your materials, extracts core arguments, evaluates evidence strength, and challenges your assumptions through expert-level sparring. A finance document gets questioned like a Goldman Sachs analyst would. A technical architecture gets stress-tested like a Google Staff Engineer would.
- Router matches your content to the optimal visual structure from 18 templates and 28 content strategies. A comparison is not forced into a timeline. A tutorial is not crammed into a dashboard.
- Canvas renders pixel-perfect HTML that strictly follows your brand CI — colors, fonts, border-radius, shadows — extracted automatically from your website.
The 8-step pipeline is not bureaucracy. Each step exists because skipping it produces measurably worse output. Step 4 (Sparring) alone typically identifies 3-5 blind spots that would have become embarrassing gaps in the final document. Step 6 (Review) enforces a 15-item quality checklist across structure, content depth, and CI compliance.
The result: documents that look like they came from a design agency, with analysis depth that reads like it came from a consulting firm. All from a single Claude Code skill.
┌──────────────────────────────────────────────────────────────┐
│ make-doc-skill │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │ Brain │────>│ Router │────>│ Canvas │ │
│ │ │ │ │ │ │ │
│ │ Logical │ │ Template │ │ Visual │ │
│ │ Analysis │ │ Selection│ │ Rendering │ │
│ │ Sparring │ │ Strategy │ │ HTML Generation │ │
│ │ Evidence │ │ Mapping │ │ CI Compliance │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
│ │
│ Steps 3-4 Step 5 Step 7 │
└──────────────────────────────────────────────────────────────┘
Core Principle: Depth comes from prompt quality, not the number of steps.
The three layers are decoupled by design. Even when Brain performs deep analysis, Canvas does not output analytical prose — it transforms analysis into visual structure. Router ensures this translation happens correctly.
The optimal template is automatically recommended based on content type.
| Template | Use Case | Visual Characteristics |
|---|---|---|
| Dashboard | Data-dense overviews, KPIs | Bento-box grid + CSS progress bars |
| Versus | A vs B comparison | Dual-column color separation + unified comparison table |
| Timeline | History, phase breakdown | Central axis + alternating cards |
| Article | News, opinion pieces | Hero + quote blocks + alternating text/image |
| Steps | Tutorials, how-to guides | Numbered circles + connector dashed lines |
| Report | Research, finance | Summary section + sidebar numbers + tables |
| Matrix | Multi-dimensional evaluation | Score grid + color scale + ranking |
| Profile | Product, company intro | Hero banner + metric bars + card grid |
| Flowchart | Decision processes | Nodes + CSS arrows + branching |
| Scorecard | Evaluation, reviews | Total score + ring progress + bars |
| Pitch | Strategic proposals | Full-width narrative + CTA |
| Infographic | Data analysis | Large numbers + icons + gradient sections |
| Comparison Table | Product comparison | Check/cross marks + recommended column highlight |
| FAQ | Knowledge base | Accordion Q&A |
| Slide | Team presentations | 16:9 fixed + page numbers |
| Iceberg | Root cause analysis | Surface (30%) + waterline + deep layer (70%) |
| Funnel | Conversion analysis | Progressively narrowing + elimination metrics |
| Bridge | Transformation proposals | Current state -> transition path -> target |
Each strategy has dedicated analysis angles, prohibited outputs, and recommended templates.
| Strategy | Primary Template | Analysis Angles |
|---|---|---|
| breaking-news | Article | 5W1H, source credibility, timeline, impact assessment |
| opinion | Article | Core thesis, evidence chain, opposing views, logical gaps |
| product | Profile | Core features, differentiation, target users, pricing |
| tech-doc | Steps | Architecture, API, failure modes, TCO |
| research | Report | Research questions, methodology, data support, limitations |
| finance | Report | Core metrics, trends, risks, peer comparison |
| startup | Pitch | Team, problem, solution, market size, business model |
| case-study | Report | Background -> challenge -> solution -> results -> lessons |
| data-analysis | Infographic | Data sources, trends, outliers, correlations, predictions |
| review | Scorecard | Scoring dimensions, pros/cons, horizontal comparison |
| tutorial | Steps | Prerequisites, step breakdown, common errors |
| ecommerce | Comparison Table | Product attributes, price comparison, user reviews |
| interview | Article | Subject background, core insights, key quotes |
| event | Timeline | Agenda, speakers, key statements, action items |
| whitepaper | Report | Abstract, problem definition, methodology, conclusions |
| legal-policy | Report | Scope, core provisions, compliance requirements |
| press-release | Article | Publisher, core message, market impact |
| social-thread | Article | Core viewpoints, engagement heat, controversy points |
| job-posting | Profile | Role profile, core requirements, team culture |
| recipe | Steps | Ingredient list, step breakdown, key techniques |
| travel | Dashboard | Destination overview, itinerary, cost estimates |
| health | Steps | Symptoms, possible causes, treatment options |
| real-estate | Dashboard | Property overview, location analysis, price trends |
| podcast | Article | Guest introduction, topic timeline, core insights |
| announcement | Article | Core changes, scope of impact, required actions |
| sports | Scorecard | Event overview, key data, turning points |
| video | Article | Theme extraction, key timestamps, core insights |
| general | Dashboard | Core tension, multi-layer causation, So What validation |
| S | M | L | XL | |
|---|---|---|---|---|
| Analysis Depth | Core conclusions + actions | Standard analysis + evidence evaluation | Deep analysis + explanatory frameworks | Complete report + multi-perspective review |
| Sections | 3-5 | 5-8 | 8-12 | 12+ |
| Depth Visualization | Basic | Standard (confidence marks, contrast) | Full (causal chains, trends, multi-source) | Full + interactive (collapsible, citations) |
| Use Case | Quick grasp of key points | Team sharing | Decision support | Strategic reports |
| Estimated Time | 15-30 min | 30-60 min | 60-120 min | 120+ min |
| Platform | Installation |
|---|---|
| Claude Code | cp SKILL.md ~/.claude/skills/make-doc-skill/SKILL.md |
| Gemini CLI / Antigravity | npx skills add jasonhnd/makedocskill |
| OpenAI Codex CLI | npx skills add jasonhnd/makedocskill |
| Claude.ai | Upload SKILL.md to Project Knowledge |
| Cursor / VS Code Copilot | npx skills add jasonhnd/makedocskill |
| ChatGPT / Gemini Web | Paste SKILL.md content into System Instructions |
# One-liner
mkdir -p ~/.claude/skills/make-doc-skill && curl -sL https://raw.githubusercontent.com/jasonhnd/makedocskill/main/SKILL.md -o ~/.claude/skills/make-doc-skill/SKILL.md
# Or clone and copy
git clone https://github.com/jasonhnd/makedocskill.git
cp makedocskill/SKILL.md ~/.claude/skills/make-doc-skill/SKILL.md# In Claude Code
/make-doc-skill
You: I want to make a document about our product architecture
Skill: What's the project name? (e.g., acme_product_arch)
You: acme_product_arch
Skill: [Creates output/acme_product_arch/, starts CI extraction...]
Skill: Do you have a company website I can crawl for brand CI?
You: https://acme.com
Skill: [Crawls site, extracts colors/fonts/shadows, saves 01_design.md]
Skill: Now 8 quick questions about audience, depth, format...
You: @report.pdf Turn this into a strategic overview for the leadership team
Skill: [Reads PDF, extracts key findings, identifies content type as "research"]
Skill: [Crawls company website for CI, runs expert sparring]
Skill: I found 3 blind spots in the analysis: ...
Skill: [Generates 16:9 slide deck with full CI compliance]
You: Summarize this URL as a one-pager (Size S)
Skill: [Fetches URL, identifies content type, selects template]
Skill: [Fast 3-5 section summary, core conclusions + action items]
Skill: [Outputs single-page scroll HTML in under 20 minutes]
During sparring (Step 4), expert-level questioning chains are automatically injected based on content type. These are not generic "you are an analyst" prompts — they are domain-specific interrogation patterns.
You are a TMT sector analyst (CFA Level 3) with 10 years at Goldman Sachs. "Is revenue growth organic or M&A-driven? What's the FCF vs NI divergence? How reliable is management guidance? Any hidden time bombs on the balance sheet?"
You are a Staff Engineer with 12 years at Google. Experienced 3 major tech migrations. "What's the core abstraction? Failure modes at 10x scale? Lock-in risks? TCO comparison?"
You are a senior editor at Reuters' investigative unit. Processing 200+ stories daily. "Primary evidence? Speculation? Source bias? Risk of reversal within 72 hours?"
When materials contain certain data structures, corresponding visualization methods are automatically applied. Degradation to text lists is prohibited.
| Type | Visualization | Rule |
|---|---|---|
| Causal Chains | Vertical flow + arrows + mechanism at each node | Parallel cards prohibited |
| Confidence | Horizontal progress bar + percentage + rationale | 4-level color scale |
| Contrast Increments | GAP column + directional arrows + color-coded differences | Up/down/right arrows required |
| Information Quality | Green/yellow/red circles for data reliability | [DATA_GAP] shown as warning callout |
| Trend Direction | CSS mini bar + directional arrows + derivative calculation | Rate of change required |
| Uncertainty | Independent section + dashed border + info gap list | Cannot be mixed with confirmed data |
Every document goes through 8 steps. Each step produces a visible artifact. You can restart from any step at any time.
| Step | Action | Output |
|---|---|---|
| 0 | Project Name | output/[name]/ directory |
| 1 | CI Extraction | 01_design.md (colors, fonts, shadows, spacing) |
| 2 | Pre-Interview (8 questions) | 02_interview.md (audience, purpose, format, depth) |
| 3 | Material Organization | 03_source.md (structured sources with gap markers) |
| 4 | Sparring | 04_sparring.md (hypothesis challenge + blind spots + reframing) |
| 5 | Composition | 05_composition_[lang].md (section-by-section design spec) |
| 6 | Review | 06_review.md (3-layer, 15-item quality check) |
| 7 | HTML Generation | [title]_[lang].html (final self-contained output) |
For online viewing, internal wikis, and knowledge bases. Vertical scroll layout with responsive design.
- Responsive (mobile-first)
- Glass morphism cards
- Micro-interactions (hover effects)
- Fade-in animations
- Print-optimized with
@media print
For projection, team presentations, and PDF output. Fixed at 1280x720px.
- Page numbers (bottom-right
X / N) - CI color bar (bottom 4px accent bar)
- Cover page with CI dark background
- Auto page break on print
- One-click PDF export via browser print
In Step 1, the skill crawls your website and extracts: brand colors (primary, secondary, background, text), fonts (Google Fonts declarations), border-radius values, box-shadow patterns, spacing rhythm, and overall tone.
During generation, the CI color palette is strictly enforced. Hierarchy is differentiated using color-mix() transparency variations. Introduction of hues outside the CI palette is prohibited.
In Step 6, Layer 3, six items are forcibly checked before generation: border-radius / box-shadow / color palette / font-family / heading color / secondary color usage.
| Spec | Detail |
|---|---|
| Output | Self-contained single HTML file |
| External Dependencies | Tailwind CSS CDN, Google Fonts, Lucide Icons (inline SVG) |
| CSS Architecture | Custom properties (--c-bg, --c-surface, --c-accent, etc.) |
| Print Support | @media print + break-inside: avoid |
| Auto-Generated | OG tags (SVG title card), favicon (SVG from CI), SEO (noindex, nofollow) |
| Multilingual | Japanese / Chinese / English (auto-switch interaction) |
| Version Control | Built-in history tracking, restart from any step |
| Scenario | Estimated Tokens | Estimated Cost |
|---|---|---|
| Size S (quick summary) | ~15k | ~$0.38 |
| Size M (standard) | ~25k | ~$0.63 |
| Size L (deep analysis) | ~40k | ~$1.00 |
| Size XL (full report) | ~60k | ~$1.50 |
| Restart from Step 4 | ~20k | ~$0.50 |
Claude Max/Pro subscribers are not billed per token.
makedocskill/
├── SKILL.md # Skill body (~2,360 lines)
├── README.md # This file
├── LICENSE # Apache License 2.0
├── .gitignore
├── i18n/
│ ├── ja/README.md # Japanese
│ └── zh/README.md # Chinese
└── docs/
├── README.md # Document index
├── ARCHITECTURE.md # Three-layer decoupled architecture
├── TEMPLATES.md # 18 template reference
├── CONTENT_STRATEGIES.md # 28 strategy details
├── DEPTH_VISUALIZATION.md # Depth visualization rules
├── SIZE_DEPTH_MATRIX.md # Size-depth matrix
├── DESIGN_RULES.md # Universal design rules
├── PIPELINE.md # 8-step pipeline details
└── PROMPT_ENGINEERING.md # Prompt engineering standards
output/[project_name]/
├── README.md # Project index (auto-updated)
├── 00_assets/ # Original files
├── 01_design.md # CI design standards
├── 02_interview.md # Pre-question records
├── 03_source.md # Material organization
├── 04_sparring.md # Sparring records
├── 05_composition_[lang].md # Composition table
├── 06_review.md # Review results
├── [title]_[lang].html # Final output
└── *_history/ # Version history
| Document | Content |
|---|---|
| ARCHITECTURE.md | Brain -> Router -> Canvas three-layer architecture |
| TEMPLATES.md | Complete reference for 18 templates |
| CONTENT_STRATEGIES.md | Details for 28 strategies |
| DEPTH_VISUALIZATION.md | 6 depth visualization rules |
| SIZE_DEPTH_MATRIX.md | Size-depth matrix |
| DESIGN_RULES.md | Universal design rules |
| PIPELINE.md | 8-step pipeline details |
| PROMPT_ENGINEERING.md | Prompt engineering standards |
This skill is derived from the EIP (Explain In Picture) project — an AI-driven visual document generation web application (Next.js 16 + React 19 + Tailwind CSS 4) that accumulated the Engine 1.0 methodology: three-stage pipeline, 31 visual template skeletons, 28 content strategies, a 6-layer classification engine, depth visualization rules, and S/M/L/XL size control.
make-doc-skill condenses these insights into Claude Code skill format, achieving equivalent generation quality without a web application.