What type of presentations is Pin & Paper best suited for?

Pin & Paper is ideal for qualitative research presentations, personal reflections, and workshop debriefs, where a warm, handcrafted feel is beneficial.

Can I modify the design elements of the presentation?

While you can replace content, it's important to preserve the design system, including fonts, colors, and decorative elements, to maintain the deck's identity.

Is this skill suitable for data-driven presentations?

No, Pin & Paper is not recommended for data-driven presentations that require a polished, digital-native appearance due to its informal design elements.

How do I get started with Pin & Paper?

Clone the example.html and the assets folder into your workspace, replace the placeholder content, and ensure you maintain the design system.

What if I need additional slide layouts?

If you require more layouts, you can duplicate existing slides or create new ones while adhering to the established design guidelines.

Pin & Paper

Name: Pin & Paper
Availability: InStock
Author: nexu-io

Free

Create warm, handcrafted HTML presentation decks.

by nexu-io84.9k stars on nexu-io/open-design

1 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Pin & Paper does

Pin & Paper is a unique HTML presentation deck designed for academic and qualitative research presentations. It features a distinctive aesthetic characterized by safety-pin illustrations and a paper-grain texture, providing a hand-crafted feel that is ideal for conveying qualitative findings, personal reflections, or workshop debriefs. The deck is structured to maintain a consistent design language, ensuring that typography, color palette, and decorative elements are harmonized throughout the slides.

This skill is particularly suited for students or professionals preparing for coursework defenses, especially in fields like biology or education, where a personal touch can enhance the delivery of complex information. The deck includes a medium level of formality and density, making it approachable while still conveying important insights. Users can easily customize the slides by replacing placeholder content with their own, while adhering to the design constraints that preserve the overall identity of the deck.

While the Pin & Paper deck is excellent for presentations that benefit from warmth and personality, it is not suitable for scenarios where a polished, digital-native appearance is required. The informal handwritten elements may detract from the professionalism needed for rigorously data-driven presentations. Users should be mindful of these limitations when deciding whether this tool fits their needs.

When to use it

Use this tool when you want to create a presentation that feels personal and handcrafted, particularly for academic or qualitative contexts.

When not to use it

Avoid this skill for presentations that require a highly polished, formal, or data-intensive design.

What you can build with it

Academic Coursework Defense

Use Pin & Paper to create a unique presentation for your capstone project, showcasing your findings with a personal touch.

Qualitative Research Presentation

Present qualitative data in a way that feels approachable and warm, making it easier for your audience to connect with your insights.

Workshop Debrief

Craft a debrief presentation that reflects the collaborative nature of your workshop, using the deck's hand-crafted aesthetic to engage participants.

How to install Pin & Paper

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-pin-and-paper --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Pin & Paper

Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.

A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.

At a glance

Scheme: light
Formality: medium
Density: medium
Slides in demo: 11

Best for

Anything that should feel hand-crafted, warm, and literary: qualitative research findings, founder reflections, longform brand stories, workshop debriefs. The signature safety-pin illustrations and paper-grain texture make it especially good for any deck — including tech or business — that wants personality and warmth over polish.

Avoid for

Decks that need to feel digital-native polished or rigorously data-driven — handwritten Caveat is intentionally informal.

Workflow

Clone example.html AND the assets/ folder into the user's workspace. This template ships an assets/deck-stage.js runtime (keyboard navigation, stage rendering) and an assets/styles.css stylesheet. The HTML references them as assets/deck-stage.js and assets/styles.css, so both must sit next to the cloned HTML or those paths will 404 in the generated artifact and navigation/styling will silently break. Inlining the JS/CSS into a single <script>/<style> block in the HTML is an acceptable alternative when a single self-contained file is preferred.
Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
Keep the navigation runtime as shipped. If the deck ships an assets/deck-stage.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-pin-and-paper" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

Source & license

Vendored from upstream MIT-licensed zarazhangrui/beautiful-html-templates.

The full upstream MIT license text — including the original copyright notice — ships in this skill at LICENSE and must be redistributed alongside any copy of example.html, template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.

Frequently asked questions about Pin & Paper

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.