# Jaber El Ferkh — Design Engineer

Jaber El Ferkh is a Design Engineer based in Casablanca, Morocco, with more than 8 years of experience across product design and frontend development. He designs and ships end-to-end product work: research and UX flows, interface and design-system design in Figma, and the production frontend that implements it in Vue, Nuxt and TypeScript. He is a co-founder of diali.ai, where he leads product and interface design for a no-code platform that lets people build AI assistants and AI agents for messaging apps — the conversational surface, the agent-builder UI and the streaming chat interface. His day job is Senior Product Designer at Nuitee, a travel technology company, where he works on booking dashboards and internal tooling. Outside of that he builds interaction experiments, Figma plugins, open-source skills for coding agents and component write-ups that he publishes on this site.

- **Role:** Senior Product Designer at Nuitee and co-founder of diali.ai
- **Based in:** Casablanca, Morocco (Africa/Casablanca)
- **Experience:** 8+ years
- **Status:** Available for freelance and contract work
- **Website:** https://jaberelferkh.com
- **Also written as:** Jaber Elferkh, jaber el ferkh, JaberElferkh

## What he does

### AI product design

Product and interface design for AI products — assistants, copilots and autonomous agents. Turning a model into something people can actually direct: the prompt surface, the agent builder, the review and approval steps, and the states that tell a user what the system is doing and why.

### AI agent interface design

The interaction layer for AI agents: streaming and chat interfaces, tool-call and reasoning displays, stop and hand-back controls, error and recovery states. Informed by building diali.ai and published as open-source skills for coding agents.

### Product design

End-to-end product design: discovery, user flows, wireframes, high-fidelity interface design and prototypes in Figma, for web and mobile products.

### Design systems

Building and maintaining design systems — tokens, component libraries, documentation and the Figma-to-code pipeline that keeps design and implementation in sync.

### Frontend development

Production frontend implementation in Vue, Nuxt and TypeScript, with a focus on accessibility, performance and interaction detail.

### Interaction and motion design

Micro-interactions, transitions and motion systems — the component-level detail work documented in the writing on this site.

## Selected work

