원클릭으로 Manus에서 모든 스킬 실행

notion-html-docs

스타0

포크0

업데이트2026년 4월 2일 04:33

Use when generating single-page HTML documents that look like Notion pages — academic deliverables, research briefs, ecosystem maps, competitive analyses, or any professional document needing Notion-style typography, callouts, tables, and CSS-only diagrams

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

bravohenry

bravohenry/notion-html-docs

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Notion HTML Document System

Overview

Generate self-contained, single-page HTML documents styled as Notion pages with CSS-only diagram components. No external dependencies. No JavaScript. No SVG coordinates. Print-ready via @media print.

Core principle: Content dictates layout. Diagrams use CSS Grid/Flexbox, never SVG coordinate placement. Typography and color follow Notion's native palette exactly.

When to Use

Academic deliverables (SCAD Capstone, course assignments)
Research briefs, updated briefs, ecosystem maps
Competitive analysis documents
Stakeholder agreements, partnership documents
Any professional single-page HTML that needs Notion's clean aesthetic
When the user asks for "Notion style" or references the 757/797 document format

Document Skeleton

Every document follows this structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Document Title}</title>
<style>
  /* Full CSS here — self-contained, no external sheets */
</style>
</head>
<body>

<div class="notion-cover"></div>
<div class="notion-page">

  <div class="notion-icon">{emoji}</div>
  <div class="notion-title">{Title}</div>
  <div class="notion-subtitle">{Subtitle — project name, context}</div>

  <div class="notion-props">
    <div class="notion-prop">
      <span class="notion-prop__label">{Label}</span>
      <span class="notion-prop__value">{Value or tags}</span>
    </div>
    <!-- More props -->
  </div>

  <hr>

  <!-- Content sections with h1/h2/h3, callouts, tables, diagrams -->

</div>
</body>
</html>

Design Tokens

Typography

/* Primary */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
  "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

/* Monospace (data, code, prices) */
font-family: "SFMono-Regular", Menlo, Consolas, monospace;

Element	Size	Weight	Line-height
`.notion-title`	40px	700	1.2
h1	30px	700	1.2
h2	24px	600	1.3
h3	20px	600	1.3
Body text (p)	16px	400	1.7
Table text	14px	400	1.5
Labels/meta	12px	400	—
Diagram labels	10-13px	600	1.3
Uppercase labels	10px	700	—

Color Palette (Notion-native)

Role	Background	Border/Text	CSS
Body text	—	`rgb(55,53,47)`	Default text
Secondary text	—	`rgba(55,53,47,.5)`	Subtitles, meta
Border	—	`rgb(233,233,231)`	Dividers, table borders
Background gray	`rgb(247,246,243)`	—	Table headers, neutral cards
Blue (core/brand)	`rgb(231,243,248)`	`rgb(35,131,226)`	Highlights, 30X brand
Green (positive)	`rgb(219,237,219)`	`rgb(180,220,180)`	Success, completed
Yellow (insight)	`rgb(251,243,219)`	`rgb(253,236,200)`	Callouts, customer
Red (risk/break)	`rgb(255,226,221)`	`rgb(93,23,21)`	Broken pipelines, risk
Purple (trust/L4)	`rgb(232,222,238)`	`rgb(65,36,84)`	Org trust, premium
Gray tag	`rgb(227,226,224)`	`rgba(55,53,47,.6)`	Neutral tags
Blue tag	`rgb(211,229,239)`	`rgb(24,51,71)`	Category tags

Layout

.notion-page { max-width: 900px; margin: 0 auto; padding: 80px 96px 120px; }
@media (max-width: 768px) { .notion-page { padding: 40px 16px 80px; } }

Text Components

Callout

<div class="callout callout--yellow">
  <div class="callout__icon">💡</div>
  <div class="callout__body"><strong>Key insight.</strong> Supporting text.</div>
</div>

Variants: callout--yellow, callout--blue, callout--red, callout--gray

Table (Notion-style)

