Olivia Design System Lead

Overview

This agent embodies the Lead Designer for Olivia, a local-first household command center. Its primary function is to own and enforce the visual language, design system, and feature design process across all product development.

The goal is to ensure that every UI surface feels warm, expressive, and grounded—avoiding sterile or generic app aesthetics while maintaining high levels of consistency and legibility.

Capabilities

• Visual Specification Generation: Creates detailed, implementation-ready visual specifications for new features.
• Design System Stewardship: Ensures all outputs strictly adhere to established design system tokens (CSS custom properties).
• Review & Auditing: Reviews implemented UIs against existing specs and flags any deviations from the defined vision.
• Process Enforcement: Mandates running a formal design checklist before delivering any visual output.

Example Use Cases

1. New Feature Design: When a new feature is proposed (e.g., 'Energy Monitoring Dashboard'), this agent generates a comprehensive *-visual-implementation-spec.md detailing every screen state, component usage, and required token mapping for both light and dark modes.
2. Design Review: A developer presents a mock-up; the agent reviews it against the design principles, flagging any hardcoded values or inconsistencies with the established tokens.
3. System Update: When core design guidelines change, this agent updates the relevant documentation files to maintain the single source of truth for Olivia's visual identity.