Bring Fable-style design taste to any AI coding agent — so it stops shipping generic Tailwind defaults and starts shipping designs people screenshot.
| ❌ BEFORE — default AI UI | ✅ AFTER — Fable Design Skill |
Same brand. Same copy. Same prompt. Left: what an AI coding agent ships by default. Right: the identical page with the Fable Design System installed.
For builders who use Claude, Cursor, Codex, or Antigravity to ship websites — and want better UI without hiring a designer.
Each pair below is the same brand and the same copy — left is a default AI agent's output, right is the same page rebuilt with the Fable Design System. These aren't mockups; the "after" matches four real sites in production.
| Product | Before → After |
|---|---|
| UploadCheck — pre-publish media QC |  |
| HealthBrew — daily health reflection | |
| EstimateProof — used-car deal check |  |
| Cliros — real-estate closing automation |  |
The "before" pages are real, un-coached output from a fast model given a plain "build a landing page" prompt — not strawmen.
When the fable coding model produced UI, it had a recognizable eye: warm
editorial restraint, real typography, measured color, motion that earned its
keep — and it critiqued its own designs by measuring them, not eyeballing.
Fable Design Skill reconstructs that design instinct as a portable skill you can install into your AI coding agent. Once installed, when you ask your agent to build a landing page, a pricing section, a hero, or a whole site, it works like an award-winning SaaS designer instead of defaulting to the same gray-Inter-on-white template every AI ships.
It's not a UI kit or a component library. It's a design brain — a set of operating instructions + concrete tokens that change how your agent thinks about design.
Your agent will:
- ✅ Declare a design system before building (palette · type · spacing · motion · a11y) instead of improvising.
- ✅ Never ship default fonts or generic Tailwind defaults — always a real display + body + mono type pairing.
- ✅ Use warm "paper" backgrounds (never flat
#fff), one meaningful accent, and a second color reserved strictly for warnings. - ✅ Build with fluid
clamp()type ladders and spacing, pill CTAs, soft grounded shadows, and radius that matches the brand's voice. - ✅ Treat motion with restraint (CSS over video,
prefers-reduced-motionalways). - ✅ Self-critique by measuring — checking contrast ratios and value separation, then fixing root causes.
- ✅ Verify the result in a real browser at real breakpoints before calling it done.
See the full spec in FABLE-DESIGN-PERSONA.md.
curl -fsSL https://raw.githubusercontent.com/ajantoniou/fable-design-system/main/install.sh | bashAuto-detects Claude, Codex, and Antigravity/Gemini and installs the skill into
each. No sudo, backs up any existing install, nothing runs in the background.
Restart your agent and ask it to build a page. (Prefer to read it first? It's
install.sh — or use the per-tool steps below.)
Or install manually, per tool ↓
Claude (Claude Code / Desktop)
git clone https://github.com/ajantoniou/fable-design-system.git
mkdir -p ~/.claude/skills/fable-design-system
cp fable-design-system/skills/claude/SKILL.md ~/.claude/skills/fable-design-system/SKILL.md
cp fable-design-system/FABLE-DESIGN-PERSONA.md fable-design-system/EVIDENCE.md ~/.claude/skills/fable-design-system/Restart Claude (or start a new session). The fable-design-system skill will
auto-trigger on any UI/website work. You can also drop
CLAUDE.md into a project root to enforce it there.
Codex
git clone https://github.com/ajantoniou/fable-design-system.git
mkdir -p ~/.codex/skills/fable-design-system
cp fable-design-system/skills/codex/SKILL.md ~/.codex/skills/fable-design-system/SKILL.md
cp fable-design-system/FABLE-DESIGN-PERSONA.md fable-design-system/EVIDENCE.md ~/.codex/skills/fable-design-system/Or drop AGENTS.md at your repo root — Codex reads it automatically.
Antigravity (Google)
git clone https://github.com/ajantoniou/fable-design-system.git
mkdir -p ~/.gemini/config/plugins/fable-design-system/skills/fable-design-system
cp fable-design-system/skills/antigravity/SKILL.md \
~/.gemini/config/plugins/fable-design-system/skills/fable-design-system/SKILL.md
cp fable-design-system/FABLE-DESIGN-PERSONA.md fable-design-system/EVIDENCE.md \
~/.gemini/config/plugins/fable-design-system/skills/fable-design-system/Then add the plugin manifest (plugin.json) — a copy is included at
install/gemini/plugin.json. Restart Antigravity.
Cursor
Copy .cursor/rules/fable-design.mdc into
your project's .cursor/rules/ directory. It auto-attaches when you edit
.tsx, .css, .html, or tailwind.config.*.
| File | What it's for |
|---|---|
FABLE-DESIGN-PERSONA.md |
The full persona — operating method + concrete tokens for type, spacing, color, buttons, shadows, radius, animation. |
EVIDENCE.md |
How the persona was derived, with honest caveats. |
skills/claude·codex·antigravity/SKILL.md |
Per-tool skill files. |
CLAUDE.md · AGENTS.md · .cursor/rules/ |
Project-level rule files for each ecosystem. |
Just ask your agent to build UI, normally:
"Build me a landing page hero and pricing section for a habit-tracking app."
With the skill installed, it'll declare a system, pick a real type pairing, use a warm palette with one accent, and verify the result — instead of giving you the default AI template. Want a specific direction? Say so ("editorial", "techy dark", "official/spec-sheet") and the radius/type/color shift accordingly.
This is an independent, community reconstruction of a design style, derived
by observing publicly-recorded outputs and design reasoning. It is not
affiliated with, endorsed by, or an official artifact of any model provider, and
it does not contain any model weights, prompts, or proprietary material — only
original design guidance written from observed patterns. The specific token values
are illustrative starting points, not canon. See EVIDENCE.md.
- Created by Dr. Antoniou — physician & builder. Also building HealthBrew.
- Offered free for creatives & content creators by UploadCheck — pre-publish QC for video, podcasts, and clips.
If this saved you time, a ⭐ on the repo and a share is the whole "price." Enjoy. 🎨
MIT — free to use, modify, and redistribute, including commercially.