junhao-frontend-style

name

junhao-frontend-style

description

This skill should be used when creating or redesigning HTML pages, reports, dashboards, research SOPs, or frontend artifacts for Junhao Zhang. It captures the user's preferred Aiforce-style research dossier visual language: warm paper background, fixed left table of contents, editorial serif Chinese headings, carbon-black briefing panels, red/teal/ochre accents, numbered section blocks, matrix tables, sprint timelines, and practical PM-facing readability.

junhao-frontend-style

When to use

Use this skill when producing or redesigning frontend-facing artifacts for Junhao, especially:

• HTML research reports, SOP documents, dashboards, product proposals, demo pages, and strategy documents.
• Requests that say a page is “不好看”, “改好看点”, “像那个页面”, “参考飞书/Aiforce风格”, or “用我喜欢的风格”.
• Work that already uses frontend-design but needs a more precise personal visual direction.

Visual direction

Adopt a research dossier / paper workbench style:

• Overall feeling: warm, editorial, rigorous, slightly academic, like a high-quality internal research memo rather than a generic SaaS dashboard.
• Use only actually accessible reference content. If the user provides an authenticated or login-gated reference page, stop and ask for authorization, a screenshot, or exported content before extracting style. Do not infer the target style from a login shell or fallback page.
• Reference style cues from the user's local Aiforce export: warm grid paper background, sticky left navigation, square red brand mark, serif Chinese headings, red/teal/ochre/green/cobalt semantic accents, numbered section plates with hard offset shadow, matrix tables, sprint timeline list, thin borders, small radius. Use carbon/black for text, borders, labels, offset shadows, and contrasting panels (e.g. briefing board, template headers).
• User preference: practical PM reading experience. Prioritize fast scanning, strong hierarchy, clear sections, and high-density but not cramped information.

Core design tokens

Prefer these tokens unless the user specifies another theme:

:root {
  --paper: #f4efe2;
  --paper-deep: #e7dcc5;
  --ink: #25231f;
  --ink-2: #4d463c;
  --muted: #746b5d;
  --line: rgba(37, 35, 31, 0.18);
  --line-strong: rgba(37, 35, 31, 0.34);
  --panel: rgba(255, 252, 245, 0.88);
  --panel-solid: #fffaf0;
  --carbon: #191814;
  --red: #b43d2f;
  --teal: #147070;
  --green: #52743d;
  --ochre: #b9781e;
  --cobalt: #2d5f88;
  --soft-red: #fae4db;
  --soft-teal: #dcefed;
  --soft-green: #e5edd8;
  --soft-ochre: #f4e5c7;
  --soft-cobalt: #dce8ef;
  --shadow: 0 22px 60px rgba(64, 47, 26, 0.12);
  --radius: 8px;
  --sidebar: 282px;
  /* Dark panel tokens — used for briefing board, template headers, table headers */
  --dark-panel: rgba(25, 24, 20, 0.94);
  --dark-panel-text: #fffaf0;
  --dark-panel-muted: rgba(255, 250, 240, 0.72);
  --dark-panel-line: rgba(255, 250, 240, 0.16);
  --dark-panel-cell-bg: rgba(255, 250, 240, 0.06);
}

Typography:

• Use IBM Plex Sans, PingFang SC, Microsoft YaHei, sans-serif for body text.
• Use Noto Serif SC, Songti SC, STSong, serif for h1/h2/h3 headings to create a research-report tone.
• Use large hero titles around 56-64px desktop, 36-46px mobile, line-height 1.12-1.18.
• Body text: 15-16px, line-height 1.68-1.78.
• Tables and labels: 12-14px, with tabular numbers for numbered navigation and day markers.
• Import fonts via @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Serif+SC:wght@600;700;900&display=swap");

Body background — warm grid paper with color radials:

body {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(37,35,31,0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(37,35,31,0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 18% 12%, rgba(180,61,47,0.11), transparent 32rem),
    radial-gradient(circle at 86% 18%, rgba(20,112,112,0.12), transparent 30rem),
    var(--paper);
  text-rendering: geometricPrecision;
}

Body texture overlay (adds paper grain, fixed position):

body::before {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  content: ""; opacity: 0.34; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(37,35,31,0.025), rgba(37,35,31,0.025) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(37,35,31,0.02), rgba(37,35,31,0.02) 1px, transparent 1px, transparent 6px);
}

