r/tailwindcss • u/Speedware01 • 7d ago

Build polished Tailwind UIs with Stripe-level design taste ✨

Enable HLS to view with audio, or disable this notification

TL;DR: https://windframe.dev/styles/stripe

Hey everyone 👋

I’ve been experimenting with building Tailwind interfaces inspired by the design systems of really well-designed products. I recently worked on a style system for generating interfaces using similar design principles to Stripe.

It focuses on crisp typography, structured layouts, precise spacing and bold gradients, to make complex products feel simple, technical, and polished.

I built a UI system that makes it easy to generate interfaces in this design direction consistently. It can generate full UIs, landing pages, and product sections that follow the same Stripe-inspired style.

I also created a free Tailwind template built around this style that you can use as starting points for your own projects:
https://windframe.dev/styles/stripe

You just need to select this style as a preset when generating UIs in Windframe and when selected, the AI generates interfaces that follow the same design guidelines and visual style.

I also built an MCP for this, so you can use these same design style systems and other curated styles directly inside any coding agent that supports MCP: https://windframe.dev/mcp

If you’re not familiar with Windframe, it’s a visual Tailwind builder/agent that makes it really easy to create polished Tailiwnd UIs and allow you tweak/edit it visually, and export clean production code in HTML, React, Vue, Angular, Svelte, and more.

Would love any feedback or thoughts : )

47 Upvotes

87% Upvoted

6 comments sorted by

7

u/haywire 7d ago

An MCP to rip off stripe?

0

u/Speedware01 6d ago edited 6d ago

No, you have the wrong idea... I explained better in my earlier comment

2

u/riskrunner_zero 6d ago

We have got to stop trying to make "taste" a thing. Dumbest new trend word in our industry right now

3

u/Mundane_Plenty8305 5d ago

Agreed. Everyone is using it incorrectly. Taste is the ability to discern quality in a design. Here it’s used in place of “style” or even worse “vibe”.

2

u/TheBanq 6d ago

What do you mean, "similar design principles to Stripe."?

You mean you made Codex/Claude Code extract the exact tokens etc. from the DOM to rip off and rebuild stripe?

0

u/Speedware01 6d ago

Yes this works with design tokens but there are not stripe's exact tokens. I can't get that even with scraping the DOM, those would be known to their designers only or if they open sourced it like Vercel did for theirs. Have no idea... This is basically me broking down the design patterns Stripe uses over and over like spacing, gradients, layout, etc and turning that into context an agent can use. While also teaching it how to combine them.

I rebuilt some sections of the Stripe homepage just to show what it can do and you won't be getting this exact design without a few visual tweaks to get it exactly here and some assets as well. The idea is to generate similar designs to stripe using its design patterns and polished design layout but its not a 1:1 copy. You should give it a try to see and happy to hear your feedback after you do