Zeroheight-Design Systems in The Age of AI
Zeroheight-Design Systems in The Age of AI
Zeroheight-Design Systems in The Age of AI
in the Age of AI
Navigating the
hype and putting it
into practice
Table of
contents
The current state of artificial intelligence 03
The future of AI 43
This guide is brought to you by
loves!
zeroheight.com
January 2024
02
The current
state of
artificial
intelligence
I think we can safely say we are in a hype stage for
AI. It seems you can’t swing a stick without hitting
something that claims to be AI powered, pulls data
from large language models (LLMs), or generates
a picture of you and your cat from a ten-second
snippet of your voice. Even zeroheight is diving into
the world of AI with some upcoming releases. But
is AI worth the hype?
04
and put it to work. Since then, we’ve gone from 117
out there.
Beyond ChatGPT
Until recently, ChatGPT was entirely text-based (as
of October 2023, they’ve recently launched multi-
modal to their pro offering). However, generative AI
(GenAI) can do more than text. First, you have your
image models, including DALL-E 2, Stable
Diffusion, Adobe Firefly and Midjourney. These take
prompts, both text and image-based, and use the
corpus of data that it has to create unique images
(how unique is another question…). When it comes
to UI design, none of the tools are quite there
(although UIzard is looking interesting). However,
image-based GenAI tools are fairly powerful when
it comes to creating illustrations or photography,
especially as you improve your prompt
engineering skills. Even more powerful is using
them to generate ideas or create better
placeholder content, which a designer or illustrator
can pick up and run with as a jumping-off point.
06
One of the big failings of ChatGPT, until recently, was
that it didn’t have access to the live internet, because
it was trained on a set corpus of text that only went
up until 2021. While OpenAI has just announced a
beta of their Bing plugin, which gives access to live
pages, it’s still a little unpredictable. Google Bard is
one example of another LLM that has access to the
live internet, and with the heft of Google behind it, is
already snapping at ChatGPT’s heels.
07
ChatGPT. However, there are some big caveats and
limitations to this approach. First, GPT-4 only has a
working memory of about 64,000 words (about 50
concerns.
08
How can we
use AI today?
So, how can we
systems?
your team!
10
Prompt
engineering for
design systems
Most of this section will reference ChatGPT.
12
Step one
Set the context
Context is really important for ChatGPT.
Because the corpus of text that it’s trained on
is so large, and because people use it for all
kinds of tasks, it can sometimes get confused
with what you’re asking and hallucinate
strange things. To avoid this as much as
possible, it’s always best to start with context.
Identify a role or
persona
To avoid having to give context with every
prompt, we kick off a conversation with
ChatGPT to establish what mode we want it to
operate in, who the audience is and any
ground rules. To start, we give it an idea of
who to write as. Starting a prompt with "Act
as..." can be effective, especially when you're
looking to set a specific role or perspective for
the AI. This approach is particularly useful in
scenarios where you need the AI to adopt a
certain persona or expertise, like a character in
a story, a professional in a specific field, or
even mimicking a certain style of
communication.
14
Set the target
audience
Next, we need to set the target audience.
Letting the AI know who the target audience is
means that it can use specific language the
audience understands. However, it’s important
to think of who your target audience is and not
just anyone who might read the
documentation, so ChatGPT can provide a
focused response. In this case, something like:
15
Include your
specific request
Finally, if you’re asking it to do very specific
things, it’s also worth telling it the task you
expect it to do. For example, if you’re trying to
get usable documentation for specific
components, you could say, “I will ask you to
create design system documentation pages
for components in my design system. For each
prompt, the output should be a page that
documents that component.” However, if you
are using it for little bits of information to go
within a page or asking it to do different styles
of tasks, it’s best to leave this out.
Prompt
Act as a design system documentation
writer. Target audience: designers,
developers, and content designers at
various experience levels, from new
hires to seasoned professionals. Style:
professional, casual, concise, plain
language. Format: prioritize bulleted
lists over paragraphs.
16
Alternatively, you can use ChatGPT’s custom
The Custom instructions window in ChatGPT, where you can provide details
17
Step two
Write your prompt
Prompting requires practice and tweaking. It’s
very rare that you write a prompt and get
exactly what you want first try. However,
understanding how to prompt and some of the
types of prompts can really help.
Zero-shot prompting
Prompt
19
One-shot prompting
Prompt
Give me a name for my design system.
20
Few-shot prompting
Prompt
are:
- Carbon
- Polaris
- Material
21
Providing feedback
response.
Prompt
some meaning.
22
Similarly, you can ask the LLM to be self-
could be:
Prompt
whole conversation.
23
Use variables
Prompt
Provide lists of three key do's and
usability.
top nav
24
Using variables is a great way to have repetitive
25
Creating custom GPTs
powerful.
accessible.
26
How to use what
ChatGPT creates
Once you start to experiment, you can easily
have a whole bunch of AI-created content to
use with your design system documentation.
Or do you? One important note here is to
always check what ChatGPT outputs. This is
because LLMs aren’t always 100% accurate
and can come up with some wildly inaccurate
facts — and sound confident about it, too. In
the AI world, this is called “hallucinating,” and
while these models are trained consistently to
reduce the number of times this happens, it
does happen.
27
The design
system
prompt
cheatsheet
Beyond generating copy, LLMs can do quite a
bit to boost your design system. For example,
it can generate color values, test for
accessibility, and write specific details. If
you’re looking for inspiration or a starting
point, here are several prompts that we tried
and tested with design systems in mind.
- [color 1]
- [color 2]
- [color 3, etc.]
29
Testing the accessibility
of color combinations
with the color ramp
Prompt
On the following colors, test the
accessibility of [white hexcode] and
[black hexcode] text on backgrounds
of each of those shades or tints, and
tell me whether they're level A, AA or
AAA WCAG 2.2 compliant on color
contrast.
- [color 1]
- [color 2]
- [color 3, etc.]
30
Generating token
names from a set
of variables
Prompt
Please list all the combinations I can
Theme.Component.Type.Size.State.Color
Components: Button
Rules:
the rules.
31
Providing a template
for a component
documentation page
Prompt
Create a template for a page
documenting a single component
within a design system based on best
practices, and following the style of
Carbon, Gov.uk and Polaris. Delineate
with headings. Use real-world
examples for the sample content
based on a call-to-action button
component.
32
Writing best practice
Prompt
[Attach image]
Writing accessibility
audits for
components
Prompt
[Attach file]
33
Creating code from
screenshots
Prompt
[Attach file]
34
Writing microcopy
Prompt
Consider a [component name] component.
35
Naming a component
Prompt
[attach screenshot]
Prompt
What is a better name for a design
system component: [name 1] or [name 2]?
36
Rewriting
documentation in
the correct style
Prompt
Rewrite the following documentation:
[insert paragraph]
- Informal language
free of jargon
37
Other ways to
use AI within
design
systems
It’s not just ChatGPT...
It feels like the majority of the conversation around
AI has been centred on ChatGPT. However, there
are loads of case-specific tools out there that can
help you, or even other ways of using
conversational LLMs like ChatGPT to achieve what
you need. Over the next few pages, you’ll find a
few other use cases for AI, and some other tools
that could help you in your day-to-day work.
As your decision
buddy and
sounding board
One of the ways I’ve seen a lot of people use
ChatGPT and similar conversational LLMs is to use
them as a sounding board for validating ideas and
rewording arguments. Because of the nature of
most of these models, they have a fair amount of
knowledge when it comes to most areas of your
job, as long as someone on the internet has written
something about it. Explaining a situation, giving
the LLM context, and then asking for advice on
pros and cons, how to make the argument more
convincing to your audience, or asking it to foresee
any risks can flag some things you hadn’t thought
of, or even confirm some thoughts you already
had.
39
Helping you code
There are a number of tools out there to help you
get the job done quicker when it comes to coding.
Here are a few:
Writing code
Running tests
40
Writing documentation
41
Helping you design
As mentioned in the intro, we’re not quite at
the point where UX and UI designers should
be worried about their job. Instead, there are
some neat little tools that can help you make
your process a bit quicker. One huge time-
saver is Figma Autoname, which auto-
generates layer names in your Figma file.
Another simple tool is Fontjoy, which uses
machine learning to create visually pleasing
font pairings, with some simple controls to
provide some input. Similarly, Khroma is a nice
color suggestion tool based on things you like,
what’s popular and what works from a color
theory point of view.
Figma Autoname uses an LLM to analyze and understand what your layer is
and then offer an appropriate name
42
The future
of AI
What comes after
the hype?
As mentioned in the first chapter, we are
definitely in a hype cycle for generative AI. In
fact, Gartner recently placed generative AI on
the peak of inflated expectations, with
assumptions that it will reach broader
transformational benefit within the next two to
five years. We are in the over-saturation
moment. When generative AI burst onto the
scene in 2020, it felt new, and to be honest, a
little bit scary. We had deep fakes of world
leaders speaking out Beyonce lyrics, and we
were being told that there was a good chance
that AI would take our jobs. Move forward
three years, and we’re still riding that wave,
although now we’re also starting to see the
benefits. There are almost 60,000 AI
companies out there, with the number
doubling in the last three years, and a lot of
them are already showing great use cases for
AI. At the same time, you still have to sort the
wheat from the chaff. For every genuinely
useful service, there are three half-baked
attempts at applying AI to unneeded
problems, for the result to be a bit of a damp
squib.
44
Hype Cycle of Artificial Intelligence, 2023, Gartner
45
we are here
46
The ethical and legal
issues with LLMs
The rise of generative AI brings huge potential
for most companies, especially when it comes
to streamlining tasks and processes. Yet, as
these models find their way into our day-to-
day, they stir ethical debates about bias,
privacy, and the changing nature of work. It’s
up to us to care about this, especially when
we’re dealing with a tech industry that moves
at lightning speed and legislative powers that
move at a much slower, considered pace.
47
Within compliance, LLMs present both
opportunities and challenges. They offer to
streamline compliance processes and
enhance surveillance capabilities, but they
also introduce concerns over transparency
and the need for human oversight.
Compliance officers must navigate a rapidly
evolving regulatory landscape, ensuring that
the use of LLMs aligns with both ethical AI
guidelines and existing laws such as data
protection and copyright regulations.
Request a demo
49