Skip to content

Kami Landing Page

Builds a print-style, single-file HTML one-pager with a warm parchment look and multilingual serif fonts.

Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When this skill is installed, the agent can turn your brand details (name, headline, a short manifesto, a few key numbers, and numbered sections) into one self-contained web page styled like a professional white paper or printed studio one-pager rather than a software app screen. It follows a fixed design system: warm cream background, a single ink-blue accent colour, one serif font weight, and no italics. The result is one HTML file with all styling built in, supporting English, Simplified Chinese, or Japanese.

Great for

  • Founders or small studios who want a clean editorial one-page profile of their product or project
  • Open-source maintainers or researchers who want a print-first summary page
  • Designers who want a consistent kami-style layout generated quickly from a brief

Skip it if

  • Interactive web apps or pages needing JavaScript, forms or dynamic data, since the output is deliberately zero-JS static HTML
  • Brands that need modern app-style UI or a non-serif, colourful visual identity, because the skill enforces a restrained palette and typography

Try asking

  • “Build me a kami-style one-pager for my indie studio with a hero headline, a manifesto paragraph, and three metric tiles.”
  • “Make a white-paper style landing page in Japanese for our research project with three numbered chapters.”
  • “Create a print-grade parchment-style single page for my open-source tool, English language.”
Step-by-step guide: how to use Kami Landing PageInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    kami-landing.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip kami-landing.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip kami-landing.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the brand brief in two rounds as the workflow suggests: identity details first, then manifesto, metrics and chapters.
  • Keep the hero headline to six words or fewer so it fits the large display size.
  • Open the generated index.html in a browser and check the layout at different window widths, since the skill targets several breakpoints.

What's inside

  • example.html
  • README.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.