What's your vibe design process?

Everyone love's talking about AI, LLM's, API's and building back end apps. Let's go a step back/forward (different stages for diff dev processes).

What's your UI Design process? Here's mine:

Outlining the app

We can't design an app if we don't know what pages would be present in the first place.
Before the design process even starts, I first make sure I have a master_doc.md, this outlines every single aspect of my app, not just the typical readme, but the pipeline, the structure of different python automations, the functionality, everything.

2. Finding references

Once I've got my master doc, it gives me every /[page], so I know exactly how many pages there are and what each one serves.

Good artists copy, great artists steal. I use dribble.com to find tons of amazing "references".
I don't just search up "[Niche] UI Design", we made a master doc to be used. Each page has it's own unique search terms, some are clear such as settings, but if you're idea doesn't follow the exact copy and paste SaaS then you might need to be creative with what you're searching.
Considering a SaaS has 3-7 pages, that's 3-7 different references MINIMUM you need. If you are better with figma or UI design, you can get 3x references per page and make your own off of that, but personally, I know how to make squares on figma.

3. The final stage

Once that's done I make a master_design_doc.md (I've set up some self made Agent Skills to do this for my own workflow, give's me insanely detailed outputs and amazing results overall)

The master design doc automatically writes everything in detail, reference's path (where they can be found), the exact page by page structure, copy, and so on (again this post is just design but with my skill it keeps asking me for everything) as well as the branding.

So, what's yours?

13 comments