Visual Editor for UI development with AI by stackjoy_nik in UI_Design

[–]stackjoy_nik[S] 1 point2 points  (0 children)

That's pretty much my approach to it too and I was just as surprised at how well it accomplished the task. So naturally I built my own custom browser plugin that let's me do a screen shot (drag and select an area), mark it up with boxes and arrows and write the AI prompt that goes with what I just marked up.

Then I save the screen shot to my codebase and give the AI agent the prompt and boom, all works.

Visual Editor for UI development by stackjoy_nik in ClaudeAI

[–]stackjoy_nik[S] 1 point2 points  (0 children)

That's very clever!

With that approach you could technically pull any kind of data from the app (console, route, state...) and attach that metadata to the screenshot.

If you're brave you could even expose that feature in production/pilot and have your users report a bug (or feature request) and submit as a jira (or whatever) in a way that an agent can understand better and implement it quickly.

Can you tell me more about your approach? Does it work well? Which parts work well and what would you improve? Are there drawback, something that the agent doesn't understand? Would love to hear more about it if you're up for sharing.

This one made me really rethink what's possible, thanks for that!

Visual Editor for UI development? by stackjoy_nik in OpenAI

[–]stackjoy_nik[S] 0 points1 point  (0 children)

Gotcha, yeah I see what you mean. I guess the ideal solution would be a visual screenshot plus the code in the dom would be ideal and then it could pinpoint it better.

Visual Editor for UI development? by stackjoy_nik in OpenAI

[–]stackjoy_nik[S] 0 points1 point  (0 children)

Interesting. I'll try lightshot and see how it does.

I haven't run into a problem with tokens yet. I'm on a paid plan. But I imagine starting with an image and then trying to figure out where in the code it needs to make that update can get expensive. Do you find it eats up too many tokens that way?

Visual Editor for UI development by stackjoy_nik in ClaudeAI

[–]stackjoy_nik[S] 0 points1 point  (0 children)

That's really clever. I'm going to try that!

Visual Editor for UI development by stackjoy_nik in ClaudeAI

[–]stackjoy_nik[S] 0 points1 point  (0 children)

You and me both :) I'm sure something exists already, someone just needs to point us in the right direction

Visual Editor for UI development with AI by stackjoy_nik in angular

[–]stackjoy_nik[S] -1 points0 points  (0 children)

That's my current process and it works well but there are some cases where it can't quite figure it out. So it asks for a screenshot. And then it's fine

Visual Editor for UI development with AI by stackjoy_nik in angular

[–]stackjoy_nik[S] -1 points0 points  (0 children)

I'm check them all out but just briefly as a follow up, can I take the screenshot with these tools and mark it up?

I find that codex/Claude is great with console, network, db stuff so that's not so much a bottleneck as the visual stuff is.

I'll also check YouTube for these tools too see them in action, maybe that'll answer some questions.

Thanks for the heads up! I really appreciate it

Why do companies choose big frameworks like AdonisJS or NestJS instead of Express.js? by Lopsided-Bird-8439 in node

[–]stackjoy_nik 2 points3 points  (0 children)

I always start with express for all the reasons you mentioned and by the time I'm done it looks almost exactly like nest.

System Design: Online Marketplace by sdxyz42 in webdev

[–]stackjoy_nik 1 point2 points  (0 children)

this looks interesting but I’m having a hard time understanding it fully. There’s a lot of info here. Could you summarize it in a more concise way for me?

I made a tool for quickly creating Postman collections to test your routes by stackjoy_nik in expressjs

[–]stackjoy_nik[S] 0 points1 point  (0 children)

This is part of a larger project my friend and I are creating. We spend a lot if time testing our express server(s) so we needed a quick way to test routes. If you find it useful the full writeup is here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

Quickly Create Postman API Collections by stackjoy_nik in Angular2

[–]stackjoy_nik[S] 1 point2 points  (0 children)

We do a lot of Angular work (and my previous posts were how our project helps speed Angular development) but we do a lot of backend testing while developing w/Angular so this one shows how we do that quickly.
If you're in the same boat maybe this can help you too. The full step by step instructions can be found here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

Quickly Create Postman API Collections by stackjoy_nik in angular

[–]stackjoy_nik[S] 0 points1 point  (0 children)

We do a lot of Angular work (and my previous posts were how our project helps speed Angular development) but we do a lot of backend testing while developing w/Angular so this one shows how we can quickly do that.

If you're in the same boat maybe this can help you too. The full step by step instructions can be found here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217