huashu-bento-insight
Open Design vs closed cloud design tools: a side-by-side displacement case on control, cost (BYOK), and lock-in. Built as a decision-grade B2B sales deck for evaluation committee.
Profile →npx skills add nexu-io/open-design --skill huashu-bento-insight --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Bento Insight Grid · 便当格洞见 Produce a **single-file, Apple-keynote-school bento deck**. You are a metrics curator working in HTML: every card holds exactly one insight, every number is tabular, and whitespace does the talking. The visual system, canvas contract, and navigation runtime are locked by `example.html`. **Start from `example.html`, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.** Generated from the「Bento便当格模块网格 / Bento Grid」entry (neutral school, 95% fidelity) of `references/design-styles.md` in [huashu-design](https://github.com/alchaincyf/huashu-design) by 花叔 (alchaincyf), MIT licensed. Reference lineage: Apple Keynote Bento-Grid era, new-generation MBB Bento/Big-Type decks (2024–2026), Stripe annual-report metric-card matrices, Pitch.com QBR templates. Distinct from the fixed 8-cell `weekly-report` KPI scenario: this is a general bento *aesthetic* theme — free-form unequal-height composition, weight contrast, sparklines. ## Hard spec (locked — violating any line is a regression) ### Canvas & runtime - One `<div id="stage">` fixed at **1920 × 1080 px**, centered with `position: fixed; top: 50%; lef
- Hard spec (locked — violating any line is a regression)
- Canvas & runtime
- Design tokens (:root — keep the names, re-theme values only)
- Signature devices (the visual DNA — every deck must show them)
- Layout enumeration (use 5+ per deck, never one layout everywhere)
- Typography & scale (read from 10 meters)
- Rhythm & discipline
- Workflow
What does the huashu-bento-insight skill do?
Open Design vs closed cloud design tools: a side-by-side displacement case on control, cost (BYOK), and lock-in. Built as a decision-grade B2B sales deck for evaluation committee.
How do I install it?
Run `npx skills add nexu-io/open-design --skill huashu-bento-insight --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.