huashu-keynote-black

Open Design's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.

Jump to install

Repository: nexu-io/open-design
Last source activity: July 14, 2026 at 08:43
Detected SKILL.md language: English
Stars: 85,523
Forks: 10,027

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/nexu-io/open-design --skill huashu-keynote-black

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

4 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

hatch-pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.

2026-08-13

od-media-generation

Default reference pipeline for image, video, and audio projects — routes through media-image / media-video / media-audio atoms based on the project kind, wraps the output in a live artifact, and devloops on critique-theater until the score converges.

2026-08-13

hatch-pet

2026-08-13

View all from this repository

Keynote Black · 黑场大数字

Produce a single-file, black-stage keynote deck. You are directing a launch event, not writing a document: the screen is a stage, every page is one beat, and the audience must be able to read it from the last row. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.

Generated from the「黑底巨型数字剧场 / Black Big-Number Stage」entry (大胆派, 还原 97%) of references/design-styles.md in huashu-design by 花叔 (alchaincyf), MIT licensed — references: Steve Jobs' 2007 iPhone keynote, Lei Jun's Xiaomi SU7 Ultra launch, Spotify Wrapped, Presentation Zen. The upstream entry is a written spec; this plugin realizes it as a full multi-section deck while preserving its DNA.

Not to be confused with siblings: dir-key-nav-minimal rotates 8 colored monochrome pages (indigo/cream/crimson/jade…) — this deck is constant pure black with one accent and no color rotation; studio is a black + electric-yellow design-studio text style with no big numbers; ppt-keynote is a light generic Keynote card deck.

Hard spec (locked — violating any line is a regression)

Canvas & runtime

One <div id="stage"> fixed at 1920 × 1080 px, centered with position: fixed; top: 50%; left: 50%; a fit() function applies translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on load and resize. All inner layout in px — the scaler owns responsiveness.
Each page is one <section class="slide"> inside #stage with a data-screen-label="01 封面"-style label; exactly one slide carries .active. There are no light pages — every page is the black stage.
Navigation (keep the script verbatim): ←/↑/PageUp previous, →/↓/Space/PageDown next, Home/End first/last; #/N hash routing (1-indexed) read on load + hashchange, written via history.replaceState; click left third = back, rest = forward; fixed counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe via file://.

Design tokens (`:root` — keep the names; only `--accent` may change)

Token	Value	Role
`--stage`	`#000000`	the stage — every page background
`--ink`	`#FFFFFF`	primary type, pure white only
`--accent`	`#FF6900`	the one accent — deck-wide single choice
`--muted`	`#9B9B9B`	captions / secondary lines
`--faint`	`#5F5F5F`	whisper labels, footnotes
`--line`	`#2A2A2A`	hairlines, capsule borders
`--bar-base`	`#3A3A3A`	losing / baseline comparison bar
`--sans`	`'Inter', 'Geist', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif`	the only family

--accent is a single choice per deck from exactly three values: Mi orange #FF6900, Spotify green #1ED760, Apple blue #2997FF. Mixing two of them in one deck is the cardinal sin of this style.
Fonts load via one Google Fonts @import (Inter + Noto Sans SC); no other external resource of any kind.

Signature devices (the visual DNA — every deck must show them)

One idea per screen: each page centers one element with flex — one word, one number, one sentence, or one comparison. If a page needs a paragraph, it needs to become two pages.
Giant numeral theater: hero numbers are 320–460px, weight 900, tracking ≈ −0.04em, font-variant-numeric: tabular-nums, pure white, with a small uppercase unit beside or below — the unit (or one glyph) may take the accent. Exactly one quiet --muted caption line underneath.
One-word manifesto: 240–300px weight-900 word ending in an accent full stop (<span class="a">。</span>), with one whisper line below.
Stage spotlight: a single faint radial-gradient(closest-side, rgba(255,255,255,.05), transparent) ellipse behind the hero element (.spotlight). This is the only decoration allowed — no other gradients, no photos, no emoji, no icon fonts, no shadows, no border-radius (runtime counter pill excepted).
Whisper top label: 12px / 600 / 4px-tracking uppercase --faint label centered at the top of every page (event name · chapter). It is chrome, not content — keep it nearly invisible.
Accent-vs-grey comparison bars: .vs-row = white 20px label left, full-width --line-hairline-topped track, accent fill for the subject vs --bar-base fill for the baseline, values printed at the right end in tabular-nums (accent value white-hot, baseline value --muted). The page's subject is always the accent bar.
Price reveal: small struck-through --muted expectation line above a giant white price whose currency glyph is the accent. The deck's climax.

