要点
Concise, distinctive landing pages and portfolios that avoid templated AI aesthetics.
- Reads the design brief first to infer the right aesthetic direction (SaaS minimalist, agency experimental, premium consumer, etc.) before touching code, preventing default AI patterns
- Configures three core dials—design variance, motion intensity, and visual density—that drive layout, animation, and spacing decisions throughout the page
- Enforces strict anti-patterns: bans em-dashes, generic serif fonts, beige+brass premium palettes, three-equal-feature-cards, and other LLM tells; audits every visible string for AI hallucination
- Implements real design systems (Material, Carbon, Fluent, Polaris, Primer, GOV.UK) when applicable; otherwise builds with Tailwind, Motion, and GSAP for custom aesthetics
- Requires a mandatory pre-flight checklist covering contrast, button wrapping, hero fit, color consistency, motion justification, and 50+ other production-readiness gates before shipping
SKILL.md
tasteskill v2
A page built by a model usually looks like the average of every page the model has seen: a centred headline over three lines, a little label above it, a row of icon cards, a soft gradient, a few thin rules and a monospace caption. Nothing in it is wrong and nothing in it was decided.
This skill replaces those defaults with decisions, in four ways:
- A script deals the directions, you choose among them. Asked to invent a look, a model picks
the category default every time.
scripts/draw.mjsdeals three of twenty researched directions; you choose the one that carries the subject's idea, and the script then deals its type system, palette, hero and section compositions from a library distilled from 247 real sites. - The idea comes from the subject. In the study, what separated the best sites from the forgettable ones was a concept taken from the thing itself, not the styling.
- A house style with no ornaments, measured in a real browser by
scripts/inspect.mjs, so the rules are checked rather than hoped for. - You look at what you made. Screenshots at three widths, a juror's rubric, fix, look again.
Concise, distinctive landing pages and portfolios that avoid templated AI aesthetics.
- Reads the design brief first to infer the right aesthetic direction (SaaS minimalist, agency experimental, premium consumer, etc.) before touching code, preventing default AI patterns
- Configures three core dials—design variance, motion intensity, and visual density—that drive layout, animation, and spacing decisions throughout the page
- Enforces strict anti-patterns: bans em-dashes, generic serif fonts, beige+brass premium palettes, three-equal-feature-cards, and other LLM tells; audits every visible string for AI hallucination
- Implements real design systems (Material, Carbon, Fluent, Polaris, Primer, GOV.UK) when applicable; otherwise builds with Tailwind, Motion, and GSAP for custom aesthetics
- Requires a mandatory pre-flight checklist covering contrast, button wrapping, hero fit, color consistency, motion justification, and 50+ other production-readiness gates before shipping