SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshtml-report-design

html-report-design

Frontend & websites

View repository

Updated 10-16 09:35

About this skill

HTML Document Design — Consulting-Quality Output Design

The reason AI-generated HTML looks uncool is thatit builds structure with "lines and boxes". First-class documents build structure with **"whitespace and typographic hierarchy."** This skill enforces that style in every situation where HTML is output.

Purpose

When outputting documents in HTML (reports, analysis memos, proposals, research summaries, dashboards), output them with a "consulting-quality" design that can be delivered internally or externally as-is. Prohibit the default AI-like look (a proliferation of cards, gradients, emoji, rainbow colors).

Principles (5)

  1. Create separation with whitespace. Section boundaries are at most 64px or more of whitespace plus a single thin horizontal rule. Do not use enclosing frames.
  2. Create hierarchy with text. Express hierarchy through size, weight, and color intensity (black → two levels of gray). Do not express it with background color.
  3. Use at most 3 colors. Paper white + ink black/gray tones + 1 accent color (default is deep navy). Use the accent on 5% or less of the area, only for important numbers and structural elements.
  4. Structure is "message → evidence." In each section, place a "one-sentence message line" immediately after the heading, and arrange the evidence (tables, figures, body text) below it.
  5. Withstand printing. Fixed white background, does not break on A4. Design it as a handout, not for screen appeal.

Prohibited items (the true nature of uncoolness. If even one is present, fix it)

  • border + border-radius + box-shadow のCard UIenclosing content with
  • Gradient backgrounds (especially purple → blue), dark theme by default
  • Using emoji or icons as decoration for headings or bullet points
  • Increasing the number of colors without meaning (blue info box, yellow caution box, green success box…)
  • Centering body text or headings (only the cover page may be an exception; default is left-aligned)
  • Vertical rules in tables, borders on all cells, striped backgrounds
  • Heavy use of rounded corners, shadows, and three-dimensional effects
  • border-left: 4px solid A proliferation of colored callouts

Design CSS (use as-is. The only thing you may change is the single color --accent)

:root{
  --ink:#1a1a1a;         /* 本文 */
  --ink-2:#555555;       /* 補足 */
  --ink-3:#8e8e8e;       /* キャプション・出所 */
  --accent:#173f66;      /* アクセント（濃紺）。クライアントカラーがあれば1色だけ差し替え */
  --accent-tint:#eef3f8; /* アクセント淡色。合計行など最小限に */
  --hairline:#d9d9d9;    /* 罫線 */
  --fill-gray:#e7e9ec;   /* 図解の脇役の面（矢羽根・ロードマップのバー） */
  --paper:#ffffff;
}
html{color-scheme:light}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:15px;line-height:1.9;
  border-top:6px solid var(--accent);
  -webkit-font-smoothing:antialiased;
}
.page{max-width:760px;margin:0 auto;padding:56px clamp(24px,6vw,48px) 96px}

/* 表紙ブロック */
.doc-header{padding-bottom:28px;border-bottom:1px solid var(--ink)}
.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin:0 0 20px}
h1{font-size:27px;line-height:1.5;letter-spacing:.02em;margin:0 0 12px;font-feature-settings:"palt" 1}
.lead{font-size:14px;color:var(--ink-2);margin:0 0 24px;max-width:38em}
.doc-meta{font-size:12px;color:var(--ink-3);display:flex;gap:24px;flex-wrap:wrap}

/* セクション */
.page>section{border-top:1px solid var(--hairline);padding-top:44px;margin-top:64px}
.page>section:first-of-type{border-top:0;padding-top:0;margin-top:56px}
h2{font-size:19px;letter-spacing:.03em;margin:0;font-feature-settings:"palt" 1}
h2 .no{color:var(--accent);margin-right:14px;font-variant-numeric:tabular-nums}
.msg{font-size:16px;font-weight:600;line-height:1.8;margin:18px 0 24px;max-width:36em}
h3{font-size:15px;margin:36px 0 8px}
p{margin:0 0 16px;max-width:42em}

