huashu-bento-insight

Generate Apple Keynote-style bento grid HTML decks for B2B sales and business reporting.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#HTML #sales #metrics #presentation #deck #bento #qbr

One-click install

npx skills add https://github.com/nexu-io/open-design --skill huashu-bento-insight

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: huashu-bento-insight
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/huashu-bento-insight
Command: npx skills add https://github.com/nexu-io/open-design --skill huashu-bento-insight

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for high-fidelity, visually consistent B2B sales decks that communicate complex metrics without the overhead of traditional design software or cloud-based slide tools.

Core Features & Use Cases

Bento Grid Layouts: Implements a modular, unequal-height grid system inspired by modern MBB and Apple-style design.
Data-Driven Slides: Supports tabular KPI numerals, inline SVG sparklines, and structured metric cards for QBRs and sales proposals.
Use Case: Create a competitive displacement deck for an evaluation committee that highlights cost savings, control, and lock-in metrics using a professional, self-contained HTML format.

Quick Start

Use the huashu-bento-insight skill to generate a 10-page B2B sales deck comparing OpenDesign to cloud-based design tools.

Frequently Asked Questions about huashu-bento-insight

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

FAQPage Schema

How do I create a bento grid deck with this skill?▼

Use the provided example.html as a template and replace the content within the section elements. The skill uses CSS Grid and predefined design tokens to maintain the bento aesthetic automatically.

Can I customize the colors in the bento deck?▼

Yes, you can re-theme the deck by modifying the CSS variables in the :root block of the HTML file. Focus on updating the --brand, --green, and --orange tokens to match your corporate identity.

Does this deck require external dependencies or a build step?▼

No, the deck is a single-file HTML solution that runs locally in any browser. It uses a Google Fonts import for typography but requires no external JS libraries or build processes.

What are the limitations of the bento grid layout?▼

The layout is strictly defined by the CSS Grid structure in the template. Avoid adding more than 7 cards per page or introducing non-standard design elements to maintain the required visual fidelity.