by timz on 11/10/24, 4:05 AM with 3 comments
by steveharman on 11/10/24, 7:47 AM
by timz on 11/10/24, 4:05 AM
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?