skills.rest
zhiwendesign
zhiwendesignCOMMUNITY
Explore all skills by this author →
GitHub

kkstyle-diagram-board-noline-screenshot

Transform project notes into a no-line diagram-board HTML poster with fixed branding.

11|1|Updated Mar 30, 2026
Search Tags:#branding#claude-code#screenshot#design-system#infographic#html-poster#diagram-board
One-click install
npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-diagram-board-noline-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kkstyle-diagram-board-noline-screenshot
Source: https://github.com/zhiwendesign/kkskills/tree/main/kkstyle-diagram-board-noline-screenshot
Command: npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-diagram-board-noline-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-chrome, chromium, chromium-browser, chrome, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

It eliminates the manual layout work of crafting structured explainer posters by turning inputs into a no-line diagram-board HTML poster that already includes the fixed date, QR code, and IP branding elements plus an optional PNG capture workflow.

Core Features & Use Cases

  • Structured diagram-board generation with hero title, metric card, summary strip, dual panels, connectors, and soft no-line styling so teams can explain processes quickly.
  • Fixed brand and contact assets including the date sticker, contact QR card, and Kaka IP slot, with guidance for optional PNG export via the capture script.
  • Use cases: distills project intros, workflow steps, module breakdowns, or process narratives into a single HTML poster ready for screenshot.

Quick Start

Use $kkstyle-diagram-board-noline-screenshot to turn structured notes into a soft no-line diagram-board HTML poster with fixed date sticker and contact blocks.

Frequently Asked Questions about kkstyle-diagram-board-noline-screenshot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert project notes into an HTML diagram poster for screenshots?▼

Convert project notes into an HTML diagram poster by structuring them into a no-line diagram-board layout with fixed branding elements like date stickers and contact QR cards for direct screenshot capture.

What is a no-line diagram-board layout for process visualization?▼

A no-line diagram-board layout is a portrait 3:4 storyboard that structures disjointed notes into soft, readable panels with connectors, avoiding harsh borders to explain workflows and module breakdowns clearly.

Can I export the HTML infographic poster as a PNG image?▼

Yes, you can export the HTML infographic poster as a PNG image by invoking the built-in capture script, which requires a Chromium-based browser like Google Chrome to render and capture the output.

Does the diagram-board template support aspect ratios other than 3:4?▼

Yes, the diagram-board template supports optional 4:3, 1:1, 9:16, and 16:9 aspect ratio variants alongside the default portrait 3:4 storyboard to accommodate different presentation formats.

Do I need Google Chrome or Chromium to generate the diagram-board screenshot?▼

Yes, you need Google Chrome, Chromium, or a similar Chromium-based browser installed to execute the capture script that converts the generated HTML diagram-board poster into a PNG file.

What fixed branding elements are included in the generated HTML poster?▼

The generated HTML poster includes a required date sticker, a contact QR code card, and a Kaka IP slot as fixed branding elements to ensure consistent project identification and contact information.

Related Skills

Explore More Design & Creative Skills→
zhiwendesignzhiwendesign
11

kkstyle-diagram-board-screenshot

Converts textual notes into structured diagram-board posters with inline CSS HTML and optional PNG capture.

Community
Advanced
mikkermikker
102

beautiful-mermaid

Render Mermaid diagrams into SVG and PNG with theming options.

Community
Intermediate
zhiwendesignzhiwendesign
11

kkstyle-poster-comic-noline-screenshot

Generate no-line comic poster HTML from note summaries with date stickers and QR branding.

Community
Intermediate
hmzainjamilhmzainjamil
1

infographic

Plan infographic layouts and content structure with visual design specifications.

Community
Intermediate