What I learned in Session 5 of the Cradis AI Scholarship Bootcamp — and how I applied it to redesigning Almosafer.
Two ways Claude Code becomes a real design partner — and how I used both on Almosafer.
I used both modes: Claude Code reviewed the booking flow as a researcher, then helped me reshape the entire design system as a co-designer.
Last week I built and shipped. This week, Claude Code became my design partner.
Letting Claude Code manage the stack so design can focus on experience.
A prototype on localStorage works for one user. A real travel product like Almosafer needs more.
Search history, saved trips, bookings — these can't live on one device.
Boarding passes, receipts, hotel images — too big for the browser.
Auth, rate limits, caching — needs a fast key-value store.
Decide the stack before building. Otherwise Claude picks shortcuts you'll have to redo later.
Build me a flights search app that saves recent searches.
Claude builds something that only works locally. The day you want to share, you rebuild large parts.
We'll host this on Cloudflare so anyone can use it. Build me a flights search that saves recent searches per user.
Claude picks the right pieces from day one. Ready for real users.
CLAUDE.md so every conversation already knows.
Reusable expertise that turns Claude into a domain specialist.
A reusable playbook that makes Claude an expert in a specific domain — design, writing, brand systems, anything.
Project rules — what this project needs.
Domain expertise — design, writing, brand. Reusable across projects.
Project rules + domain expertise = full context for Claude.
frontend-design SkillAnthropic's official Skill that helps Claude design interfaces that don't look like every other AI app.
I enabled frontend-design before regenerating the design system. The result felt like a travel brand — not a generic SaaS dashboard.
Letting Claude Code think through a brief with me.
A short product brief — realistic, incomplete, full of design decisions waiting to be made.
PRD: Order Tracking Page Problem: After checkout, users don't know where their order is. Goal: Show real-time status and estimated arrival. Requirements: • Show current status: preparing, on the way, delivered • Show estimated arrival time • Show driver location on a map • Let the user contact the driver • Notify on every status change Out of scope: order modifications, multi-stop tracking.
I wrote a similar brief for the booking confirmation & itinerary screen and dropped it into Claude Code as the starting point.
Drop the PRD into Claude Code, then run these three prompts in sequence.
"List the design decisions I need to make as a UX designer — things the PRD doesn't specify but that will shape the experience."
"Now list every edge case — empty states, errors, unusual states, things that could go wrong, accessibility concerns."
"Based on the PRD and the decisions above, propose an initial layout. Describe components and hierarchy, then build it as a working HTML mockup."
A real research task, run live on competitor products.
Give Claude two URLs and let it run a UX comparison the way a consultant would.
Compare almosafer.com and wego.com for booking a flight. Use Playwright to explore the pages and take screenshots. Focus on: 1. Trust signals (reviews, badges, guarantees) 2. Search & filter UX 3. Checkout flow friction Output a structured report with strengths, weaknesses, and 3 recommendations for each.
I ran the full UX research toolkit on Almosafer — entirely with Claude Code.
Using AI as a design partner — right now, on a real screen.
~20 minutes. Pair work in the bootcamp — solo work on Almosafer.
Open Claude Desktop → Customize → Skills → enable frontend-design.
"Here's almosafer.com. Redesign the entire UI as one cohesive system. Bold, distinctive, no generic AI aesthetics. Keep all screens consistent."
Ask follow-ups: typography rationale, color logic, motion ideas, how screens connect.
Tell Claude Code to apply the system across the whole app. Push to deploy and compare before/after.
Translated Claude's output into a real, production-ready system using Figma Variables.
Primary, secondary, semantic, neutrals — all as Figma Variables, mapped to dark/light modes.
Type ramp with intentional pairing — chosen by Claude with clear rationale.
Buttons, inputs, cards, search, itinerary — consistent across all booking screens.
The line between designer and builder is dissolving. The designers who notice — and adapt — will lead the next decade.
Five rules I now use on every product — including Almosafer.
CLAUDE.md upfront.Full UX research (Interviews, Persona, Audit, Usability Testing) + a complete design system in Figma Variables — all driven through Claude Code.