⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

elegant-reports：基于斯堪的纳维亚设计原则的极简PDF报告生成工具

elegant-reports by jdrhyne/agent-skills

67 周安装量

218 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jdrhyne/agent-skills --skill elegant-reports

数据可视化文档生成设计

🇨🇳中文介绍

elegant-reports

生成受斯堪的纳维亚设计原则启发的极简、优雅的 PDF 报告。

安全边界

未经用户明确批准，不得覆盖现有的报告模板或输出文件。
不得将报告内容发送到除已记录的 Nutrient DWS 工作流之外的外部服务。
除非项目明确允许，否则不得添加远程字体、库或资源。
当已提交的生成器可以产生相同输出时，不要依赖临时预览脚本。

快速开始

cd ~/clawd-nuri-internal/skills/elegant-reports

# 生成报告（密集布局）
node generate.js report.md output.pdf --template report

# 生成演示文稿（粗体幻灯片）
node generate.js data.md slides.pdf --template presentation

# 深色模式
node generate.js report.md --template report --theme dark

# 列出模板
node generate.js --list

模板

模板	风格	使用场景
`report`	密集，多列	深度分析、竞品情报
`presentation`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

视觉迭代工作流

这是通过视觉反馈创建新模板的方法：

步骤 1：研究参考

# 使用浏览器工具研究已批准的设计示例
browser navigate https://www.canva.com/templates/...
browser screenshot

# 寻找：
# - 排版选择（字体、大小、粗细）
# - 调色板（背景、文本、强调色）
# - 布局模式（网格、间距）
# - 组件样式（卡片、表格、标注框）

步骤 2：创建主题 CSS

在 themes/ 中创建一个新的 CSS 文件：

/* themes/my-theme.css */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500&display=swap');

