---
id: daily-posterskill-academic-posters
name: "posterskill-academic-posters"
url: https://skills.yangsir.net/skill/daily-posterskill-academic-posters
author: aradotso
domain: education
tags: ["content-creation", "academic", "posters", "research", "design"]
install_count: 1100
rating: 4.30 (20 reviews)
github: https://github.com/aradotso/trending-skills
---

# posterskill-academic-posters

> 学术海报生成技能，自动创建符合学术标准的打印级海报，AI Agent Skill，提升工作效率和自动化能力

**Stats**: 1,100 installs · 4.3/5 (20 reviews)

## Before / After 对比

### 学术海报生成效率提升

**Before**:

在没有 posterskill 的情况下，从 Overleaf 论文源创建学术海报通常需要手动提取论文内容，并使用 LaTeX（如 Beamerposter）、PowerPoint 或 Adobe Illustrator 等工具从零开始设计布局。这包括手动设置列宽、卡片大小、字体样式，并逐一放置文本、图表和机构 Logo。每次布局调整都需要耗费大量时间进行精确对齐和格式化，甚至可能需要重新编译 LaTeX 文档，整个过程缺乏交互性和自动化支持，效率低下且容易出错。

**After**:

使用 posterskill 后，只需克隆 Overleaf 项目，并在 Claude Code 中运行 `/make-poster` 命令，AI 即可自动生成一个包含所有内容的、打印就绪的交互式 HTML 海报。海报内置拖放式可视化编辑器，用户可以直接在浏览器中轻松调整列宽、卡片大小、交换或移动内容块，并调整字体大小。此外，还提供了编程 API 进行高级布局自动化。整个过程无需复杂的构建步骤或服务器，极大地简化了海报制作流程，提升了效率和灵活性。

| Metric | Before | After | Change |
|---|---|---|---|
| 首次海报草稿生成时间 | 8小时 | 0.5小时 | -93.75% |
| 主要布局调整时间 | 1.5小时 | 0.25小时 | -83.33% |

## Readme

# posterskill-academic-posters

# posterskill — Academic Poster Generator

Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

posterskill is a Claude Code skill that generates print-ready, interactive conference posters from your Overleaf paper source. It produces a single self-contained HTML file with a built-in drag-and-drop visual editor — no build step, no server required.

## Installation & Setup

```
git clone git@github.com:ethanweber/posterskill.git poster
cd poster

# Clone your Overleaf paper source
git clone https://git.overleaf.com/YOUR_PROJECT_ID overleaf

# Optional: add reference posters for style matching
cp ~/Downloads/some_reference_poster.pdf references/

```

Start Claude Code and trigger the skill:

```
claude

```

```
/make-poster

```

Claude will ask for your project website URL and any formatting specs, then generate a `poster/` directory with `index.html`.

## Directory Structure

```
poster/                  # this repo
├── .claude/
│   └── commands/
│       └── make-poster.md   # the skill command
├── overleaf/            # your cloned Overleaf project
├── references/          # optional reference PDFs for style matching
└── poster/              # generated output
    ├── index.html       # the poster (self-contained)
    └── logos/           # downloaded institutional logos

```

## What Gets Generated

The output `poster/index.html` is a React app (loaded via CDN) containing:

- **`CARD_REGISTRY`** — each card's title, color, and JSX body content

- **`DEFAULT_LAYOUT`** — column structure and card ordering

- **`DEFAULT_LOGOS`** — institutional logos for the header

- **`window.posterAPI`** — programmatic API for layout automation

## Visual Editor Features

Open `poster/index.html` in Chrome to access the built-in editor:

Feature
How to Use

Resize columns
Drag column dividers left/right

Resize cards
Drag row dividers up/down within a column

Swap cards
Click one diamond handle, then another

Move/insert cards
Click a handle, then click a drop zone

Adjust font size
Click **A-** / **A+** buttons in toolbar

Preview print layout
Click **Preview** button

Export layout
Click **Copy Config** to get JSON

## Programmatic API (`window.posterAPI`)

Available in the browser console or via Playwright automation:

```
// Swap two cards by ID
posterAPI.swapCards('method', 'results')

// Move a card to a specific column and position
posterAPI.moveCard('quant', 'col1', 2)

// Resize a column (in mm)
posterAPI.setColumnWidth('col1', 280)

// Set a specific card's height (in mm)
posterAPI.setCardHeight('method', 150)

// Scale all text globally
posterAPI.setFontScale(1.5)

// Measure whitespace waste (lower = better layout)
posterAPI.getWaste()

// Get the current layout as an object
posterAPI.getLayout()

// Get the full config as JSON (paste back to Claude)
posterAPI.getConfig()

// Reset to default layout
posterAPI.resetLayout()

```

## Iteration Workflow

The core loop for refining your poster:

- **Claude generates** first draft, opens `poster/index.html` in your browser

- **You edit** in the browser — drag dividers, swap cards, resize columns

- **Click "Copy Config"** in the toolbar to export your layout as JSON

- **Paste the JSON back to Claude** — it updates `DEFAULT_LAYOUT` in the HTML

- **Repeat** until the layout is perfect

- **Print to PDF**: File → Print → Margins: None, Background Graphics: On

## Playwright Automation (used internally by Claude)

Claude uses Playwright to automate layout verification. You can use it too:

