5 ms·

Ask HN: Low-Code Interactive UI Prototypes/Mocks Powered by TailwindCSS

1 points by timz 2y ago

timz 2y ago
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-47bc-a739-9c133503d9b8 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?
steveharman 2y ago
404?
- timz 2y ago
  https://i.ibb.co/Jt7mjXW/screenshot.png https://i.ibb.co/Jt7mjXW/screenshot.png Sorry, here is screenshot of a prototype IDE in browser with live preview.

1 points by timz 2y ago

timz 2y ago

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-47bc-a739-9c133503d9b8 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?

steveharman 2y ago

404?

timz 2y ago
https://i.ibb.co/Jt7mjXW/screenshot.png https://i.ibb.co/Jt7mjXW/screenshot.png Sorry, here is screenshot of a prototype IDE in browser with live preview.