# Ian Xiaohei Handdrawn Skill

> Ian Xiaohei Handdrawn PPT Skill

- Skill: `chaitin/ian-xiaohei-handdrawn-skill` (Agent Skill, multi-file: 30 files)
- Install (CLI): `npx skillmds@latest add chaitin/ian-xiaohei-handdrawn-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chaitin/ian-xiaohei-handdrawn-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: chaitin (https://skillmd.com/u/chaitin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chaitin/ian-xiaohei-handdrawn-skill

---

# Ian Xiaohei Handdrawn PPT Skill

## Scope

This built-in skill package owns the `ian-xiaohei-handdrawn` template variant inspired by the upstream illustration project `helloianneo/ian-xiaohei-illustrations`.

- `skill_id`: `ian-xiaohei-handdrawn-skill`
- `variant_id`: `ian-xiaohei-handdrawn`
- upstream project: `helloianneo/ian-xiaohei-illustrations`
- upstream URL: `https://github.com/helloianneo/ian-xiaohei-illustrations`
- upstream source type: content-driven illustration image set
- package renderer: `assets/template.html`
- package workspace CSS: `assets/workspace.css`
- package validator: `scripts/validate-deck.mjs`
- layout skeletons: `references/layouts.md`
- component guide: `references/components.md`
- transparent image gallery: `references/image-gallery.md`
- QA checklist: `references/checklist.md`

This package turns the visual language of `helloianneo/ian-xiaohei-illustrations` into a reusable web-PPT template contract.

Core style:

- 16:9 near-white explanation board with generous blank space.
- Black handdrawn lines, imperfect borders, doodle arrows, and loose spacing.
- Xiaohei appears through the local transparent PNG gallery as explainer, guide, or narrator.
- Default illustrations come from the local transparent PNG gallery. Treat them as content metaphors and make them visually important, not tiny stickers.
- Only sparse red-orange and blue accents for notes, arrows, labels, and emphasis.
- HTML panels, paper cards, notes, arrows, narrator bubbles, stickers, tape, stamps, photo frames, stack layers, scribble underlines, and chips should echo the gallery style: black handdrawn lines, imperfect double borders, loose circled notes, transparent paper washes, and only light hard-offset paper shadows.
- Workspace-generated decks must use `assets/workspace.css` for the same handdrawn linework; do not fall back to standard rectangular panels, dashed placeholder boxes, pill chips, or font glyph check/cross icons.
- Slides should feel like horizontal handdrawn explanation boards, not conventional corporate presentation cards.

Generation rules:

- Use `.visual-slide > .pm-canvas.pm-xiaohei-handdrawn`.
- Choose one registered layout from `references/layouts.md`. First classify the page intent, then pick the matching Xiaohei layout.
- Include at least one handdrawn component on every slide, preferably `.pm-xiaohei-illustration` from the local gallery; supporting components can be `.pm-xiaohei-bubble`, `.pm-xiaohei-sticker`, `.pm-xiaohei-tape`, `.pm-xiaohei-stamp`, `.pm-xiaohei-photo-frame`, `.pm-xiaohei-stack-layer`, `.pm-xiaohei-paper-card`, `.pm-xiaohei-callout-note`, `.pm-xiaohei-scribble`, `.pm-xiaohei-bracket`, `.pm-xiaohei-doodle`, `.pm-xiaohei-arrow`, or `.pm-xiaohei-note`.
- Prefer one local transparent gallery image on each slide for default generation. Use generated replacement images only when the user explicitly asks to change a specific image/page visual.
- Avoid pure card-list pages; combine short text blocks with a Xiaohei action, narrator bubble, arrow, scribble underline, sticker reminder, tape/stamp, paper object, evidence frame, stack layer, process, or object metaphor.
- Use image role and size classes deliberately. Every illustration must include one role class (`.is-anchor` for the page's main visual, or `.is-cue` for a small supporting cue) and one size class (`.is-xs`, `.is-sm`, `.is-md`, `.is-lg`, `.is-xl`, `.is-strip`, plus legacy `.is-small`, `.is-wide`, `.is-hero`).
- Avoid filled business cards, perfect rectangles, heavy shadows, and dense grid layouts.
- Use CSS linework for check/cross marks via `.pm-xiaohei-mark.is-check` and `.pm-xiaohei-mark.is-cross`; do not use raw `✓`, `×`, or standard icon glyphs as visible marks.
- Gallery images must contain no embedded text. Put all labels, notes, and captions in HTML so the deck remains editable and reusable.
- Keep text short and conversational. Prefer labels, arrows, and callout notes over long paragraphs.
- Never truncate visible content with ellipses, line clamps, or hidden overflow as a design solution. If copy does not fit, shorten it, split it into another slide, or choose a roomier layout.
- Do not fetch or embed remote GitHub assets. Use the local transparent image gallery for Xiaohei figures; do not CSS-draw Xiaohei characters.