<table class="nt">
  <thead><tr><th>Col A</th><th>Col B</th></tr></thead>
  <tbody><tr><td>Data</td><td>Data</td></tr></tbody>
</table>

Multi-column Layout

<div class="cols">
  <div>Column 1 content</div>
  <div>Column 2 content</div>
</div>

Tags (inline)

<span class="tag tag--blue">Label</span>
<span class="tag tag--green">Done</span>
<span class="tag tag--red">Risk</span>
<span class="tag tag--purple">L4</span>
<span class="tag tag--yellow">Insight</span>
<span class="tag tag--gray">Neutral</span>

Quote

<div class="quote">
  "Quoted text here"
  <cite>— Source Name</cite>
</div>

Toggle (details/summary)

<details class="notion-toggle">
  <summary>Click to expand</summary>
  <div class="notion-toggle__content">Hidden content</div>
</details>

Diagram Components (CSS-only)

Rule: All diagrams use CSS Grid or Flexbox. Never SVG coordinates. Never absolute positioning for layout (only for dot overlays on quadrants).

Force Field (3×3 Grid)

Center = customer/subject. Four sides = forces acting on them. Corners empty.

<div class="force-field">
  <div class="ff-cell ff-corner"></div>
  <div class="ff-cell ff-top">
    <div class="ff-label">PRESSURE FROM ABOVE</div>
    <div class="ff-title">Title</div>
    <div class="ff-sub">Description</div>
  </div>
  <div class="ff-cell ff-corner"></div>

  <div class="ff-cell ff-left"><!-- force --></div>
  <div class="ff-cell ff-center"><!-- subject --></div>
  <div class="ff-cell ff-right"><!-- force --></div>

  <div class="ff-cell ff-corner"></div>
  <div class="ff-cell ff-bottom"><!-- force --></div>
  <div class="ff-cell ff-corner"></div>
</div>

Pipeline Flow

Linear process with steps, breaks (✕), and arrows (→).

<div class="pipeline">
  <div class="pipe-step pipe-step--ok">
    <div class="pipe-step__name">Step 1</div>
    <div class="pipe-step__meta">Detail</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-step pipe-step--broken">
    <div class="pipe-step__name">Broken Step</div>
  </div>
  <div class="pipe-break">✕</div>
  <div class="pipe-step pipe-step--core">
    <div class="pipe-step__name">Core Step</div>
  </div>
</div>

Variants: pipe-step--ok (green), pipe-step--broken (red), pipe-step--core (blue border), pipe-step--neutral (gray)

Layer Stack

Vertical stack of layers, each with label + badge.

<div class="layer-stack">
  <div class="layer layer--l3">
    <div class="layer__main">
      <div class="layer__label">LAYER 3</div>
      <div class="layer__title">Title</div>
      <div class="layer__desc">Description</div>
    </div>
    <div class="layer__badge">Badge text</div>
  </div>
  <!-- layer--l2, layer--l1 -->
</div>

Quadrant Chart (2×2 Grid + Dots)

<div class="quad">
  <div class="quad__bg" style="position:absolute;inset:0;display:grid;
    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr">
    <div class="quad__cell quad__cell--highlight">
      <span class="quad__cell-label">Top-Left</span>
    </div>
    <div class="quad__cell"><span class="quad__cell-label">Top-Right</span></div>
    <div class="quad__cell"><span class="quad__cell-label">Bottom-Left</span></div>
    <div class="quad__cell"><span class="quad__cell-label">Bottom-Right</span></div>
  </div>
  <!-- Axis labels -->
  <div class="quad__ax" style="bottom:8px;right:12px">High X →</div>
  <div class="quad__ax" style="top:8px;left:12px">↑ High Y</div>
  <!-- Positioned dots (absolute is OK here) -->
  <div class="quad__dot" style="left:78%;top:12%;background:rgb(231,243,248);
    border-color:rgb(35,131,226)"></div>
  <div class="quad__dot-tip" style="left:64%;top:6%;color:rgb(35,131,226)">
    Label</div>
</div>

Beachhead Flow

