菜单
Design system and AI skill for generating beautiful warm-parchment documents (resumes, slides, one-pagers, portfolios, letters, white papers) with a consistent editorial aesthetic.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Aradotso/trending-skills --skill kami-document-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
AI agent skill for using deepsec, the agent-powered security vulnerability scanner for large codebases
Open-source Luau/Lua script IDE and executor built as a Windows Forms C# application with Monaco editor integration
Use Claude Code's autonomous agent loop with DeepSeek V4 Pro, OpenRouter, or any Anthropic-compatible backend at up to 17x lower cost.
基于 SOC 职业分类
正在显示 SKILL.md
| name | kami-document-design |
| description | Design system and AI skill for generating beautiful warm-parchment documents (resumes, slides, one-pagers, portfolios, letters, white papers) with a consistent editorial aesthetic. |
| triggers | ["make me a resume","build a slide deck","create a one-pager","write a white paper","design a portfolio","generate a recommendation letter","turn this into a polished document","帮我排版一份文档"] |
Skill by ara.so — Daily 2026 Skills collection.
Kami (紙, かみ) is an aesthetic constraint system for professional printed documents. It produces warm parchment canvas output across six document types, with Chinese and English variants, using a single ink-blue accent and editorial typography tuned for print.
Kami is not a UI framework — it is a visual language applied to documents you actually want to read. It gives AI agents a strict design spec so every generated document shares the same signature: parchment background, ink-blue accent, serif for authority, sans for utility, tight editorial whitespace.
Six document types:
Each type has a Chinese variant and an English variant. Kami selects the correct variant based on the language you write in.
Claude Code (recommended):
npx skills add tw93/kami -a claude-code -g -y
Codex:
npx skills add tw93/kami -a codex -g -y
Claude Desktop:
The skill auto-triggers on natural language — no slash command needed.
| Element | Value | Rule |
|---|---|---|
| Canvas | #f5f4ed | Warm parchment, never pure white |
| Accent | #1B365D | Ink blue only, no second chromatic hue |
| Neutrals | Yellow-brown undertone | No cool blue-grays |
| Serif weight | 500 | Never bold — single weight is the signature |
| Title line-height | 1.1–1.3 | Tight |
| Dense body | 1.4–1.45 | Captions, labels |
| Reading body | 1.5–1.55 | Paragraphs — never 1.6+ |
| Shadows | Ring or whisper only | No hard drop shadows |
| Tag backgrounds | Solid hex only | rgba() triggers WeasyPrint double-rectangle bug |
Fonts:
All Kami output is self-contained HTML rendered to PDF (via WeasyPrint or browser print). The canonical structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document Title</title>
<style>
/* ─── Tokens ─────────────────────────────────── */
:root {
--canvas: #f5f4ed;
--ink: #1B365D;
--ink-mid: #2c4a7a;
--ink-soft: #4a6fa5;
--muted: #8a7f6e;
--border: #d4cfc4;
--white: #ffffff;
}
/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── Page ───────────────────────────────────── */
@page {
size: A4;
margin: 18mm 16mm;
}
{
: (--canvas);
: (--ink);
: , , serif;
: ;
: ;
-webkit-: exact;
: exact;
}
{
: ;
: ;
: ;
: -;
: (--ink);
}
{
: , , sans-serif;
: ;
: ;
: ;
: uppercase;
: (--muted);
: ;
}
{
: ;
: ;
: ;
: (--ink);
}
{
: ;
: ;
: ;
}
{
: , , sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Resume – Jane Smith</title>
<style>
:root {
--canvas: #f5f4ed; --ink: #1B365D; --muted: #8a7f6e;
--border: #d4cfc4; --accent-bg: #1B365D;
}
@page { size: A4; margin: 16mm 18mm; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--canvas);
color: var(--ink);
font-family: 'Newsreader', Georgia, serif;
font-size: 10pt;
line-height: 1.52;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Header */
{
: solid (--ink);
: ;
: ;
: flex;
: space-between;
: flex-end;
}
{
: ;
: ;
: ;
: -;
}
{
: , sans-serif;
: ;
: (--muted);
: right;
: ;
}
{ : ; }
{
: , sans-serif;
: ;
: ;
: ;
: uppercase;
: (--muted);
: solid (--border);
: ;
: ;
}
{ : ; }
{
: flex;
: space-between;
: baseline;
}
{
: ;
: ;
}
{
: , sans-serif;
: ;
: (--muted);
}
{
: , sans-serif;
: ;
: (--muted);
: ;
}
{
: ;
: ;
: ;
: ;
}
{ : flex; : wrap; : ; : ; }
{
: ;
: ;
: , sans-serif;
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: , sans-serif;
: ;
: ;
: ;
: ;
}
Jane Smith
Staff Engineer · Platform Infrastructure
jane@example.com
github.com/janesmith
San Francisco, CA
Experience
Staff Engineer
2021 – Present
Stripe · Platform Infrastructure
Led migration of payment routing layer to event-driven architecture, reducing p99 latency by 34%.
Designed the internal developer platform serving 600+ engineers across 12 product teams.
Mentored 5 senior engineers through promotion cycles to staff level.
Senior Software Engineer
2018 – 2021
Airbnb · Search & Discovery
Built the real-time availability indexing pipeline handling 2M events/minute.
Shipped personalized ranking model that lifted booking conversion by 8%.
Skills
Go
Rust
Kubernetes
Kafka
PostgreSQL
System Design
Technical Leadership
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>公司介绍</title>
<style>
:root { --canvas: #f5f4ed; --ink: #1B365D; --muted: #8a7f6e; --border: #d4cfc4; }
@page { size: A4; margin: 14mm 16mm; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--canvas);
color: var(--ink);
font-family: 'TsangerJinKai02', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
font-size: 10pt;
line-height: 1.52;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
{
: center;
: ;
: solid (--ink);
: ;
}
{
: ;
: ;
: ;
: ;
}
{
: , , sans-serif;
: ;
: (--muted);
: ;
}
{ : grid; : fr fr; : ; }
{ : ; : ; : ; }
{
: , sans-serif;
: ;
: ;
: ;
: uppercase;
: (--muted);
: ;
}
{
: ;
: ;
: ;
}
{
: flex;
: space-around;
: ;
: ;
: solid (--border);
: solid (--border);
}
{ : center; }
{
: ;
: ;
: (--ink);
: ;
}
{
: , sans-serif;
: ;
: (--muted);
}
公司名称
一句话描述公司核心价值主张
300万+
注册用户
98%
续约率
42个
覆盖城市
产品
核心产品描述，聚焦用户痛点与解决方案，控制在三句话以内。
市场
目标市场规模与增长空间，TAM/SAM 数据，竞争格局简述。
商业模式
收入来源、定价策略、毛利结构，一段话说清楚。
团队
核心团队背景亮点，行业经验与过往成就，简洁有力。
<!-- Architecture diagram: fits inside any Kami document -->
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="200" viewBox="0 0 480 200">
<rect width="480" height="200" rx="4" fill="#edeade"/>
<!-- Node style: ink-blue fill, parchment text -->
<rect x="20" y="80" width="90" height="36" rx="3" fill="#1B365D"/>
<text x="65" y="103" text-anchor="middle" fill="#f5f4ed"
font-family="Inter,sans-serif" font-size="9" font-weight="500">Client</text>
<rect x="195" y="80" = = = =/>
API Gateway
Service
<!-- 2×2 quadrant matrix -->
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="280" viewBox="0 0 320 280">
<rect width="320" height="280" rx="4" fill="#edeade"/>
<!-- Axes -->
<line x1="160" y1="20" x2="160" y2="240" stroke="#d4cfc4" stroke-width="1"/>
<line x1="20" y1="140" x2="300" y2="140" stroke="#d4cfc4" stroke-width="1"/>
<!-- Quadrant labels -->
<text x="85" y="38" text-anchor="middle" font-family="Inter,sans-serif"
= =>Low Effort · High Impact
High Effort · High Impact
Low Effort · Low Impact
High Effort · Low Impact
Quick win
Big bet
The skill auto-triggers. Just describe your need naturally:
make a one-pager for my startup Acme — B2B SaaS for logistics, $2M ARR,
Series A raise, targeting US mid-market. Include 3 key metrics.
---
build me a 6-slide deck for my talk on distributed tracing.
Include an architecture diagram and a quadrant comparing approaches.
---
write a recommendation letter from a CTO recommending Sarah Chen
for a senior ML role. Formal, warm, two pages.
---
帮我做一份 Kaku 项目的作品集，6 页，中文，突出技术亮点和用户数据。
---
generate an Elon Musk style resume — founder CV, 2 pages,
chronological, English.
When generating any Kami document, the agent must enforce:
rgba() for tag/badge backgrounds — use solid hex. WeasyPrint renders rgba() as a double rectangle.font-weight: bold or 700 on serif headings — lock at 500.line-height: 1.6 or higher on any element.#ffffff) as the page background — always #f5f4ed.#1B365D. Variations are #2c4a7a (mid) and #4a6fa5 (soft).-webkit-print-color-adjust: exact; print-color-adjust: exact; on body so backgrounds survive PDF export.@page with A4 margins unless the document type is Slides (use 16:9 or letter-landscape).width: 254mm; height: 143mm; per slide with page-break-after: always.Browser (recommended for demos):
File → Print → Save as PDF
Margins: None or Minimum
Background graphics: ✓ enabled
WeasyPrint (CI/server):
pip install weasyprint
weasyprint document.html document.pdf
Node (Puppeteer):
const puppeteer = require('puppeteer');
async function htmlToPdf(htmlPath, pdfPath) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });
await page.pdf({
path: pdfPath,
format: 'A4',
printBackground: true, // critical for parchment canvas
margin: { top: '0', right: '0', bottom: '0', left: '0' },
});
await browser.close();
}
<style>
@page { size: 254mm 143mm; margin: 0; }
body { margin: 0; padding: 0; background: #f5f4ed; }
.slide {
width: 254mm;
height: 143mm;
background: #f5f4ed;
padding: 12mm 14mm;
page-break-after: always;
overflow: hidden;
position: relative;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.slide:last-child { page-break-after: avoid; }
/* Accent bar — left edge signature element */
.slide::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3pt;
background: #1B365D;
}
</style>
<div =>
Talk Title
Subtitle or speaker name · Date
Section 01
Slide Heading
First key point with specific data or claim
Second key point — concrete, not abstract
Third key point — end with implication
| File | Purpose |
|---|---|
references/design.md | Full design spec (Chinese) |
references/design.en.md | Full design spec (English) |
CHEATSHEET.md | Quick token reference (Chinese) |
CHEATSHEET.en.md | Quick token reference (English) |
assets/demos/ | PDF + PNG demo outputs for all 6 types |
Backgrounds missing in PDF export:
→ Add -webkit-print-color-adjust: exact; print-color-adjust: exact; to body. Enable "Background graphics" in browser print dialog.
Tags render as double rectangles:
→ Replace any rgba() background with a solid hex value. This is a known WeasyPrint bug.
Chinese text falls back to system font:
→ Embed TsangerJinKai02 via @font-face or ensure the font is installed system-wide. Source Han Sans SC is a safe fallback.
Serif headings look too heavy:
→ Check font-weight — must be 500, not 600, 700, or bold.
Line-height feels airy / not editorial:
→ Titles must be 1.1–1.3. Body must be 1.5–1.55. Remove any line-height: 1.6+.
Second color crept in:
→ Audit for any non-neutral color. Only #1B365D, #2c4a7a, #4a6fa5 are chromatic. Everything else must be the warm neutral ramp (#f5f4ed → #edeade → #d4cfc4 → #8a7f6e → #3d3427 → #1B365D).