Promptframes: Evolving the Wireframe for the Age of AI

A promptframe is a design deliverable that documents content goals and requirements for generative-AI prompts based on a wireframe’s layout and functionality.

Benefits of Using Promptframes

Wireframes can sometimes create problems for UX designers:

• Reduced ideation. When designers rush ahead to make prototypes with high visual and interactive fidelity, they may spend less time exploring content. Most ideas are poor, and it's usually through evaluating many ideas (or combining several mediocre) that good designs emerge.
• Obscured requirements. Allowing placeholders to linger within designs can hurt the UX designer in the long run. Unknown requirements or technical constraints that the UX designer discovers too late may result in infeasible or misaligned designs that cannot be easily corrected in due time.
• Diminished feedback. Designs with poor content fidelity are too abstract for users to understand. For example, a data-intensive app with nonsensical charts and tables will be incomprehensible to a data-analyst accustomed to evaluating realistic data. Users may ignore these areas or ask questions about them in testing, consuming precious session time on what you (mistakenly) felt were unimportant details.

Promptframes address these issues in several ways:

• Efficient ideation. One of the superpowers of generative AI is providing multiple variations of an idea with minimal effort. Promptframes integrate this idea engine into the UX design workflow.
• Improved content fidelity. Specific, focused AI prompts can result in helpful content that, while not necessarily ideal for release, may be good enough for user testing and gathering feedback.
• Faster iteration. Writing prompts may initially require some upfront effort, but that effort is repaid with the ease of incorporating insights from testing and feedback. Content can be pivoted and improved rapidly by sharing those details in subsequent prompts.
• Better collaboration. Visuals are a great help when collaborating, as they build common ground with your team. Yet squiggly lines and lorem ipsum are often too abstract for nondesigners. AI-generated content, as well as the prompts generating it, can stimulate dialog and feedback from colleagues and may surface obscure requirements earlier in the design process.
• Greater focus on objectives. Promptframes ask UX designers to go beyond interface components and describe business and user goals. If the UX designer struggles to explain these goals to a generative AI tool, it calls into question the content's purpose.

1. Establish Context and Describe Users

Documenting and sharing context with the generative AI will improve its ability to assist with content creation. ChatGPT is particularly well suited for promptframes due to its support for various output types.

Consider including these important high-level details in your prompts.

Category

Details

Example

Role

The role(s) that the generative AI will play (e.g., content strategist, graphic designer, video producer, data analyst), and the type of content it must create

As an expert Content Strategist, you will generate engaging website copy…

Organization

The organization's mission and how it serves its customers and clients

You work for Blue Apron, a company aiming to make tasty home cooking accessible to everyone…

Objectives

The crossfunctional goals of the experience and what success looks like for the project (e.g., persuading visitors to sign up for a service, successfully scheduling a sales consultation, completing a workflow quickly and confidently)

In general, Blue Apron wants user experiences that increase meal kit subscription sign-up rates, improve customer retention and satisfaction, and streamline the meal selection and checkout process…

Tone of voice

The tone of voice that should be used in all generated copy to align with the brand (reuse any tone of voice documentation from marketing or design-system resources if they exist.)

Your copy should inspire confidence in the kitchen, emphasizing simplicity, nutrition, and culinary delight…

Definitions

A glossary of unique terms your organization uses, including its products and services or competitors' names

Mealkit: a collection of pre-measured ingredients with recipes shipped to the customer’s home…

Visual principles

