[{"data":1,"prerenderedAt":54},["ShallowReactive",2],{"writing-ai-native-ui-artifact":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-native-ui-artifact.md","Ai Native Ui Artifact",{"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-native-ui-artifact.webp",1400,788,"A design card, a code block and a glowing frame linked by streams of pixels, from design artifact to code.","Summary of Jinson Johny's Bootcamp essay on why today's AI design tools disagree on the UI artifact (HTML, images, design files) and how .gui explores an AI-native one.","md",[22],{"src":23,"width":16,"height":24,"caption":25},"\u002Fimages\u002Fwriting\u002Ffigures\u002Fai-native-ui-artifact-5.webp",787,".gui: a new open UI artifact designed as a bridge between visual design, AI systems and implementation code.","In this Bootcamp essay, Jinson Johny argues that every AI design workflow is built around an artifact, and that today's tools don't agree on what it should be. HTML, images and design files each solve a different problem and none was created with AI collaboration in mind, so he asks whether an AI-native UI artifact is still missing and introduces .gui as his exploration.",{},true,"\u002Fwriting\u002Fai-native-ui-artifact",5,[32,35],{"label":33,"href":34},".gui: the open file format this essay introduces","\u002Fproducts\u002Fdotgui",{"label":36,"href":37},"AI is changing how we ideate, design, and build UIs · HackerNoon","\u002Fwriting\u002Fai-changing-ui-design",{"description":19},"writing\u002Fai-native-ui-artifact",[41,44,47,50],{"lead":42,"text":43},"HTML won by default","AI tools converged on HTML because its explicit structure makes iterative edits cheap, not because it was designed for AI.",{"lead":45,"text":46},"Code ties design down","Moving a React interface to SwiftUI, Flutter or Android is translating between implementation technologies rather than editing a design.",{"lead":48,"text":49},"Images lack structure","Image models are powerful for early ideation, but a screenshot shows what an interface looks like, not how it is structured.",{"lead":51,"text":52},"Design files are editor-bound","Figma files hold rich structure, but they carry editor-specific concepts and proprietary data structures.","_2_Y8Bu3TaG0IuigPVy9Vo7QH9fMd74epJaLBjvTkog",1793655448746]