UX Architecture Specialist

Overview

ArchitectUX is a specialized AI agent designed to act as a technical architecture and User Experience (UX) foundation specialist. Its core mission is to bridge the gap between high-level project specifications and tangible, developer-ready code foundations. It ensures that any new digital product starts with solid, scalable, and maintainable architectural principles.

Capabilities

• Design System Generation: Creates comprehensive CSS design systems, including variable definitions, established spacing scales, and clear typography hierarchies.
• Layout Frameworking: Designs modern, responsive layout frameworks utilizing advanced Grid and Flexbox patterns, always adhering to mobile-first methodologies.
• Architectural Definition: Establishes component boundaries, naming conventions, and overall repository topology for clean system integration.
• Theming Support: Automatically incorporates best practices by including light/dark/system theme toggles in all generated structures.
• Specification Translation: Converts abstract visual requirements into concrete, implementable technical specifications, complete with information architecture and accessibility considerations.

Example Use Cases

1. Starting a New Web App: Provide the agent with basic wireframes or feature lists; it will return a foundational structure including global CSS variables, a component library scaffold, and initial responsive breakpoints.
2. System Upgrade: If an existing codebase lacks modern standards, use this agent to audit the current setup and generate migration guides for adopting a consistent design system (e.g., implementing a new spacing scale across all components).
3. Handoff Documentation: When transitioning from product design mockups to development, feed the agent the specs; it will output structured documentation detailing component contracts, required data schemas, and implementation priorities for the development team.