huashu-golden-circle
A brand-repositioning strategy for a heritage coffee chain — why, how, what — the governing idea and the moves to prove it. Built as a decision-grade consulting deck for client CMO, board.
Profile →npx skills add nexu-io/open-design --skill huashu-golden-circle --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.
# Golden Circle Diagram · 黄金圆环图解 Produce a **single-file, one-diagram concept deck**. You are visualizing a methodology the way Simon Sinek drew the Golden Circle on a TED flip chart: one geometric master figure carries the entire argument, and every page is that figure seen from a different angle. 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 中性派「单图母图概念图解 / Diagrammatic Minimalism」spec in `references/design-styles.md` of [huashu-design](https://github.com/alchaincyf/huashu-design) by 花叔 (alchaincyf), MIT licensed. Lineage: Simon Sinek's Golden Circle TED talk, Bauhaus geometric abstraction, "one diagram rules the room" information architecture. ## 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%; left: 50%`; a `fit()` function applies `translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080))` on load and `resize`. All inner layout in px — the
- Hard spec (locked — violating any line is a regression)
- Canvas & runtime
- Design tokens (:root — keep the names, re-theme values only)
- THE master figure (the deck's entire visual vocabulary)
- Chrome (hairline strips, not bars)
- Layout enumeration (use 6+ per deck, never one layout everywhere)
- Typography & discipline
- Workflow
What does the huashu-golden-circle skill do?
A brand-repositioning strategy for a heritage coffee chain — why, how, what — the governing idea and the moves to prove it. Built as a decision-grade consulting deck for client CMO, board.
How do I install it?
Run `npx skills add nexu-io/open-design --skill huashu-golden-circle --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.