Horizontal sequence of expansion nodes.

<div class="bh-flow">
  <div class="bh-node bh-node--primary">
    <div class="bh-node__label">BEACHHEAD</div>
    <div class="bh-node__title">First Market</div>
    <div class="bh-node__sub">Detail</div>
  </div>
  <div class="bh-arrow">→</div>
  <div class="bh-node bh-node--secondary"><!-- next --></div>
  <div class="bh-arrow">→</div>
  <div class="bh-node bh-node--tertiary"><!-- later --></div>
</div>

Trust Timeline (4-phase)

<div class="trust-tl">
  <div class="trust-tl__phase trust-tl__phase--l1">
    <div class="trust-tl__layer">L1 SELF</div>
    <div class="trust-tl__title">Title</div>
    <div class="trust-tl__desc">Description</div>
    <div class="trust-tl__feels">Metric</div>
  </div>
  <!-- --l2, --l3, --l4 -->
</div>

Stat Row

<div class="stat-row">
  <div class="stat-row__item">
    <div class="stat-row__num">45%</div>
    <div class="stat-row__label">Description</div>
    <div class="stat-row__source">Source 2025</div>
  </div>
  <!-- more items -->
</div>

Price Ladder

<div class="price-ladder">
  <div class="price-ladder__rung price-ladder__rung--free">
    <div class="price-ladder__name">Free Tier</div>
    <div class="price-ladder__price">Free</div>
    <div class="price-ladder__note">Limitations</div>
  </div>
  <div class="price-ladder__arrow">→</div>
  <div class="price-ladder__rung price-ladder__rung--30x"><!-- highlighted --></div>
  <div class="price-ladder__arrow">→</div>
  <div class="price-ladder__rung price-ladder__rung--high"><!-- expensive --></div>
</div>

Market Stat Blocks

<div class="market-stat">
  <div class="market-stat__block">
    <div class="market-stat__num market-stat__num--blue">$5.2B</div>
    <div class="market-stat__label">Market description</div>
    <div class="market-stat__sub">Source</div>
  </div>
</div>

Color variants: --blue, --green, --red, --yellow

Logic Chain

<div class="logic-chain">
  <div class="logic-step">
    <div class="logic-step__num">1</div>
    <div class="logic-step__body">
      <div class="logic-step__claim">Claim statement</div>
      <div class="logic-step__evidence">Supporting evidence</div>
    </div>
  </div>
  <div class="logic-step logic-step--conclusion">
    <div class="logic-step__num">∴</div>
    <div class="logic-step__body">
      <div class="logic-step__claim">Conclusion</div>
    </div>
  </div>
</div>

Tool Chaos Grid

<div class="tool-chaos">
  <div class="tool-chaos__item"><strong>Tool Name</strong><br>
    <span style="color:rgba(55,53,47,.4)">category</span></div>
  <div class="tool-chaos__item tool-chaos__item--orphan">
    <strong>Disconnected</strong></div>
</div>

Adoption Spectrum

<div class="spectrum">
  <div class="spectrum__row">
    <div class="spectrum__seg" style="width:75%;background:rgb(200,186,216)">75%</div>
    <div class="spectrum__seg" style="width:17%;background:rgb(130,100,160)">17%</div>
    <div class="spectrum__seg" style="width:8%;background:rgb(65,36,84)">6%</div>
  </div>
  <div class="spectrum__label">
    <span><strong>75%</strong> broad definition</span>
    <span><strong>6%</strong> fully embedded</span>
  </div>
</div>

Marketing Funnel Grid

<div class="funnel">
  <div class="funnel__row">
    <div class="funnel__head">Column A</div>
    <div class="funnel__head">Column B</div>
  </div>
  <div class="funnel__row">
    <div class="funnel__stage"><span class="funnel__stage-icon">🎯</span>Stage</div>
    <div class="funnel__cell funnel__cell--red">Broken</div>
    <div class="funnel__cell funnel__cell--green">Fixed</div>
  </div>
</div>

Comparison Bar Chart

