Artificial Intelligence

Out of context: Reply #2542

  • Started
  • Last post
  • 2,651 Responses
  • yuekit5

    It's getting to the point where you can almost do pixel-perfect front-end development with AI coding agents - the main challenge here is conveying all the information needed to the AI.

    Apparently Figma is better for this, but since I was working with a PSD file I created a script for Photoshop that exports all the layer data to a JSON file (font sizes, colors, positioning of elements etc) and then give that to the AI along with a mockup image. The results are far from perfect but it's still a big time saver.

    yuekit 5Permalink
    UpvoteDownvote
    Flag
    • Cool, any working examples that you would like to share?utopian
    • Here's the script if you want to try it: https://pastes.io/vP…yuekit
    • Save as JSX file, then in Photoshop, open the PSD file you want to export data from and select scripts > browse > select the file.yuekit
    • Then try giving the JSON file it generates to an AI along with a mockup of the design. It should be better than trying to code off the mockup alone.yuekit
    • pretty good system! I would have killed for something like this before I discovered Figma... you should save this into the 'useful thread' as well!exador1
    • Did you 'vibe code' this? And, if so, are you generally not a programming spastic?
      That sounds bad! Just trying to work out how deep the AI goes here x      Nairn
    • lol...not only that, the AI suggested this idea in the first place. But I do know how to program and have a lot of knowledge of front end/UI dev.yuekit
    • And this script is not something that's going to mess up your Photoshop files if that's what you were asking. It's using this capability that has existed for ayuekit
    • long time
      https://developer.ad…      yuekit
    • It's just some JavaScript code that collects metadata from your file, it doesn't change anything. I suspect if you search you'll find many similar scripts.yuekit
    • yep! awhile back I'd supplied a screenshot and asked chatGPT(!) to give HTML and tailwind CSS and the result was useable. crazy what can be done now.Squiddy
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread