LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Read editor.md, editor.json, and analyst.json. An agent skill from QinghongLin/data2story-skill.
Install Designer
$ npx skills add QinghongLin/data2story-skill --skill designer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install QinghongLin/data2story-skill designer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/data2story/designer .claude/skills/designer && rm -rf skills-srcUse ~/.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/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .claude/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add QinghongLin/data2story-skill --skill designer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install QinghongLin/data2story-skill designer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/data2story/designer .agents/skills/designer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .agents/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add QinghongLin/data2story-skill --skill designer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install QinghongLin/data2story-skill designer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/data2story/designer .cursor/skills/designer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .cursor/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/QinghongLin/data2story-skill.git --path skills/data2story/designer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add QinghongLin/data2story-skill --skill designer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install QinghongLin/data2story-skill designer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/data2story/designer .gemini/skills/designer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .gemini/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install QinghongLin/data2story-skill designerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add QinghongLin/data2story-skill --skill designer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/data2story/designer .github/skills/designer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .github/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add QinghongLin/data2story-skill --skill designer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install QinghongLin/data2story-skill designer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/data2story/designer .opencode/skills/designer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "designer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story/designer into .opencode/skills/designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "designer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
designer- GitHub stars
- 155
- Token cost
- ~2k tokens
- SKILL.md length
- 865 words
- Files
- 8 (incl. references)
- Skills in repo
- 31
- Repo updated
- First seen
- Licence
- MIT
At a glance
Read editor.md, editor.json, and analyst.json. An agent skill from QinghongLin/data2story-skill.
- Works in 4 steps: Design the Teaser → Visual Decision per Section → Generate Assets When Selected → …
- Tasks that involve HTML artifacts
- SKILL.md covers Setup, How to read the input files, Tools and Step 1: Design the Teaser, plus 4 more sections
- Needs OPENROUTER_API_KEY
What it does
Designer is an agent skill from QinghongLin/data2story-skill. Read editor.md, editor.json, and analyst.json. Make data-driven creative visual decisions for every section — teaser, charts, images, videos, audio, maps, and interactive demos when they fit the data. Generate selected assets. No HTML. Outputs designer.json with desxx IDs.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `references/audio_rules.json`, `references/diversity_rules.json` and `references/field_rules.json`).
It sits in Frontend & Design, covering HTML artifacts. It works with OpenRouter. The repository describes itself as: Data Journalist Agent: Transforming Data into Verifiable Multimodal Story. The licence is MIT.
When your agent uses it
- Tasks that involve HTML artifacts
Example prompts
- “/designer”
Requirements
- A credential in OPENROUTER_API_KEY
- Pre-approved tools (allowed-tools): Bash(*), Read, Write, Glob
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 63a55c1. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
Bash(*)ReadWriteGlob
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
OPENROUTER_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Designer loads about 2k tokens when it runs, and up to ~9.6k if it reads all its reference files. Until then it costs about 71 tokens; SKILL.md has 865 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Bash(*), Read, Write, Glob
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
The full file from QinghongLin/data2story-skill at commit 63a55c1, republished under its MIT licence (© QinghongLin). 865 words, ~1,966 tokens.
Download SKILL.mdSave it as
.claude/skills/designer/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.- name
- designer
- description
- Read editor.md, editor.json, and analyst.json. Make data-driven creative visual decisions for every section — teaser, charts, images, videos, audio, maps, and interactive demos when they fit the data. Generate selected assets. No HTML. Outputs designer.json with des_xx IDs.
- allowed-tools
- Bash(*), Read, Write, Glob
- argument-hint
- PROJECT_DIR
Designer
Your job is creative visual thinking. For every section of the blog, decide how to make the finding land in the most engaging, memorable way based on the data's actual properties. You do not write HTML — that is the Programmer's job.
Think like a creative director, not a developer. Your output is a precise visual brief that tells the Programmer exactly what to build. Do not satisfy a fixed media checklist. Let the data, story, and editorial rhythm determine whether each section needs a chart, image, video, audio, map, interactive, stat callout, instance, or text-only treatment.
Setup
PROJECT_DIR= first argument- Resolve
SKILL_DIR= the directory containing thisSKILL.md(.../skills/data2story/designer). ReplaceSKILL_DIRplaceholders with the resolved, quoted path before running Bash. Do not hard-code machine-local paths. - Read
PROJECT_DIR/editor.md,PROJECT_DIR/editor.json, andPROJECT_DIR/analyst.jsonbefore doing anything - Read the shared design system in
../../frontend-design/(SKILL.md+references/) and choose a theme + component vocabulary for this story - Assets go in
PROJECT_DIR/assets/ - Output:
PROJECT_DIR/designer.json
How to read the input files
editor.md: the prose document with section structure. Each section has anedt_xxID, lists its evidence (ana_xx) and context (det_xx), and contains the verbatim text.editor.json: machine-readable sections. Eachedt_xxhasfindings,chart_placeholder(which ana_xx drives the chart), a typedmedia_placeholder, andeditorial_notes.analyst.json: items keyed byana_xx. Each hascontent,calculation, and cruciallydata_table(chart-ready data) — review it to understand what data is available for each chart.
Tools
Media tools route through OpenRouter (OPENROUTER_API_KEY must be set): text2image, text2video, image2video, text2music, and embeddings — co-located under SKILL_DIR/scripts/openrouter-*/. Default models and exact invocations are in references/tools.json; full per-tool docs are each tool's own SKILL.md under SKILL_DIR/scripts/openrouter-*/. Use image2video to animate a strong still you already generated; text2video when motion itself is the point.
Step 1: Design the Teaser
The teaser is the first thing the reader sees — before the headline, before any prose. It must create curiosity on its own. Choose one teaser type (interactive experience / video / generated image — see references/visual_modes.json → teaser_types).
Write the teaser spec (type + why; full interaction/prompt/mood description) and generate the asset if it is an image or video. Save to PROJECT_DIR/assets/teaser.*.
Step 2: Visual Decision per Section
For every edt_xx section in editor.json, decide the presentation. The full mode catalog — interactive/static charts, maps, timelines, scrollytelling, before/after sliders, card decks, quizzes, demos, generated image/video, image-to-video, stat callouts, audio, text-only — is in references/visual_modes.json. Default to a data-driven visual decision; text-only is valid when prose is genuinely stronger.
Aim for a multimedia-rich page by default. Apply the diversity rules in references/diversity_rules.json together with the presentation doctrine and per-dataset richness targets in ../../frontend-design/references/media_presentation.json: every blog should use all five channels — chart, image, video, audio, interactive_or_map. Before you set any channel's used:false, you must first try its documented fallback (animate a strong still with image2video for video; sonify a ranked/time sequence for audio; a guess-reveal/sortable/before-after for interactive; atmospheric or real fetched images for image). Skip a channel only when even the fallback would be fabricated or purely decorative, and record that data-grounded reason in meta.media_decisions. Avoid chart streaks and visual sameness across blogs.
Audio gets its own treatment — pick one form (embed / generated / sonification / ambient / none), never autoplay, always pair with a visual fallback. See references/audio_rules.json.
Respect the editor's media_placeholder hints unless you have a stronger creative reason. For each section, write mode, rationale, a precise spec/brief, and the asset file (if generated) into the corresponding des_xx item.
When the blog is about a scientific paper, additional modes (PDF preview, paper anatomy, review scorecard, citation network, task demo, paper+review browser, etc.) are available in references/visual_modes.json → science_paper_modes.
Show full SKILL.md (278 more words)Show less
Step 3: Generate Assets When Selected
Generated assets follow from the media decisions. Run the generation tool for every generated image/video/audio decision — do not just write the spec; the Programmer cannot generate media. Verify each file (ls -la PROJECT_DIR/assets/). Match the richness targets in ../../frontend-design/references/media_presentation.json (richness_targets): e.g. a visual/place/sport story should ship 4-6 images (prefer the Detective's real fetched photos over generic AI fills), plus a video (a text2video scene or an image2video-animated still — at least animate the teaser), plus audio, on top of charts and an interactive/map. Reuse any ref_* images the Detective downloaded — see also references/diversity_rules.json (asset_volume_by_dataset, before_generating).
For charts, do not generate chart code — write a precise spec the Programmer implements. For interactive demos, write a step-by-step interaction spec. Both spec shapes are in references/visual_modes.json.
Step 4: Page Visual Rhythm
Pick a concrete theme from ../../frontend-design/references/themes.json (or derive one), set its --accent from the data's meaning, and describe the overall page feel: dominant visual tone; how text and visuals alternate; which section is the visual centrepiece; how this page avoids looking like recent blogs or a generic template; typography notes for the Programmer. Record the chosen theme + accent and these notes in page_rhythm so the Programmer applies them consistently.
Output
Write PROJECT_DIR/designer.json — the single output.
references/schema.json— the full structure (meta.media_strategy,meta.media_decisions,meta.media_blockers,items,page_rhythm) with worked examples of every item type.references/field_rules.json— field-by-field semantics, the per-typecontentshapes,data_sourcerules,page_rhythmrules, and the hard no-ID-substitution rule for instances (copyembed_url/filenameverbatim from detective.json).
Done when a Programmer can read designer.json and build the full page without asking any visual questions — every chart knows its data source, every asset is generated, every interaction is specified.
© QinghongLin, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 7 other files (references) in skills/data2story/designer of QinghongLin/data2story-skill.
- SKILL.md
- references/audio_rules.json
- references/diversity_rules.json
- references/field_rules.json
- references/schema.json
- references/tools.json
- references/visual_modes.json
- scripts
Open the folder on GitHubat commit 63a55c1
Compare with similar skills
Designer 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Designer this skillQinghongLin/data2story-skill | 155 | — | ~2k | Automated safety check: Notes | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Paperclip Pagepaperclipai/paperclip | 100k | — | ~1k | Automated safety check: Pass | MIT | |
| Openkb Deck NeonVectifyAI/OpenKB | 4.8k | 1 repos | ~4.3k | Automated safety check: Pass | Apache-2.0 | |
| Artifact Designerlatitude-dev/latitude-llm | 4.7k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Webhome Homepage Builderwebhtv/webhtv | 1.7k | — | ~3.8k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Paperclip Page
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
Openkb Deck Neon
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
Artifact Designer
latitude-dev/latitude-llm
Create, validate, preview, and publish self-contained HTML artifacts.
Webhome Homepage Builder
webhtv/webhtv
Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.
Solo Artifacts
solo-agent/solo
A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…
More from QinghongLin/data2story-skill
All 31 skills in this repoInspector
QinghongLin/data2story-skill
Run sentence-level traceability verification on a Data2Story blog (verify.py - verifier.json), then emit the in-page Inspector panel (the reader-facing runnable verifier) + the verify/ artifacts…
Auditor
QinghongLin/data2story-skill
Audit a generated Data2Story blog for build correctness across ALL modalities by ACTUALLY RENDERING it in a real headless browser (when available) — catching blank/0-width charts, broken/oversized…
Critic
QinghongLin/data2story-skill
Review a finished Data2Story blog against the 5 quality rubric dimensions (visualdesign, narrativepacing, datamethodtransparency, claimdataalignment, insightvalue), score each 1-7 with on-page…
Detective
QinghongLin/data2story-skill
Research external context for a dataset — domain background, history, related studies, and why this data matters.
Inspector
QinghongLin/data2story-skill
Run sentence-level traceability verification on a blog, then generate viewer.html with interactive evidence panel.
Data2story Pro
QinghongLin/data2story-skill
A skill your agent uses to turn a dataset into a verifiable multimedia blog (a data story / data-driven article / interactive dashboard from a dataset).
Related
Works with
Categories
Questions about Designer
What does Designer do?
Read editor.md, editor.json, and analyst.json. An agent skill from QinghongLin/data2story-skill. Designer is an agent skill from QinghongLin/data2story-skill.json.
When should I use Designer?
Designer fits situations like: tasks that involve HTML artifacts.
How do I install Designer in Claude Code?
Run `npx skills add QinghongLin/data2story-skill --skill designer -a claude-code`. Or copy the skill folder (skills/data2story/designer in QinghongLin/data2story-skill) into .claude/skills/designer in your project. Claude Code loads it when a task matches its description.
How do I install Designer in Codex?
Run `npx skills add QinghongLin/data2story-skill --skill designer -a codex`. Or copy the skill folder (skills/data2story/designer in QinghongLin/data2story-skill) into .agents/skills/designer in your project. Codex loads it when a task matches its description.
Can I use Designer 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 QinghongLin/data2story-skill --skill designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/designer, .gemini/skills/designer, .github/skills/designer and .opencode/skills/designer in your project.
What does Designer need to run?
Going by SKILL.md and its folder, Designer needs credentials named OPENROUTER_API_KEY. Our summary lists: A credential in OPENROUTER_API_KEY. Its frontmatter pre-approves these tools: Bash(*), Read, Write, Glob.
Does Designer access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Designer safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Designer use?
Designer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Designer use?
About 2k tokens (SKILL.md is roughly 7.9k 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 7.6k tokens, read only when the agent opens those files.
What are the alternatives to Designer?
Skills that share tags, products or a category with Designer: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 100k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.8k stars) and Artifact Designer (latitude-dev/latitude-llm, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Designer?
QinghongLin (a GitHub user) maintains it in QinghongLin/data2story-skill, which has 155 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on July 5, 2026.
Source: QinghongLin/data2story-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.