Layout rules

1. Use a two-column document shell on desktop: sticky left table of contents (--sidebar: 282px) and main document content.
2. Start with a large hero card: left hero copy (eyebrow tag + h1 + lead paragraph + north-star callout + action buttons), right dark briefing board with 2x2 metric cells and metadata list.
3. Use warm paper/grid background with red/teal radial color washes, not blue SaaS background.
4. Use section headers with a numbered square plate and hard black offset shadow.
5. Use cards for principles, matrix tables for comparisons, timeline/sprint lists for SOP steps, and light template shells for reusable templates. Use --panel, --panel-solid, or soft accent backgrounds for content areas; use --carbon for contrasting panels (briefing boards, template headers, table headers), text, borders, labels, and shadows.
6. Maintain generous vertical rhythm: sections start with 58-78px top padding; cards use 16-22px internal padding.
7. Use red as primary emphasis, with teal/ochre/green/cobalt as semantic accents. Avoid rainbow usage; each accent should mean something.
8. Make content scannable in 5 seconds: left TOC, strong section numbers, compact tables, deliverable strips, final output block.

Content design rules

For Junhao's business/technical documents, structure output as:

1. 一句话结论 / goal statement.
2. Background and problem definition.
3. User or system state diagram / lifecycle funnel.
4. Method comparison table.
5. SOP steps.
6. Architecture or execution hypothesis.
7. Metrics and evaluation plan.
8. Next actions / checklist.

Keep wording concise and decision-oriented. Avoid marketing filler.

HTML implementation steps

1. Preserve the user's original content meaning and all important business terms.
2. Replace generic blog/SaaS styling with research dossier styling.
3. Implement with a single standalone HTML file unless a framework is explicitly required.
4. Use CSS variables and semantic component classes: .layout, .toc, .document, .hero, .hero-copy, .briefing-board, .brief-grid, .brief-cell, .meta-list, .eyebrow, .north-star, .action-row, .tool-button, .section, .section-number, .section-head, .principle, .gate, .matrix, .sprint-list, .sprint-item, .sprint-day, .deliverable, .template-shell, .template-head, .template-grid, .field, .tag, .scroll-progress, .mobile-nav, .footer, .diagram-wrap, .table-wrap.
5. Add responsive behavior with three breakpoints: 1180px (hide sidebar, show mobile-nav), 980px (single column hero/cards), 640px (compact typography and padding). Tables remain readable with horizontal overflow.
6. Add minimal motion only if useful: page fade-in or card hover lift. Do not add distracting animations to business reports.
7. Render mathematical formulas with LaTeX, not plain text. Configure MathJax when the artifact includes formulas, e.g. window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\\\(', '\\\\)']] }, svg: { fontCache: 'global' } } plus the MathJax SVG script. Do not wrap formulas in <code>, because MathJax skips code/pre elements; use <span class="math">$...$</span> or <div class="math">$...$</div> instead.
8. Verify visual density: no giant decorative blank regions after the hero; no crowded paragraph walls.
9. Add print stylesheet: remove background, sidebar, progress bar, buttons; set body white/black; remove box-shadows; use break-inside: avoid on major blocks.

Component reference

Scroll progress bar

Top-of-page reading progress indicator, fixed position:

.scroll-progress { position: fixed; top: 0; left: 0; z-index: 40; width: 100%; height: 5px; background: transparent; }
.scroll-progress span { display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--red), var(--ochre), var(--teal));
  box-shadow: 0 0 18px rgba(180, 61, 47, .35); }

Update width via JS on scroll: progress.style.width = (scrollY / (scrollHeight - innerHeight) * 100) + '%'.

Hero card

Two-column grid: .hero-copy left, .briefing-board right. Decorative rotated grid pseudo-element:

.hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 26px;
  min-height: 720px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,250,240,.94), rgba(244,239,226,.68)), var(--panel-solid);
  box-shadow: var(--shadow); }
