designer

Name: designer
Author: QinghongLin

146stars19forks

How to install designer?

qinghonglin/data2story-skill/designer

$npx -y skills add QinghongLin/data2story-skill --skill designer

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Designer
2
3	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.
4
5	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.
6
7	> Fast profile. When `run_config.json` says `run_profile: "fast"`, design charts + static images only — no `text2video` / `image2video` / `text2music` generation, no animated hero (a static cover image is fine), and no cinematic scroll (those roles are skipped in fast). Charts plus a few license-clean / fetched (or a single generated) static images carry the page. The full five-channel multimedia brief below is the premium profile.
8
9	## Setup
10
11	- `PROJECT_DIR` = first argument
12	- Resolve `SKILL_DIR` = the directory containing this `SKILL.md` (`.../skills/data2story-pro/designer`). Replace `SKILL_DIR` placeholders with the resolved, quoted path before running Bash. Do not hard-code machine-local paths.
13	- Read `PROJECT_DIR/editor.md`, `PROJECT_DIR/editor.json`, `PROJECT_DIR/analyst.json`, and `PROJECT_DIR/scout.json` (if present) before doing anything
14	- Read the shared design system in [`../../frontend-design-pro/`](../../frontend-design-pro/) (`SKILL.md` + `references/`) and choose a theme + component vocabulary for this story
15	- Assets go in `PROJECT_DIR/assets/`
16	- Output: `PROJECT_DIR/designer.json`
17
18	## How to read the input files
19
20	- `editor.md`: the prose document with section structure. Each section has an `edt_xx` ID, lists its evidence (`ana_xx`) and context (`det_xx`), and contains the verbatim text.
21	- `editor.json`: machine-readable sections. Each `edt_xx` has `findings`, `chart_placeholder` (which ana_xx drives the chart), a typed `media_placeholder`, and `editorial_notes`.
22	- `analyst.json`: items keyed by `ana_xx`. Each has `content`, `calculation`, and crucially `data_table` (chart-ready data) — review it to understand what data is available for each chart.
23
24	## Tools
25
26	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`](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. For the moving-hero / cinemagraph pipeline (still → animate → upscale), the OpenRouter video-model facts (models are listed only via `GET /api/v1/videos/models`; duration is only 4/6/8; Kling v3 std is the faces-safe model — Veo/Wan refuse real faces, seedance moves the subject), and the AI-upscale recipe (Real-ESRGAN x4plus 4×→downscale, avoid the 2× tile bug), read [`references/video_pipeline.json`](references/video_pipeline.json) before animating anything.
27
28	## Step 1: Design the Hero (REQUIRED on every run)
29
30	The hero is the first thing the reader sees — before the headline, before any prose. It must create curiosity on its own. A hero is REQUIRED on every run — never `none`. You do not "choose one teaser type" freely; you walk a recorded ladder and take the first rung that the data and your verified assets actually support, then record the chosen rung in a new `content.hero_strategy` field on the hero item (so the gate and the Critic can see which path was taken and why):
31
32	1. `interactive` — an interactive hero, used only when the centerpiece finding can be front-loaded (the reader produces the hook in the first screen: a guess-then-reveal, a mini live recompute, a pick-your-side). Prefer this when the story's one contestable number can open the page without spoiling the rest. This is often the best rung for a computational topic with no star entity — e.g. "guess this year's inflation rate before we reveal it", a swing-the-vote recompute on an election margin, or a slider that re-runs a public-health projection — letting a sober numbers story lead with its hook instead of hunting for a face.
33	2. `real_still` — a verified real-subject still, FETCHED not generated: the Scout's `sct_` asset (

QinghongLinPublisher · 28 listings

Preview

QinghongLin/data2story-skill

# 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

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 m

> **Fast profile.** When `run_config.json` says `run_profile: "fast"`, design **charts + static images only** — no `text2video` / `image2video` / `text2music` g

RepoQinghongLin/data2story-skill

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars146

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

designer

146stars19forks

View on GitHub

How to install designer?

qinghonglin/data2story-skill/designer

$npx -y skills add QinghongLin/data2story-skill --skill designer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Designer
2
3	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.
4
5	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.
6
7	> Fast profile. When `run_config.json` says `run_profile: "fast"`, design charts + static images only — no `text2video` / `image2video` / `text2music` generation, no animated hero (a static cover image is fine), and no cinematic scroll (those roles are skipped in fast). Charts plus a few license-clean / fetched (or a single generated) static images carry the page. The full five-channel multimedia brief below is the premium profile.
8
9	## Setup
10
11	- `PROJECT_DIR` = first argument
12	- Resolve `SKILL_DIR` = the directory containing this `SKILL.md` (`.../skills/data2story-pro/designer`). Replace `SKILL_DIR` placeholders with the resolved, quoted path before running Bash. Do not hard-code machine-local paths.
13	- Read `PROJECT_DIR/editor.md`, `PROJECT_DIR/editor.json`, `PROJECT_DIR/analyst.json`, and `PROJECT_DIR/scout.json` (if present) before doing anything
14	- Read the shared design system in [`../../frontend-design-pro/`](../../frontend-design-pro/) (`SKILL.md` + `references/`) and choose a theme + component vocabulary for this story
15	- Assets go in `PROJECT_DIR/assets/`
16	- Output: `PROJECT_DIR/designer.json`
17
18	## How to read the input files
19
20	- `editor.md`: the prose document with section structure. Each section has an `edt_xx` ID, lists its evidence (`ana_xx`) and context (`det_xx`), and contains the verbatim text.
21	- `editor.json`: machine-readable sections. Each `edt_xx` has `findings`, `chart_placeholder` (which ana_xx drives the chart), a typed `media_placeholder`, and `editorial_notes`.
22	- `analyst.json`: items keyed by `ana_xx`. Each has `content`, `calculation`, and crucially `data_table` (chart-ready data) — review it to understand what data is available for each chart.
23
24	## Tools
25
26	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`](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. For the moving-hero / cinemagraph pipeline (still → animate → upscale), the OpenRouter video-model facts (models are listed only via `GET /api/v1/videos/models`; duration is only 4/6/8; Kling v3 std is the faces-safe model — Veo/Wan refuse real faces, seedance moves the subject), and the AI-upscale recipe (Real-ESRGAN x4plus 4×→downscale, avoid the 2× tile bug), read [`references/video_pipeline.json`](references/video_pipeline.json) before animating anything.
27
28	## Step 1: Design the Hero (REQUIRED on every run)
29
30	The hero is the first thing the reader sees — before the headline, before any prose. It must create curiosity on its own. A hero is REQUIRED on every run — never `none`. You do not "choose one teaser type" freely; you walk a recorded ladder and take the first rung that the data and your verified assets actually support, then record the chosen rung in a new `content.hero_strategy` field on the hero item (so the gate and the Critic can see which path was taken and why):
31
32	1. `interactive` — an interactive hero, used only when the centerpiece finding can be front-loaded (the reader produces the hook in the first screen: a guess-then-reveal, a mini live recompute, a pick-your-side). Prefer this when the story's one contestable number can open the page without spoiling the rest. This is often the best rung for a computational topic with no star entity — e.g. "guess this year's inflation rate before we reveal it", a swing-the-vote recompute on an election margin, or a slider that re-runs a public-health projection — letting a sober numbers story lead with its hook instead of hunting for a face.
33	2. `real_still` — a verified real-subject still, FETCHED not generated: the Scout's `sct_` asset (

QinghongLinPublisher · 28 listings

Preview

QinghongLin/data2story-skill

# 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

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 m

> **Fast profile.** When `run_config.json` says `run_profile: "fast"`, design **charts + static images only** — no `text2video` / `image2video` / `text2music` g

RepoQinghongLin/data2story-skill

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars146

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type