Product design · Marketing tech
Markly
Discover creators, negotiate and manage campaigns with AI agents, all from one dashboard.
View case studyDesign engineering for SaaS, fintech and AI products
Design engineer for startups, from the first Figma frame to production code
I work as a design engineer for startups: I design the product and stay with it until it runs in production, so nothing is lost between the Figma file and the code. I'm Maniruzzaman Jubayer, based in Dhaka, and I lead a senior team of designers and developers who build with me, for founders in Europe, the US, the Gulf and Asia.
A handoff is where a product loses its details, so I don't hand off.
Free 30 min intro call · One fixed quote · No retainer
Founders in SaaS, fintech and AI work with me and my team
- Years designing and building products
- 6+
- Products shipped
- 50+
- Behance gallery features
- 22
Design engineer and product design lead, with a senior team behind me
04 problems
Where a startup's product quietly loses its design
Four problems I meet when a product has a designer and developers, but nobody who owns the gap between them.
Problem 1: Details vanish between the designer and the developer
A spec cannot carry everything: the easing on a menu, what a button shows while it saves, how a table behaves with four hundred rows. When the person who designed a screen also builds it, or sits right beside the person who does, those details survive. That is the whole point of design engineering.
Problem 2: Figma and the codebase tell different stories
After a few months the design file says one thing and the product says another. Colours, spacing and components fork, and every new screen has to guess which version is right. I keep one source: tokens and components named the same in Figma and in code, so a change in one is a change in both.
Problem 3: AI-written code that ignores the design
AI coding tools turn a screenshot into working markup in minutes, and the draft usually skips the design system, the keyboard, the empty state and the slow network. My team uses these tools where they help, then checks every screen against the design and the accessibility rules before it ships.
Problem 4: The states nobody designed
Long names, empty lists, a failed payment, a weak connection, a screen reader. Designs tend to show the happy path, and production meets everything else. I design those states on purpose and build them in the same sprint, because they are where people decide whether a product feels finished.
Product work from my team, with the detail a build has to keep
An AI influencer platform, a personal finance dashboard and a sales CRM, designed under my lead. Each has the states, components and interaction detail that a design engineer protects all the way into code.
Product design · Fintech
WealthWise
Cash flow, investments and financial goals in one AI-assisted web dashboard.
View case study
Product design · SaaS
Alignify
Customers, orders, inventory and revenue analytics in one CRM dashboard built for sales teams.
View case studyWant one person accountable from the first frame to the release? Let's talk.
Book an intro callWhat a design engineer for startups delivers
One person owns the design and the way it is built, with a senior team behind me when the work grows.
Product design that is ready to build
User flows, screens and every state, in Figma components named the way they will be named in code. Nothing in the file is decoration that could never ship, and nothing a developer needs is left for them to invent.
One design system, in Figma and in code
Design tokens for colour, type, spacing and motion, a component library your developers build with, and the same library in Figma. A change lands in both places, so the two never drift apart again.
The front end, built by the people who drew it
React and Next.js screens with their loading, empty, error and success states, on desktop and phone. When the product also needs its back end wired, my Next.js development service takes the same build further.
Interaction and motion tuned in the browser
Transitions, hover and press feedback and small moments of delight, adjusted in real code rather than guessed in a prototype, and turned down for anyone whose device asks for reduced motion.
AI features people believe
Streaming answers, visible sources, progress for agents that take several steps, and an undo for anything they change. These are the patterns that make AI answers believable, designed and built in one pass.
Accessibility and speed, checked before release
Keyboard paths, contrast, labels and focus order tested against WCAG 2.2 at level AA, and page speed measured on a mid-range phone. Both are part of the build, not an audit that arrives after launch.
How a design engineering project runs
Four steps, one person accountable for every one of them, and the price agreed before the first sprint.
- 01
Free 30 minute intro call
Show me the product, the Figma file and the repository, whichever exist. I tell you plainly where the design and the code have drifted apart, and what I would fix first.
- 02
Written scope and one fixed quote
The scope lists the flows, components and states, the stack and the order of work. You approve one number for the whole project, and there is no retainer.
- 03
Design and build in the same sprint
Each week a feature is designed and built together, in your Figma file and your repository. You review it as a preview link of real code, not as a picture of how it might work.
- 04
Release and handover
Accessibility and speed checks, then a calm release. Your team keeps the component library, the documentation and a recorded walkthrough, so they can carry on without me.
How I work, in four lines
- Based in
- Dhaka, Bangladesh, working remotely with founders around the world
- Tools
- Figma for design; TypeScript, React and Next.js for the build; AI coding tools, with a person reviewing every change
- Who you work with
- me on every project, with a senior team of designers and developers beside me
- Shared hours
- the afternoon with Europe, most of the day with the Gulf and Asia, and evening calls for the US
Products I design and build for
Each field asks for different details in the interface and in the code. The images are screens my team designed.
AI products and agents
Agents that act over several steps need progress, approvals, sources and a way to undo. I design those patterns and build them, so people can see what the AI is doing and stop it when they want to.
Fintech
Numbers that must never round wrongly, charts that update calmly and a confirmation for anything that moves money. In finance, a gap between the design and the code is a trust problem, not a cosmetic one.
SaaS and B2B tools
Dense tables, filters, roles and settings that hold up with real data. A shared component library pays for itself fastest here, because the same table and form appear on dozens of screens.
Healthcare
Large products with many screens, careful permissions and forms that busy staff complete between patients. Keeping more than 50 screens consistent comes from a system, not from anyone's memory.
Logistics and delivery
Driver apps used outdoors with one free hand, and admin views that change in real time. Touch targets, contrast and offline states have to work in the code, not only in the mockup.
Real estate and proptech
Image-heavy listings, maps, filters and AI search, on pages that still have to load quickly on a phone. Here the design choices and the performance choices are the same choices.
Who you work with, and how
The question founders ask first. The short answer: me, on every project, with my team building beside me.
I lead every project myself
I design the core of the product, review every change that affects how it looks or behaves, and run the weekly call. You are never passed to an account manager or a junior you have not met.
A senior team builds with me
Designers and developers I have worked with for years take on the volume. They talk to you directly in one shared Slack channel, so a question reaches the person doing the work.
Working software at every review
Each week you click through a preview of real code. Figma is where we decide, and the browser is where we check. A written update arrives every 48 hours between calls.
Your code, your files, your accounts
The repository, the Figma file and the component library sit in your company's accounts from the first day. When the project ends, your team keeps everything and needs nothing from me.
A design engineer, a designer and a developer, or a design engineering studio
Three ways to get a product designed and built. Each one suits a different stage.
| What you get | With me | Separate designer and developer | Large studio |
|---|---|---|---|
| One person accountable for design and code | Yes | No | Sometimes |
| No handoff document between two teams | Yes | No | Sometimes |
| You talk directly to the people doing the work | Yes | Yes | No |
| Design system kept in Figma and code together | Yes | Sometimes | Yes |
| Price fixed before the work starts | Yes | Sometimes | Sometimes |
| Sized for a startup's first product | Yes | Yes | No |
| Many specialists for a very large programme | No | No | Yes |
Teams I work with
Four kinds of team come to me, usually once a gap between design and code has started to show.
Founders without a designer or a front-end lead
You need a first product that looks and works like a real company made it. I design it, build it with my team, and hand it cleanly to the engineers you hire next.
Engineering-led teams
Your developers are strong and busy, and the product looks like a pile of default components. I bring a design system and the screens built on it, inside your codebase and your review process.
AI product teams
You ship fast with AI coding tools and the interface is starting to feel stitched together. I set the patterns for agents, chat and approvals, and review generated screens before they reach your users.
Products with a growing design system
Several teams and several products that should look like one company. I set up the tokens and components both designers and developers use, and the rules for adding to them.
The services design engineering ties together
Each one also works as a project on its own. Design engineering is what keeps them in step.
What founders say about working with me
Working with Jubayer and the team has been a blast. Their creativity has honestly taken our platform to new heights. Incredibly professional and so proud to work with, we’re over the moon with their results, and we can’t wait to team up with them again.
I highly recommend Jubayer for any design project. He quickly grasps complex concepts, excels in standard design practices, and responds promptly.
Notes on design engineering
Practical notes on design, code and AI, written from my own projects.
WCAG 2.2 in React: the accessibility checklist we ship with
A WCAG 2.2 React checklist for level AA: what changed in 2.2, the components that fail most, short TypeScript fixes and the tests that keep them fixed.
Reviewing AI-generated UI code: a design engineer's checks
Reviewing AI-generated code for a product interface: the twelve checks I run before a merge, with React fixes, what to automate and what needs a person.
Design to code workflow: Figma MCP, Claude Code and review
My design to code workflow: a Figma file a tool can read, Figma's MCP server, Claude Code inside your component library, and a person reviewing every screen.
Design engineer for startups: questions founders ask
Clear answers to what founders want to know before trusting one person with both the design and the build.
What does a design engineer do?
A design engineer designs a product and builds its front end, or works so closely with the build that nothing is lost between the two. The role covers the interface, the design system, interaction and motion, accessibility and the production code that carries all of it. For a startup it means one accountable person from the first Figma frame to the release.
When should a startup hire a design engineer?
When the product's quality depends on details that slip between a designer and developers: an AI feature, a complex dashboard, a design system that several people build on, or a first version that has to look finished. Very early, before the idea is tested, a simple prototype is often enough, and I will tell you so on the intro call.
How is a design engineer different from a product designer or a frontend developer?
A product designer decides what the product does and how it looks, usually in Figma. A frontend developer turns designs into working code. A design engineer does both, or works exactly where the two meet, owning the design system, the interaction details and the quality of what ships. Larger teams need all three; a startup often starts with a design engineer.
How much does it cost to hire a design engineer?
It depends on what is designed and built: the number of flows and screens, whether a design system already exists, integrations, AI features and the timeline. After the free intro call I write a scope and give one fixed price for the whole project, with no retainer, so the number you approve is the number you pay.
Do you use AI tools to turn designs into code?
Yes, where they save time. Tools that read a Figma file or a screenshot can draft a screen quickly. The draft then goes to a person who knows the design: components swapped for the system's own, missing states added, keyboard and screen reader paths checked. Nothing generated reaches your users without that review.
Can you work with our existing design system and codebase?
Yes. I read both first and list where they disagree. Then we agree which one is the source of truth, align tokens and component names, and work in small pull requests that your engineers review. If the system needs rebuilding, I write the case for it before anyone starts a rewrite.
Who will I actually work with?
Me, on every project. I design the core of the product, review every change that affects how it looks or behaves, and lead the weekly call. A senior team of designers and developers works with me on the volume, and they answer you directly in one shared Slack channel.
What do you build with?
TypeScript, React and Next.js for web products, components built on accessible primitives, and Figma for design. For a marketing site, a builder can be the better choice, and my comparison of Framer, Webflow and Next.js explains when. I recommend the stack your team can keep running after I leave.
What is the first step?
Book the free 30 minute intro call. Bring the product, the Figma file and the repository if they exist, and the date that matters. If we fit, a written scope and one fixed quote follow, and we pick the first feature to design and build together.