Agent skill

Space Chart HTML

by SpaceZephyr in SpaceZephyr/design-buddy

生成设计美观的图表 HTML 文件。支持 10 种图表类型:流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格(黑白简约、深色暗调、Claude 暖色)+ 品牌风格扩展。

No licenceAuto-check passedBusiness, Finance & HR

Install Space Chart HTML

skills CLI
$ npx skills add SpaceZephyr/design-buddy --skill space-chart-html -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install SpaceZephyr/design-buddy space-chart-html --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/space-chart-html .claude/skills/space-chart-html && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
space-chart-html
GitHub stars
174
Token cost
~1.5k tokens
SKILL.md length
453 words
Files
4 (incl. references)
Skills in repo
16
Repo updated
First seen
Licence
None found

At a glance

生成设计美观的图表 HTML 文件。支持 10 种图表类型:流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格(黑白简约、深色暗调、Claude 暖色)+ 品牌风格扩展。

  • Works in 4 steps: :识别图表类型 → :收集内容 → :选择风格 → …
  • Tasks that involve Startup and business strategy
  • SKILL.md covers 你的角色, 图表类型注册表, 视觉风格系统 and 工作流程, plus 4 more sections
  • Calls npx

What it does

Space Chart HTML is an agent skill from SpaceZephyr/design-buddy. 生成设计美观的图表 HTML 文件。支持 10 种图表类型:流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格(黑白简约、深色暗调、Claude 暖色)+ 品牌风格扩展。 触发词:"画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/chart-templates.md` and `references/style-presets.md`).

It sits in Business, Finance & HR, covering Startup and business strategy. It works with Notion. The repository describes itself as: Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images.

When your agent uses it

  • Tasks that involve Startup and business strategy

Example prompts

  • “画个 XX 图”
  • “生成商业模式画布”
  • “画 ER 图”
  • “/space-chart-html”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. :识别图表类型
  2. :收集内容
  3. :选择风格
  4. :生成 HTML

What it can do on your machine

Read from SKILL.md and the folder at commit f1d835f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Space Chart HTML loads about 1.5k tokens when it runs, and up to ~6.9k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 453 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 453 words (~1,541 tokens).

name
space-chart-html

Read the full SKILL.md on GitHub

Files

SKILL.md and 3 other files (references) in space-chart-html of SpaceZephyr/design-buddy.

  • SKILL.md
  • .writetest
  • references/chart-templates.md
  • references/style-presets.md

Open the folder on GitHubat commit f1d835f

Compare with similar skills

Space Chart HTML next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Space Chart HTML compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Space Chart HTML this skillSpaceZephyr/design-buddy174—~1.5kAutomated safety check: PassNone
Startup Pressure TestKappaemme-git/codex-startup-pressure-test-skill991—~1.2kAutomated safety check: PassMIT
Zhang Yiming Perspectivealchaincyf/zhang-yiming-skill1722 repos~3.2kAutomated safety check: PassMIT
PESTEL Macro Analysisdeanpeters/Product-Manager-Skills7.2k2 repos~3.6kAutomated safety check: PassCustom licence
Korean Government Grant Searchdjfksjd/ir-search392—~3.5kAutomated safety check: NotesMIT
Mao Zedong Thinking Partnerzhangtianruiwork-droid/Maoxuan-Changzheng436—~2.9kAutomated safety check: PassNone

Similar skills

  • Startup Pressure Test

    Kappaemme-git/codex-startup-pressure-test-skill

    Pressure-tests a startup idea with blunt, compact analysis of problem reality, competition, first customers and MVP, ending in a strong, weak or pivot verdict.

    991 GitHub stars~1.2k tokensUpdated 5 mo ago
    Business, Finance & HRAuto-check passed
  • Zhang Yiming Perspective

    alchaincyf/zhang-yiming-skill

    Answers product, organization, globalization, talent and growth questions in the voice of ByteDance founder Zhang Yiming, using a framework built from public material.

    172 GitHub starsUsed in 2 repos~3.2k tokens
    Business, Finance & HRAuto-check passed
  • PESTEL Macro Analysis

    deanpeters/Product-Manager-Skills

    Scans political, economic, social, technological, environmental, and legal forces that could threaten or favor a product strategy.

    7.2k GitHub starsUsed in 2 repos~3.6k tokens
    Business, Finance & HRAuto-check passed
  • Surveys open Korean government startup and R&D support programs and sorts them by fit with your project, checking eligibility against the original notices.

    392 GitHub stars~3.5k tokensUpdated 2 mo ago
    Business, Finance & HRAuto-check: notes
  • Mao Zedong Thinking Partner

    zhangtianruiwork-droid/Maoxuan-Changzheng

    Chinese-language persona skill that analyzes your problem with a Mao Zedong-style method: investigate first, locate the main contradiction, then probe with questions.

    436 GitHub stars~2.9k tokensUpdated 4 mo ago
    Business, Finance & HRAuto-check passed
  • Constraint Engine

    lijigang/ljg-skills

    Finds the handful of constraints that truly define a domain, role, product or debate, grades each by hardness, and explains the behavior those constraints produce.

    7.5k GitHub stars~2.1k tokensUpdated yesterday
    Business, Finance & HRAuto-check passed

