timz

Sorry, here is screenshot of a prototype IDE in browser with live preview.

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?

What would be pros and cons of implementing it in:

    - bash/zsh
    - keep in python
    - rust/go

What do you mean by capture output, like if i have ```bash echo "hello" ``` hello would appear in the rendered markdown?

    # [clean]() Clean build directory

    ```bash
    rm -rf ./build
    ```    

    # [format]() Format the source code

    ```bash
    npx prettier --write .
    ```

    # [build](clean format) Build the project

    ```bash
    npm run build
    ```

    # [deploy](build) Deploy to surge.sh

    ```bash
    surge ./build my-project.surge.sh
    ```

Thank you for feature suggestion.

    ## [clean]() Cleans the generated files
    
    ```bash
    rm -rf ./build
    ```

    ## [init]() Initializes the build folder
    
    ```bash
    mkdir -p ./build
    ```

    ## [build](clean, init) Builds the project

    This command depends on clean, and init, which are executed in that order beforehand.

    gcc magic.c -o ./build/magic

### [my-command-name]() My command short description

A longer command help

```typescript #!/usr/bin/env deno run console.log("hi") ```

if hashbang is missing, it is infered from the markdown codeblock lang speck, with fallback to bash.

The stripped Docker containers are used mostly for runtime to my understanding, building is done in a different container where more build tools are available.

In case of single binary (now it is single python file), what would be the best way to distribute it to users, since pypi and npm cannot be used?

Which language you would suggest?

Thank you for all the feedback

Aditionally we can generate html out of the, now `makedown.md`, right in the tool: $ makedown --html makedown.html or $ m --pdf makedown.pdf