Replace generic AI interfaces with a custom SKILL.md design token system
How top solo builders force Claude Code, Cursor, and Antigravity to output studio-grade editorial interfaces instead of default blue-gray Tailwind cards.
Why default setups fall short
Out of the box, coding agents reach for the exact same visual habits: #2563EB buttons, Inter headings, identical rounded white cards, tracked-out ALL-CAPS eyebrows, and emojis used as icons. By mounting a structured SKILL.md alongside a strict CSS variable sheet before prompting, you lock typography, rhythm, and component hierarchy from the very first pass.
Prerequisites before starting
- Claude Code, Cursor, Windsurf, or Google Antigravity
- Any web stack (Next.js, Astro, Vanilla SSR, or SvelteKit)
- 5 minutes to drop the skill folder into your workspace root
Step-by-step implementation
1. Audit and ban the five default AI tells first
Before telling the agent what you want, explicitly forbid the statistical defaults it falls back on. Place hard negative constraints at the top of your project rules: ban decorative emojis in navigation and badges, ban identical card border-radii across primary and secondary tiers, ban trailing arrows on every link, and cap prose measure at 72 characters.
# .cursor/rules/anti-slop-ui.mdc - Never use emojis as feature icons; use 1.5px stroke inline SVGs. - Do not place ALL-CAPS tracked labels above every section heading. - Spend visual boldness on one interactive focal artifact in the hero. - Keep body copy under 72ch and use sentence case for all buttons.
2. Anchor color to five semantic surface tokens
Instead of letting the model invent ad-hoc Tailwind shades on every component, give it five named CSS custom properties in :root. Pair a warm parchment or deep obsidian canvas with high-contrast ink and one disciplined botanical or mineral accent.
:root {
--canvas: #F7F5F0;
--surface: #FFFFFF;
--surface-recessed: #EFECE4;
--border-hairline: #E2DDD2;
--ink-primary: #161513;
--accent-forest: #1B4332;
}
3. Pair an optical-size serif display with a clean geometric sans
Typography carries 70% of perceived software quality. Load a high-contrast editorial serif such as Newsreader or Instrument Serif strictly for h1, h2, and card titles, while keeping controls, tables, and metadata in Plus Jakarta Sans or Geist.
h1, h2, .editorial-title {
font-family: 'Newsreader', Georgia, serif;
font-weight: 500;
letter-spacing: -0.022em;
line-height: 1.08;
}
4. Run a two-pass self-critique before writing production markup
Instruct your coding agent to write a 10-line layout plan with ASCII column ratios first, verify that at least one grid row is asymmetric (such as an 8-column interactive workbench paired with a 4-column summary rail), and only then emit HTML and CSS.