More from SpaceZephyr/design-buddy

All 16 skills in this repo
  • Slide Deck Image Generator

    SpaceZephyr/design-buddy

    Turns written content into designed slide images from an outline, merges them into PPTX or PDF, and can borrow styles from a registry of brand design systems.

    174 GitHub stars~6.5k tokensUpdated 3 mo ago
    Auto-check passed
  • WeChat Article Layout

    SpaceZephyr/design-buddy

    Turns an article into WeChat Official Account HTML with a local preview, a choice of three visual styles and a button that copies the rich HTML.

    174 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed
  • Article Illustration Batch Generator

    SpaceZephyr/design-buddy

    Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.

    174 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed
  • AI Chart Image Generator

    SpaceZephyr/design-buddy

    Generates a finished chart image directly with GPT-image-2 from a text description, across ten chart types such as flowcharts, architecture diagrams and SWOT grids in six visual styles.

    174 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed
  • Batch Image Skill Builder

    SpaceZephyr/design-buddy

    Walks a non-coder through structured questions about scene, style, color, text rules and consistency, then auto-generates a complete, ready-to-use batch image-generation skill.

    174 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Space Image Studio

    SpaceZephyr/design-buddy

    Generates PNG images for four common needs: Xiaohongshu covers, slide illustrations, charts and article logic diagrams, with twelve visual styles and automatic style suggestions.

    174 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Questions about Space Chart HTML

What does Space Chart HTML do?

生成设计美观的图表 HTML 文件。支持 10 种图表类型:流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格(黑白简约、深色暗调、Claude 暖色)+ 品牌风格扩展。. Space Chart HTML is an agent skill from SpaceZephyr/design-buddy.

When should I use Space Chart HTML?

Space Chart HTML fits situations like: tasks that involve Startup and business strategy.

How do I install Space Chart HTML in Claude Code?

Run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html -a claude-code`. Or copy the skill folder (space-chart-html in SpaceZephyr/design-buddy) into .claude/skills/space-chart-html in your project. Claude Code loads it when a task matches its description.

How do I install Space Chart HTML in Codex?

Run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html -a codex`. Or copy the skill folder (space-chart-html in SpaceZephyr/design-buddy) into .agents/skills/space-chart-html in your project. Codex loads it when a task matches its description.

Can I use Space Chart HTML in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SpaceZephyr/design-buddy --skill space-chart-html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/space-chart-html, .gemini/skills/space-chart-html, .github/skills/space-chart-html and .opencode/skills/space-chart-html in your project.

What does Space Chart HTML need to run?

Going by SKILL.md and its folder, Space Chart HTML needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Space Chart HTML access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Space Chart HTML safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Space Chart HTML use?

No licence was found for Space Chart HTML or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Space Chart HTML use?

About 1.5k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.4k tokens, read only when the agent opens those files.

What are the alternatives to Space Chart HTML?

Skills that share tags, products or a category with Space Chart HTML: Startup Pressure Test (Kappaemme-git/codex-startup-pressure-test-skill, 991 stars), Zhang Yiming Perspective (alchaincyf/zhang-yiming-skill, 172 stars), PESTEL Macro Analysis (deanpeters/Product-Manager-Skills, 7.2k stars) and Korean Government Grant Search (djfksjd/ir-search, 392 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Space Chart HTML?

SpaceZephyr (a GitHub user) maintains it in SpaceZephyr/design-buddy, which has 174 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on July 6, 2026.

Source: SpaceZephyr/design-buddy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.