```
const { chromium } = require('playwright');

async function optimizePoster() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto(`file://${__dirname}/poster/index.html`);
  
  // Use the posterAPI to adjust layout programmatically
  const waste = await page.evaluate(() => posterAPI.getWaste());
  console.log('Whitespace waste:', waste);
  
  // Resize a column
  await page.evaluate(() => posterAPI.setColumnWidth('col1', 300));
  
  // Take a screenshot for visual verification
  await page.screenshot({ path: 'poster-preview.png', fullPage: true });
  
  // Generate PDF at print resolution
  await page.pdf({
    path: 'poster.pdf',
    width: '841mm',   // A0 landscape width
    height: '1189mm',
    printBackground: true,
  });
  
  await browser.close();
}

```

## Card Registry Structure

Each card in the poster is defined in `CARD_REGISTRY`:

```
const CARD_REGISTRY = {
  abstract: {
    title: "Abstract",
    color: "#f0f4ff",
    body: `
      <p>Your abstract text here. Supports full JSX including
      <strong>bold</strong>, <em>italic</em>, and inline math.</p>
    `
  },
  method: {
    title: "Method",
    color: "#fff8f0",
    body: `
      <img src="figures/pipeline.png" style={{width:'100%'}} />
      <p>Caption describing the pipeline above.</p>
    `
  },
  results: {
    title: "Results",
    color: "#f0fff4",
    body: `
      <table>...</table>
    `
  }
};

```

## Default Layout Structure

```
const DEFAULT_LAYOUT = {
  columns: [
    {
      id: 'col1',
      widthMm: 280,
      cards: ['abstract', 'method']
    },
    {
      id: 'col2', 
      widthMm: 320,
      cards: ['results', 'quant']
    },
    {
      id: 'col3',
      widthMm: 280,
      cards: ['conclusion', 'references']
    }
  ]
};

```

## Inputs Claude Uses

Input
Where It Comes From
Required

Paper content
`overleaf/` directory
Yes

Project website
URL (asked at runtime)
Yes

Reference posters
`references/*.pdf`
No

Author website
URL for brand matching
No

Formatting specs
Conference URL or text
Asked if missing

Logos
Auto-downloaded to `poster/logos/`
Auto

## Common Patterns

### Adding a custom figure card

```
// In CARD_REGISTRY, add a new card
custom_fig: {
  title: "Qualitative Results",
  color: "#fafafa",
  body: `
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px'}}>
      <img src="figures/result1.png" style={{width:'100%'}} />
      <img src="figures/result2.png" style={{width:'100%'}} />
    </div>
    <p style={{fontSize:'0.85em', textAlign:'center'}}>
      Comparison on held-out test scenes.
    </p>
  `
}

```

Then add it to `DEFAULT_LAYOUT`:

```
{ id: 'col2', widthMm: 320, cards: ['results', 'custom_fig'] }

```

### Logos configuration

```
const DEFAULT_LOGOS = [
  { src: 'logos/university.png', height: 60 },
  { src: 'logos/lab.png', height: 50 },
  { src: 'logos/sponsor.png', height: 45 },
];

```

### Printing to PDF

In Chrome:

- Open `poster/index.html`

- Click **Preview** to verify layout

- `Ctrl+P` / `Cmd+P`

- Set **Margins: None**

- Enable **Background graphics**

- Set paper size to your conference spec (A0, 36×48in, etc.)

- Save as PDF

## Troubleshooting

**Poster looks different in print vs browser**
→ Use Chrome (not Firefox/Safari). Enable "Background graphics" in print dialog.

**Figures not loading**
→ Ensure figure paths in the HTML are relative to `poster/index.html`. Claude copies figures to `poster/figures/` — verify the directory exists.

**Logos not fetched**
→ Claude uses Playwright to download logos from your project website. If it fails, manually copy logo files to `poster/logos/` and update `DEFAULT_LOGOS` paths.

**Layout config not updating after paste**
→ Make sure you paste the full JSON from **Copy Config** — Claude looks for the complete `DEFAULT_LAYOUT` and `DEFAULT_LOGOS` objects to replace.

**Font too small/large for poster size**
→ Use `posterAPI.setFontScale(1.2)` in the browser console, or click **A+** / **A-** buttons, then Copy Config and paste to Claude.

**Whitespace gaps between cards**
→ Run `posterAPI.getWaste()` in console to quantify. Use `posterAPI.setCardHeight('cardId', heightMm)` to tune card heights, or drag row dividers manually.

## Example Output

See the [Fillerbuster poster](http://ethanweber.me/fillerbuster-poster) ([repo](https://github.com/ethanweber/fillerbuster-poster)) as a live example of posterskill output.
Weekly Installs299Repository[aradotso/trending-skills](https://github.com/aradotso/trending-skills)GitHub Stars15First Seen8 days agoSecurity Audits[Gen Agent Trust HubPass](/aradotso/trending-skills/posterskill-academic-posters/security/agent-trust-hub)[SocketWarn](/aradotso/trending-skills/posterskill-academic-posters/security/socket)[SnykWarn](/aradotso/trending-skills/posterskill-academic-posters/security/snyk)Installed ongithub-copilot298codex298amp298cline298warp298kimi-cli298

---
*Source: https://skills.yangsir.net/skill/daily-posterskill-academic-posters*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-posterskill-academic-posters/markdown*