Ask HN: Low-Code Interactive UI Prototypes/Mocks Powered by TailwindCSS (opens in new tab)

404?

Hey everyone! I'm experimenting with a UI prototyping/design/mocking tool concept and would love to get your feedback.

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.

https://github.com/user-attachments/assets/661916c1-f604-47b...

There are some key benefits I think this approach could offer:

Consistency: Using Tailwind ensures consistent design across components.

Reusable Components: Easily define and reuse component collections and design systems.

Responsive Mocks: Prototypes can be responsive by default thanks to Tailwind.

Interactive Navigation: You can add navigation between screens to simulate user flows.

Real Device Preview: Since it's just HTML/CSS, the prototypes can be loaded on real devices for a realistic view.

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.

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.

Here’s a quick prototype screenshot: [screenshot attached]

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!

Thanks in advance for your feedback!

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?

---

Here is a login screen example of low-code mock/prototype notation:

    // 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?