openai-dotcom-viz

Name: openai-dotcom-viz
Author: yzlnew

2installs10forks

How to install openai-dotcom-viz?

yzlnew/infra-skills/openai-dotcom-viz

$npx -y skills add yzlnew/infra-skills --skill openai-dotcom-viz

Installs into the current project.

Summary

Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks and no gridlines, circle legend markers left-aligned to the y-axis, value labels

Files · 1

View on GitHub

SKILL.md

1	# OpenAI dotcom figures
2
3	Reproduce the two figure types OpenAI uses in its posts, as **self-contained
4	HTML/SVG** (no Vega, D3, Mermaid, or build step):
5
6	1. Bar charts — grouped or single-series. → see "Bar charts" below.
7	2. Flow / process diagrams — e.g. the "Quality assurance pipeline". → see
8	"Flow diagrams" below.
9
10	Both share one design system: the real OpenAI Sans font (loaded from OpenAI's
11	public CDN), near-black ink `#0d0d0d`, and a pink accent. The full color palette
12	(6 hues × 5 shades) and token rules are in `references/design-spec.md` — read it
13	when you need extra hues, more series, or to theme surrounding page elements so
14	everything reads as one system.
15
16	## Bar charts
17
18	Use the bundled renderer `assets/openai-chart.js` — a zero-dependency function
19	that draws the chart into an `<svg>` from a data spec. It injects the font + the
20	chart styles itself, so a `<script src>` plus a spec is all a page needs.
21
22	```html
23	<script src="assets/openai-chart.js"></script>
24	<svg id="chart"></svg>
25	<script>
26	renderOpenAIBarChart("#chart", {
27	title: "Share of Dataset Flagged by Issue Type",
28	yAxisTitle: "Percent of total dataset",
29	valueFormat: "percent", // values are fractions (0.144 -> "14.4%")
30	yMax: 0.20, yTickStep: 0.05,
31	categories: ["Overly strict\ntests", "Low-coverage\ntests", /* … */], // \n wraps a label
32	series: [
33	{ name: "Human supervised agent review", values: [0.144, 0.041, /* … */] },
34	{ name: "Human annotations", values: [0.178, 0.094, /* … */] }
35	]
36	});
37	</script>
38	```
39
40	Colors auto-assign from the palette, so you usually pass only names + values.
41	`assets/chart-example.html` reproduces the reference figure.
42
43	Spec fields: `categories` (use `\n` to wrap), `series[]` (`{name, values[], fill?, stroke?}`),
44	`title`, `yAxisTitle`, `valueFormat` (`"percent"` default \| `"number"` \| `fn`),
45	`yMax`, `yTickStep`/`yTicks`, `width`/`height`, `bottomMargin` (raise if labels clip),
46	`legend:false`, `palette` (override colors). The look — one-hue bars with a darker
47	same-hue stroke, rounded rects, black y-axis with ticks and no gridlines, circle
48	legend left-aligned to the axis, value labels above bars, −45° category labels —
49	is baked in.
50
51	## Flow diagrams
52
53	These are hand-arranged, not generated (branching/alignment are judgement
54	calls). The skill gives you the primitives and the look; you assemble the layout.
55	Include `assets/openai-figure.css`, wrap the diagram in `<div class="oai-figure">`,
56	add the arrow marker once, and compose from `.box` / `.subbox` / `.pill` /
57	`.conn`. Copy `assets/flow-example.html` (a complete working pipeline) as a start.
58
59	Read `references/flow-diagram.md` for: the primitives, the open-chevron arrow
60	marker, rounded-corner connector recipes, and the column layout approach. Key
61	style points: rounded boxes + 1.5px black keylines, monospace UPPERCASE pills
62	(`.pill`, `.pill.accent` = solid pink, `.pill.dotted` = stippled pink), thin
63	open-chevron connectors (never filled triangles), rounded corners on turns, and a
64	dashed shaft for a negative/"did-not-happen" branch.
65
66	> Gotcha: never put a literal three-dash arrow inside an HTML comment — the `-->`
67	> inside it closes the comment early and leaks text onto the page.
68
69	## Fonts & offline
70
71	OpenAI Sans loads over the network from `cdn.openai.com` (CORS-open). For strictly
72	offline/print output, download the four weights
73	(`OpenAISans-{Regular,Medium,Semibold,Bold}.woff2` under
74	`https://cdn.openai.com/common/fonts/openai-sans/`) and inline them as base64
75	`@font-face src:url(data:font/woff2;base64,…)`, replacing the CDN URLs. Otherwise
76	it falls back to Helvetica/Arial — close but not exact. (OpenAI's monospace, used
77	for pill labels, is not on the public CDN; a generic monospace matches the look.)
78
79	## Verifying output
80
81	Render headless and eyeball it (give the font time to load, or you'll snapshot
82	the fallback):
83
84	```bash
85	"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
86	--headl

People who liked this also viewed

6 picks

Type

openai-dotcom-viz

2installs10forks

View on GitHub

How to install openai-dotcom-viz?

yzlnew/infra-skills/openai-dotcom-viz

$npx -y skills add yzlnew/infra-skills --skill openai-dotcom-viz

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# OpenAI dotcom figures
2
3	Reproduce the two figure types OpenAI uses in its posts, as **self-contained
4	HTML/SVG** (no Vega, D3, Mermaid, or build step):
5
6	1. Bar charts — grouped or single-series. → see "Bar charts" below.
7	2. Flow / process diagrams — e.g. the "Quality assurance pipeline". → see
8	"Flow diagrams" below.
9
10	Both share one design system: the real OpenAI Sans font (loaded from OpenAI's
11	public CDN), near-black ink `#0d0d0d`, and a pink accent. The full color palette
12	(6 hues × 5 shades) and token rules are in `references/design-spec.md` — read it
13	when you need extra hues, more series, or to theme surrounding page elements so
14	everything reads as one system.
15
16	## Bar charts
17
18	Use the bundled renderer `assets/openai-chart.js` — a zero-dependency function
19	that draws the chart into an `<svg>` from a data spec. It injects the font + the
20	chart styles itself, so a `<script src>` plus a spec is all a page needs.
21
22	```html
23	<script src="assets/openai-chart.js"></script>
24	<svg id="chart"></svg>
25	<script>
26	renderOpenAIBarChart("#chart", {
27	title: "Share of Dataset Flagged by Issue Type",
28	yAxisTitle: "Percent of total dataset",
29	valueFormat: "percent", // values are fractions (0.144 -> "14.4%")
30	yMax: 0.20, yTickStep: 0.05,
31	categories: ["Overly strict\ntests", "Low-coverage\ntests", /* … */], // \n wraps a label
32	series: [
33	{ name: "Human supervised agent review", values: [0.144, 0.041, /* … */] },
34	{ name: "Human annotations", values: [0.178, 0.094, /* … */] }
35	]
36	});
37	</script>
38	```
39
40	Colors auto-assign from the palette, so you usually pass only names + values.
41	`assets/chart-example.html` reproduces the reference figure.
42
43	Spec fields: `categories` (use `\n` to wrap), `series[]` (`{name, values[], fill?, stroke?}`),
44	`title`, `yAxisTitle`, `valueFormat` (`"percent"` default \| `"number"` \| `fn`),
45	`yMax`, `yTickStep`/`yTicks`, `width`/`height`, `bottomMargin` (raise if labels clip),
46	`legend:false`, `palette` (override colors). The look — one-hue bars with a darker
47	same-hue stroke, rounded rects, black y-axis with ticks and no gridlines, circle
48	legend left-aligned to the axis, value labels above bars, −45° category labels —
49	is baked in.
50
51	## Flow diagrams
52
53	These are hand-arranged, not generated (branching/alignment are judgement
54	calls). The skill gives you the primitives and the look; you assemble the layout.
55	Include `assets/openai-figure.css`, wrap the diagram in `<div class="oai-figure">`,
56	add the arrow marker once, and compose from `.box` / `.subbox` / `.pill` /
57	`.conn`. Copy `assets/flow-example.html` (a complete working pipeline) as a start.
58
59	Read `references/flow-diagram.md` for: the primitives, the open-chevron arrow
60	marker, rounded-corner connector recipes, and the column layout approach. Key
61	style points: rounded boxes + 1.5px black keylines, monospace UPPERCASE pills
62	(`.pill`, `.pill.accent` = solid pink, `.pill.dotted` = stippled pink), thin
63	open-chevron connectors (never filled triangles), rounded corners on turns, and a
64	dashed shaft for a negative/"did-not-happen" branch.
65
66	> Gotcha: never put a literal three-dash arrow inside an HTML comment — the `-->`
67	> inside it closes the comment early and leaks text onto the page.
68
69	## Fonts & offline
70
71	OpenAI Sans loads over the network from `cdn.openai.com` (CORS-open). For strictly
72	offline/print output, download the four weights
73	(`OpenAISans-{Regular,Medium,Semibold,Bold}.woff2` under
74	`https://cdn.openai.com/common/fonts/openai-sans/`) and inline them as base64
75	`@font-face src:url(data:font/woff2;base64,…)`, replacing the CDN URLs. Otherwise
76	it falls back to Helvetica/Arial — close but not exact. (OpenAI's monospace, used
77	for pill labels, is not on the public CDN; a generic monospace matches the look.)
78
79	## Verifying output
80
81	Render headless and eyeball it (give the font time to load, or you'll snapshot
82	the fallback):
83
84	```bash
85	"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
86	--headl

People who liked this also viewed

6 picks

Type