UX lead at real estate firm on running a website redesign with Claude Cowork
Jan-Erik Asplund
Background
We spoke with a product designer at an 80,000-person global company who led the first AI-native website redesign in their organization's history, working without Figma or a traditional dev team.
The conversation covers how Claude Code and Claude Cowork replaced a three-month, fifteen-person workflow with a solo two-day sprint, and what it actually takes to manage hallucination, context limits, and cross-device QA when shipping production code through AI.
Key points via Sacra AI:
- Claude Code + enterprise plan economics flip the build-team model for design-heavy web projects, compressing a 3-month, 15-person effort into a 1-person, 5-day sprint at a fraction of the cost. "I spent maybe eight hundred to a thousand dollars in Claude tokens this week alone. But compared to what the company would have spent using the old approach, it's nothing. Very impressive speed, very good result, and much lower cost for the company."
- The concrete mechanic is a context-packet handoff—Markdown session export plus brand guidelines, URLs, screenshots, and prior page code pasted into each new chat—that lets a single designer run three or four parallel Claude sessions across different pages without losing design-system coherence, then push directly to Vercel and GitHub before dev ever touches the project. "I don't just copy-paste the Markdown file. I also paste in the old company URL and the new staging link if I've already created one… I also copy-paste the full code from pages I've already built in GitHub and include it in the new chat. So Claude has the Markdown summary, the screenshots, the URLs, and the actual code from similar pages to work from."
- The handoff shift—from static Figma files with annotated animation specs to a fully running, responsive, animated codebase on a shared Vercel link—moves developers off pixel-level design work and onto data imports and API integrations, redefining where design ends and engineering begins. "With Claude, I've already worked all of that out myself, so the developers receive something that's already running correctly and just need to import data and do integration work. Compared to how we were working four months ago with Figma NCP, this is genuinely another level."
Questions
- Which tools do you use regularly, and which have you tried between Claude Cowork and OpenAI's Codex app?
- When did your team first start using Claude Cowork, and how often are you personally using it now? What kind of work were you hoping it would take over when you adopted it?
- Walk me through the last few things you personally delegated to Claude Cowork end to end—maybe one email or org task, one coding task, and one design or product task. What did you give it, what did it produce, and what happened next?
- Can you walk me through the exact workflow for one of those pages—say the landing page? What did you upload or paste into Claude first, what instructions did you give it, and what did the final output look like before you handed it to the PM, CMO, and dev team?
- When Claude handed work back to you, what format was it actually in—was it code you could run locally, a prototype, HTML and CSS, or something else? And how did that move into the dev team's workflow?
- Walk me through a moment where Claude got something wrong or created risk in that workflow—maybe hallucinated copy, broke the layout, misunderstood animation, or touched the wrong file. What happened, and how did you catch it?
- You mentioned opening three or four Claude chats in parallel for different pages. Can you walk me through how you managed that practically—how did you keep the context, files, and design system consistent across those parallel chats?
- When you hand off from one chat to the next with that Markdown file, what does Claude usually preserve well, and what still gets lost—like brand rules, component choices, page-specific decisions, or your intent?
- How did developers and PMs react to receiving a working Vercel and GitHub prototype from a designer instead of a Figma file? What changed in the review or handoff process?
- When Claude produces a page or component, what do you personally check most carefully before you trust it enough to share with PMs, executives, or developers?
- When you use Claude Cowork or Claude Code for this website workflow, how does it feel different from using normal ChatGPT or Claude in the browser—for example in handling files, editing code, remembering context, connecting to GitHub and Vercel, or feeling like you're assigning work to an assistant rather than just chatting?
- You mentioned trying Codex, Gemini, ChatGPT, and Antigravity. Can you walk me through one specific task where another tool looked promising but Claude ended up winning? What was the task, and where did the other tool fall short?
Interview
Which tools do you use regularly, and which have you tried between Claude Cowork and OpenAI's Codex app?
We are using Claude Cowork regularly. Our company was using Gemini, but for the design, product, and development department, we are switching to Claude Code and Claude Cowork. It's because the performance is better than other models so far. Also, by using a Claude enterprise plan, we have unlimited tokens—it's pay-per-token. Since our product design and development team is relatively small compared to the company size—we have around eighty thousand employees worldwide, but our product development department has maybe two hundred people overall—pay-per-token, per project makes more sense in terms of the company budget. That's what we are doing so far.
When did your team first start using Claude Cowork, and how often are you personally using it now? What kind of work were you hoping it would take over when you adopted it?
We use it every day, to be honest—for organizing email, for coding, for design. We all rely on it now. We did try Codex before, but because our company doesn't have a plan for it, it was more of an exploration phase. Eventually, the executive level decided to go with Claude Cowork, and that's the direction we are heading.
Walk me through the last few things you personally delegated to Claude Cowork end to end—maybe one email or org task, one coding task, and one design or product task. What did you give it, what did it produce, and what happened next?
I just finished a huge project—a rework and rebranding of the company's mothership website. The head of marketing, the founder, and the CEO wanted to rebrand the investor relations section of the website ahead of a new stockholder event.
What made this interesting is that we had done a similar project about a year and a half ago for ESPRealty.com. At that time, it took two designers two to three weeks just for the ideation phase, then maybe ten to fifteen developers for front-end, back-end, integrations, and QA. That project took about three months total.
This time, using Claude, I was able to do it entirely by myself as a sole designer. I used Claude to help organize the design files and understand what kind of content we wanted. I imported the current design into Claude, then asked it to come up with a new design that fit our existing design guidelines—colors, everything. I also provided screenshots of the design style and direction I was looking for, and it produced some beautiful designs. I needed to spend maybe eighty percent of the time tweaking, but the result was very satisfying.
I worked two full days on the landing pages—about sixteen hours to create the complete design direction. I sent it to the senior PM, CTO, and CMO for review. We only had about two rounds of back-and-forth tweaking, and the CMO loved it. After that, it took another two to three days to finalize the sub-pages—stock information, press releases, governance, terms of service, and other smaller pages, many with a lot of legal text. I finished maybe ten to twelve pages in that time.
We are now handing it over to the dev team to hook up APIs with the current version and import existing data—quarterly stock information, videos, press releases. The dev team has been given four or five developers for less than two weeks to finish it. The result is outstanding. In terms of cost, I spent maybe eight hundred to a thousand dollars in Claude tokens this week alone. But compared to what the company would have spent using the old approach, it's nothing. Very impressive speed, very good result, and much lower cost for the company.
Can you walk me through the exact workflow for one of those pages—say the landing page? What did you upload or paste into Claude first, what instructions did you give it, and what did the final output look like before you handed it to the PM, CMO, and dev team?
I opened Claude Code, went to the coding environment, and started by taking the URL of the current website and pasting it in. I asked Claude to act like a senior designer and provide a solid, futuristic design using our current color palettes, which I also copy-pasted in. I took screenshots of the existing website to make sure the company branding stayed consistent, told Claude to try to do something similar, and let it go to see what it came up with.
The initial design wasn't exactly what I wanted, so I had to tweak it section by section. For the navigation and hero page, I took screenshots of design inspiration I liked—for example, Coca-Cola's investor relations page or Lululemon's—and asked Claude to come up with something in a similar direction. I also uploaded a background video as a plugin for the hero section. After that, it was a lot of fine adjustments: viewport sizing, tagline placement, font sizes, alignment—a lot of small tweaks per section.
Once I was satisfied with one section, I moved down to the next. One challenge was that even using the best Claude models—4.7 and 4.8—there was still hallucination. I had to be very specific about telling Claude that the copy had to be completely identical to what was on the existing production site. If the text wasn't the same, it would create confusion for the marketing team when they reviewed it.
One thing I really appreciated was the ability to upload videos. With a personal pro account on other tools, I couldn't upload videos. But with the company's Claude enterprise plan, I could. Whenever animation timing wasn't right—for example, when the scroll or hover behavior wasn't what I wanted—I would record a screen video, describe the problem to Claude, and share an example from another website showing how it should work. Sometimes it took two or three tries to fix it. There was one stacking card animation where Claude understood the initial UI I wanted but struggled to get the interaction timing exactly right. There were just a lot of details to sort out.
Once I was satisfied, I sent a link to a group chat with our CTO, senior PM, VP of marketing, and director of product management to get feedback. The feedback was minor—corner radius adjustments, image updates—nothing major. It took maybe two hours to fix. Then I sent it to a wider exec group including the CMO for final sign-off.
When Claude handed work back to you, what format was it actually in—was it code you could run locally, a prototype, HTML and CSS, or something else? And how did that move into the dev team's workflow?
Initially I wanted Claude to set up a local staging site, but this was a completely new workflow. Our design team had never had access to the GitHub environments where dev was working, and we didn't want to risk breaking anything. So I didn't have a staging path at first.
I was the first person in our company to work this way—directly with AI to produce code that dev would then work from. I like to explore new things, so I asked Claude to guide me through registering a Vercel account. Claude helped me set up the environment, run the code, and push to Vercel. Whenever it finished a section, it would push to Vercel and share a link. At first, each link was individual and single-use, which was inconvenient, so I asked Claude if there was a way to have a permanent staging link. We went through some hiccups but eventually got it working, and from that point things went smoothly. I could share the link directly with our CTO.
Claude was also able to produce a full HTML and CSS codebase alongside the design, so I could work with code and design together. Claude suggested I use GitHub to save the repository, so I registered a new company GitHub account, used it for the project, and copy-pasted the HTML and file structure Claude provided. It was very straightforward—like organizing a folder.
After about two days of iteration on the landing page, once the CMO approved it, I handed it over to the dev team and walked them through the design. Because I was new to this environment, I also asked the dev manager for guidance on setting things up properly. She gave me permissions to join the company's GitHub environment, helped me transfer the repo I'd created to the company GitHub, and we shut down the original Vercel deployment on my personal account and moved everything to the company's group Vercel account. That transition took about two to three days.
This is the first project where our design team worked without Figma or any traditional design tool—solely in Claude—and produced a full deliverable. We also fundamentally changed the handoff dynamic. Before, whenever we needed a design tweak, we'd go back and forth with the dev team ten to twenty times over things like pixel adjustments. Now we can handle all of that within Claude ourselves, get it to a polished state including animations, and then hand it to dev. Developers receive something that's already fully running with animations included, and they just need to import data and do integration work. Compared to how we were working before, this is a very new, very fast, and very efficient process—and it makes designers feel very empowered.
Walk me through a moment where Claude got something wrong or created risk in that workflow—maybe hallucinated copy, broke the layout, misunderstood animation, or touched the wrong file. What happened, and how did you catch it?
It happened a lot. Claude has a limit on how much it can retain in a single conversation, and when you hit that limit, you have to open a new chat. Because of that, design consistency across a long session doesn't always carry over well.
The bigger issue was content hallucination. Claude would sometimes create content that looked beautiful but simply didn't exist anywhere in the company. I'd go through the design with our senior product director and we'd ask, "Where is this coming from? Where does this number come from?"—and we couldn't find it. We had to review each section vigilantly to make sure everything matched our existing content. Claude is a very creative and smart collaborator, but you have to pull it back and tell it, "Don't go too far—the text needs to be exactly what we have." It took a few learning cycles before I got that right in my prompts.
One specific example: there was a page with headshots of all the executive and board members. I asked Claude to replicate the existing page. It caught some of the images and translated them correctly, but for some executives and board members, the images just didn't show up. It even tried to substitute with the person's initials on a placeholder, and that happened multiple times—which was very frustrating. In the end, I had to download each image individually, upload it, and be very explicit: "This is the image for this person." Eventually Claude handled it correctly.
Another thing I discovered was that I could open three or four Claude chats in parallel and assign different pages to each, which was much faster. But I had to stay very organized mentally to make sure I was copy-pasting code into the right repository.
There was also a more subtle form of inconsistency in the design components. Many sub-pages share common components—for example, the sticky scrolling navigation. Claude produced two different styles for it across different chats and I didn't notice right away because of the tight deadline. I only caught it when I handed the files to the dev team and they came back saying they didn't know which style to follow. I fixed it immediately, but it was a design-system inconsistency that had nothing to do with copy—it was purely visual.
For greenfield projects, Claude's creativity is an asset—it can generate a lot of content very quickly. But for a large company with established branding and public-facing legal and financial content, you have to be very disciplined about constraining it. One lesson I took away: after making any changes, I now always ask Claude to run a test and act as a QA engineer to make sure nothing that was working before has broken.
You mentioned opening three or four Claude chats in parallel for different pages. Can you walk me through how you managed that practically—how did you keep the context, files, and design system consistent across those parallel chats?
Because Claude has a limit on how many words it can hold in a single conversation, I learned from colleagues to ask Claude to export the conversation as a Markdown file at the end of each session. I then copy-paste that file into the new chat so I don't have to rewrite my prompts from scratch. I also paste in the old company URL and any new Vercel staging link I've already created, along with the brand guidelines—all of which are already compiled in the Markdown file—plus screenshots of the style direction I'm targeting.
One other thing I really like: I use voice input a lot for giving prompts. Typing feels too slow now. I just speak, fix a few words, and send it. Even with some typos or imperfect phrasing, Claude understands very well. Other models I've used, like Antigravity, handle it well too. It makes the whole process much more efficient.
When you hand off from one chat to the next with that Markdown file, what does Claude usually preserve well, and what still gets lost—like brand rules, component choices, page-specific decisions, or your intent?
I should add something I didn't mention earlier: I don't just copy-paste the Markdown file. I also paste in the old company URL and the new staging link if I've already created one. The brand guidelines are already embedded in the Markdown file, and I include screenshots of the style I'm targeting. Even though Claude doesn't remember the previous chat, that context packet gets it up to speed effectively.
I also copy-paste the full code from pages I've already built in GitHub and include it in the new chat. So Claude has the Markdown summary, the screenshots, the URLs, and the actual code from similar pages to work from. The results have been pretty good—I don't need to do a lot of tweaking when starting a new session that way.
How did developers and PMs react to receiving a working Vercel and GitHub prototype from a designer instead of a Figma file? What changed in the review or handoff process?
This is still a work in progress, and I can't speak for them entirely, but they did tell me it saves a lot of time and work. Normally when management asks the dev team to deliver something in a very short timeframe, developers push back—the time is too short, there's too much to set up. But when I told them that all the animation, content, CSS, and HTML would already be handled, they said it took a huge amount of weight off their shoulders.
What dev now needs to do is the more foundational work: data importing and API integrations—rather than all the small, detailed design adjustments.
We also had earlier experience with Figma NCP. Figma NCP is efficient, but it still has hiccups. The code produced through this Claude workflow is more complete, and I was already able to ask Claude to handle full responsiveness across desktop, Android, and mobile before handoff. If we were doing this in Figma NCP, even with multiple files, it's more like a static deliverable—there's no animation logic included. We'd still have to explain to developers exactly how a stacking card animation should behave on scroll, when to pause, when to continue. With Claude, I've already worked all of that out myself, so the developers receive something that's already running correctly and just need to import data and do integration work. Compared to how we were working four months ago with Figma NCP, this is genuinely another level.
When Claude produces a page or component, what do you personally check most carefully before you trust it enough to share with PMs, executives, or developers?
I test on different devices—Android phone, iPhone, desktop, and simulator. I check that everything works as expected, then tweak based on what I find. For animation issues, I record a video, find a similar example from another website, share it with Claude, and ask it to produce something close to that. Once it gets to about eighty to ninety percent of what I want, I fine-tune from there.
Real-device testing is critical. A lot of designers and developers only test in the browser inspector by switching between device presets, but that's not the same as testing on the actual device. Even if you select "iPhone 17" in the inspector, it won't look exactly the same as a real iPhone 17. I always prefer to test on a real phone.
We also have a shared spreadsheet where colleagues have voluntarily listed the devices they have access to, so we know who to go to if we need to test on a specific device. And we have a QA engineering team with interns who assist with testing. The full process goes: design test, dev test after they build it, QA engineer test, and then design does a final review pass.
When you use Claude Cowork or Claude Code for this website workflow, how does it feel different from using normal ChatGPT or Claude in the browser—for example in handling files, editing code, remembering context, connecting to GitHub and Vercel, or feeling like you're assigning work to an assistant rather than just chatting?
It feels like hiring a junior developer, a senior developer, or a staff engineer. Using a trustworthy AI model is really important, especially for design and code, where you need it to provide reliable information. Claude has better performance in a lot of people's view, and that matched my own experience when I tried it.
I did try Antigravity, ChatGPT, Gemini, and Codex. Codex is really good at iterating and producing beautiful visuals. But in terms of reliability—creating fewer bugs, running the environment more holistically, checking that code doesn't break—Claude does better. When I need to fix a bug, Claude can find it faster and fix it correctly. With other models, things would just break, or I'd have to try many times without getting a good result, which was very frustrating.
That's also why we are leaning toward Claude—our product design, development, and dev teams are all using it, so we want the transition to be smooth. When I advocated for designers to work this way, the company-wide choice was already Claude, so that's the environment I was working in.
You mentioned trying Codex, Gemini, ChatGPT, and Antigravity. Can you walk me through one specific task where another tool looked promising but Claude ended up winning? What was the task, and where did the other tool fall short?
With Antigravity, you can choose different models. I remember there was a bug I wanted to fix, and Gemini wasn't able to find it after several tries. I then asked Claude Opus 4.6 to fix it. It gave me a very comprehensive plan and eventually fixed the issue—which really proved how capable it is. But it was very expensive and ran out of credits quickly. Since my company has a Claude plan, we go with Claude because the performance is better and it's less buggy.
Disclaimers
This transcript is for information purposes only and does not constitute advice of any type or trade recommendation and should not form the basis of any investment decision. Sacra accepts no liability for the transcript or for any errors, omissions or inaccuracies in respect of it. The views of the experts expressed in the transcript are those of the experts and they are not endorsed by, nor do they represent the opinion of Sacra. Sacra reserves all copyright, intellectual property rights in the transcript. Any modification, copying, displaying, distributing, transmitting, publishing, licensing, creating derivative works from, or selling any transcript is strictly prohibited.