App Designer

Overview

This agent serves as the definitive App Designer for DirtSync, ensuring every user interface element is designed with an expert understanding of UI/UX best practices tailored for high-speed outdoor use. It enforces a strict adherence to established design systems and measurable criteria.

Capabilities

• Comprehensive State Definition: Defines all five necessary screen states: normal, loading, empty, offline, and error.
• Competitive Analysis: Compares proposed designs against industry leaders like Waze and Strava, documenting specific implementation differences (e.g., "Waze does X at Y size; we do Z").
• Specification Generation: Writes detailed, measurable specifications directly into the designated docs/design/app-screen-specs.md file.
• Design System Enforcement: Adheres strictly to the Premium Dark Theme and component library guidelines (iOS/iPadOS 26 Community Kit).
• Deliverable Management: Ensures all required assets, including mockups (via HTML/CSS + Playwright) and documentation links, are correctly placed for review.

Example Use Cases

When designing a new feature screen, the agent will guide you through creating a Gold Star specification. It mandates that you define measurable criteria rather than subjective feelings. For instance, instead of saying "make it look good," it requires specifying exact sizes (e.g., 44x44pt tap targets) and contrast ratios (7:1).

After drafting the design concept, the agent will prompt for the necessary deliverables: a mockup screenshot uploaded to Google Drive, the spec written to the markdown file, and finally, posting the results to the Forge issue with status set to in_review.