UI/UX Design & Frontend
Design systems, responsive layouts, accessibility audits, and performance budgets.
Overview
Design systems, component libraries, landing pages, and interactive interfaces all benefit from structured iteration with visual and performance quality gates. Datarim brings the same rigor to frontend work that it applies to backend development: define requirements including performance budgets and accessibility standards, plan a component-by-component approach, build mobile-first, and verify across browsers and devices before shipping.
Example: Responsive SaaS Landing Page
A team needs to design and build a responsive landing page for a SaaS product. The page must include hero, features, pricing, and CTA sections with WCAG 2.1 accessibility compliance and a performance budget of under 3 seconds LCP.
Pipeline Walkthrough
| Stage | What happens |
|---|---|
| /dr-init | Define scope: landing page with hero, features, pricing, CTA. Complexity: L3 |
| /dr-prd | Requirements: target audience, brand guidelines, responsive breakpoints, accessibility (WCAG 2.1), performance budget (<3s LCP) |
| /dr-plan | Component breakdown: hero section, feature grid, pricing cards, testimonial carousel, footer. Mobile-first approach |
| /dr-design | Consilium panel: Architect + Developer + Writer evaluate component architecture, CSS strategy (Tailwind vs custom), animation approach |
| /dr-do | Build components one by one. HTML/CSS/JS with responsive testing at each step |
| /dr-qa | Cross-browser testing, accessibility audit, performance metrics, visual regression check |
| /dr-archive (Step 0.5) | Note: component library approach saved 40% time vs building from scratch |
Key Benefits
- Performance budgets enforced — LCP, CLS, and other Core Web Vitals are defined in the PRD and verified during QA
- Accessibility from the start — WCAG requirements are captured in requirements, not added as an afterthought
- Component-level iteration — each component is built, tested, and reviewed independently before integration
- Design-dev alignment — the Consilium panel brings Architect, Developer, and Writer together to make CSS and animation decisions collaboratively
Relevant Agents
Which agents are most active in this use case:
- Developer — component implementation with responsive testing
- Architect — component architecture and CSS strategy decisions
- Writer — copy for headlines, CTAs, and feature descriptions
- Reviewer — cross-browser testing, accessibility audit, visual regression
Complexity Routing
How complexity levels apply to UI/UX and frontend work:
- L1 — Fix a color inconsistency or update button text across the site
- L2 — Build a new section or component with responsive breakpoints and accessibility
- L3 — Design and build a full landing page with multiple sections, animations, and performance targets
- L4 — Create a complete design system with component library, documentation, and multi-product theming