AI, UI content design, and design systems

thumbnail for Brad Frost's YOuTube video Reading Time: 6 minutes

The take away

Artificial intelligence (AI) helps us work faster. Content design systems keep AI output accessible, clear, and consistent. Together, AI tools and content design systems can help create high quality user interfaces.

Design thinking on AI content standards

Brad Frost’s opening lesson in his AI & Design Systems course relates to my recent design thinking around UI content systems. His thesis is that AI brings speed and generative superpowers, while a design system’s standards steer its output toward meeting an organisation’s goals. For me, this standards layer is content and not only copy. There’s more to content than words alone.

AI speeds up the work, and a content design system keeps what it produces consistent, accessible and governed alongside the UI. That’s Brad’s one-two punch, applied to the whole of UI content.

Find and play Brad’s video located at the bottom of this post.

Looking after people

I want to echo something from Brad’s lesson as a design principle for adoption. He says this AI tooling moment is a hard one, and people may feel overwhelmed by the pace of change and quantity of learning. We should be kind to ourselves and to others and introduce the tool in ways that respect people’s caution, show where it helps, and keep human judgement central. (11:00 min into the video).

Overcoming AI slop with standards

Objections to AI content often distil to “slop”: unmoderated generative output published as it came. I share that concern, which is why I give the AI tools access to guardrails, standards, and design decisions to improve draft output quality. Then our agents and product designers can populate the UI with content themselves, leaving the increasingly scarce content designers to focus on reviewing rather than authoring UI content.

The safeguard is keeping a content designer on hand to moderate what ships. I hope that framing helps sceptics try it and design departments plan for it early in process.

Brad explains that LLMs are non-deterministic. They work by making guesses that result in inconsistent output between sessions while delivering with certainty (7:30 min into the video). Their prediction machine workflow compromises the consistency and quality of their output, which matters to how accessibility, branding, and the UI communicate the experience (9:20 min into the video).

He adds that LLMs are eager to please. I’ve lived this as I describe in my blog post, AI’s recanted view, when a tool reversed its own wording the moment I challenged it.

Content is more than words

Writers acting as wordsmiths are not all content designers. Content is more than words (the copy): it’s anything that conveys information and instruction to our user. It includes visual and non-visual presentations that communicate with, guide, and support users through flows.

When your design system only governs visual consistency and default copy, then the content standard stops with the text fixed within it. For example, a button label copy is only a part of its content conveyed by its position in the flow, its programming as a button or link, and its visual and non-visual affordance. Directing only its maximum word count and casing style falls short of the content standards needed for an AI to generate a user-centric draft label. It needs situational context rules, strict guidance on intent and timing, and a conditional copy playbook to deliver anything remotely near quality copy.

This is why we need a content design system that works in concert with the UI design system. It’s a major priority when we want to let AI loose on designing our UI.

Documentation for colleagues and agents

As I found with Notebook LM and Glean AI content agents, a style guide that breaks its own rules teaches the AI to break them too. Our standards are documentation and they must model the standards they contain. They need documentation whether in a custom instruction or links to a full reference.

Brad claims that documentation is hard to organise for design systems. He says nobody likes to write it or read it even when it’s critical to our success (2:30 min into the video). It’s why our design mantra should be to design useful, understandable, and usable products documentation — and “errors” aren’t needed.

I believe the documentation we need in this context is that aimed at guiding content designers and agents on the research-based evidence, design thinking, and decisions that inform standards: not how to use our product. When the right content designer enjoys writing that, then we start to engage readers with an improved guidance presentation.

This content design documentation needs designing for our colleagues and agents to search, navigate, and read. That’s a problem when written by people with strong topic knowledge and insufficient training in instructional design. With the right approach, the documentation has the needed structure, format, and examples to make our guidance and standards findable, readable, and understandable in the moment and place they need it.

From document to system

As opening and reading documentation takes effort, we should work to bring it into the workflow. UI designers should find it where they work. For example, in Figma or the AI tools they use to vibe their prototypes.

Although I developed a Notebook LM content chatbot and the Glean content agent as personal experiments, my organisation is now moving toward AI in our workflow. As soon as Anthropic’s Claude arrived in our design department, we set out to create an equally effective Claude skill. Although starting from a narrow set of component-level guidance, it’s a good start. What it needs is to port across what my experiments taught me:

  • Define standards once, and confirm the priority ones in a summary.
  • Although AI prompting is moving away from structured instructions, they act like design tokens. For example, {{AGENT_ROLE}} and {{CD_STANDARDS_CASING}}.
  • Atomic-level standards. Include standards with UI components like labels, errors, and calls to action.
  • Aim to exceed accessibility standards. Focus on our user’s needs and not only compliance. Design practices will improve.
  • Organism-level examples. Describing how atomic pieces work together in forms, flows, and messages so the skill follows patterns and not only isolated atomic rules.
  • Governance. Standards need an owner, process for how they change, and how output is reviewed.

The tool may change and what matters more is where colleagues can access it, and how we transport our standards.

Glean’s advantage is to read source documentation from across the organisation and, when instructed, to search for its own sources. MD files with a universal, structured prompt pattern may offer a “future proof” transport for response guardrails between AI tools, and they don’t necessarily meet the need for documentation. If the skill sits inside an automated UI design system, it could set a gold standard for generative UI and chatbot interface controls, where content is part of the component and not pasted in afterwards.

Stopping internal content leaking out

The quality problem I uncover most is internal content leaking into external content. Internal names for features, internal information architecture, and loose writing in requirements all reach the interface unchanged, because that’s where the words first appeared.

So the agent or skill can’t live only at the design stage. It needs to reach requirements documents and Jira tickets too, where the first draft of a label or message is often written. Catching an internal name in a ticket is far cheaper than finding it on a released screen. This also addresses the silo problem Brad describes, where teams are unaware of what others are doing (5:20 min into the video).

AI output moderated with standards, not slop.

When the AI rewrites the standards

Standards only steer AI output if the AI leaves the standards alone.

When I asked Claude to convert my Glean agent instructions into a skill, it rewrote the guidance to match its own training on UI content style and tone. The result read reasonably well and the content failed to reproduce all standards exactly. For example, our standards direct button label copy is Title Case. Claude over-wrote the rule with rules familiar to Material design; sentence case. That’s another organisations’ training. Without strict adherence to our instructions and moderation by skilled colleagues, the basic layer of AI training will generate “slop”, which can arrive in the product.

When a standard’s content doesn’t follow its own guidance, then internal jargon, phrasing, and poor quality copy will enter into the agent or skill responses. The standards must follow their own standards. We need governance to align when to enforce UI content standards, support content standards, and brand content standards in our agent’s source documentation.

This all means the standards layer needs the skill and care of our competent practitioners, including as follows:

  • Use the AI tools to research, compare, and argue improvements to standards and not to write them.
  • Treat all AI-assisted edits as draft. Keep the skilled content colleague in the workflow.
  • Keep one canonical source that humans own and the AI reads and can’t rewrite.
  • Test the agent or skill against known cases. For example, a UI component, UI instructions and messaging, and tickets with internal feature names in it, and check the output after every update.

The video

Skip to key moments in Brad Frost’s video using the shortcut buttons.


Leave a Reply

Your email address will not be published. Required fields are marked *