[{"data":1,"prerenderedAt":54},["ShallowReactive",2],{"writing-ai-changing-ui-design":3},{"id":4,"title":5,"body":6,"cover":14,"description":19,"extension":20,"figures":21,"inShort":26,"meta":27,"navigation":28,"path":29,"readMinutes":30,"related":31,"seo":38,"stem":39,"takeaways":40,"__hash__":53},"writing\u002Fwriting\u002Fai-changing-ui-design.md","Ai Changing Ui Design",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":12,"links":13},"",2,0,[],{"src":15,"width":16,"height":17,"alt":18},"\u002Fimages\u002Fwriting\u002Fai-changing-ui-design.webp",1400,787,"A dark canvas of faint interface wireframes with a single “Design an interface” button in the middle.","Summary of Jinson Johny's HackerNoon article on how AI is changing the way interfaces are ideated, designed and built, and what a portable UI artifact needs.","md",[22],{"src":23,"width":16,"height":24,"caption":25},"\u002Fimages\u002Fwriting\u002Ffigures\u002Fai-changing-ui-design-1.webp",788,"The UI design ecosystem has shifted from a relatively stable set of specialized tools to a rapidly growing landscape of AI-powered workflows.","The long-standing workflow, where designers make mockups and developers turn them into code, is shifting now that AI takes part in creating interfaces. Rather than asking which tool will win, Jinson Johny argues the better question is what properties a UI design artifact needs, and describes .gui as one experiment in a portable UI representation that humans, AI and renderers can all read.",{},true,"\u002Fwriting\u002Fai-changing-ui-design",null,[32,35],{"label":33,"href":34},".gui: the open file format this article leads to","\u002Fproducts\u002Fdotgui",{"label":36,"href":37},"We're still figuring out what an AI-native UI artifact looks like · Bootcamp","\u002Fwriting\u002Fai-native-ui-artifact",{"description":19},"writing\u002Fai-changing-ui-design",[41,44,47,50],{"lead":42,"text":43},"Image-first","tools are fast for exploring ideas but hard to edit precisely, iterate on or reuse.",{"lead":45,"text":46},"Code-first","tools give working prototypes, but tie the design to a specific platform and technology stack.",{"lead":48,"text":49},"AI inside design tools","keeps rich, familiar editing, but the work stays tied to proprietary ecosystems.",{"lead":51,"text":52},"Connected workflows","reduce friction between tools, but the underlying artifact usually stays the same.","kRZheZpiyVRGmrXm_Y2GdsqjB389-uFN98zXm0LnYQ8",1793655448895]