Hey everyone! I'm experimenting with a UI prototyping/design/mocking tool concept and would love to get your feedback.<p>The idea is to use TailwindCSS for prototyping UI, similar to Figma, but instead of drag-and-drop, you use a low-code approach with Tailwind-powered notation (inspired by Pug templates). The editor lives in the browser, with a live preview of the UI on the side, so you can instantly see changes as you type.<p><a href="https://github.com/user-attachments/assets/661916c1-f604-47bc-a739-9c133503d9b8">https://github.com/user-attachments/assets/661916c1-f604-47b...</a><p>There are some key benefits I think this approach could offer:<p>Consistency: Using Tailwind ensures consistent design across components.<p>Reusable Components: Easily define and reuse component collections and design systems.<p>Responsive Mocks: Prototypes can be responsive by default thanks to Tailwind.<p>Interactive Navigation: You can add navigation between screens to simulate user flows.<p>Real Device Preview: Since it's just HTML/CSS, the prototypes can be loaded on real devices for a realistic view.<p>Text-Based Mocks: This makes the tool LLM-friendly, potentially allowing integration with AI to generate code from prompts or even create designs from UI screenshots.<p>I’m also thinking about adding GUI controls to simplify the low-code experience for non-developers by letting them pick and add Tailwind classes via buttons instead of typing.<p>Here’s a quick prototype screenshot: [screenshot attached]<p>I'd love to hear your thoughts—does this sound like something worth investing time in? Any advice, suggestions, or concerns would be super helpful!<p>Thanks in advance for your feedback!<p>PS. I am still trying to decide if this approach is worth working on.
So the question is, what do you think, is it worth the time to work on?<p>---<p>Here is a login screen example of low-code mock/prototype notation:<p><pre><code> // Main container for the login screen
.bg-gray-100.min-h-screen.flex.items-center.justify-center.p-4
// Login card container
.bg-white.p-8.rounded-lg.shadow-lg.max-w-md.w-full
// Title of the login form
h2.text-2xl.font-bold.mb-6.text-center Login
// Login form
form(action="/login" method="POST")
// Email input field with label
label.block.mb-2.text-gray-700(for="email") Email
input#email.w-full.px-4.py-2.border.border-gray-300.rounded-md.mb-4(type="email" placeholder="Enter your email" required)
// Password input field with label
label.block.mb-2.text-gray-700(for="password") Password
input#password.w-full.px-4.py-2.border.border-gray-300.rounded-md.mb-4(type="password" placeholder="Enter your password" required)
// Submit button
button.bg-blue-500.text-white.w-full.px-4.py-2.rounded-md.text-lg.font-semibold(type="submit") Login
// Link for forgotten password
p.mt-4.text-center.text-sm.text-gray-600
a.text-blue-500.hover:underline(href="/forgot-password") Forgot your password?</code></pre>