/* リスト */
ul,ol{margin:0 0 16px;padding-left:1.4em;max-width:41em}
li{margin-bottom:6px}
ul{list-style:none;padding-left:1.2em}
ul li::before{content:"–";float:left;margin-left:-1.2em;color:var(--ink-3)}

/* サマリー（結論の番号付き列挙） */
.summary{list-style:none;margin:24px 0 0;padding:0;counter-reset:s;max-width:44em}
.summary li{counter-increment:s;position:relative;padding-left:2.4em;margin-bottom:14px}
.summary li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.4em;
  font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* KPI（数字は箱に入れず、余白と縦罫で並べる） */
.kpis{display:flex;flex-wrap:wrap;row-gap:24px;margin:32px 0 8px}
.kpi{padding:2px 32px}
.kpi:first-child{padding-left:0}
.kpi+.kpi{border-left:1px solid var(--hairline)}
.kpi .v{font-size:30px;font-weight:700;color:var(--accent);line-height:1.3;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kpi .v small{font-size:14px;font-weight:600;margin-left:2px}
.kpi .l{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;margin-top:6px}

/* 表（縦線なし・横の細罫のみ。数字は右揃え） */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:28px 0 8px;font-size:13px;line-height:1.6}
caption{text-align:left;font-size:12.5px;font-weight:600;margin-bottom:10px}
th{font-size:12px;font-weight:600;text-align:left;padding:10px 12px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);vertical-align:bottom}
td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.total td{border-top:1px solid var(--ink);border-bottom:2px solid var(--ink);
  font-weight:600;background:var(--accent-tint)}

/* 図表・出所・注記 */
figure{margin:32px 0 8px}
figcaption{font-size:12.5px;font-weight:600;margin-bottom:14px}
figure svg{width:100%;height:auto;display:block}
svg text{font-family:inherit}
.fig-scroll{overflow-x:auto}
.src{font-size:11.5px;color:var(--ink-3);margin:6px 0 0}
.note{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--hairline);
  padding:2px 0 2px 14px;margin:24px 0 16px;max-width:40em}

