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
- 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.
- 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).
- 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.