--- title: What Happens When You Cannot Wireframe the Interface description: "AI generates the layout. You cannot draw screens in advance when the content is unknown — so you design components, constraints, and ranges instead." canonical: https://nowah.xyz/blog/cant-wireframe-ai-interface lastModified: "2026-08-07T07:58:48.065Z" --- # What Happens When You Cannot Wireframe the Interface AI generates the layout. You cannot draw screens in advance when the content is unknown — so you design components, constraints, and ranges instead. The designer opens a new file. Blank canvas. They are about to wireframe the main screen of the app. Except the main screen is a [chat interface](/blog/adapting-chat-interface-mobile-desktop), and the content is generated by an AI that has over 70 distinct tools producing different response types. The layout depends on what the user says, what the AI does, and in what order things happen. The wireframe stays blank. Because you cannot wireframe a conversation. This is not a minor process inconvenience. It is a fundamental shift in how design works for AI-[first products](/blog/accessibility-ai-first-products). The tools and methods that have served interface design for decades — screen flows, wireframes, pixel-perfect mockups — break down when the AI generates the layout. ## Why screen-level wireframes break ![Illustration for this section](https://pics.nowah.xyz/website-media/design-007-img-1.webp) A wireframe captures the layout of a screen: where elements sit, how they relate to each other, what the user sees at a given moment. This works when the content is predictable. A settings screen has a known list of toggles. A profile page has a known set of fields. A search results page has a known structure of cards. A chat screen has none of these guarantees. The AI might respond with a five-word sentence. Or a five-paragraph explanation. Or three flight cards in a carousel. Or a single hotel card. Or a status message that says "Searching flights..." followed by cards that appear three seconds later. Or an [error recovery](/blog/error-recovery-agentic-systems) message followed by alternative suggestions. The minimum message might be five words. The maximum might be 500 words with embedded cards. The range is enormous, and a wireframe can only show one state. To wireframe every possible state of a chat screen, you would need hundreds of wireframes — which defeats the purpose of wireframing as a tool for efficient exploration. ## Component-first design The solution is to shift the unit of design from the screen to the component. Instead of wireframing "the chat screen," you design the individual building blocks: message bubbles, flight cards, hotel cards, status pills, action buttons, input bars, review modals, confirmation screens. Each component is designed as an independent unit with its own internal layout, its own content rules, and its own states. A flight card always shows the same six data points: airline, times, duration, stops, price, and cabin class. It does not matter whether the card appears after a long text message, after another set of cards, or as the first thing in a new conversation. The card looks and works the same in every context. This is the deck-of-cards approach to design. Each card (component) is self-contained and complete. The AI deals the cards in whatever order the conversation requires. The designer's job is to make sure each card is well-designed in isolation and that any combination of cards looks good together. ## Designing for ranges ![Supporting diagram](https://pics.nowah.xyz/website-media/design-007-img-2.webp) Every component has a content range. A [message bubble](/blog/ai-message-bubble-is-canvas) might contain 5 words or 500. A card carousel might show 1 card or 5. A tool-use status pill might appear once or three times in sequence during a complex search. Range-based design replaces pixel-perfect mockups with specification ranges. For a message bubble: minimum height at 5 words, comfortable reading layout at 50 words, "show more" truncation at 200 words. For a card carousel: single-card layout with no scrolling, three-card layout with standard swipe, and a maximum of five cards before the view-through rate drops too far. The designer specifies the minimum, the comfortable middle, and the maximum for each dimension of each component. The implementation then handles any content within that range gracefully. Content that exceeds the maximum triggers a defined behavior: truncation with a "show more" button, pagination, or a summary with a link to full details. This is more work than designing a single layout. But it produces components that actually survive contact with generative AI output, rather than breaking the first time the AI produces something the wireframe did not anticipate. ## Stress-testing with edge cases If range-based design is the method, edge-case testing is the verification. Every component is tested against five states: Empty. What does the component look like with no content? A message bubble with no text (should never happen, but what if it does?). A card carousel with no cards (the search returned nothing — what does the user see?). Minimum. The smallest reasonable content. A five-word response. A single card. A status pill with a short label. Comfortable. The expected typical case. A two-to-three sentence response. Three cards. A status pill followed by a brief delay then results. Maximum. The largest reasonable content. A detailed multi-paragraph response. Five cards in a carousel. Three sequential tool-use pills as the AI searches flights, checks hotels, and looks up weather simultaneously. Error. Something failed. The message could not load. A card has missing data (no airline logo, no price). The stream was interrupted mid-sentence. Any component that looks broken in any of these five states needs a redesign. The AI will, eventually, produce content that hits every edge case. Designing only for the comfortable middle is designing for failure. ## Conversation scripting as the new wireframing Since you cannot wireframe screens, you script conversations. A conversation script is a sequence of user inputs and AI responses that represents a realistic interaction flow. It includes the text content of each message, the tools the AI calls, the cards and interactive elements that appear, and the user's actions (tapping a card, sending a follow-up, completing a booking). A conversation script is not a wireframe, but it serves the same purpose: it makes the interaction concrete enough to evaluate. You can read through a script and identify problems — where the AI provides too much or too little information, where the user might be confused, where the transition between conversation and transaction feels abrupt. We write conversation scripts before designing new components. The script reveals what the component needs to show, how it will be introduced (embedded in a message? appearing after a delay?), and what actions it needs to support. Then the component is designed to fulfill the script's requirements while remaining context-independent enough to work in other scripts. ## A practical template for AI component specs When specifying a component for an AI-first interface, we document seven things: Purpose — what this component communicates and what action it enables. Content specification — the data fields, their types, which are required versus optional, and the content ranges for each. Layout rules — sizing constraints, spacing, how the component docks into the chat flow. States — default, loading, error, empty, minimum content, maximum content. Interactions — what the user can do with this component and [what happens](/blog/what-happens-after-you-book) when they do. Transitions — how the component enters and exits the view, with timing and curve specifications. Accessibility — screen reader labels, focus order, touch target sizes. This is more documentation than a traditional wireframe requires. But the additional specificity is necessary because the component will appear in contexts the designer has not specifically designed for. The spec must be complete enough for the component to behave correctly in any conversation, not just the conversations the designer imagined. The blank canvas is not a problem. It is the correct starting point for AI-[first design](/blog/mobile-first-ai-design). You do not draw the screen. You build the pieces that the AI will assemble into a screen that changes with every conversation. --- Nowah is an AI travel agent that searches and books real flights and hotels through conversation — no filters, no thirty open tabs. [Plan your next trip](https://app.nowah.xyz).