/* 矢羽根（プロセス・バリューチェーン。主役フェーズだけ濃紺） */
.chevrons{display:flex;margin:28px 0 8px;min-width:520px}
.chev{flex:1;padding:9px 10px 9px 22px;font-size:12px;font-weight:600;line-height:1.5;
  text-align:center;background:var(--fill-gray);margin-left:4px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.chev:first-child{margin-left:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.chev.on{background:var(--accent);color:#fff}
.chev small{display:block;font-size:10.5px;font-weight:500;opacity:.75}

/* ロードマップ（列=時間、行=ワークストリーム。縦のグリッド線は引かない） */
.roadmap{min-width:560px;margin:28px 0 8px}
.rm-row{display:grid;grid-template-columns:120px repeat(6,1fr);align-items:center}
.rm-row.rm-head{border-bottom:1px solid var(--ink)}
.rm-h{font-size:11px;font-weight:600;color:var(--ink-3);text-align:center;
  padding:0 0 8px;letter-spacing:.04em}
.rm-row:not(.rm-head){border-bottom:1px solid var(--hairline);padding:12px 0}
.rm-lane{font-size:12px;font-weight:600;padding-right:12px;line-height:1.5}
.rm-bar{font-size:11px;font-weight:600;line-height:1.4;padding:4px 10px;
  background:var(--fill-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bar.on{background:var(--accent);color:#fff}
.rm-ms{font-size:11.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* フレームワーク表（左=濃色ラベル。中身は枠で囲まず、余白で整列させる） */
.matrix{display:grid;grid-template-columns:var(--mx-label,140px) repeat(var(--mx-cols,2),1fr);
  gap:18px 20px;margin:28px 0 8px;min-width:560px}
.mx-h{font-size:11.5px;font-weight:600;color:var(--ink-2);text-align:center;
  align-self:end;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.mx-label{background:var(--accent);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:2px;
  font-size:12px;font-weight:700;line-height:1.5;padding:12px 10px}
.mx-label small{font-size:10px;font-weight:600;opacity:.7;letter-spacing:.08em}
.mx-label.alt{background:var(--fill-gray);color:var(--ink)}
.mx-cell{font-size:12px;line-height:1.75}
.mx-cell ul{margin:0}
.mx-cell li{margin-bottom:5px}
/* ステージ型の列見出し（矢羽根ヘッダー。目標ステージだけ濃紺） */
.mx-h.stage{border-bottom:0;background:var(--fill-gray);color:var(--ink);
  padding:7px 8px;line-height:1.4;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.mx-h.stage.first{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.mx-h.stage.on{background:var(--accent);color:#fff}
.mx-h.stage small{display:block;font-size:9.5px;font-weight:600;opacity:.7;letter-spacing:.06em}

/* 強調（色の強調はアクセント1色・重要な数字だけ） */
b,strong{font-weight:700}
.em{color:var(--accent);font-weight:700}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}

/* フッター */
.doc-footer{margin-top:88px;padding-top:20px;border-top:1px solid var(--hairline);
  font-size:11.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* 印刷（A4で配れる） */
@media print{
  @page{size:A4;margin:16mm}
  body{border-top-width:4px}
  .page{max-width:none;padding:0}
  .page>section{margin-top:48px;padding-top:32px}
  table,figure,.kpis,.chevrons,.roadmap,.matrix{break-inside:avoid}
  a{text-decoration:none}
}

Document skeleton (HTML structure)

<div class="page">

  <header class="doc-header">
    <p class="eyebrow">社外秘 ／ Draft などの取扱い表記</p>
    <h1>結論が伝わるタイトル</h1>
    <p class="lead">この資料が何を扱い、何を決めるためのものかを1〜2文で。</p>
    <div class="doc-meta"><span>日付</span><span>作成部署</span><span>宛先</span></div>
  </header>

  <section>
    <h2>エグゼクティブサマリー</h2>
    <ol class="summary">
      <li><b>結論。</b>補足1文。</li>
      <li><b>根拠の要点。</b>補足1文。</li>
      <li><b>依頼・次の判断。</b>補足1文。</li>
    </ol>
  </section>

  <section>
    <h2><span class="no">01</span>セクション見出し（トピック）</h2>
    <p class="msg">このセクションで言いたいこと1文（so what）。</p>
    <!-- 根拠: .kpis / table / figure（チャート・矢羽根・ロードマップ等の図解） / 本文 -->
  </section>

  <!-- 02, 03 … 最後は「推奨アクション」（アクション・オーナー・期限の表） -->

  <footer class="doc-footer">
    <span>資料名</span><span>出所・注記</span>
  </footer>

</div>
  • The summary isconclusion → evidence → requestthese 3 points. Do not write the body first and then write the summary at the end; decide it first
  • Section headings are topics,.msg is the claim.Make it a state where reading only the headings reveals the flow, and reading only .msg reveals the conclusionset to
  • The final section must always be "Next Actions" (who, what, by when)

Component conventions

Tables

  • Do not draw vertical rules. Header top 2px + bottom 1px black, row separators only thin gray rules
  • Numeric columns are class="num" right-align, use thousand separators, and specify units in the header (e.g., "Sales (100 million yen)")
  • For rows you want to emphasize, tr.total(light background + bold) up to 1 row

KPI / large numbers

  • Do not put in boxes..kpis Arrange them horizontally, with a single thin vertical rule between them
  • Numbers in the accent color, units in <small>, labels small and gray

Charts (SVG recommended)

  • For the color scheme, "make all supporting elements gray, and only the one main series dark navy var(--accent)". Do not color-code with rainbow colors (Using grays differently: surface #c9ccd1/ broad background #e7e9ec/ lines #a8adb5）
  • Do not create a legend box; place series names and valuesdirectly near the bars or lines
  • 3D, shadows, gradients, and outer frames around charts are prohibited. Axis lines and grids should be thin gray and kept to a minimum
  • Only when showing negative values or deterioration, brick color #a33c2e may be added (for negative numbers use ▲8.0 notation)
  • SVGは viewBox and on the CSS side use figure svg{width:100%;height:auto} to make it variable

Diagram patterns (creating consulting-style diagrams in HTML)

Choose the pattern based on "what you want to communicate." Do not freely draw boxes and arrows.

What you want to communicate Pattern Implementation
Process / value chain / phases Arrow chevrons .chevrons HTML/CSS
Timeline for plans, schedules, and structures Roadmap .roadmap HTML/CSS（grid）
Organizing issues × perspectives, comparing text cells Framework table .matrix HTML/CSS（grid）
Maturity / stage comparison (current → target) Framework table + arrow chevron headings .mx-h.stage HTML/CSS（grid）
Competitive / market positioning (2 axes + scale) Bubble map SVG
Breakdown of increases/decreases (why it increased/decreased) Waterfall SVG
Trends / transitions (actuals + forecast) Line chart SVG
Quantity comparison / ranking Horizontal bar SVG

The common rules are the same for every pattern: supporting elements in gray, only the main element in dark navy, direct labels, and figure/table numbers with sources. For implementation examples, see assets/report.template.html(SVG-based = Figures 1, 2, 3, 6; arrow chevrons = Figure 5, framework table = Figures 7, 8, roadmap = Figure 10).

Arrow chevrons (.chevrons）

  • Use up to 5 phases. Only our company's domain / focus phases .on(dark navy); others gray
  • Put supplementary notes inside each chevron with <small> in one line. Do not substitute arrow images or → characters
<div class="fig-scroll"><div class="chevrons">
  <div class="chev">集荷・入庫</div>
  <div class="chev on">保管<small>温度管理・薬機法</small></div>
  <div class="chev on">出荷<small>当日カットオフ</small></div>
  <div class="chev">配送<small>パートナー連携</small></div>
</div></div>

Roadmap (.roadmap）

  • Columns = time (months, quarters), rows = workstreams. When changing the number of columns, rewrite repeat(6,1fr) rewrite
  • Bar positions are style="grid-column:開始列/終了列"(the first column is the lane name. The time axis starts from the second column)
  • Only the main bars .on(dark navy). Milestones are .rm-ms で ◆ 名称(do not use emoji)
<div class="fig-scroll"><div class="roadmap">
  <div class="rm-row rm-head">
    <div class="rm-lane"></div>
    <div class="rm-h">10月</div><div class="rm-h">11月</div><div class="rm-h">12月</div>
    <div class="rm-h">1Q</div><div class="rm-h">2Q</div><div class="rm-h">3Q</div>
  </div>
  <div class="rm-row">
    <div class="rm-lane">前提条件の充足</div>
    <div class="rm-bar" style="grid-column:2/4">採用契約・意向表明</div>
  </div>
  <div class="rm-row">
    <div class="rm-lane">投資判断</div>
    <div class="rm-ms" style="grid-column:4">◆ 最終判断</div>
  </div>
  <div class="rm-row">
    <div class="rm-lane">拠点立ち上げ</div>
    <div class="rm-bar on" style="grid-column:5/7">改修→稼働</div>
  </div>
</div></div>

Framework table (.matrix) — dark label on the left, contents aligned with whitespace

  • A pattern that reproduces the consulting staple "dark box at the left edge = row label, evenly spaced columns on the right" (issue list, comparison table, stage table)
  • Fill only the left row labels and (if any) the target stage column headers. Do not add borders or backgrounds to the content cells; create a state where rows and columns appear aligned using only grid whitespace. The essence is not to give the impression of "boxes lined up"
  • Columns are equal width (1fr). The number of columns is --mx-cols, and the label width is adjusted with --mx-label . Cells are short text or "–" bullet points
  • Use dark navy as the main color for only one system per diagram. If the row labels are dark navy, make the stage headers gray; if the target stage is dark navy .on , then drop the row labels to .alt(gray)
  • Usage: For numerical comparisons use table, for comparisons of prose or perspectives use .matrix
<div class="fig-scroll"><div class="matrix"><!-- 列数は --mx-cols で変更（既定2列） -->
  <div class="mx-h"></div>
  <div class="mx-h">想定される影響</div>
  <div class="mx-h">対応方針</div>
  <div class="mx-label"><small>01</small>倉庫人員の未充足</div>
  <div class="mx-cell">立ち上げ遅延（最大12ヶ月）</div>
  <div class="mx-cell"><b>着手前に</b>採用パートナー2社と契約</div>
</div></div>

For a stage comparison, make the column headers chevrons (the first is .first, and only the target stage is .on）:

<div class="matrix" style="--mx-cols:4;--mx-label:96px">
  <div></div>
  <div class="mx-h stage first"><small>STAGE 0</small>参入準備</div>
  <div class="mx-h stage"><small>STAGE 1</small>単拠点稼働</div>
  <div class="mx-h stage on"><small>STAGE 2</small>面展開</div>
  <div class="mx-h stage"><small>STAGE 3</small>全国基盤化</div>
  <div class="mx-label alt">顧客</div>
  <div class="mx-cell">…</div><div class="mx-cell">…</div>
  <div class="mx-cell">…</div><div class="mx-cell">…</div>
</div>

Bubble map (SVG)

  • Axes are two lines, left and bottom, plus arrowheads, with only a faint cross guide in the center. Do not color-code the quadrants
  • Bubbles are supporting gray (opacity:.85), and only our company/the main subject is dark navy. Names are labeled directly inside the bubble or immediately adjacent
  • Explain the meaning of size (e.g., sales scale) in the source line. Do not create a size legend

Waterfall (SVG)

  • Decrease = brick color (▲notation), increase = dark navy, total = black. Connect the bars with thin gray lines at the operational level
  • Draw a thin zero line, and label values directly outside each bar. No Y-axis scale is needed

Line chart (SVG)

  • Only one main line in dark navy (thicker, 2.5px), comparison lines in gray (2px). Instead of a legend,series name + latest value at the right end of the line
  • The forecast period switches to a stroke-dasharray dashed line, and state "dotted line is forecast" in the source line
  • Horizontal grid up to about 3 faint gray lines. Do not draw vertical grid lines

Notes and sources

  • When showing data, always add .src(source). If it is an estimate, write that it is an estimate
  • Supplementary notes use .note(thin gray left rule). Do not make it a colored warning box

Procedure

  1. Determine the purpose (report / analysis memo / proposal, etc.). If specified, replace only one accent color with the client color. Do not ask clarifying questions; proceed with the default (dark navy)
  2. Pour the content into the skeleton (summary → numbered sections → recommended actions)
  3. Use the above CSSas is without modificationUse (only minor layout adjustments may be added. Do not add new colors, borders, or shadows)
  4. Pass the quality check below before output

Quality check (before output)

  • Cards enclosed by borders:0(rules are limited to "horizontal rules" and "vertical rules for notes/KPIs")
  • Colors used are limited to ink tones plus one accent color (if a third color appears, cut it)
  • 0 gradients, 0 shadows, 0 emoji, 0 rounded corners
  • Body text is left-aligned, line length is 42em or less
  • Each section has a .msg(message line)
  • Numbers are right-aligned, use digit separators, and specify units; tables have sources
  • Diagrams follow the patterns (arrow feathers, roadmap, framework table, bubble, waterfall, line chart, horizontal bar), and the color scheme is supporting gray plus the main dark navy (only negative values in brick red), with direct labels and no legend box
  • In framework tables, only row labels (plus target stages) are filled, and content cells have no borders or background
  • In print preview (A4), tables and figures do not break apart

Tone

  • Concise, practical. Do not embellish with decoration; let whitespace and hierarchy carry the reading
  • Completed sample: assets/report.template.html(open it in a browser to check it as is)