lawha

Check a web page on every screen - six widths from phone to wide desktop, light and dark, LTR and RTL, with reduced motion - and fix what fails. Finds sideways scrolling, clipped or overlapping text, small tap targets, accessibility problems (axe), Tab order against the reading order and missing focus rings, layout shift, motion that ignores "reduce motion", and left/right CSS that breaks Arabic; measures alignment, spacing rhythm, type scale and colour; compares with Figma exports. Use when the user says "check this page", "is it responsive", "does it work on mobile", "lawha check", "افحص الصفحة", "هل الصفحة متجاوبة", or after building or changing a page.

Give a project a design when the developer cannot picture one - three complete directions (fonts, colours light and dark, spacing, corners, motion, one signature element), checked for contrast, the known "AI look" and sameness, rendered as real screens at phone and desktop, chosen by looking, then turned into the project's Tailwind and shadcn tokens. Use when the user says "design this", "make it look good", "I have no idea how it should look", "pick a style", "lawha direct", "صمم الواجهة", "اقترح تصميماً", or starts a frontend with no design.

Make a working page more beautiful with an art director's eye - looks at the page on phone and desktop, measures alignment, rhythm, type scale, colour and where the eye lands first, proposes a few bold improvements (hierarchy, spacing, type, colour, one signature detail, motion or a Three.js scene where it earns its place), and keeps a change only if a blind judge prefers it side by side. Learns the person's taste from their own picks. Use when the user says "make it beautiful", "it looks boring", "polish this", "elevate", "lawha elevate", "حسّن التصميم", "اجعلها أجمل".

Build a Figma design in code, exactly - reads the frames (mobile, tablet, desktop) with as few Figma calls as possible, merges them into one mobile-first spec with tokens, type, photos and icons, builds the page in the project's stack (React, TanStack, Tailwind, shadcn/ui), then checks it against the design at every width until it matches. Use when the user shares a Figma link, says "build this design", "implement this Figma", "figma to code", "lawha figma", "نفّذ هذا التصميم", "حوّل تصميم فيغما إلى كود".

Learn a design from sites or screenshots the user likes - fonts (and whether they are free, with free look-alikes for paid ones), colour palette by area, type scale, spacing, corners, shadows, section patterns, transitions and keyframes, scroll reveals, animation libraries (GSAP, Lenis, Motion, Three.js, Spline, Lottie, Rive) and assets - then use it as inspiration without copying. Use when the user shares a URL or screenshot and says "make it like this", "I love this site", "inspire from", "lawha inspire", "استلهم من هذا الموقع", "أريد تصميماً مثل".

Read the project's design system - Tailwind theme tokens (@theme or tailwind.config.js) and CSS variables, shadcn/ui components, the project's own React and Vue components with their props, TanStack and Next.js routes, fonts - and report drift (hard-coded colours, arbitrary sizes, left/right utilities that break RTL). Saves .lawha/system.json so new pages reuse the same tokens and components. Use when the user says "what's in our design system", "index the project", "lawha system", "check for design drift", "ما هي مكونات المشروع", or before building a new page in an existing project.