AI-Assisted Design Workflow at Travelopia

AI-assisted design workflow in Claude Code

Claude Design System: Our new source of truth for designs

We moved our entire design system (for every brand of Travelopia) from Figma to Claude Code, hence Claude is our new source of truth for all existing and new designs. The design system contains all the components, existing pages and flows and all new designs.

New Workflow for Designers

Prompt to create designs with complete functionality of every component

Create a PR (pull request) and assign it to a developer

Also generates a Vercel prototype link, useful for a demo to the stakeholders

Dev reviews the PR and rectifies the code wherever required

Dev assigns us back the PR to do a quick design review

They push the code to the main branch of the repository and merge the code to the codebase

But What About the Actual Design Process?

Claude Code’s skills cover every step of the design process, from wireframing to prototyping. Here’s how my design process looks right now:

Upload supporting documents (JIRA ticket, PRD, etc.) to give Claude full context — excluding confidential data

Uploading a JIRA ticket as supporting context in Claude Code

Do basic research/competitive analysis myself as before, or ask Claude to scan competitor products and pick references

Competitive research and reference gathering with Claude

A custom skill for generating design iterations — multiple design options from both UX and UI perspectives

Generate a Vercel link for the iterations, showcase to the wider team, and finalise the design

Prompt Claude to pick the finalised iteration and build finessed UI using design-system components

Create a PR and follow the steps from before

Opening a pull request from the finished design

Migration from Figma to Claude Code

Here’s the whole summary of how we migrated from Figma to Claude Code.

Step 1

Connected Figma MCP to Claude Code

Started importing the basic style guide first, i.e. grids, colors, typography, etc., either using screenshots or selecting the specific frames on the Figma file

Step 2

Then started building the atoms and molecule components with the same method. It definitely needed a lot of tweaking and prompting to build the components exactly as per Figma

Step 3

While creating these components, I also focussed on the functionalities and responsiveness of each component

Step 4

Then came the full pages, which is still a work in progress