The Art Director
One skill, one taste system. The agent never guesses what good looks like again.
Credited sources (the five big ones, distilled)
This skill does not replace them; it distills one opinionated, conflict-free system from them so five skills never fight over one trigger.
This is a dispatcher: the file you are reading stays small and loads the right reference module for the job. Never load more than two modules for one task.
Dispatch table
| Task looks like |
Load |
| Course chapter, presentation, long-form deliverable |
references/design-principles.md + references/page-patterns.md |
| Dashboard, report, research doc |
references/design-principles.md |
| Quick artifact (card, one-pager, verdict screen) |
references/page-patterns.md |
| Anything with charts/data |
references/design-principles.md + the dataviz skill if installed |
Non-negotiables (always on, no module needed)
- Dark premium base. Near-black blue-tinted background (#07090f family), never pure black, never light mode unless asked.
- Cool gradient accents. Blue → teal → violet. Gold/amber reserved for money, warnings, and the single most important thing on the page. Red only for danger.
- Editorial type contrast. Big bold sans headlines with ONE italic serif accent word. Space Grotesk for every number. Mono for kickers, labels, and file paths.
- One metaphor card per concept ("THINK OF IT LIKE" pattern): line-art icon, one-line analogy, two-line explanation.
- Section rhythm: mono kicker chip → headline with accent word → italic serif subtitle → content → "SO WHAT →" action strip.
- Numbers are heroes. Big stat, small label, source underneath. Never bury a number in a sentence.
- No em dashes in copy. Commas, colons, periods.
7b. Type alone is not a slide. Every slide or section carries one crafted visual element built in HTML/CSS: a scene (layered shapes, gradients, silhouettes), a diagram, a data visual, or a hero number treatment. If a screen is only headline + subtitle, it is unfinished. Build the graphic.
- Render-verify loop: screenshot the output with headless Chrome, read the image, fix what looks off, THEN deliver. Never ship unrendered HTML.
Illustration system
Hero illustrations use the inked-blueprint / Da Vinci schematic style: sepia parchment, fine ink linework, annotated arrows, one human figure for scale. Generate via the visuals/infographic pipeline (nano-banana-2) with the style reference in ~/Desktop/image-assets/preferred-styles/. One hero illustration per major section, never per paragraph.
Quality bar
Before delivering, score the output: Would this pass as a $10,000 client deliverable? Is there ONE clear hero element per screen? Can you read every word at arm's length? Does anything look like default AI output (generic cards, purple-on-white, emoji soup)? If any answer is wrong, fix before shipping.
1---2name: art-director3description: The Art Director4---56# The Art Director78One skill, one taste system. The agent never guesses what good looks like again.910## Credited sources (the five big ones, distilled)1112- [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) — 112k★, the design-intelligence giant13- [taste-skill](https://github.com/Leonxlnx/taste-skill) — 70k★, "gives your AI good taste"14- [hallmark](https://github.com/Nutlope/hallmark) — 20k★, the anti-AI-slop skill15- [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better) — the UI-details article as a skill16- Jack's own taste-design ruleset (the power-design rules in `references/design-principles.md`)1718This skill does not replace them; it distills one opinionated, conflict-free system from them so five skills never fight over one trigger.1920This is a **dispatcher**: the file you are reading stays small and loads the right reference module for the job. Never load more than two modules for one task.2122## Dispatch table2324| Task looks like | Load |25|---|---|26| Course chapter, presentation, long-form deliverable | `references/design-principles.md` + `references/page-patterns.md` |27| Dashboard, report, research doc | `references/design-principles.md` |28| Quick artifact (card, one-pager, verdict screen) | `references/page-patterns.md` |29| Anything with charts/data | `references/design-principles.md` + the dataviz skill if installed |3031## Non-negotiables (always on, no module needed)32331. **Dark premium base.** Near-black blue-tinted background (#07090f family), never pure black, never light mode unless asked.342. **Cool gradient accents.** Blue → teal → violet. Gold/amber reserved for money, warnings, and the single most important thing on the page. Red only for danger.353. **Editorial type contrast.** Big bold sans headlines with ONE italic serif accent word. Space Grotesk for every number. Mono for kickers, labels, and file paths.364. **One metaphor card per concept** ("THINK OF IT LIKE" pattern): line-art icon, one-line analogy, two-line explanation.375. **Section rhythm**: mono kicker chip → headline with accent word → italic serif subtitle → content → "SO WHAT →" action strip.386. **Numbers are heroes.** Big stat, small label, source underneath. Never bury a number in a sentence.397. **No em dashes in copy.** Commas, colons, periods.407b. **Type alone is not a slide.** Every slide or section carries one crafted visual element built in HTML/CSS: a scene (layered shapes, gradients, silhouettes), a diagram, a data visual, or a hero number treatment. If a screen is only headline + subtitle, it is unfinished. Build the graphic.418. **Render-verify loop**: screenshot the output with headless Chrome, read the image, fix what looks off, THEN deliver. Never ship unrendered HTML.4243## Illustration system4445Hero illustrations use the inked-blueprint / Da Vinci schematic style: sepia parchment, fine ink linework, annotated arrows, one human figure for scale. Generate via the visuals/infographic pipeline (nano-banana-2) with the style reference in `~/Desktop/image-assets/preferred-styles/`. One hero illustration per major section, never per paragraph.4647## Quality bar4849Before delivering, score the output: Would this pass as a $10,000 client deliverable? Is there ONE clear hero element per screen? Can you read every word at arm's length? Does anything look like default AI output (generic cards, purple-on-white, emoji soup)? If any answer is wrong, fix before shipping.