UX Design and Engineering: Why Design Without Engineering Is a Marketing Brochure
A polished mockup that does not survive contact with the API contract is a marketing asset, not a product. Here is how design and engineering run as one discipline at MIT-DEV.
A polished mockup that does not survive contact with the API contract is a marketing asset, not a product. UX design and engineering are not handoff phases; they are one discipline operating in two notations. This article describes how MIT-DEV runs design and engineering as a single track - with shared design tokens, component contracts, and Web Vitals targets that bind both sides - and why design without engineering is a marketing brochure.
Why "Handoff" Is the Problem
Most agency workflows ship a Figma file to the engineering team, treat it as a contract, and discover three sprints later that 30% of the screens are not implementable as drawn. The cost is renegotiation, mid-build redesigns, and a final product that resembles the Figma file in colour palette and not much else.
The cost is not the redesigns; it is the trust loss. The product owner stops believing the Figma is real. The engineers stop believing the designers know constraints. The cycle is hard to reverse once it has started.
Design as Engineering Input, Not Output
Our model: design and engineering operate on shared artefacts from day one of Discovery. Specifically:
- Design tokens - colour, spacing, typography, motion - live in code (CSS variables, Tailwind config) and are imported into Figma, not the other way around. The design system is the engineering system.
- Component contracts - a Figma component and a React component share the same name, the same props, and the same states. There is no "design version" and "engineering version".
- API-aware mockups - mockups are reviewed against the API contract before they are signed off. If the data does not exist or cannot be served at acceptable latency, the design changes, not the database.
- Performance budget - every screen has a target for LCP, INP, CLS, and bundle size, set during design, measured during build, enforced in CI.
Web Vitals as the Common Language
Designers and engineers argue about subjective things. Core Web Vitals give them an objective scoreboard. LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 are not nice-to-haves - they are the contract. A beautiful screen that ships at LCP 5s fails the contract regardless of how the Figma looked. An engineer's clever optimisation that breaks CLS by 0.2 fails the contract too.
Accessibility as a Default
WCAG 2.2 AA conformance is built in, not bolted on. The component library starts with semantic HTML, keyboard navigation, visible focus states, sufficient contrast, and reduced-motion variants. Designers work from accessible components; engineers do not have to retrofit. This is faster and produces a better product for everyone, not just users with assistive technology.
Stack
- Design: Figma with component variables linked to code design tokens
- Web: React + Next.js (App Router), Tailwind CSS, Radix UI primitives
- Mobile: React Native + Expo, shared design tokens with web
- Component documentation: Storybook with a11y addon, visual regression in CI
MIT-DEV Track Record
- Web Vitals targets met or exceeded on customer-facing surfaces
- WCAG 2.2 AA conformance on all consumer products in our portfolio
- Shared design system between web and mobile, with single source-of-truth tokens
- Visual regression in CI on every production component
Frequently Asked Questions
Do you take a Figma file and build it as-is? We will, but only after a short review for API alignment, performance budget, and accessibility. If something fails review, we propose changes before the build starts, not after.
Can you work with our internal design team? Yes, frequently. We bring the engineering side of the design system; your team owns brand and product direction. The interface is the shared token set.
Do you provide design-only engagements? No. Design without engineering input produces files that need rework once they meet the codebase. We do not ship Figmas as a final deliverable.
How do you handle dark mode and theming? Semantic tokens, not raw colours. Themes are token sets; dark mode is one. Multi-brand customers ship a different token set per brand without forking components.
Ready for Design That Ships?
Book a design + engineering scoping session - we will walk through tokens, contracts, Web Vitals budget, and accessibility posture for your product.