Layout enumeration (use 5+ per deck, never one layout everywhere)

Layout	Role
`cover`	whisper event label + product name with accent full stop + one sub line
`agenda`	"今晚，只讲三件事。" — 3 numbered rows, accent numerals, hairline-separated
`one-word`	240–300px single word + accent 。 + whisper subtitle
`big-number`	320–460px numeral + uppercase unit + one caption (the workhorse — use 2–3)
`versus`	subject vs baseline spec bars, accent vs `--bar-base`, tabular values
`quote`	64–88px white statement, one phrase in accent, attribution in `--faint`
`price`	strikethrough expectation + giant price, accent currency glyph
`one-more-thing`	the classic teaser line + one whisper reveal
`closing`	「谢谢。」-scale farewell + key-hint capsule

Typography & scale (read from the last row)

Geometric bold sans only, weights 700–900; headlines 96–180px, hero words 240–300px, hero numbers 320–460px, all with negative tracking (−0.02 to −0.05em). Captions 20–24px --muted; whisper labels 12–13px uppercase 4px-tracking --faint. Nothing between 24px and 64px — this style has no "medium" type; it whispers or it shouts.
Every digit everywhere sits in tabular-nums. Large numbers take thin comma grouping (1,024).
Chinese copy uses 「」 quotes; the accent is applied to a single glyph or a single phrase, never a whole headline.

Rhythm & discipline

Default 10 pages (8–11 allowed). Sequence builds like a launch event: cover → agenda → alternating word/number beats → versus → quote → price reveal → one more thing → closing. Place the biggest number and the price in the back half — the deck must escalate.
Accent budget: at most one accent device per page; pages with none are encouraged. Pure black + pure white carries the style; the accent is the laser pointer, not the lighting rig.
Real content only — the user's actual words and numbers; missing data gets an honest  placeholder, never invented statistics. (The seed deck's 「曜石 YAO」 launch is fictional demo content and must be fully replaced.)

Workflow

Clarify once: topic, audience, page count, the ONE accent, and which 2–3 numbers are the protagonists (plus the price, if there is one). This style lives and dies by its hero numerals — pick them before any page.
Copy example.html, retitle, then replace each section's content following the layout enumeration. Keep tokens, spotlight, whisper labels, and the script intact. Change --accent only to one of the three sanctioned values.
For ≥ 5 pages, showcase first: build the cover + one big-number page, confirm the grammar, then batch the rest.
Self-check before delivery: arrow through every page; counter and #/N hash stay in sync; no overflow beyond 1920×1080; one idea and ≤ 1 accent device per page; every digit tabular; versus bar widths match their printed values proportionally; no second accent anywhere; no leftover demo (「曜石」/「YAO」) text; grep for TODO.

name	huashu-keynote-black
en_name	Run an All-Hands Town Hall like a World-Class Founder-CEO
zh_name	像世界级创始人 CEO 一样开全员大会
description	Open Design's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.
en_description	Open Design's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.
zh_description	像世界级创始人 CEO 一样开全员大会——一份可商业交付的企业战略 Deck，围绕真实主题、证据链与决策目标组织。
tags	["corporate-strategy","board-pre-read-deck","strategy","board","business-review","decision-deck","commercial-slide-agent","huashu-keynote-black"]

name	huashu-keynote-black
en_name	Run an All-Hands Town Hall like a World-Class Founder-CEO
zh_name	像世界级创始人 CEO 一样开全员大会
description	Open Design's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.
en_description	Open Design's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.
zh_description	像世界级创始人 CEO 一样开全员大会——一份可商业交付的企业战略 Deck，围绕真实主题、证据链与决策目标组织。
tags	["corporate-strategy","board-pre-read-deck","strategy","board","business-review","decision-deck","commercial-slide-agent","huashu-keynote-black"]

huashu-keynote-black

Source facts

Install options

Review the source files

More from this repository

More from this repository

Keynote Black · 黑场大数字

Hard spec (locked — violating any line is a regression)

Canvas & runtime

Design tokens (:root — keep the names; only --accent may change)

Signature devices (the visual DNA — every deck must show them)

Layout enumeration (use 5+ per deck, never one layout everywhere)

Typography & scale (read from the last row)

Rhythm & discipline

Workflow

Design tokens (`:root` — keep the names; only `--accent` may change)