teddarific

Definitely — we've seen some pretty crazy high fidelity mock ups from our customers who spend hours and hours prompting away, and they genuinely blow my mind. it's honestly why we spend so much time working on the application layer (e.g. making it easier to feed context into your prompt, referencing other designs, etc) since we know that the LLM is capable of these things, it just takes much more time than most people are willing to put in.

would love to hear what you think when you give it another try!

Awesome to hear — our goal is to get to a point where you can copy/paste the design, but we totally recognize that it doesn't always get you to a full high fidelity mock up with the current limitations. So the main use case we've seen a lot of success with is ideating and validating different branches, quickly.

Oh that sounds very neat — definitely similar in nature! Documents and UI are both complex and can require a lot of iterations to get right

Other tools are AMAZING for spinning up actual fullstack apps and use cases that require persistent storage. But actual product teams aren’t asking for that.

Also, our customers tell us that anecdotally it feels like we error less compared to other tools because we are focused entirely on frontend (there’s less room for error). Of course, we still error a lot - not easy when natural language is your input set!! - but it helps to stay focused and theres less dependencies on a backend & database.

p.s. one of my personal favorite parts of Magic Patterns is that you can very easily revert to a previous version, which is possible because no backend or database!

other Magic Patterns co-founder here —

to add on to Alex's answer above, we also differ in that we have a lot of features focused around brainstorming / exploring ideas, versus just spinning up a fullstack app. For example, we have a "Commands" feature that lets you get four variations (that are guaranteed to be different!) of a prompt.

We also have a Chrome extension that lets you import designs from your existing product to ideate on top of existing content.

i hate working with DBs via command line, so this looks really cool. curious if your product resonates with a specific segment of developers, e.g. frontend vs backend? Hoping this can entirely replace me needing to do anything DB related in the comamnd line...

The entire disappearance of semantic HTML tags has been sad to see. It's just all <divs> inside of <divs> inside of <divs> these days.

Am curious on the O(n) calculation as well haha — I get what OP is saying, but would love to know if there's some deeper technical details here.

hey! other co-founder here — yeah, it does go through our backend systems for processing. We also store it in our db so people can iterate on it further in our web app. At the moment, no designs created via our extension are actually featured in our public catalog, but we do also support a private option for those folks who need private designs!

I originally thought that too but learned yesterday they have their own model. Definitely explains how its so fast and accurate!

This is neat. I worked on something similar to college where we built an app to track how long the line was at a popular cafe. We set up a camera + raspberry pi in the cafe and tried to the number of people. There was a lot of noise from overlapping people, random people walking in and out of line, etc. Cool seeing all the techniques and approaches you tried!

Wow, this was a lot of fun.

3 was a lot harder than expected — a great exercise for anyone honestly. I'm a math nerd so this was cool visualized!

Oh amazing, no idea how I missed that green button LOL. Was too excited about the details.

This is really neat. Have always wondered how these work under the hood / the algorithm behind them.

Would love a web version that's easily usable though; as much as I live in the terminal, just too much of a mental burden installing a new package.

I agree with the overall sentiment of the article, but find it a bit harsh.

I honestly find the real debate to be inline styles vs stylesheets.

Tailwind is just fancy inline styles. Personally, every single time I've used stylesheets in a large production-grade project it's an absolute mess. Every project I start now I use inline styles. I'm pretty indifferent on Tailwind though, it's sometimes nice to get opinionated defaults.

Curious if anyone has actually implemented this (or similar AI tooling) into their regular workflow?

Can you elaborate what you mean by "content" tool? Are your ideal users creating marketing sites, blog posts, or other?

In my experience, most of what content teams work with are some forms of CMS, and the design tools usually deal with layout and creating generic sites that work with the data structure inside the CMS.

This is an interesting use case for AI — I spent a lot of time at my previous company messing around with Sentry's grouping interface that was a major PITA. Would have loved to just use natural language instead of weird regex-ish matching.

Curious from y'alls testing, what type of errors do NOT seem to work well / AI has trouble tagging?

I admittedly didn’t, will give it a read now though!

Fascinating topic, awesome seeing how people are thinking about it!

I found the article a little hand-wavey though, would love to hear more about the short comings of dual-licenses

Definitely one of my pet peeves is when an app overrides a default short cut. Especially one like refreshing the page.

I wish there was some sort of universal agreement or API for what short cuts should do functionally.

The same thing happened in a past job for me — we discovered we were included every single icon in FontAwesome. I wrote a codemod script to refactor how we were importing icons so it was treeshakeable. Cut load times from 10s to 2s — was glorious.

Thanks! And yes, we do!

We totally get that at larger companies, the design process really lives in Figma. We're planning on building an integration so that developers won't even need to worry about hex colors, and give designers full control over tokens.

The files that we currently export have CSS variables that once imported, can be used anywhere in your app! With this set up, instead of needing to reference arbitrary hex colors throughout your CSS, you now have a code-based source of truth for your colors and design tokens.

For existing apps, there is definitely a bit of a migration process, appreciate that callout! The good news is that its a migration that can happen over time, as using Mirrorful isn't dependent on your whole codebase being consistent on day 1. We're also looking to leverage AI to do auto-migrations!

We currently don't have a direct integration with Bootstrap, but we definitely work with Bootstrap! I just created a Github Issue for us to create an example to show how you can use Mirrorful with Bootstrap: https://github.com/Mirrorful/mirrorful/issues/260

Flutter is awesome! One of my good friends is building his company with Flutter.

Does Flutter / Dart play nice with JSON? We export out to JSON from our web demo editor fwiw, but we'll definitely look into porting the full experience into a Dart package!

Absolutely! We're definitely excited about generative AI and the applications of it to reduce the tedious aspects of frontend engineering.

We're actually currently working on a feature to help generate color palettes using AI, but have some thoughts around code mods (since one of the most painful points of design systems is migrations) and generating components.

Any specific platform you have in mind?

Would love that! See you in the Slack!

1. In our personal experience, we found Backlight to be a little bit heavy. We want to focus heavily on augmenting existing processes, rather than change how teams work. There definitely is a time and place for Backlight though, we think its an awesome product!

2. We're currently focused on the developer experience, but we believe that working with designers is part of the developer experience! We like to think of ourselves as the "translation" layer between Figma and code. A direct Figma integration is in our roadmap ;)

I'm personally not super familiar with PyScript, but I would bet so! We store the tokens currently as JSON and have a few "translator" pipelines that convert our object into consumable code. I think we'd just need to add one for PyScript / Python!

Do you have a project you'd be looking to add this to? We're happy to take a look!

Love your point about design system standards semi-converging, we totally agree! We think design systems is slowly transitioning from an art to a science.

We do have plans on supporting native platforms! We've been holding out a little bit to see what folks specifically in mind, so if you have a thoughts or a specific platform in mind, let us know and we'll get it prioritized!

Also, we have an active Slack community if you're interested in conversing more there: https://join.slack.com/t/mirrorful/shared_invite/zt-1ps2xtxh...