skillboardUpdated every 6 hours
skillboardProduce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
Produce a single-page document in the kami (紙 / 纸) design system. The aesthetic borrows from editorial print, technical white papers, and old typewritten correspondence — the goal is good content on good paper, not modern app UI.
Design system source of truth:
design-systems/kami/DESIGN.md. Read it before shipping. Tokens, type rules, the "ten invariants", and forbidden colors all live there.
A single self-contained HTML file with:
#f5f4ed) — never #ffffff.#1B365D), used on the
section number, the headline accent word, the left rule of the
manifesto, and the metric values. Anywhere else, ink-blue must
cover ≤ 5% of the document surface area.language parameter. No italic anywhere.font-variant-numeric: tabular-nums so
metric columns and pagination digits sit cleanly aligned.0 4px 24px rgba(0,0,0,0.05)).
No hard drop shadows, no neumorphism, no backdrop-filter blurs.#E4ECF5), never rgba() —
print renderers double-paint alpha tags.1. Eyebrow row — locale switcher · edition · version (12px sans uppercase)
2. Hero — display headline (96–106px serif 500), tagline (21px),
three hero-token chips (paper-tinted)
3. Manifesto — pull paragraph in serif 400, 20px, 1.65 LH, with
ink-blue left-rule and signature footer
4. Metrics row — 3-6 cells: value (24px serif 500 ink-blue, tabular-nums),
label (12px serif 500 olive)
5. Chapters — numbered (`01`, `02`, …) ink-blue serif 500 14px,
section title 28-32px, body 14-15px
6. Footer — kicker word (mega serif 500), license · year · contact,
three-column site index in 12px serif 500
Use AskQuestion (or equivalent) to collect the brand brief in
chunks. Don't dump the whole input list on the user; ask in two
rounds:
The language parameter controls which --serif stack is set on
:root. Pick based on the dominant language of the manifesto and
chapter body copy:
| language | --serif | Notes |
| :--------- | :-------------------------------------------------------- | :------------------------------------- |
| en | Charter, Georgia, Palatino, Times New Roman, serif | default |
| zh-CN | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia | letter-spacing 0.35px on body |
| ja | YuMincho, Hiragino Mincho ProN, Source Han Serif JP | also override --olive to #4d4c48 (YuMincho strokes are thinner) |
Inline mixed-script content is fine — the browser per-glyph fallback
chain handles it. Do not chain all three families inside one
font-family declaration; that dilutes character.
index.htmlOutput a single file with all CSS inline. Mirror the structure of
example.html and use only the tokens from
design-systems/kami/DESIGN.md. Do not invent new colors,
weights, or font families.
Component primitives the agent can drop in (all defined in the
example's <style> block):
.eyebrow, .label — sans-serif overlines.metric — value + label vertical pair.section-num + .section-title + .section-lede.tag.standard, .tag.brush — solid-hex tags (one brush max per page).quote — left-rule serif 500 quoteul.dash — en-dash bullets in ink-blue.code — ivory-bg, 1px-border code block.footer-kicker — mega serif 500 wordTag every editable element with data-od-id="<unique-slug>" so the
host app's comment mode can target it.
#f5f4ed), never #ffffff.#1B365D) covers ≤ 5% of visible surface — count
section numbers, the manifesto rule, the metric values, the
headline accent. Total ≤ 5%.slate-*, no #f3f4f6.font-weight: 700 or 900
anywhere on serif text.font-style: italic anywhere. Emphasis swaps to ink-blue
color or a .tag instead.font-variant-numeric: tabular-nums.#E4ECF5), never rgba().1px ring or a 0 4px 24px rgba(0,0,0,0.05)
whisper. No hard drop shadows.design-templates/kami-landing/
├── SKILL.md # this contract
├── README.md # human quick-start
└── example.html # canonical OpenDesign rendering
.tag.brush accent.--serif on :root, and let the
browser per-glyph fallback resolve mixed-script inline content.rgba() for tag fills — print renderers
double-paint alpha tags. Use the pre-blended solid hex from the
table in design-systems/kami/DESIGN.md §2.design-systems/kami/DESIGN.md — the full token spec.design-templates/kami-deck/ — sister skill that produces a
slide deck in the same kami language.tw93/kami — original
Claude skill (MIT) that the design system adapts.Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/kami-landing · pinned to the source commit
# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-landing" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-landing" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/kami-landing
Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
References parent-directory traversal, which can escape a target directory.
Evidence: ../· fingerprint fa08499e14d0113b