.hero::after { position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; content: "";
  border: 1px solid rgba(37,35,31,.12);
  background: linear-gradient(90deg, rgba(37,35,31,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(37,35,31,.06) 1px, transparent 1px) 0 0 / 28px 28px;
  transform: rotate(-12deg); }

Eyebrow

Capsule-shaped label above the hero title, with a dark circle brand mark:

.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 32px;
  margin-bottom: 26px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,250,240,.75); color: var(--ink-2); font-size: 12px; font-weight: 700;
  text-transform: uppercase; }
.eyebrow::before { display: inline-grid; width: 24px; height: 24px; place-items: center;
  border-radius: 999px; background: var(--carbon); color: #fffaf0; content: "R";
  font-size: 12px; font-weight: 800; }

North-star callout

Red left-bordered highlight box for key conclusions/北极星:

.north-star { padding: 18px 20px 20px; border-left: 6px solid var(--red);
  background: rgba(250,228,219,.72); color: var(--ink-2); }
.north-star strong { color: var(--red); font-weight: 800; }

Action buttons

.tool-button { display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 6px;
  background: var(--ink); color: #fffaf0; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform 160ms ease; }
.tool-button.secondary { background: transparent; color: var(--ink); }
.tool-button:hover { transform: translateY(-1px); }

Briefing board (dark panel)

The right-side overview panel uses a carbon dark background, NOT a light panel:

.briefing-board { display: grid; align-self: start; align-content: start; gap: 18px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--dark-panel); color: var(--dark-panel-text); }
.briefing-board h2 { color: var(--dark-panel-text); font-size: 30px; }
.briefing-board p { color: var(--dark-panel-muted); font-size: 14px; }

Brief-grid / Brief-cell

2×2 metric grid inside the briefing board, each cell with a colored top border (red → teal → ochre → green):

.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brief-cell { min-height: 110px; padding: 14px; border: 1px solid var(--dark-panel-line);
  border-radius: 7px; background: var(--dark-panel-cell-bg); }
.brief-cell b { display: block; color: var(--dark-panel-text); font-size: 22px; line-height: 1.1; }
.brief-cell span { display: block; margin-top: 8px; color: rgba(255,250,240,.68); font-size: 12px; line-height: 1.45; }
.brief-cell:nth-child(1) { border-top-color: var(--red); }
.brief-cell:nth-child(2) { border-top-color: var(--teal); }
.brief-cell:nth-child(3) { border-top-color: var(--ochre); }
.brief-cell:nth-child(4) { border-top-color: var(--green); }

Meta-list

Key-value list inside briefing board (e.g. "不要做 / 先完成 / 周期 / 产出"):

.meta-list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--dark-panel-line); }
.meta-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--dark-panel-line); }
.meta-list dt { color: rgba(255,250,240,.52); font-size: 12px; font-weight: 700; }
.meta-list dd { margin: 0; color: var(--dark-panel-text); font-size: 13px; }

Section number plate

Square numbered block with hard offset shadow:

.section-number { display: grid; width: 70px; height: 70px; place-items: center;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--panel-solid);
  box-shadow: 8px 8px 0 var(--carbon); color: var(--red); font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; }

Matrix table

Full-width data table with carbon header:

.matrix th { position: sticky; top: 0; z-index: 1; background: var(--carbon); color: #fffaf0;
  font-size: 12px; font-weight: 800; text-transform: uppercase; }
.matrix td:first-child { color: var(--ink); font-weight: 800; }
.matrix tbody tr:hover { background: rgba(220,239,237,.42); }

Gate card

Top-colored-border card for grouped takeaways; cycles red/teal/ochre/green:

.gate { min-height: 176px; padding: 20px; border-top: 7px solid var(--red); }
.gate:nth-child(2) { border-top-color: var(--teal); }
.gate:nth-child(3) { border-top-color: var(--ochre); }
.gate:nth-child(4) { border-top-color: var(--green); }
.gate strong { display: block; margin-bottom: 10px; color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif; font-size: 19px; }

Template shell

Reusable card template with a dark header bar:

