nexu-io/open-design
Open Design's annual letter to its community: the year's story, what it learned, and where it's going next. Built as a decision-grade corporate strategy deck for community, contributors, investors.
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/huashu-annual-letter"Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Produce a single-file, letter-grade HTML deck in the Stripe Annual Letter genre: a published letter you read, not a template you skim. Prose flows in serif paragraphs; numbers live in inline data cards and giant display anchors. The visual system, canvas contract, and navigation…
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/huashu-annual-letter"The pinned source contains enough sections and task detail for a source-grounded deep guide; automated content is still not an independent test.
968 source words · 10 usable sections
Design process
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
1. Clarify once (skip for small edits): letter type, audience, the year's real numbers and 2–4 narrative chapters, tone. One batch of questions. 2. Real content only. Use the user's actual material and real metrics; never lorem ipsum, never invented statistics. Missing data gets…
cover masthead page · contents letter outline rows · salutation prose opening with drop cap · display-number anchor · prose+cards running text with inline data cards · chart minimal SVG figure · quote full-page citation · metrics-panorama data-card grid with footnote · closing s…
One fixed at 1920 × 1080 px, centered with
Each page is one directly inside stage, with a
Fonts via Google Fonts @import: Newsreader (display, incl. italic),
SkillSignal prompt templates
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Source-grounded prompt
Use for a design task while explicitly checking the source sections.
Use huashu-annual-letter for this design task: [task]. Inputs and constraints: [details]. Work through these pinned SKILL.md sections: “Workflow”, “Hard spec (locked — violating any line is a regression)”, “Canvas & scaling”, “Slides & navigation runtime (do not rewrite the script)”, “Design tokens (in :root, keep the names — re-theme by changing values only)”. Cite the concrete requirements that shape each step, do not invent capabilities absent from the source, and verify the result against: [acceptance criteria].
Design checklist
The source section “Workflow” has been checked.
The source section “Hard spec (locked — violating any line is a regression)” has been checked.
The source section “Canvas & scaling” has been checked.
The source section “Slides & navigation runtime (do not rewrite the script)” has been checked.
Static permission evidence
These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.
Choose a different workflow
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailWhen the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailGrounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
Produce a single-file, letter-grade HTML deck in the Stripe Annual Letter genre: a published letter you read, not a template you skim. Prose flows in serif paragraphs; numbers live in inline data cards and giant display anchors. The visual system, canvas contract, and navigation…
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/huashu-annual-letter". Inspect the command and pinned source before running it.
Static rules flagged read-files in the source; the page lists the matching lines and excerpts.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Write and maintain DESIGN.md + PRODUCT.md — captures visual decisions and interaction patterns so design tasks stay consistent across sessions without re-scanning past work.
Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.
Produce a single-file, letter-grade HTML deck in the Stripe Annual Letter
genre: a published letter you read, not a template you skim. Prose flows in
serif paragraphs; numbers live in inline data cards and giant display anchors.
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, and never introduce colors or fonts outside
this spec.
Adapted from the editorial-longform style (references/design-styles.md,
安静派 · 杂志编辑长文流 / Editorial Longform) of
huashu-design by
花叔 (alchaincyf), MIT licensed. Reference lineage: Stripe Annual Letter,
Amazon six-page narrative memos, Stripe Press.
<div id="stage"> fixed at 1920 × 1080 px, centered with
position: fixed; top: 50%; left: 50%.fit() function scales the stage to the viewport:
scale = min(innerWidth / 1920, innerHeight / 1080), applied as
translate(-50%, -50%) scale(s), re-run on resize. Letterboxed, never
cropped.vw/vh/% for type) —
the scaler owns responsiveness.<section class="slide"> directly inside #stage, with a
data-screen-label="01 刊头"-style label (1-indexed)..active. No .dark pages in this theme —
every page sits on cream paper; rhythm comes from density, not theme flips.←/↑/PageUp previous · →/↓/Space/PageDown next ·
Home/End first/last. Hash routing #/N (1-indexed) read on load and
hashchange, written via history.replaceState. Click: left third back,
rest forward. Fixed counter pill bottom-right, key-hint bottom-left.file:// inside
a sandboxed iframe.:root, keep the names — re-theme by changing values only)--paper: #FBFAF8; /* cream paper, every page */
--panel: #FFFFFF; /* data-card surface */
--ink: #232036; /* deep ink text */
--ink-70: rgba(35, 32, 54, 0.72); /* prose body */
--ink-45: rgba(35, 32, 54, 0.46); /* captions, chrome */
--hairline: rgba(35, 32, 54, 0.12); /* all rules */
--accent: #635BFF; /* Stripe purple — the ONLY accent */
--accent-soft: rgba(99, 91, 255, 0.08); /* tint panels, quote marks */
--serif: "Newsreader", "Source Serif 4", "Noto Serif SC", Georgia, serif;
--serif-text: "Source Serif 4", "Newsreader", "Noto Serif SC", Georgia, serif;
--sans: "Inter", "Noto Sans SC", -apple-system, sans-serif;
@import: Newsreader (display, incl. italic),
Source Serif 4 (prose), Noto Serif SC (CJK serif), Inter, Noto Sans SC..num class sets
font-variant-numeric: tabular-nums; every metric, year, and display
number uses it.var(--serif) (Newsreader/Noto Serif SC), weight 500–600 —
letters are set elegantly, not boldly; key words get class="hl" (accent),
never the whole heading.| Device | Spec |
|---|---|
| Prose measure | paragraphs max-width: 980px (≈65ch), serif 25–27px, line-height: 1.9, text-align: justify optional |
| Drop cap | first paragraph of the letter body: ::first-letter serif, ~3 lines tall, accent color |
| Inline data card | --panel bg, 1px hairline, 2–3px accent top rule, small-caps Inter label + large tabular serif numeral + one-line caption; floated beside or gridded next to prose |
| Display-number anchor | one giant tabular numeral 180–280px in accent, alone on the page with a one-line setup above and a footnote below |
| Minimal chart | inline SVG only: single purple line/area on hairline baseline, direct labels on data points, no grid mesh, no legend, no chartjunk |
| Quote page | oversized serif quote (60–76px, weight 500) with an accent-soft giant quotation mark, attribution in small-caps Inter |
| Signed closing | farewell prose + serif-italic signature block + key-hint capsule |
cover masthead page · contents letter outline rows · salutation prose
opening with drop cap · display-number anchor · prose+cards running text
with inline data cards · chart minimal SVG figure · quote full-page
citation · metrics-panorama data-card grid with footnote · closing
signature page.
<!-- 待用户提供 --> placeholder.example.html, retitle, swap token values only if the user has a
brand, then replace each section's content following the layout
enumeration. Keep letterhead/footer chrome and the script intact.#/N stay in sync; no overflow; prose stays inside the 980px measure;
numerals all tabular; grep for leftover placeholders.✦ ✓ → ·) only.