Copy any block, paste it to Claude, and go. Each is written to trigger the right skill and to make deliberate, non-templated choices. Swap the [bracketed] parts for your own.
Add a new design direction
→ frontend-design
Grows the gallery by one page, in a look that isn't already here.
Invoke the frontend-design skill. Add a new design direction to fableguide.com/design/ called "[Name]".
Subject: retell the Aesop fable "[The Fox and the Grapes]" as one self-contained page. Audience: [parents reading to young children].
Before building, draft a compact token system — 5 named hex colors, a display + body typeface pairing, a one-sentence layout concept, and ONE signature element — then critique it against the brief and cut anything that reads as a generic default. Only then build.
Match the existing pages: a neutral top "chrome" bar reading "FableGuide · Design direction — [Name]" with a back link to /design/, and a closing "designer's notes" section (feeling, palette swatches, type, signature, structure). Root-relative links, self-contained, responsive to mobile, visible focus, honor prefers-reduced-motion. Write it to design/[name-slug]/index.html and add it to the gallery menu on design/index.html.
Run a screenshot critique
→ /layout + /code-review
The build → look → fix loop. Catches what the code alone won't.
Run /layout fableguide.com/design/[name-slug]/ — shoot it at desktop and mobile, actually read the screenshots back, and report concrete problems: overlaps, cut-off text, weak contrast, anything that reads as generic. Then run /code-review on the file to catch CSS-specificity traps where selectors cancel each other's spacing. Propose specific fixes and, once I approve, apply them.
Turn a page into a reusable skin
→ frontend-design
Promote a one-off look into a token set you can apply to many pages.
Take the "[Storybook]" direction at design/[storybook]/index.html and extract it into a reusable skin: pull every color and size into a named :root token block, isolate the display/body type pairing and the signature element as documented, reusable pieces, and write a one-paragraph "when to use this skin" note. Keep it portable — root-relative assets, one canonical-URL variable, zero hard-coded hosts — so it can drop onto any WholeTech site without a rewrite.
Push a design system to claude.ai/design
→ /design-login · /design-sync
Make the skins a living library future sessions design against.
I want to sync my component library to claude.ai/design. First confirm access with /design (grant if needed), then /design-login to authorize this session. Run /design-sync against [./design-system] — show me the exact write/delete plan before anything is written, and sync incrementally, one component at a time, never a wholesale replace. Register a preview card per component grouped by [Buttons / Cards / Type / Color].
Grade a site's design
→ /layout + the eval rubric
Score any page against the six categories on the Eval sheet.
Score [example.com] against the fableguide.com/design/eval rubric. Run /layout to see it at desktop and mobile first. Grade 0–10 on each of: Distinctiveness (not one of the three AI defaults), Typography, Palette & color, Signature element, Motion & accessibility, and Craft floor (responsive, focus, contrast). Give one concrete, highest-leverage fix per category and a total out of 60. Be honest — no inflation.
Make a chart that matches the design
→ dataviz
When data enters the page, keep it in the same visual system.
Invoke the dataviz skill. Build a [bar chart] of [the data] for this page. Use the page's existing token palette (don't introduce new colors), keep series distinct and accessible in both light and dark, label axes plainly, and add a legend only if there's more than one series. Run the color validator before finalizing. Self-contained SVG/CSS — no external requests.
Tip: Design the direction with Opus 4.8 (or Fable 5 for a flagship), then let Sonnet or Haiku apply and maintain the resulting skin. And always start from a real subject — the method beats the horsepower.