Seems amazing, but more demos/examples would be nice, and installation instructions right on the homepage. Web editor would be great.
Seems to be written for jvm :(
The language spec is amazing and styling is slick.
You click see the (?) icon to see the summary of the algorithm.
The tool generates unique, meaningful names for any RGB color using a combination of color properties. Every name is unique and reversible - you can convert any name back to its exact RGB color!
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.
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?
