FreePublished on GitHubEnglish overview

kami-landing

Create a paper-like one-page document for a white paper or studio introduction. The skill combines a warm parchment background, ink-blue accents, and language-specific serif fonts in a single HTML file, supporting English, Japanese, and Simplified Chinese.

OriginalShow the original 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.

nexu-io/open-design

AI rating100/ 100 See how to install

Good for

Create a studio introduction page
Present a white paper as a single web page
Build a Japanese one-pager with key metrics
Organize a project introduction into numbered sections

Overview

What it does

Turns a white paper or studio introduction into a single web page with the feel of a printed document. It uses a parchment-like background, ink-blue accents, and serif type. The page includes a headline, a statement of principles with a signature, three to six metrics, three to five chapters, and contact details. It outputs one index.html file with CSS included, with a layout that becomes a single column on narrow screens.

When it helps

Suitable for founders, design studios, and researchers who want to explain the background and achievements of their work in a restrained, paper-like format. Font settings support Japanese, English, and Simplified Chinese, and the body text can mix languages.

Example requests

“Create a Japanese one-page introduction with our studio’s principles, three achievement metrics, and future plans.”

“Turn this research project overview into a white-paper-style page with numbered chapters.”

Prepare basic details such as the name and URL, along with the statement, metrics, and text for each chapter.

Notes

A file-writing environment is required. Follow the included design specifications for colors and typography, and do not add JavaScript animation. Google Fonts is the only external dependency.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?: AGoodIt specifies white papers and introductions as use cases, a paper-like appearance, and a single HTML file as the deliverable.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?: AGoodIt specifies inputs and steps for gathering information, choosing a language, writing index.html, and checking the result.
SafetyAre sending data, deleting files, and running commands disclosed?: AGoodThe write destination is explicitly identified as <out>/index.html, and Google Fonts is disclosed as an external dependency.
Easy setupDoes it need few tools or API keys, and are they documented?: AGoodIt explicitly identifies file-write capability, Google Fonts, and the DESIGN.md to consult.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Files included (3)

SKILL.md9.3 KB
example.html20.1 KB
README.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

kami-landing

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.

What you get

A single self-contained HTML file with:

Warm parchment canvas (#f5f4ed) — never #ffffff.
Single chromatic accent — ink-blue (#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.
Serif at one weight (500) for hierarchy — Charter (EN), TsangerJinKai02 / Source Han Serif (CN), or YuMincho (JA), selected by the language parameter. No italic anywhere.
Tight print rhythm — line-heights 1.10–1.55, letter-spacing per language (0 for EN, 0.35px for CN, 0.02em for JA).
Numeric stacks set in font-variant-numeric: tabular-nums so metric columns and pagination digits sit cleanly aligned.
Depth via 1px rings + whisper shadows (0 4px 24px rgba(0,0,0,0.05)). No hard drop shadows, no neumorphism, no backdrop-filter blurs.
Tag fills as solid hex (e.g. #E4ECF5), never rgba() — print renderers double-paint alpha tags.
Responsive at 1280 / 980 / 768 / 560.

Page structure

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

Workflow contract

1. Gather brand brief

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:

Identity round — name, tagline, location, edition / version, primary URL, dominant language.
Content round — manifesto paragraph + signature, 3-6 metric tiles, 3-5 chapter (title + lede + body) entries.

2. Pick the language stack

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.

3. Write `index.html`

Output 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 quote
ul.dash — en-dash bullets in ink-blue
.code — ivory-bg, 1px-border code block
.footer-kicker — mega serif 500 word

Tag every editable element with data-od-id="<unique-slug>" so the host app's comment mode can target it.

4. Self-check before delivering

Files in this skill

design-templates/kami-landing/
├── SKILL.md                 # this contract
├── README.md                # human quick-start
└── example.html             # canonical OpenDesign rendering

Boundaries

Do not invent new colors or typefaces. The kami palette is fixed; if a brief demands a brand color, push back or render the brand color as a single .tag.brush accent.
Do not introduce a second accent color. Pick ink-blue or pick nothing.
Do not mix all three font stacks in one declaration; pick the dominant language, override --serif on :root, and let the browser per-glyph fallback resolve mixed-script inline content.
Do not use 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.
Do not add JavaScript for animation. The page is paper, not an app — motion belongs to the reader scrolling.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

Create a retro pixel presentation video
Customize a three-scene video template
Preview scene transitions and motion in HTML