Frontend design rules for clean, minimal, product-grade UI. Works with Claude Code, Cursor, and OpenAI Codex.
Covers spacing, typography, colors, buttons, icons, components, animations, motion vocabulary, and a QA process for keeping codebases clean and modular.
Pick your tool below and follow the one-liner.
Installs globally — available as /design in every project.
curl -o ~/.claude/commands/design.md https://raw.githubusercontent.com/gabrieltmitchell/ebagdesign/main/claude/design.mdThen in any project, type /design and describe what you want to build or review.
Adds the rules to a specific project. Run this from your project root:
mkdir -p .cursor/rules && curl -o .cursor/rules/design.mdc https://raw.githubusercontent.com/gabrieltmitchell/ebagdesign/main/cursor/design.mdcCursor will automatically apply the rules to all .ts, .tsx, .css, and .scss files.
Adds the rules to a specific project. Run this from your project root:
curl -o AGENTS.md https://raw.githubusercontent.com/gabrieltmitchell/ebagdesign/main/codex/AGENTS.mdFor global rules, place the file at ~/.codex/AGENTS.md.
| Section | Summary |
|---|---|
| Spacing & Layout | Tight, intentional spacing. 4px scale. Minimal vertical gaps. Agent-readable alignment boxes for handoff. |
| Typography | Inter font, product-grade type scale, strict text hierarchy. |
| Colors | Black and grey palette. Light grey surfaces. No gradients or shadows. |
| Buttons | Rounded, light grey, no shadows. More horizontal padding than vertical. |
| Icons | Lucide only. Consistent sizing. Never mix libraries. |
| Design System Source of Truth | Use DESIGN.md-style tokens + prose as project memory: exact values in YAML, intent and constraints in Markdown. |
| Liquid Glass | Live-content glass lenses with displacement maps, rim/specular highlights, cross-browser SVG/WebGL rendering, and performance guardrails. |
| Shader Page Transitions | GPU-composited route sweeps: shell-level WebGL, semantic direction/easing, restrained palettes, reduced-motion fallback, and performance QA. |
| Components | BaseUI foundation. Animated dropdowns and dialogs. Subtle hover states. |
| Animations | Framer Motion everywhere. Smooth morphing containers. Animation vocabulary, easing, springs, reduced motion, and performance QA. |
| Agent Handoff | Draw the invisible layout boxes: rails, bounds, padding, hit areas, anchors, and stable vs. changing regions. |
| QA Process | Scan before building. No duplication. Modular component library mindset. |
The animation rules now include a shared vocabulary distilled from animations.dev/vocabulary: entrances/exits, sequencing, transforms, continuity transitions, scroll motion, interaction feedback, easing, springs, ambient motion, polish effects, and performance. See references/animation-vocabulary.md for the full checklist.
When handing designs to coding agents, make the invisible structure visible: alignment rails, bounding boxes, padding boxes, hit areas, anchors, and stable vs. changing regions. See references/agent-layout-alignment.md for the principle and QA checklist.
Google's design.md format is a strong complement to these rules: use tokens for exact values and prose for the design rationale agents need to preserve taste. It should not replace the existing ebagdesign rules; it should act as the project-level source of truth that these rules execute against. See references/design-md-agent-rules.md for the distilled workflow.
For tactile glass surfaces, use live-content lenses driven by displacement maps rather than simple blur overlays. Keep refracted regions small, preserve readability and interactivity, and switch between SVG filters for DOM and WebGL for canvas/video surfaces when browser support requires it. See references/liquid-glass-web.md for the distilled component and performance guidance.
For expressive route changes, use a single GPU-composited shader sweep at the app shell level. Keep screens stable underneath it, match sweep direction/easing to navigation semantics, tune palettes against real UI surfaces, and provide non-WebGL plus reduced-motion fallbacks. See references/shader-page-transitions.md for the distilled implementation and QA guidance.
The rules are plain markdown — edit any file directly to match your project's conventions. The structure is intentionally opinionated but easy to override.
Open a PR. Keep it focused on product UI patterns — this isn't for marketing or landing page design.