AboutWorkWorkshopsPromptsArticlesContact
YousefOpening yousef-portfolio.fig
Hero / Text layer

Yousef

Hug × Hug

UI/UX and product designer. I make reels in Egyptian Arabic about UI/UX, product design and vibe coding, and run workshops so you can build it too.

UI/UX designProduct designVibe codingAI prompts
Get the prompts from my reels See my work
saw a reel? the prompt is down here ↓
S

Sara: can you share the prompt from the last reel? 🙏

Yousef
You

About me

the short version
Frame / Bio

I'm a product designer with 3+ years of designing SaaS platforms, dashboards, CRMs, mobile apps, healthcare, EdTech and e-commerce products for teams in Egypt, Saudi Arabia and Iraq.

Product designUser researchInformation architectureInteraction designDesign systems
years designing products
3+
years designing products
products shipped
12+
products shipped
countries, one timezone mess
3
countries, one timezone mess
Frame / Lately
  1. 2026 to nowFounder and product designerDezien
  2. 2026 to nowFreelance product designerEducational platform
  3. Jan to Jul 2026Mid-level UI/UX designerCodeCruze
More about me
Assets / Worked with
  • Taeyen
  • CodeCruze
  • Mantaray
  • Vondera
  • Vienna Games
  • Watch Asset
  • Stretchio
  • Bluetechnova
  • Taeyen
  • CodeCruze
  • Mantaray
  • Vondera
  • Vienna Games
  • Watch Asset
  • Stretchio
  • Bluetechnova

Let's talk

Want a workshop for your team, a design partner for your product, or have a question about a reel? Fill the form and I'll get back to you.

  • Instagram
  • TikTok
  • Behance
  • LinkedIn
  • Dezien
  • Email
Component / Contact form
Tell me what you need

Your details are only used to reply to you. Privacy Policy

Prompts

Every prompt from my reels lives here. Copy it, or copy a direct link and send it to a friend.

no more DMs, promise
prompts · yousef
EXPLORER
vibe-coding
images
Websites
prompts › vibe-coding › Fist Prompt-Yousefuiux
1Build my personal brand website: Next.js + TypeScript + Tailwind, GSAP (ScrollTrigger, SplitText) for scroll and intro animations, Motion (Framer Motion) for hovers, tabs, modals and copy feedback. Lenis for smooth scroll.
2
3Read everything in /references first. prototype.html is the approved layout, so match it and push the polish and animation further.
4
5Who I am: Yousef, UI/UX and product designer. I make reels in Egyptian Arabic about UI/UX, product design and vibe coding.
6
7Style:
8- Light mode, dot-grid canvas background, modern orange accent (#FF5B14)
9- The site feels like a Figma file: frame labels, selected layers with blue handles, component chips, multiplayer cursors, sticky notes, polaroids
10- Prompts and code look like a light VS Code window (explorer, tabs, line numbers, orange status bar)
11- Fonts: Bricolage Grotesque, JetBrains Mono for code, Caveat for handwritten notes
12- Latest UI/UX trends, impressive but smooth, respects reduced motion, fully responsive
13
14Sections:
151. Hero: my name as a selected Figma text layer, animated intro with cursors flying in
162. About / CV: bio, experience timeline, skills
173. Projects: colored folders that pin and stack on scroll (like ref-stacking-folders.mov), each opens a case study
184. Workshops:
19 - Upcoming live workshop with countdown and a "Register" button to my Google Form
20 - Free workshops, webinars and recordings
21 - Paid courses: card with a Spanish latte popping out of the corner, line like "That's 250 EGP. One Spanish latte.", big serif price (like ref-price-matcha.png), normal Enroll button
22 - Enroll opens a details page/sheet: demo video, what you'll learn, how enrolling works, price box, "Enroll now" link
235. Prompts: VS Code style library of the prompts from my reels, Copy prompt and Copy link, each prompt has its own URL (/prompts/[slug]) so I can share it instead of sending it in DMs
246. Articles: tips and tricks, each with its own shareable URL, and I can embed a prompt block inside any article (<Prompt slug="..." />)
257. Contact: link to my Google Form and my socials
26
27Keep all content (projects, workshops, prompts, articles, prices, form links) in simple data files so I can edit without touching components. No em dashes in any copy.
28
29Build it step by step and show me after each step.
From the reel: This is the website that we built in the workshopWorks with Creating Portfolio site
mainLn 29MarkdownUTF-8
Skip to content
Drafts / yousef-portfolio.fig
AboutWorkWorkshopsCoursesPromptsArticlesHire meContact
عربي

© 2026 Yousef Ali

Designing products in Cairo. Posting reels in Egyptian Arabic.

Cairo, Egypt

Say hello

  • Instagram
  • TikTok
  • Behance
  • LinkedIn
  • Dezien
  • Email
Yousef
Yousef
Contact form
Terms and Conditions
Privacy Policy
Refund Policy
Sign in

Tips and tricks

Short reads. Some come with a prompt you can copy right from the article.

2 Oct 2026{ } has prompt

Why your prompts give random results, and the 4 lines that fix it

Most bad AI output is a missing role, a vague task, or no output format. Here's the structure I use in every reel.

4 min readRead
start here
18 Sep 2026

Auto layout is just a list of boxes

Stop fighting Figma. Think in rows and columns and nesting stops being scary.

3 min readRead
9 Sep 2026{ } has prompt

Use AI as your second UX reviewer

A quick audit prompt that catches what you stopped seeing after hours on the same screen.

5 min readRead
All articles

Workshops

Live sessions and short hands-on workshops. Register for the next one before seats run out.

free, or one Spanish latte
Workshops / Free or one Spanish latte

Vibe Coding Workshop

Watch the full recording of the live Vibe Coding workshop. Follow the practical workflow at your own pace inside your classroom.

RecordedVibe codingAI

Free. Your Spanish latte is on me.

Free
Loading…

Selected work

A few products I'm proud of. Keep scrolling, each folder lands on the last one.

01Healthcare super app
Healthcare network, Iraq · Freelance

Vienna Games

One app for a network of dermatology and cosmetic clinics: booking, a skincare marketplace, rides to the clinic and a rewards game that keeps people coming back.

HealthcareMobile appGamificationE-commerce
Read the case study
Vienna Games cover
Vienna Games screen
Vienna Games screen
02Recruitment platform
Taeyen Recruitment, Riyadh · 2025

Taeyen

A multi-sided recruitment platform: marketing site, client dashboard, overseas agency dashboard, admin dashboard and an internal CRM, all on one design system.

B2BDashboardsCRMRemote
Taeyen cover
Taeyen screen
Taeyen screen
03Aceit platform
IGCSE and American curriculum · 2026

Aceit platform

A complete learning platform with dedicated dashboards for students, teachers, parents and admins. Courses, live classes, quizzes, exams and progress in one place.

EdTechDashboardsDesign system2026
Aceit platform cover
Aceit platform screen
Aceit platform screen
04App for Expenses tracking
My own product · 2026

Money manager

A task management platform built for how UI/UX designers actually work. I took it from idea validation to launch, and I'm documenting the whole journey in public.

AppDesign systemWireframe2025
Money manager cover
Money manager screen
Money manager screen
Read the case study
Read the case study
Read the case study
See all 7 projects

Courses

Longer programs with a real project at the end. Some are free, and some go on sale for the price of a Spanish latte.

watch for latte deals
Live
2 weeks · 4 live sessions . 8 Hours

Vibe Coding Crash Course

Build and deploy a working project in four live sessions over two weeks. Start with Claude Code, turn Figma designs into code, connect Supabase, and finish with a guided Project Day.

499 EGPfull course
Loading…