:root {
  /* 颜色令牌 */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text-primary: #0A0A0A;
  --color-text-secondary: #404040;
  --color-accent: #2563EB;
  
  /* 排版令牌 */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* 间距令牌 */
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* 组件样式... */

步骤 3：创建模板 HTML

在 templates/ 中创建 HTML：

<!-- templates/my-template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  <style>
{{styles}}
  </style>
</head>
<body>
  <div class="page">
    <h1>{{title}}</h1>
    <p>{{subtitle}}</p>
    {{content}}
  </div>
</body>
</html>

可用变量：{{title}}, {{subtitle}}, {{author}}, {{date}}, {{content}}, {{styles}}

步骤 4：使用视觉反馈进行测试

# 使用已提交的生成器生成预览输出
node generate.js test.md preview.pdf --template my-template --output-html

# 查看生成的 HTML 或 PDF 输出，注意布局问题，调整模板或主题，然后重复

步骤 5：在生成器中注册

添加到 generate.js 中的 TEMPLATES 对象：

const TEMPLATES = {
  // ...现有模板...
  
  'my-template': {
    description: '我的自定义模板描述',
    template: 'my-template.html',
    themes: {
      light: 'my-theme.css',
      dark: 'my-theme-dark.css'
    }
  }
};

步骤 6：测试 PDF 生成

node generate.js test.md output.pdf --template my-template --output-html

令牌	大小	用途
`--text-xs`	11-12px	标签、说明文字
`--text-sm`	13-14px	正文（密集）
`--text-base`	14-16px	正文（正常）
`--text-lg`	16-18px	引导段落
`--text-xl`	18-20px	章节标题
`--text-2xl`	20-24px	H3
`--text-3xl`	24-32px	H2
`--text-4xl`	32-40px	H1（报告）
`--text-5xl`	48-56px	H1（演示文稿）
`--text-6xl`	64-72px	主标题文本

令牌	大小	用途
`--space-1`	2-4px	紧密间隙
`--space-2`	4-8px	行内间距
`--space-3`	8-12px	组件内边距
`--space-4`	12-16px	卡片内边距
`--space-6`	20-24px	章节间隙
`--space-8`	28-32px	主要章节
`--space-10`	36-40px	页面章节
`--space-12`	44-48px	页面边距

--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text-primary: #0A0A0A;
--color-text-secondary: #404040;
--color-text-muted: #737373;
--color-accent: #2563EB;

--color-bg: #09090B;
--color-surface: #18181B;
--color-text-primary: #FAFAFA;
--color-text-secondary: #D4D4D8;
--color-text-muted: #A1A1AA;
--color-accent: #3B82F6;

KPI 条（水平指标）

<div class="kpi-strip">
  <div class="kpi-item">
    <div class="kpi-value">$10.8M</div>
    <div class="kpi-label">收入</div>
    <div class="kpi-change positive">+12%</div>
  </div>
  <!-- 更多项目 -->
</div>

<div class="key-findings">
  <div class="key-findings-title">关键点</div>
  <ul>
    <li><strong>要点 1</strong> — 详情</li>
    <li><strong>要点 2</strong> — 详情</li>
  </ul>
</div>

<div class="two-col">
  <div>左栏内容</div>
  <div>右栏内容</div>
</div>

<div class="callout callout-tip">
  <div class="callout-title">提示</div>
  <p>内容在此</p>
</div>

类型：callout-tip（绿色）, callout-warning（琥珀色）, callout-danger（红色）

带深色表头的表格

<table class="no-break">
  <thead>
    <tr><th>表头</th><th class="num">值</th></tr>
  </thead>
  <tbody>
    <tr><td>行</td><td class="num">123</td></tr>
  </tbody>
</table>

添加这些类以防止不恰当的分页：

<div class="no-break">此内容不会跨页分割</div>
<div class="page-break">在此前强制新页面</div>

表格、卡片、标注框和 KPI 条默认具有 page-break-inside: avoid 属性。

elegant-reports/
├── SKILL.md                    # 此文件
├── NORDIC_DESIGN_RESEARCH.md   # 设计原则文档
├── generate.js                 # 主生成器脚本
├── package.json
├── themes/
│   ├── nordic-v2.css           # 演示文稿浅色
│   ├── nordic-report.css       # 报告浅色
│   └── nordic-report-dark.css  # 报告深色
├── templates/
│   ├── executive-v2.html       # 演示文稿模板
│   └── report-v2.html          # 报告模板
└── examples/
    └── sample-executive.md     # 示例输入

Node.js 18+
axios, form-data（在 package 元数据中声明；首次使用前通过项目包管理器安装）
Nutrient DWS API 密钥（在 mcporter 或 NUTRIENT_DWS_API_KEY 环境变量中配置）

const { generateReport } = require('./generate.js');

await generateReport({
  input: 'report.md',
  output: 'report.pdf',
  template: 'report',
  theme: 'dark',
  title: '我的报告',
  author: 'Nuri'
});

🇺🇸English

elegant-reports

Generate minimalist, elegant PDF reports inspired by Scandinavian design principles.

Safety Boundaries

Do not overwrite existing report templates or output files without explicit user approval.
Do not send report content to external services other than the documented Nutrient DWS workflow.
Do not add remote fonts, libraries, or assets unless the project explicitly allows them.
Do not rely on ad-hoc preview scripts when the checked-in generator can produce the same output.

Quick Start

cd ~/clawd-nuri-internal/skills/elegant-reports

# Generate a report (dense layout)
node generate.js report.md output.pdf --template report

# Generate a presentation (bold slides)
node generate.js data.md slides.pdf --template presentation

# Dark mode
node generate.js report.md --template report --theme dark

# List templates
node generate.js --list

Templates

Template	Style	Use Case
`report`	Dense, multi-column	Deep dives, analysis, competitive intel
`presentation`	Big & bold, one idea/page	Exec briefings, board decks

Each template supports --theme light (default) or --theme dark.

Frontmatter

Add YAML frontmatter to control output:

---
title: Q4 Competitive Analysis
subtitle: Market Intelligence Report
author: Nuri
template: report
theme: dark
---

Your content here...

Design Philosophy

Based on Nordic/Scandinavian design principles:

Bold typography — Poppins for headlines, Inter for body
High contrast — Dark headers, clear hierarchy
Generous whitespace — Content breathes
One accent color — Blue (#2563EB) used sparingly
Functional beauty — Form follows function

See NORDIC_DESIGN_RESEARCH.md for complete design documentation.

Creating New Templates

The Visual Iteration Workflow

This is how to create new templates with visual feedback:

Step 1: Research References

# Use the browser tool to study approved design examples
browser navigate https://www.canva.com/templates/...
browser screenshot

# Look for:
# - Typography choices (font, size, weight)
# - Color palette (backgrounds, text, accents)
# - Layout patterns (grids, spacing)
# - Component styles (cards, tables, callouts)

Step 2: Create Theme CSS

Create a new CSS file in themes/:

/* themes/my-theme.css */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500&display=swap');

:root {
  /* Color tokens */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text-primary: #0A0A0A;
  --color-text-secondary: #404040;
  --color-accent: #2563EB;
  
  /* Typography tokens */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing tokens */
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* Component styles... */

Step 3: Create Template HTML

Create HTML in templates/:

<!-- templates/my-template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  <style>
{{styles}}
  </style>
</head>
<body>
  <div class="page">
    <h1>{{title}}</h1>
    <p>{{subtitle}}</p>
    {{content}}
  </div>
</body>
</html>

Available variables: {{title}}, {{subtitle}}, {{author}}, {{date}}, {{content}}, {{styles}}

Step 4: Test with Visual Feedback

# Generate preview output with the checked-in generator
node generate.js test.md preview.pdf --template my-template --output-html

# Review the generated HTML or PDF output, note layout issues, adjust template or theme, and repeat

Step 5: Register in Generator

Add to TEMPLATES object in generate.js:

const TEMPLATES = {
  // ...existing templates...
  
  'my-template': {
    description: 'My custom template description',
    template: 'my-template.html',
    themes: {
      light: 'my-theme.css',
      dark: 'my-theme-dark.css'
    }
  }
};

Step 6: Test PDF Generation

node generate.js test.md output.pdf --template my-template --output-html

Design Tokens Reference

Typography Scale

Token	Size	Use
`--text-xs`	11-12px	Labels, captions
`--text-sm`	13-14px	Body (dense)
`--text-base`	14-16px	Body (normal)
`--text-lg`	16-18px	Lead paragraphs
`--text-xl`	18-20px	Section headers

Spacing Scale

Token	Size	Use
`--space-1`	2-4px	Tight gaps
`--space-2`	4-8px	Inline spacing
`--space-3`	8-12px	Component padding
`--space-4`	12-16px	Card padding
`--space-6`	20-24px	Section gaps

Color Palette

Light Mode:

--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text-primary: #0A0A0A;
--color-text-secondary: #404040;
--color-text-muted: #737373;
--color-accent: #2563EB;

Dark Mode:

--color-bg: #09090B;
--color-surface: #18181B;
--color-text-primary: #FAFAFA;
--color-text-secondary: #D4D4D8;
--color-text-muted: #A1A1AA;
--color-accent: #3B82F6;

Component Patterns

KPI Strip (horizontal metrics)

<div class="kpi-strip">
  <div class="kpi-item">
    <div class="kpi-value">$10.8M</div>
    <div class="kpi-label">Revenue</div>
    <div class="kpi-change positive">+12%</div>
  </div>
  <!-- more items -->
</div>

Key Findings Box

<div class="key-findings">
  <div class="key-findings-title">Key Points</div>
  <ul>
    <li><strong>Point 1</strong> — Details</li>
    <li><strong>Point 2</strong> — Details</li>
  </ul>
</div>

Two-Column Layout

<div class="two-col">
  <div>Left column content</div>
  <div>Right column content</div>
</div>

Callouts

<div class="callout callout-tip">
  <div class="callout-title">Tip</div>
  <p>Content here</p>
</div>

Types: callout-tip (green), callout-warning (amber), callout-danger (red)

Tables with Dark Headers

<table class="no-break">
  <thead>
    <tr><th>Header</th><th class="num">Value</th></tr>
  </thead>
  <tbody>
    <tr><td>Row</td><td class="num">123</td></tr>
  </tbody>
</table>

Page Break Control

Add these classes to prevent awkward breaks:

<div class="no-break">This won't split across pages</div>
<div class="page-break">Forces new page before this</div>

Tables, cards, callouts, and KPI strips have page-break-inside: avoid by default.

Files Structure

elegant-reports/
├── SKILL.md                    # This file
├── NORDIC_DESIGN_RESEARCH.md   # Design principles documentation
├── generate.js                 # Main generator script
├── package.json
├── themes/
│   ├── nordic-v2.css           # Presentation light
│   ├── nordic-report.css       # Report light
│   └── nordic-report-dark.css  # Report dark
├── templates/
│   ├── executive-v2.html       # Presentation template
│   └── report-v2.html          # Report template
└── examples/
    └── sample-executive.md     # Example input

Dependencies

Node.js 18+
axios, form-data (declared in the package metadata; install through the project package manager before first use)
Nutrient DWS API key (configured in mcporter or NUTRIENT_DWS_API_KEY env var)

API Usage

const { generateReport } = require('./generate.js');

await generateReport({
  input: 'report.md',
  output: 'report.pdf',
  template: 'report',
  theme: 'dark',
  title: 'My Report',
  author: 'Nuri'
});

Weekly Installs

Repository

jdrhyne/agent-skills

GitHub Stars

218

First Seen

Feb 4, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykWarn

Installed on

gemini-cli66

opencode65

codex64

github-copilot63

cursor63

kimi-cli62

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

53,200 周安装

elegant-reports：基于斯堪的纳维亚设计原则的极简PDF报告生成工具

🇨🇳中文介绍

elegant-reports

安全边界

快速开始

模板

相关 Skills

Frontmatter

设计理念

创建新模板

视觉迭代工作流

步骤 1：研究参考

步骤 2：创建主题 CSS

步骤 3：创建模板 HTML

步骤 4：使用视觉反馈进行测试

步骤 5：在生成器中注册

步骤 6：测试 PDF 生成

设计令牌参考

排版比例

间距比例

调色板

组件模式

KPI 条（水平指标）

关键发现框

两栏布局

标注框

带深色表头的表格

分页控制

文件结构

依赖项

API 使用

🇺🇸English

elegant-reports

Safety Boundaries

Quick Start

Templates

Frontmatter

Design Philosophy

Creating New Templates

The Visual Iteration Workflow

Step 1: Research References

Step 2: Create Theme CSS

Step 3: Create Template HTML

Step 4: Test with Visual Feedback

Step 5: Register in Generator

Step 6: Test PDF Generation

Design Tokens Reference

Typography Scale

Spacing Scale

Color Palette

Component Patterns

KPI Strip (horizontal metrics)

Key Findings Box

Two-Column Layout

Callouts

Tables with Dark Headers

Page Break Control

Files Structure

Dependencies

API Usage

最新 Skills