| name | web-design |
| aliases | ["/design","design brief","web design","UI design","create design"] |
| primaryRole | designer |
| description | Produce structured web and UI design artifacts following the DESIGN.md pattern. Use when the user wants a design brief, DESIGN.md, or UI design spec. |
Web Design Skill (oh-my-antigravity)
Quick Start
- Create DESIGN.md first, then produce the linked implementation or modification artifact.
Use this skill when a user requests web design, UI design, or project design work.
Follows the DESIGN.md artifact pattern from the Gemini CLI ecosystem.
Quick Start
This skill produces and maintains three linked documents:
- DESIGN.md — Living design specification (9 sections)
- IMPLEMENTATION.md — 3-5 phase execution plan
- MODIFICATION_PLAN.md — Change tracking for existing designs
DESIGN.md Template (9 Required Sections)
When creating a new DESIGN.md, include ALL of the following:
1. Visual Theme & Atmosphere
- Site density, mood, design philosophy
- Overall aesthetic direction
2. Color Palette & Roles
- Semantic color names with hex codes
- Functional roles: background, text, border, accent, error, success
- CSS variable or Tailwind class mappings
3. Typography Rules
- Font families, size scale, weight hierarchy
- Line-height and letter-spacing standards
4. Component Stylings
- Button, card, input, navigation, modal patterns
- State definitions: hover, active, disabled, focus, loading, error
5. Layout Principles
- Grid system, spacing scale, whitespace philosophy
- Container widths and breakpoint strategy
6. Depth & Elevation
- Shadow system, z-index layers, surface hierarchy
7. Do's and Don'ts
- Design guardrails and anti-patterns to avoid
8. Responsive Behavior
- Breakpoints, touch targets, component collapse strategy
- Mobile-first vs desktop-first approach
9. Agent Prompt Guide
- Quick reference for AI agents to apply the design system consistently
Workflow
- Clarify — Gather requirements: target users, brand tone, platform targets
- Design — Create DESIGN.md with all 9 sections
- Plan — Generate IMPLEMENTATION.md with 3-5 execution phases
- Review — Validate against accessibility (WCAG), responsiveness, brand consistency
- Iterate — Update via MODIFICATION_PLAN.md for changes
Rules
- ALWAYS create DESIGN.md before writing any UI code
- DESIGN.md is the single source of truth for visual decisions
- Every component must reference DESIGN.md tokens (no hardcoded values)
- Validate accessibility: ARIA labels, keyboard nav, color contrast (4.5:1 minimum)
- Test responsive behavior at mobile (375px), tablet (768px), desktop (1280px)
Output Format
Return structured markdown artifacts. For new projects:
- DESIGN.md (full 9-section spec)
- IMPLEMENTATION.md (phased execution plan)
For modifications:
- MODIFICATION_PLAN.md (change scope + impact analysis)
- Updated DESIGN.md sections
