{"id":"8ea1305b-29c6-4661-91db-65d75a778866","shortId":"j6QYrq","kind":"skill","title":"kami-landing","tagline":"Produce 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","description":"# kami-landing\n\nProduce a single-page document in the **kami (紙 / 纸)** design system.\nThe aesthetic borrows from editorial print, technical white papers,\nand old typewritten correspondence — the goal is *good content on\ngood paper*, not *modern app UI*.\n\n> **Design system source of truth:** [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md).\n> Read it before shipping. Tokens, type rules, the \"ten invariants\",\n> and forbidden colors all live there.\n\n## What you get\n\nA single self-contained HTML file with:\n\n- **Warm parchment canvas** (`#f5f4ed`) — never `#ffffff`.\n- **Single chromatic accent** — ink-blue (`#1B365D`), used on the\n  section number, the headline accent word, the left rule of the\n  manifesto, and the metric values. Anywhere else, ink-blue must\n  cover ≤ 5% of the document surface area.\n- **Serif at one weight (500) for hierarchy** — Charter (EN),\n  TsangerJinKai02 / Source Han Serif (CN), or YuMincho (JA),\n  selected by the `language` parameter. **No italic anywhere.**\n- **Tight print rhythm** — line-heights 1.10–1.55, letter-spacing\n  per language (0 for EN, 0.35px for CN, 0.02em for JA).\n- **Numeric stacks set in `font-variant-numeric: tabular-nums`** so\n  metric columns and pagination digits sit cleanly aligned.\n- **Depth via 1px rings + whisper shadows** (`0 4px 24px rgba(0,0,0,0.05)`).\n  No hard drop shadows, no neumorphism, no backdrop-filter blurs.\n- **Tag fills as solid hex** (e.g. `#E4ECF5`), never `rgba()` —\n  print renderers double-paint alpha tags.\n- **Responsive** at 1280 / 980 / 768 / 560.\n\n## Page structure\n\n```text\n1. Eyebrow row     — locale switcher · edition · version (12px sans uppercase)\n2. Hero            — display headline (96–106px serif 500), tagline (21px),\n                     three hero-token chips (paper-tinted)\n3. Manifesto       — pull paragraph in serif 400, 20px, 1.65 LH, with\n                     ink-blue left-rule and signature footer\n4. Metrics row     — 3-6 cells: value (24px serif 500 ink-blue, tabular-nums),\n                     label (12px serif 500 olive)\n5. Chapters        — numbered (`01`, `02`, …) ink-blue serif 500 14px,\n                     section title 28-32px, body 14-15px\n6. Footer          — kicker word (mega serif 500), license · year · contact,\n                     three-column site index in 12px serif 500\n```\n\n## Workflow contract\n\n### 1. Gather brand brief\n\nUse `AskQuestion` (or equivalent) to collect the brand brief in\nchunks. Don't dump the whole input list on the user; ask in two\nrounds:\n\n1. Identity round — name, tagline, location, edition / version,\n   primary URL, dominant language.\n2. Content round — manifesto paragraph + signature, 3-6 metric\n   tiles, 3-5 chapter (title + lede + body) entries.\n\n### 2. Pick the language stack\n\nThe `language` parameter controls which `--serif` stack is set on\n`:root`. Pick based on the dominant language of the manifesto and\nchapter body copy:\n\n| `language` | `--serif`                                                 | Notes                                  |\n| :--------- | :-------------------------------------------------------- | :------------------------------------- |\n| `en`       | Charter, Georgia, Palatino, Times New Roman, serif         | default                                |\n| `zh-CN`    | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia   | letter-spacing 0.35px on body          |\n| `ja`       | YuMincho, Hiragino Mincho ProN, Source Han Serif JP        | also override `--olive` to `#4d4c48` (YuMincho strokes are thinner) |\n\nInline mixed-script content is fine — the browser per-glyph fallback\nchain handles it. Do **not** chain all three families inside one\n`font-family` declaration; that dilutes character.\n\n### 3. Write `index.html`\n\nOutput a single file with all CSS inline. Mirror the structure of\n[`example.html`](./example.html) and use only the tokens from\n`design-systems/kami/DESIGN.md`. Do **not** invent new colors,\nweights, or font families.\n\nComponent primitives the agent can drop in (all defined in the\nexample's `<style>` block):\n\n- `.eyebrow`, `.label` — sans-serif overlines\n- `.metric` — value + label vertical pair\n- `.section-num` + `.section-title` + `.section-lede`\n- `.tag.standard`, `.tag.brush` — solid-hex tags (one brush max per page)\n- `.quote` — left-rule serif 500 quote\n- `ul.dash` — en-dash bullets in ink-blue\n- `.code` — ivory-bg, 1px-border code block\n- `.footer-kicker` — mega serif 500 word\n\nTag every editable element with `data-od-id=\"<unique-slug>\"` so the\nhost app's comment mode can target it.\n\n### 4. Self-check before delivering\n\n- [ ] Page background is parchment (`#f5f4ed`), never `#ffffff`.\n- [ ] Ink-blue (`#1B365D`) covers ≤ 5% of visible surface — count\n      section numbers, the manifesto rule, the metric values, the\n      headline accent. Total ≤ 5%.\n- [ ] All grays are warm (R ≈ G > B). No `slate-*`, no `#f3f4f6`.\n- [ ] Serif weight stays at 500 — no `font-weight: 700` or `900`\n      anywhere on serif text.\n- [ ] No `font-style: italic` anywhere. Emphasis swaps to ink-blue\n      color or a `.tag` instead.\n- [ ] All numeric stacks (metric values, pagination, dates, financial\n      figures) carry `font-variant-numeric: tabular-nums`.\n- [ ] All tag fills are solid hex (e.g. `#E4ECF5`), never `rgba()`.\n- [ ] Shadows: at most a `1px` ring or a `0 4px 24px rgba(0,0,0,0.05)`\n      whisper. No hard drop shadows.\n- [ ] Headline ≤ 6 words at display size; CJK ≤ 8 characters.\n- [ ] At 768px and 560px the layout collapses to one column without\n      horizontal scroll.\n\n## Files in this skill\n\n```text\nskills/kami-landing/\n├── SKILL.md                 # this contract\n├── README.md                # human quick-start\n└── example.html             # canonical Open Design rendering\n```\n\n## Boundaries\n\n- **Do not** invent new colors or typefaces. The kami palette is\n  fixed; if a brief demands a brand color, push back or render the\n  brand color as a single `.tag.brush` accent.\n- **Do not** introduce a second accent color. Pick ink-blue or pick\n  nothing.\n- **Do not** mix all three font stacks in one declaration; pick the\n  dominant language, override `--serif` on `:root`, and let the\n  browser per-glyph fallback resolve mixed-script inline content.\n- **Do not** use `rgba()` for tag fills — print renderers\n  double-paint alpha tags. Use the pre-blended solid hex from the\n  table in `design-systems/kami/DESIGN.md` §2.\n- **Do not** add JavaScript for animation. The page is paper, not\n  an app — motion belongs to the reader scrolling.\n\n## See also\n\n- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) — the full token spec.\n- [`skills/kami-deck/`](../kami-deck/) — sister skill that produces a\n  slide deck in the same kami language.\n- Upstream: [`tw93/kami`](https://github.com/tw93/kami) — original\n  Claude skill (MIT) that the design system adapts.","tags":["kami","landing","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-kami-landing","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/kami-landing","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (6,853 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:24.841Z","embedding":null,"createdAt":"2026-05-04T12:53:12.431Z","updatedAt":"2026-05-11T06:52:24.841Z","lastSeenAt":"2026-05-11T06:52:24.841Z","tsv":"'-15':388 '-32':384 '-5':463 '-6':353,459 '/../design-systems/kami/design.md':109 '/example.html':593 '/kami/design.md':108,603 '0':220,257,261,262,263 '0.02':227 '0.05':264 '0.35':223,524 '01':373 '02':374 '1':301,411,440 '1.10':213 '1.55':214 '1.65':337 '106px':316 '1280':294 '12px':308,366,406 '14':387 '14px':380 '1b365d':149 '1px':253 '2':311,452,469 '20px':336 '21px':320 '24px':259,356 '28':383 '3':329,352,458,462,577 '4':349 '400':335 '4d4c48':541 '4px':258 '5':176,370 '500':186,318,358,368,379,396,408 '560':297 '6':390 '768':296 '96':315 '980':295 'accent':22,145,157 'aesthet':76 'agent':616 'align':250 'alpha':290 'also':537 'anywher':169,206 'app':47,98 'area':181 'ask':436 'askquest':416 'backdrop':273 'backdrop-filt':272 'base':486 'blue':21,148,173,342,361,377 'blur':275 'bodi':386,467,496,527 'borrow':77 'brand':413,422 'brief':414,423 'browser':554 'canva':18,139 'cell':354 'chain':559,564 'chapter':371,464,495 'charact':576 'charter':189,502 'chip':325 'chromat':144 'chunk':425 'clean':249 'cn':55,195,226,512 'collect':420 'color':122,608 'column':244,402 'compon':613 'contact':399 'contain':133 'content':92,453,550 'contract':410 'control':477 'cool':30 'copi':497 'correspond':87 'cover':175 'css':586 'declar':573 'default':509 'defin':621 'depth':251 'design':51,73,100,106,601 'design-system':105,600 'digit':247 'dilut':575 'display':313 'document':15,67,179 'domin':450,489 'doubl':288 'double-paint':287 'drop':267,618 'dump':428 'e.g':281 'e4ecf5':282 'edit':306,446 'editori':79 'els':170 'em':228 'en':52,190,222,501 'entri':468 'equival':418 'exampl':624 'example.html':592 'eyebrow':302 'f5f4ed':140 'fallback':558 'famili':567,572,612 'ffffff':142 'file':135,583 'fill':277 'filter':274 'fine':552 'font':236,571,611 'font-famili':570 'font-variant-numer':235 'footer':348,391 'forbidden':121 'gather':412 'georgia':503,520 'get':128 'glyph':557 'goal':89 'good':91,94 'grade':8 'gray':31 'han':193,515,534 'handl':560 'hard':266 'headlin':156,314 'height':212 'hero':312,323 'hero-token':322 'hex':280 'hierarchi':188 'hiragino':530 'html':134 'ident':441 'index':404 'index.html':579 'ink':20,147,172,341,360,376 'ink-blu':19,146,171,340,359,375 'inlin':546,587 'input':431 'insid':568 'invari':119 'invent':606 'ital':28,205 'ja':56,198,230,528 'jp':536 'kami':2,12,60,70 'kami-land':1,59 'kicker':392 'label':365 'land':3,61 'languag':202,219,451,472,475,490,498 'lede':466 'left':160,344 'left-rul':343 'letter':216,522 'letter-spac':215,521 'lh':338 'licens':397 'like':35 'line':211 'line-height':210 'list':432 'live':124 'local':304 'locat':445 'manifesto':164,330,455,493 'mega':394 'metric':167,243,350,460 'mincho':531 'mirror':588 'mix':548 'mixed-script':547 'modern':97 'multilingu':49 'must':174 'name':443 'neumorph':270 'never':141,283 'new':506,607 'note':500 'num':241,364 'number':154,372 'numer':231,238 'old':85 'oliv':369,539 'one':25,43,57,184,569 'one-pag':42 'output':33,580 'overrid':538 'page':11,66,298 'pager':44 'pagin':246 'paint':289 'palatino':504 'paper':39,83,95,327 'paper-tint':326 'paragraph':332,456 'paramet':203,476 'parchment':17,138 'per':218,556 'per-glyph':555 'pick':470,485 'primari':448 'primit':614 'print':7,80,208,285 'print-grad':6 'produc':4,62 'profession':37 'pron':532 'pull':331 'px':224,385,389,525 'read':34,110 'render':286 'respons':292 'rgba':260,284 'rhythm':209 'ring':254 'roman':507 'root':484 'round':439,442,454 'row':303,351 'rule':116,161,345 'san':309 'sc':517,519 'script':549 'section':153,381 'select':199 'self':58,132 'self-contain':131 'serif':23,182,194,317,334,357,367,378,395,407,479,499,508,516,535 'set':233,482 'shadow':256,268 'ship':113 'signatur':347,457 'singl':10,65,130,143,582 'single-pag':9,64 'sit':248 'site':403 'skill' 'skill-kami-landing' 'solid':279 'songti':518 'sourc':102,192,514,533 'source-nexu-io' 'space':217,523 'stack':232,473,480 'stroke':543 'structur':299,590 'studio':41 'surfac':180 'switcher':305 'system':74,101,107,602 'tabular':240,363 'tabular-num':239,362 'tag':276,291 'taglin':319,444 'technic':81 'ten':118 'text':300 'thinner':545 'three':321,401,566 'three-column':400 'tight':207 'tile':461 'time':505 'tint':328 'titl':382,465 'token':114,324,598 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'truth':104 'tsangerjinkai02':191,513 'two':438 'type':115 'typewritten':86 'ui':48,99 'uppercas':310 'url':449 'use':150,415,595 'user':435 'valu':168,355 'variant':237 'version':307,447 'via':252 'warm':16,137 'weight':26,185,609 'whisper':255 'white':38,82 'whole':430 'word':158,393 'workflow':409 'write':578 'year':398 'yumincho':197,529,542 'zh':54,511 'zh-cn':53,510 '紙':13,71 '纸':14,72","prices":[{"id":"f4a60dcb-ea10-40d0-b3ed-8522bdb4131c","listingId":"8ea1305b-29c6-4661-91db-65d75a778866","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-04T12:53:12.431Z"}],"sources":[{"listingId":"8ea1305b-29c6-4661-91db-65d75a778866","source":"github","sourceId":"nexu-io/open-design/kami-landing","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/kami-landing","isPrimary":false,"firstSeenAt":"2026-05-04T12:53:12.431Z","lastSeenAt":"2026-05-11T06:52:24.841Z"},{"listingId":"8ea1305b-29c6-4661-91db-65d75a778866","source":"skills_sh","sourceId":"nexu-io/open-design/kami-landing","sourceUrl":"https://skills.sh/nexu-io/open-design/kami-landing","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:55.617Z","lastSeenAt":"2026-05-07T22:43:05.124Z"}],"details":{"listingId":"8ea1305b-29c6-4661-91db-65d75a778866","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"kami-landing","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"9430399db2dd8b637197b93da98695a0ca06ac2c","skill_md_path":"skills/kami-landing/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/kami-landing"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"kami-landing","description":"Produce 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."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/kami-landing"},"updatedAt":"2026-05-11T06:52:24.841Z"}}