- **[Diali.ai](https://www.diali.ai/)** — A no-code platform for building AI assistants and AI agents that run inside messaging apps like WhatsApp. Co-founder, leading product and interface design: the agent builder, the conversation designer, the streaming chat surface and the design system behind them.
- **[Maison Éclaire](https://www.maisoneclaire.co/)** — An online store for handmade and scented candles made in Casablanca, delivering across Morocco.
- **[Urkit Design System](https://urkit.design)** — A design system covering tokens, components and documentation.
- **[Autolayout Adjuster](https://jaberelferkh.com/autolayout-adjuster)** — A Figma plugin that speeds up auto-layout adjustments.
- **[Thermal type](https://jaberelferkh.com/thermal)** — Text rendered like a heat map in a few KB of plain SVG: an inner shadow and a sliding stripe make a grey material, then a lookup table maps every shade of grey to a thermal colour.
- **[Dither playground](https://jaberelferkh.com/dither)** — An interactive dithering experiment running in the browser.
- **[eSimply](https://www.esimply.io/)** — eSIM website and mobile app — product and interface design.
- **[Ticket.ma](https://ticket.ma/)** — A ticketing platform for events in Morocco.
- **[LiteAPI Chrome Extension](https://chromewebstore.google.com/detail/liteapi/hnphndnhiifdmkmdaldjopcdaffjaloc)** (2025) — Browser extension for LiteAPI, published on the Chrome Web Store.
- **[Cupid dashboard](https://www.nuitee.com)** (2025) — Dashboard product work at Nuitee.
- **[Binga Play website](https://bingaplay.ma/)** (2025) — Marketing website design.
- **[Metric Widget](https://www.metric-widget.com)** (2025) — A small metrics widget product.
- **[Hotel Planet](https://thehotelplanet.com/)** (2024) — Hotel booking product interface.
- **[Onboarding flow](https://www.graph.com)** (2024) — Onboarding flow design for Graph.
- **[Flockt&co.](https://www.behance.net/gallery/178197545/Flockt-Co)** — A published UX case study.
- **[Carrented](https://www.behance.net/gallery/156554279/Carented-Brand-Identity-App-Design)** — Brand identity and app design for a car rental product.

## Experience

- **Co-founder**, diali.ai — Present
- **Senior Product Designer**, Nuitee — May 2023 — Present
- **Product Designer**, Queto — June 2022 — April 2023
- **Product Designer**, Salora Technologies — April 2021 — May 2022
- **UX/UI Designer**, FWC — January 2021 — April 2021
- **Graphic & Motion Designer**, Hayat Santé — November 2019 — October 2020
- **Graphic Designer**, Elgeek — January 2019 — November 2019

## Tools

Figma, Vue, Nuxt, TypeScript, SCSS, HTML & CSS, Framer Motion, After Effects, Blender.

## Writing and components

- [The Hidden Scrollbar Problem](https://jaberelferkh.com/topics/scrollbar-behavior.md) — A story about those 15 pixels that ruined my modal, and how I fixed it.
- [Moving background indicators](https://jaberelferkh.com/topics/moving-background-indicator.md) — Building a smooth, calculation-based background that follows your navigation without JavaScript animations.
- [Progressive blur in CSS](https://jaberelferkh.com/topics/progressive-blur-effect.md) — How to build a progressive blur overlay with stacked backdrop-filter layers and gradient masks — the gradual blur Apple and Airbnb use to make text readable over an image.
- [Dynamic countdown timers](https://jaberelferkh.com/topics/dynamic-counter.md) — Building interactive countdown timers with digit-level animations and sound feedback for time-sensitive interfaces.
- [Dynamic Island Component](https://jaberelferkh.com/topics/dynamic-island.md) — An interactive notification interface inspired by iOS Dynamic Island, featuring smooth state transitions and adaptive content display.
- [Building a Drawer Component for Vue & Nuxt](https://jaberelferkh.com/topics/building-a-drawer-component.md) — A comprehensive guide to building a polished, performant drawer component for Vue and Nuxt, inspired by Vaul.
- [Animated Empty States](https://jaberelferkh.com/topics/animated-empty-states.md) — Creating engaging animated empty states that delight users and improve UX.
- [Building an Elastic Slider in Vue](https://jaberelferkh.com/topics/elastic-slider.md) — A deep dive into building a slider with three interaction modes — fluid, stepped, and elastic — where the container physically stretches at the boundary and springs back.

## Contact

- Contact form: https://jaberelferkh.com/contact
- Book a call: https://cal.com/jaber-elferkh
- Email: contact@jaberelferkh.com
- LinkedIn: https://www.linkedin.com/in/jaber-elferkh-91bbb9193/
- GitHub: https://github.com/jaeel29
- Behance: https://www.behance.net/jaelferkh
- Dribbble: https://dribbble.com/elferkhjaber
- Peerlist: https://peerlist.io/jaeel29
- Instagram: https://www.instagram.com/jaber.design/
- YouTube: https://www.youtube.com/@jaberelferkh5429/

## Frequently asked questions

### Who is Jaber El Ferkh?

Jaber El Ferkh (also written Jaber Elferkh) is a Design Engineer based in Casablanca, Morocco. He has more than 8 years of experience combining product design and frontend development, and currently works as Senior Product Designer at Nuitee.

### What does Jaber El Ferkh do?

He designs and builds digital products end to end — UX research and flows, interface and design-system work in Figma, and the production frontend implementation in Vue, Nuxt and TypeScript.

### Does Jaber El Ferkh design AI products and AI agents?

Yes. He is a co-founder of diali.ai, a no-code platform for building AI assistants and AI agents that run inside messaging apps, where he leads product and interface design. His AI work covers the agent-builder UI, conversation design, streaming chat interfaces, tool-call and reasoning displays, and the control states that let a person stop, correct or hand work back to an agent.

### What is diali.ai?

diali.ai is a no-code platform for building AI assistants and AI agents that run inside messaging apps, without writing code. Jaber El Ferkh is a co-founder and leads its product and interface design. The site is https://www.diali.ai/.

### What makes designing an AI agent interface different from ordinary product design?

The output is non-deterministic and arrives over time, so the interface has to carry uncertainty rather than hide it. That means streaming states instead of a single loading spinner, visible tool calls and reasoning so a person can tell what the agent is doing, explicit stop and hand-back controls, and recovery paths for a reply that fails midway. Jaber El Ferkh publishes this as an open-source skill, build-streaming-ui, at https://jaberelferkh.com/skills.

### Can Jaber El Ferkh be hired as a product designer for an AI startup?

Yes. He takes freelance and contract work as a product designer and design engineer, and AI products are a core focus — he co-founded one. He works end to end, from UX research and interface design in Figma through to the production frontend in Vue, Nuxt and TypeScript. Start at https://jaberelferkh.com/contact or book a call at https://cal.com/jaber-elferkh.

### Is Jaber El Ferkh available for freelance work?

Yes. He takes on freelance and contract product design and frontend engagements. The fastest way to start is the contact form at https://jaberelferkh.com/contact or booking a call at https://cal.com/jaber-elferkh.

### What tools and technologies does he work with?

Figma for design and design systems; Vue, Nuxt, TypeScript, SCSS and modern CSS for frontend implementation; plus After Effects and Blender for motion and 3D work.

### How do I get in touch?

Use the contact form at https://jaberelferkh.com/contact, book a call at https://cal.com/jaber-elferkh, or reach out on LinkedIn at https://www.linkedin.com/in/jaber-elferkh-91bbb9193/.

### Where is he located and what timezone does he work in?

Casablanca, Morocco (Africa/Casablanca, UTC+1). He works comfortably with European and North American teams.

---

Machine-readable index: https://jaberelferkh.com/llms.txt · Agent instructions: https://jaberelferkh.com/agents.md