Codesky AI: Redesigning an Arabic-First AI App Builder

Codesky AI is an AI app builder for the Arab market: describe an app in Arabic or English and it generates the frontend, backend and database, then lets you refine, share and ship it. I redesigned the product end to end as the sole designer, from competitor research and information architecture to every product screen, the landing pages and the handoff to the development team, in eight weeks (April to June 2026).

The Challenge

The client wanted to turn the existing product at test.codesky.ai into one coherent workspace that could stand next to global AI builders while being genuinely Arabic-first: right-to-left layouts, native Arabic copy and regional payments, not a translated interface. The core loop also had to earn trust, because AI generation is slow, costs credits and sometimes gets things wrong.

Research: Competitors and User Flows Before the First Wireframe

I began with extensive competitive research, studying a wide range of AI app builders and user flows—from onboarding and prompting to version restore, sharing, publishing and plan upgrades. This research helped identify common user expectations, compare different approaches and uncover opportunities to create a clearer, Arabic-first experience.

The Strategy: From a Sentence to a Shipped App

I organised the product around five stops (discover, join, describe, build and ship) plus a shared workspace for projects, templates, teams, billing, support and settings. Every stop uses one sidebar, one composer and one set of components, so moving between them never feels like switching apps.

Decision 01: Start With a Sentence, Not an Empty Dashboard

After sign-in, people land on a prompt, not a dashboard. The AI model, frontend and backend pickers live inside the composer, the target device is a single toggle, and idea chips (SaaS dashboard, landing page, AI chatbot, online store, personal profile) turn a blank box into one tap. Templates and recent projects sit one scroll below for returning users.

Decision 02: Show the Thinking, Not a Spinner

Generation takes time, so the builder makes the wait useful. The request stays pinned in the chat, the preview teaches the product while it works, and the AI writes out its plan (design direction, colours, type and sections) before any code. When the app is ready it renders full width, with device sizes, code, files and design mode one click away.

Decision 03: Turn a Vague Idea Into Work the AI Can Finish

Big apps rarely come out right from one prompt. Projects start as titled requirements that break down into tasks on a board (backlog, to do, in progress, done) with priority tags. Each task has its own Execute with AI button and model choice, so complex products get built in steps people can review.

Decision 04: Make Access and AI Cost Visible, Always

Teams get three clear roles (manager, developer and viewer) and a permission matrix that shows exactly who can create, comment, publish or manage billing. Credits are never a surprise: a meter in the sidebar shows the daily AI balance on every page, and plans are priced in Saudi riyals with a clear free, pro and enterprise path.

The System: Built Arabic First, Themed Dark and Light

The system pairs Cairo for Arabic UI with Geist for Latin text and Instrument Serif as an editorial accent, on a dark palette with an indigo glow and a single orange brand colour. Sidebar, dropdowns, cards and modals are shared components, and a light theme shows the tokens carry over.

Landing Pages That Sell the Outcome

I designed three landing directions plus enterprise, desktop-app and vibe-coding pages, in English and Arabic, on desktop and mobile. Each page leads with what people will ship, not the technology behind it, and the live site at test.codesky.ai now runs on this design.

The Outcome

In eight weeks I delivered 54 desktop screens and pages across 10 product areas, the design system, dark and light themes, the landing pages and the developer handoff, all as the sole designer. The landing site is already live and the rest of the product is in development for release. Next, I would track prompt-to-preview success and credit use per task to guide the next design round.