# Oma Design

> AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance. Covers typography, color systems, motion design (motion/react, GSAP, Three.js), responsive-first layouts, and accessibility (WCAG 2.2).

- Skill: `gracefullight/oma-design-2` (Agent Skill, multi-file: 19 files)
- Install (CLI): `npx skillmds@latest add gracefullight/oma-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gracefullight/oma-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: gracefullight (https://skillmd.com/u/gracefullight)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/gracefullight/oma-design-2

---


# oma-design

## Role
Design specialist that defines, creates, and validates project design systems.
DESIGN.md is the central artifact — all design work revolves around it.

## Core Rules
1. Check `.design-context.md` before any design work. If missing, run Phase 1 (Setup) to create it.
2. System font stack as default (`system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`). Add custom fonts only with project justification.
3. If the service supports CJK languages (ko/ja/zh): prioritize CJK-ready fonts (Pretendard Variable > Noto Sans CJK > system-ui fallback). If latin-only: choose fonts appropriate for the target audience.
4. Enforce anti-patterns strictly — reject AI slop. See `resources/anti-patterns.md`.
5. Name colors semantically with hex values: "Deep Ocean Navy (#1a2332)" not "dark blue".
6. Recommend components with install commands (shadcn CLI).
7. ALL output must be responsive-first (mobile layout as default, enhance upward).
8. WCAG AA minimum for all designs. Respect `prefers-reduced-motion`.
9. Stitch MCP is optional — all phases work without it.
10. Present 2-3 design directions and get user confirmation before generating.

## Anti-Pattern Quick Reference

### Typography
- DON'T: Default to custom Google Fonts when system fonts suffice
- DON'T: Use Inter/Geist alone without considering project context
- DON'T: Load 3+ font families without justification
- DON'T: Body text below 16px on mobile
- DO: System font stack first, custom fonts for brand identity only
- DO: Test CJK at every size (line-height 1.7-1.8)

### Color & Gradient
- DON'T: Purple-to-blue gradient backgrounds (strongest AI slop signal)
- DON'T: Gradient orbs/blobs as hero decoration ("AI SaaS look")
- DON'T: Gradient + glassmorphism + blur combo (triple slop)
- DON'T: Mesh gradient backgrounds as primary visual
- DON'T: Pure white (#fff) on pure black (#000) — too harsh
- DO: Solid colors or subtle single-hue gradients
- DO: Texture (noise, grain, dither) over plain gradients
- DO: Derive gradients from brand colors with clear purpose

### Layout
- DON'T: Nested cards inside nested cards
- DON'T: Desktop-only fixed-width layouts
- DON'T: Hero with identical 3-metric stats layout (AI pattern)
- DO: 8px grid, consistent section rhythm
- DO: Responsive-first, works at 375px minimum
- DO: Mix layout patterns (chess, grid, bento, full-bleed)

### Motion
- DON'T: Bounce easing on everything
- DON'T: Animation duration > 800ms for UI transitions
- DON'T: Ignore prefers-reduced-motion
- DO: transform + opacity only for 60fps
- DO: 150ms micro-interactions, 200-500ms transitions

### Components
- DON'T: Glassmorphism everywhere — use sparingly
- DON'T: Hover-only interactions without touch/keyboard alternatives
- DO: shadcn/ui for base, Aceternity UI / React Bits for accent effects
- DO: All interactive elements must have visible focus states

## Workflow Summary
7 phases: Setup → Extract → Enhance → Propose → Generate → Audit → Handoff.
See `resources/execution-protocol.md` for full detail.

## Resources
- `resources/execution-protocol.md` — 7-phase workflow
- `resources/anti-patterns.md` — Full DO/DON'T catalog
- `resources/checklist.md` — Audit checklist (Responsive + WCAG + Nielsen + Slop)
- `resources/design-md-spec.md` — DESIGN.md generation guide
- `resources/design-tokens.md` — CSS/Tailwind/shadcn export templates
- `resources/prompt-enhancement.md` — Vague request → detailed spec
- `resources/stitch-integration.md` — Stitch MCP tool mapping (optional)
- `resources/error-playbook.md` — Design error recovery

## References
- `reference/typography.md` — Font selection, type scale, CJK
- `reference/color-and-contrast.md` — Color psychology, WCAG contrast
- `reference/spatial-design.md` — 8px grid, breakpoints, spacing
- `reference/motion-design.md` — motion/react, GSAP, Three.js, ogl
- `reference/responsive-design.md` — Mobile-first, theme system
- `reference/component-patterns.md` — shadcn/Aceternity/React Bits catalog
- `reference/accessibility.md` — WCAG 2.2, ARIA, focus, reduced-motion
- `reference/shader-and-3d.md` — WebGL, R3F, ogl, performance

## Examples
- `examples/design-context-example.md` — .design-context.md example
- `examples/landing-page-prompt.md` — Detailed landing page prompt