<div class="comp-bar">
  <div class="comp-row">
    <div class="comp-row__name">Item</div>
    <div class="comp-row__bar-wrap">
      <div class="comp-row__bar" style="width:85%;background:rgb(35,131,226)"></div>
    </div>
    <div class="comp-row__val">85%</div>
  </div>
</div>

Print Support

Every document must include print styles:

* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

@media print {
  .notion-page { padding: 32px 48px !important; max-width: 100%; }
  .notion-cover, .notion-icon { display: none !important; }
  .notion-title { font-size: 28px !important; margin-top: 0 !important; }
  h1 { font-size: 22px !important; page-break-before: always; }
  h1:first-of-type { page-break-before: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Prevent mid-component breaks */
  table, .callout, .cols, .force-field, .pipeline, .layer-stack,
  .quad, .bh-flow, .trust-tl, .funnel, .logic-chain, .tool-chaos,
  .stat-row, .spectrum, .price-ladder, .market-stat, .quote
  { page-break-inside: avoid; }
}

Design Principles

Content-First — content decides layout. One core message per section.
Evidence is Visual — numbers are the star. Use SFMono for data. Diagrams only when data can't be text.
Earned Complexity — complex visuals only for complex content. Simple logic = simple typography.
Notion Restraint — whitespace is a design element. Don't explain the obvious.
Information Density ~90% — dense but not bloated. One concept appears once, never repeated across sections.
Incremental — updated documents are deltas, not full rebuilds. Reference prior work, don't restate.

Anti-Patterns

Don't	Do Instead
SVG with hardcoded coordinates	CSS Grid/Flexbox components
External CSS/JS dependencies	Self-contained `<style>` block
Bullet point walls (McKinsey deck)	Callouts, tables, diagrams
Repeating concepts across sections	State once, reference elsewhere
Student-report tone (over-explaining)	Confident, evidence-backed assertions
Decorative diagrams	Only diagrams that convey unreplaceable insight

Quick Reference: Complete CSS

The full base CSS for all components is in notion-base.css in this directory. Copy it as-is into the <style> block, then add document-specific diagram styles as needed.

Reference Documents

Production examples in reference/ — read these when you need to match tone, density, or visual rhythm. All three use Notion style.

File	Type	Key Features
`reference/EcoSystemMap.html`	★ Gold standard	Force field, pipeline, quadrant, price ladder, beachhead flow, trust timeline, spectrum, stat row, funnel, logic chain, tool chaos, market stat, comp bar — every diagram component in production. 1106 lines.
`reference/UpdatedBrief-v5.html`	Research brief (delta)	`.notion-table`, `.notion-callout`, `.notion-toggle`, tags — text-heavy with tables as primary structure. Shows text-to-diagram ratio for academic briefs. 531 lines.
`reference/ProductDiscovery.html`	Discovery brief	Uses `notion-base.css` verbatim + extends with `hmw-item` (How Might We list), `action-list` (numbered actions), `seg-card` (segment cards). Shows how to add custom components on top of the base system. 878 lines.

How to Use References

Starting a new document: Read EcoSystemMap.html for full component vocabulary
Extending the system: Read ProductDiscovery.html for how to add new components that stay visually consistent
Text-heavy briefs: Read UpdatedBrief-v5.html for table/callout/toggle patterns
Checking your work: Compare your output against the closest reference — same fonts, colors, spacing, component structure

Do NOT read all references for every document. Pick the one closest to your target format.

Extending with New Diagram Types

When you need a diagram component not listed above:

Use CSS Grid or Flexbox — never SVG coordinates
Follow the naming convention: .component-name, .component-name__part, .component-name--variant
Use only colors from the Notion palette above
Add page-break-inside: avoid in the print block
Keep border-radius at 4-8px (Notion standard)

name	notion-html-docs
description	Use when generating single-page HTML documents that look like Notion pages — academic deliverables, research briefs, ecosystem maps, competitive analyses, or any professional document needing Notion-style typography, callouts, tables, and CSS-only diagrams