{"title":"AI System","description":"\u003cp\u003e\u003cspan\u003eA growing suite of tools built for designers who use AI. Plain files, systems you own, no subscriptions.\u003c\/span\u003e\u003c\/p\u003e","products":[{"product_id":"wireframes-for-figma","title":"Wireframes","description":"\u003cp\u003eEverything you need to quickly wireframe in Figma at the right fidelity: Not lines and shapes, not finished design.\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eOver 300 responsive auto-layout wireframe components and elements.\u003cbr\u003e\n\u003c\/li\u003e\n\u003cli\u003eWireframe Builder plugin: Search components, drag and drop, and generate wireframes instantly.\u003cbr\u003e\n\u003c\/li\u003e\n\u003cli\u003eFigma design system of text and color styles to easily redesign your wireframes.\u003c\/li\u003e\n\u003cli\u003eWireframe examples as a starting point.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003eDesign by hand, use the plugin, or combine with the \u003ca href=\"\/products\/ai-html-wireframes\" title=\"ai wireframes\"\u003eAI Wireframe System\u003c\/a\u003e and \u003ca href=\"\/products\/wireframe-deck\" title=\"wireframe deck\"\u003eWireframe Deck\u003c\/a\u003e.\u003c\/p\u003e\n\u003ch3\u003e\n\u003cstrong\u003eWhat you get\u003c\/strong\u003e\u003cspan class=\"font-semibold\" data-streamdown=\"strong\"\u003e\u003cstrong\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h3\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan class=\"font-semibold\" data-streamdown=\"strong\"\u003eFigma library\u003cbr\u003e\u003c\/span\u003e\u003c\/strong\u003eA huge library of auto-layout, wireframe-fidelity components across 10 categories. Easily redesign: Built from smaller shared components and a shared system of Figma color and text styles.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eFigma plugin\u003cbr\u003e\u003c\/strong\u003eThe included custom plugin lets you build wireframes by searching the component library, with a drag n drop multi-column interface. Click \"Build Wireframe\" and the plugin instantly generates the full Figma wireframe. \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eWireframe Deck + AI System compatible\u003cbr\u003e\u003c\/strong\u003eGo from a photo of a \u003ca href=\"https:\/\/uxkits.com\/products\/wireframe-deck\" title=\"wireframe deck\"\u003eWireframe Deck\u003c\/a\u003e card layout to an AI chat to a wireframe in Figma in a few clicks. Add the \u003ca href=\"\/products\/ai-html-wireframes\" title=\"ai wireframes\"\u003eAI Wireframe System\u003c\/a\u003e to generate matching HTML wireframes from prompts, all matching the same design system.\u003c\/p\u003e","brand":"Automated Figma Wireframe Builder","offers":[{"title":"Default Title","offer_id":48714940776704,"sku":"figma-wireframe-kit-v1","price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0018\/9262\/files\/figma-wireframes-1_2320b997-b972-460c-ae9c-5b74a1e247ce.png?v=1781185056"},{"product_id":"ai-html-wireframes","title":"AI Wireframe System","description":"\u003cp\u003e\u003cmeta charset=\"UTF-8\"\u003e\u003cspan\u003eGo from a prompt or photo of your Wireframe Deck cards to browser-ready clickable HTML wireframes, in the AI tool you already use. One-time purchase, your files, no subscription. \u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eOptimized for Claude Code, or hand off to other AI tools that can generate files. \u003c\/span\u003e\u003cspan\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3\u003e\u003cstrong\u003eWhat you get\u003c\/strong\u003e\u003c\/h3\u003e\n\u003cp\u003e\u003cspan data-streamdown=\"strong\" class=\"font-semibold\"\u003e\u003cstrong\u003eHTML wireframe system\u003c\/strong\u003e\u003cbr\u003eA full CSS system\u003c\/span\u003e of components, colors, type, spacing, icons, buttons,  forms, and more all visible in a web-based version you can view and edit. Create consistent, customizable wireframes even across multiple AI sessions. Screen-share with a client or teams, or even host the wireframes on a website and send a link.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eWireframe Deck compatible\u003cbr\u003e\u003c\/strong\u003eThe magic moment. From a \u003ca title=\"wireframe deck\" href=\"https:\/\/uxkits.com\/products\/wireframe-deck\"\u003eWireframe Deck\u003c\/a\u003e photo to wireframes, sharing the same system styles. You can even draw cards on our \u003ca title=\"dot grid deck\" href=\"https:\/\/uxkits.com\/products\/dot-grid-cards-square\"\u003eDot Grid Deck\u003c\/a\u003e and AI will translate them, too.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan data-streamdown=\"strong\" class=\"font-semibold\"\u003eProject template\u003cbr\u003e\u003c\/span\u003e\u003c\/strong\u003eA template to copy for each project with a table of contents and wireframe examples.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan data-streamdown=\"strong\" class=\"font-semibold\"\u003e2 AI skills + context.md\u003cbr\u003e\u003c\/span\u003e\u003c\/strong\u003eBuild from a text prompt or a deck photo. Use the included md context file to give AI a reference from the start.\u003c\/p\u003e\n\u003cp\u003e\u003cspan data-streamdown=\"strong\" class=\"font-semibold\"\u003e\u003cstrong\u003ePrototype ready\u003cbr\u003e\u003c\/strong\u003eEasily move to a fully clickable prototype. After all, it's just HTML.\u003c\/span\u003e\u003cstrong\u003e\u003cspan data-streamdown=\"strong\" class=\"font-semibold\"\u003e\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eYour wireframes. HTML and CSS on your computer. Open it in any browser today or years from now, even if your tools change. \u003c\/span\u003e\u003c\/p\u003e","brand":"Prompt to HTML Wireframe Builder","offers":[{"title":"Default Title","offer_id":48785358291200,"sku":"ai-html-wireframes-v1","price":59.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0018\/9262\/files\/ai-wireframes-1.png?v=1781184806"}],"url":"https:\/\/uxkits.com\/collections\/ai.oembed","provider":"UX Kits","version":"1.0","type":"link"}