.template-shell { border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel-solid); box-shadow: var(--shadow); }
.template-head { display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--dark-panel); }
.template-head h3 { color: var(--dark-panel-text); }

Sprint list / Sprint item

Timeline with gradient vertical line (red → ochre → teal) connecting day badges:

.sprint-list::before { position: absolute; top: 16px; bottom: 16px; left: 37px; width: 2px;
  content: ""; background: linear-gradient(var(--red), var(--ochre), var(--teal)); }
.sprint-day { display: grid; width: 56px; height: 56px; place-items: center;
  border: 2px solid var(--carbon); border-radius: var(--radius); background: var(--paper);
  color: var(--red); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.deliverable { padding: 13px 14px; border-left: 4px solid var(--teal);
  border-radius: 0 6px 6px 0; background: var(--soft-teal); color: #174a45; font-weight: 700; }

Code inline

code { display: inline-block; max-width: 100%; padding: .08rem .36rem;
  border: 1px solid rgba(37,35,31,.12); border-radius: 4px; background: #fff7e9;
  color: #1f342e; font-family: "IBM Plex Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .91em; overflow-wrap: anywhere; }

Mobile nav

Sticky horizontal scrolling tag bar, hidden on desktop (>1180px), shown when sidebar is hidden:

.mobile-nav { display: none; }
@media (max-width: 1180px) {
  .toc { display: none; }
  .mobile-nav { position: sticky; top: 5px; z-index: 30; display: flex; gap: 8px;
    margin-bottom: 14px; padding: 10px; overflow-x: auto; border: 1px solid var(--line);
    border-radius: var(--radius); background: rgba(244,239,226,.92); backdrop-filter: blur(12px); }
  .mobile-nav a { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line);
    border-radius: 6px; background: rgba(255,250,240,.82); color: var(--ink);
    font-size: 13px; font-weight: 700; }
}

Footer

Simple closing with top border:

.footer { margin-top: 76px; padding: 22px 0 0; border-top: 1px solid var(--line-strong);
  color: var(--muted); font-size: 13px; }

Print stylesheet

@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; }
  body::before, .scroll-progress, .toc, .mobile-nav, .action-row, .tool-button { display: none !important; }
  .layout { display: block; width: 100%; }
  .document { padding: 0; }
  .hero, .table-wrap, .template-shell, .diagram-wrap, .principle, .gate, .sprint-item {
    box-shadow: none; break-inside: avoid; }
  .hero { min-height: auto; }
  .section { padding-top: 34px; }
}

Pitfalls

• Do not use blue SaaS cards when the user asks to match the Aiforce reference HTML; use the warm research dossier style instead.
• Do not use loud gradients, purple AI-slop backgrounds, neon effects, or over-decorated cards.
• Do not make the briefing board light-colored; the canonical style uses a dark carbon panel for the briefing board.
• Do not make every section look identical; vary between timeline, table, cards, and callouts.
• Do not let the visual style obscure the business logic.
• Do not use external fonts or CDN assets unless necessary; offline standalone HTML should render well. Exception: MathJax CDN is acceptable when formulas must render and no local renderer is available.
• Do not place LaTeX formulas inside <code> or <pre>; MathJax ignores them there and the page will show raw source.
• Do not claim to have accessed authenticated pages if only a login shell is visible. State access limits clearly and ask the user to authorize or provide reference screenshots before continuing.

Verification

Before delivering:

• Confirm the page feels like a warm research dossier: paper grid background with color radials, body texture overlay, sticky TOC, serif headings, dark briefing board, numbered section plates, matrix tables, and sprint timeline cards.
• Confirm the first screen explains the artifact's purpose and why it matters.
• Confirm all core content is preserved from the source.
• Confirm tables, SOP steps, and metrics are easy to scan.
• Confirm scroll progress bar is present and functional.
• Confirm responsive breakpoints work: sidebar hidden + mobile-nav shown at ≤1180px, single-column at ≤980px, compact at ≤640px.
• Confirm print stylesheet hides interactive elements and renders cleanly.
• If formulas exist, confirm they are rendered by MathJax instead of appearing as raw $...$ text.
• Preview the HTML locally and deliver the file as an attachment.