# The JSON First Design Workflow

## Метаданные

- **Канал:** Brian Casel
- **YouTube:** https://www.youtube.com/watch?v=hSjbxes-wnY
- **Дата:** 25.02.2026
- **Длительность:** 2:20
- **Просмотры:** 1,421
- **Источник:** https://ekstraktznaniy.ru/video/10857

## Описание

Brennan shares his new design process: asking the AI to generate realistic JSON sample data first (to account for edge cases), and then generating the UI mockups based on that data.

👇 **Your Builder Briefing (free)**
https://buildermethods.com - Your free, 5-minute read to keep up with the latest tools & workflows for building with AI.

👇 **Use Agent OS** (free open source):
https://buildermethods.com/agent-os

👇 **Use Design OS** (free open source):
https://buildermethods.com/design-os

👇 **Join Builder Methods Pro**
https://buildermethods.com/pro - The membership for professionals (and soon-to-be-pros) for building with AI.  Private discord.  Video training library.  Official support for Agent OS.

▶️ Related videos:

💬 Drop a comment with your questions and requests for upcoming videos!

Chapters:

## Транскрипт

### Segment 1 (00:00 - 02:00) []

I'm working through a new design process now where it's like I'm actually using just claude in the web app to plan that out and then use JSON sample data like have it generate that first — like based on this new feature this new product idea generate a JSON sample data so that we have a rough working concept for what database content might look like then using that generate a whole UI mockup for you know that gets it much closer to like an actual usable mockup and then even it it'll code add up, but like I'll just take a screenshot and then bring that in into the specs, you know? — So, are you like if you wanted to do like the dashboard you have you see on your screen, like if you wanted if you were saying like I need a dashboard for a new product, would you do what you just described or would you go VO first and some other tool and like — I just use regular cloud for this usually. I like to do a lot of planning in cloud web app. Um, yeah. So, for that I would say, all right, we need a dashboard that's going to show, you know, performance reports for this analytics product. And I'll probably do a back and forth Q& A just to nail down like what the like tiny features need to be, what it needs to do, what the user's job to be done here needs to be. We lock that in and then I'll say something like, okay, based on that, generate a JSON sample data for the dashboard view for this. And then it'll gener and then the nice thing about that is that it'll not only create the database like a sample of a database model but it'll create really realistic content in there like realistic numbers, realistic names, descriptions. — It's not just Lauren Mipsum and stuff. — Yeah. And that's like really important from a design standpoint cuz like you have to sort of like design for all these cases like well what if the person puts 10 paragraphs instead of one paragraph or you know so then we have this JSON data and then I'll say okay you know mock up like a modern clean user-friendly interface for this and then it's going to go off and it'll probably just use like React and Tailwind and I don't really care what it's going to use from a code standpoint. It's just for mocking up purposes. But the benefit of doing that in that sequence is that like if I had skipped the JSON part, it would have just sort of either put a lot of bells and whistles into the UI that I'm not going to need or it would be missing some functional details that we're going to need. But having the JSON sort of like locks it in like yes, every button, every menu that we're going to need here is accounted