Documented stylistic guidance for any visual assets (e.g., a design system like Shopify Polaris design system to describe desirable illustrations' color, shape, lines, and other aspects)

Visuals should use vibrant colors that reflect fresh and healthy ingredients…

Variations

The number of divergent variations for all AI output (you will usually want 3–5 variations) (Variations are a crucial advantage of using generative AI, regardless of the generated content, but some AI tools may generate only few, if any, variations to manage their operating costs.)

For each request, you must generate 2-3 divergent variations of outputs, whether textual, visual, or data-driven…

Generative AI also needs user insights to be effective. Share written content from high-quality personas or archetypes that mention user needs, behaviors, goals, pain points, as well as motivations for the product, service, or feature being designed.

2. Write and Document Prompts

With the context and users established with our AI tool, the next step is to document prompts that will direct the AI in content creation. Start by writing down the purpose of the various areas and elements in your design that will contain content.

Always include these details in your prompts:

• Objectives: Why is this piece of content present in the design? How does it benefit the business and the users? User stories and other requirements from a product-manager colleague can be an excellent reference here.
• Desired outcomes: What do you hope users will do or think because of this content?
• Examples: If available, include examples that could serve as inspiration when generating the content.

Here are additional aspects to consider for specific types of content:

Copy

• Message: What core message are you trying to convey in this copy? What facts and details must be included?
• Container: Where will the copy be seen (landing page, call-to-action button, error message, etc.)?
• Constraints: Are there word-count limits or other limitations required by the container?
• Tone of voice (conditional): Should the default tone of voice be adjusted for this copy? For example, softening a typically humorous tone of voice for an error message likely to disappoint the user.

Images

• Subject: Who or what elements should be depicted in the image?
• Actions: Are any actions happening with the subjects in the image?
• Background: Is the background relevant, or should it be plain for easy removal?
• Dimensions: What size should the image be to fit the interface? For example, if real images will be coming from another system, then this would be an excellent opportunity to start asking colleagues about expected dimensions of those real images and documenting that constraint in the prompt.
• Style: How should the image be presented? What illustrative techniques are being used, or should it be a photo?

Some generative AI systems are capable of photorealistic content, but some vendors prohibit its creation as a precaution against abuse and misinformation. Don't waste time trying to work around these prohibitions if your current AI tool won't comply. You may need to use a different AI tool or settle for less than true-to-life images.

Data Visualizations

• Type: Describe the specific visualization desired, such as a bar chart, line chart, or table.
• Data and outliers: Provide a spreadsheet of data or request AI to create synthetic data to illustrate a desirable visualization. For example, instead of handcrafting data, just describe that a specific product line should trend downward over time on a line chart if a downward trend would support a task in future usability testing.
• Columns and totals: Where applicable, describe table-column labels, desired totals, and reasonable upper and lower values. Again, consider what might be helpful to represent in future usability-testing tasks.
• Sorting: For tables, describe any default sorting of the data.
• Axes: Describe the components of chart axes, such as minimum and maximum values, data type, and label formatting.
• Style: Provide a color palette for charting elements, if relevant.
• Background: Describe the background fill and any usage of reference lines.
• Legend: Describe the content and placement of a legend, if relevant and desired.
• Labels: Consider data labels for specific data points or the label of the overall chart.
• Dimensions: For charts, describe what size and image format should be used.

3. Run Prompts in AI Tool and Populate Your Designs with Content

Copy and paste the prompts into your AI tool. Then integrate the generated content in the wireframe to start evolving it into a prototype. To keep your work organized, document links to separate AI-tool chats in the promptframe, as you will likely revisit them in future revisions.

When performing this step:

• Guard against perfectionism. Don’t be tempted to create production-ready content. You can inadvertently waste a lot of time trying to refine the AI tool’s output to be “just right” for only marginal improvements.
• Chunk your prompts. AI tools have token limits for prompts and the AI tool’s input and resulting output. For ChatGPT, that limit currently translates to about 2,000-2,500 words. You still need detailed prompts to be successful, though, so break very long prompts into chunks and run them separately so the AI tool can still provide a detailed response.

4. Refine Through Collaboration and Testing

As you conduct design critiques with your collaborators, review the AI-generated content or the prompts that were used. Parts may be added, revised, or dropped — which is normal — but you should always be progressing towards greater content fidelity in all aspects of the design.

Think of the AI-generated content as a provocation for your colleagues — is this content aligned with our project and user's goals? Why or why not? Capture that feedback by revising the prompts. If there's considerable disagreement, consider splitting the design into 2 prototypes for testing.

Remember, promptframing aims to quickly construct a testable design with meaningful content. Consider the tasks you want participants to perform with the proposed design and use them to influence your prompt writing and content-creation strategy.

5. Iterate Quickly

Following this process should buy you more time, and skilled UX professionals know to reinvest those time-dividends into iteration. Revise your prompts with your research insights and regenerate new content for future testing. Weaker parts should be scrapped or have their prompt revised before rerunning it in the generative AI tool.

6. Craft Quality Content

Once you have finished iteration, give your successful prototype the "human white-glove treatment" and elevate it with more content, visual, or interactive fidelity. Human effort will still be required to create the final design! However, you should have received a higher volume of richer feedback covering more design ideas, resulting in an overall more effective design. You can even share your prompts with other human collaborators to give them additional context on the prototype.

The Potential of Promptframes

UX-design tools are currently exploring generative AI. Some vendors make bold claims, but their practical utility to UX professionals is not so bold (see our review of the current state of AI tools for UX design.) These tools may someday output robust experiences with basic prompting, but what's likely to happen currently is a mishmash of incoherent material derived from commonplace design patterns needing an excessive amount of rework to be useful. Whether machine or human — garbage in is garbage out.

Promptframes acknowledge that current generative-AI technology can be practical and helpful in the UX-design workflow. But they nudge us to chunk content challenges into well-documented pieces and don't excuse us from thinking and deciding what is needed and why from a user perspective. Instead, they accelerate our ability to check our assumptions with content that users can meaningfully evaluate and give us feedback on.

Perhaps future UX-design tools will offer better support for documenting prompt inputs and their associated generated outputs to help designers create and refine promptframes efficiently within their project's context. Passing a designer’s prompt via an API call to a generative AI platform is simply not enough.

A Few Precautions to Consider

No single UX deliverable can do it all. There are a few precautions to consider specifically with promptframes.

Not for Executive Consumption

Promptframes, like their wireframe cousins, are not suitable for reviews with executives. People cognitively distant from a project typically need high visual and content fidelity to understand design deliverables. At a minimum, promptframes can convey some forward progress (you've been hard at work making something for this project) but don't expect early-stage promptframes to be particularly helpful in a design review with stakeholders deciding the project's direction or future investment.

Content Will Require Revision

Depending on the details provided in the prompts and the generative AI's robustness, the resulting AI-generated content will vary wildly in quality. Images may be inconsistently styled, and copy will undoubtedly need editing. Remember, the goal is not pixel-perfect, launch-ready content but to have sensible content faster so colleagues or testing participants might reasonably understand and share insightful feedback.

Respect Organizational AI Policies

Some organizations regulate the use of generative AI tools to protect their data. Be aware of and adhere to these before using promptframes.

A Good Tactic for the 1-Person UX Team

Many UX professionals are a 1-person UX team or work in environments with low UX maturity, with few resources or specialized collaborators. These folks benefit from augmenting their workflow to accommodate an AI content assistant, particularly if writing or graphic design are not strong skills.

However, what if you can collaborate with a content strategist or UX writer? That’s wonderful! Think of promptframes as a collaborative deliverable with these roles, which are (unfortunately) often included very late in the design process. Use the same general workflow described above to get their feedback and suggestions into the design early so their contributions can be tested along with yours.

Conclusion

Promptframes combine our thinking of content containers with a greater emphasis on the content itself in a way that enables generative AI to accelerate our workflow for user testing and feedback. Lorem ipsum as a placeholder practice is as dead as Latin is as a spoken language. Leave Cicero to the philosophers and use promptframes to rapidly create content your users can understand.