What happens when you turn design decisions over to AI?

I wanted to go over something that's been on my mind a lot.

I've seen AI generating screens from prompts and there's a lot of tools out there that help you do it.

But what I'm really interested in is what is the thinking required before designing?

Because it's not just sit down and create a screen, it never has been, but AI really enables that to be possible now.

And the other question is, can AI do the thinking for you?

Is that something that it's really leveraged and beneficial?

And then if it really can do the thinking for you, is it helpful?

Has it really furthered you down the process?

And there's a lot of details and things we can get into on design ops and I think there's an opportunity there.

But we're talking about the act of creating screens that people will use and will provide business value and will scale for engineering three kinds of value.

So this is the Pencil app.

I'm not really reviewing the app per se, but it's one that has become more popular and what it has is integrated, with any model that you're interested in.

This is Claude code I've got it hooked up to.

And this is a demo file and there's some other things in here they're demonstrating, they're prompting, But I want to show you this dashboard, create a dashboard demo.

And so we're going to have it kick this off.

We'll talk a little bit about the prompt itself in the demo, but I also wanted to mention they have a design system in this file.

So this is not an external library and maybe this app does that.

I'm not sure.

Not too familiar with pencil, but I am familiar with design systems.

I'm a big FIGMA user and I've been using it since 2020 like everyone else.

And I've created all sorts of design systems for enterprise, ecosystems, very large scale design teams managing those and engineers creating the components.

So a lot involved.

This is very straightforward and simple.

There's still buttons, badges, things you'd expect.

looks like a table structure or some kind of placeholder, modals, cards, fields, things like that.

Okay, so we'll assume that those are all there the way they need to be and we'll dive into this.

So here's the prompt.

The prompt says design a dashboard in the step three frame.

So that's the one down here for rover management platform using the components in the design system.

Add a sidebar for navigation.

Very prescriptive.

Add rover stats and table with available rovers for rent in the content body.

Again, prescriptive.

And that's fine.

So the funny thing with this prompt, this is definitely a marketing prompt.

This is not very practical for an app.

You just start out and create this and now you have your app, you can do it and people are doing it.

But this is something really that a stakeholder would come to me and say, hey, I want you to work for me on this project.

and here's what it's about.

It's a rover management platform and we're going to look at available rovers and things like that.

It's like, okay, now let's have a conversation about what you want to build and how it works.

So there are a lot more that goes into it.

Let's kick this off and see what happens.

Let's open this up, and click run.

So it's reading the prompt like the feedback there.

It's kind of neat.

And pencil does an interesting thing with their AI agents.

They give them names.

So this is so soul, like the sun.

That's good.

So we'll see our AI agent come up once it processes that prompt.

And there may be fits and starts.

So I will skip ahead.

And you might think these things just show up.

but we'll let it run for a little bit here.

So there's soul.

Look at that.

It's got the frame.

Knows the frame.

Checking the guidelines.

Picked a style guide.

So that must exist.

Reading objects.

And then here's the to do so examine the key components.

Okay, good.

Set placeholder.

Can we see it examining those?

Is it examining them?

I don't know.

It's processing.

And it's looking for the key components it needs.

I look at.

There you go.

So it identified like five different things that showed up.

Now, I don't know if these components have any further documentation behind them or metadata that would help the AI agent.

No more context.

So set the place.

there we go.

Now we're designing.

Let's see what happens.

So we've got a sidebar.

Jodo Acme Corp.

Alright, so here we go.

We've got a section and buttons.

It's interesting.

All right, now it's going to focus on the page header and cards.

All right, Adding a button.

All right.

We've.

We've created cards.

Okay.

It's going to build the rover rental table.

Now.

All right, so we're building table rows.

Let's see what happens next.

So this isn't a critique really on the app or the AI agent per se.

It's more about the designer and the process of using this.

And what are the results and what's the value of these results?

Well, the prompt that we started with was very general, very generic, which means that everything that you see here is based on assumption.

There's a lot of assumption now there may be a file somewhere.

I don't know where it's structured.

I didn't see it.

It's kind of hard to know if there's any other context, reference.

But even so, even with the most detailed context, there's a lot of specific information here and design decisions made that we can't trace back.

And so just even looking at the sidebar navigation, there's assumption that we have the dashboard, which is what we're looking at.

But then fleet rentals, missions, maintenance, this demonstrates that you do have the ability to have sections.

What these sections are is going to be totally dependent on the business rules of this organization and then their business processes.

Those things are critical because that's what runs the business.

You don't have to have a lick of software to run a business.

You have to have a process all the time.

Something happens, something else happens.

And all of that caters towards the customer or the user, what they need, because you're filling a need.

So what is that?

So we don't know what that is either.

We don't know what this person using the dashboard is interfacing with the other person as the customer.

So we don't know about that.

Settings help center, those are generic as well.

We don't know the prominence of it.

the metrics are interesting.

total rovers available to rent, active rentals, revenue.

those are all good.

I really like the secondary information because it gives you a trend or delta or some other context.

It's not just static.

six, you know, total rover is 48, so six this month.

So we, we had 42 last month.

So this is a context of a month, that could probably get clarified.

This is a, third of our, two thirds of our fleet are available for renting.

And then here are the ones that are rented and there's three pending.

and then revenue, we don't know revenue plus 18% assuming the month, the available rovers to rent the table.

So as a dashboard, is this user interested in the details and what details are they interested in?

If they know this information through this dashboard, what action will they take?

Because the only reason to put anything on the screen is to prompt the user so that they know what to do, they can take action.

We always like to see things in successful mode, but we also want to know what's broken.

That's the hidden, error rate, something that we can go and fix and get things back moving.

That's always a big consideration, most apps, so it's kind of funny.

Available rovers to rent and we have a status, we would assume these are all available.

it's reserved in service.

these are good to demonstrate the design of a chip or a status badge.

That would be good, but it wouldn't be appropriate here.

It would never show up here.

And actions Rent view.

It's not a button or it's not using the same button design.

I'm not sure why, but that's it.

And there's just a button that's Good, Just have a button.

the Add Rover is interesting because this is the dashboard.

You would expect this would be a comprehensive view of all of these, so that I could dive into any one of them.

But adding a rover, if it's here, we would assume it's a very common action that anyone would need to do all the time.

So instead of having to dive into Fleet, which is probably where it would go, and then click Add Rover, we're going to put it up here.

But you have to know that, right?

And I don't know anything else.

6 of 32 Rovers, we got all of that, the total rovers.

So it missed a placeholder.

I don't know.

Some of that is just part of the nuances of what AI is.

One thing I'm noticing, I think is this badge.

sorry, this card.

And I don't see like, here's a card, it's outlined in a box.

The title is called out.

We've got the metric and then we've got that delta down below.

But this is not using that.

it's like what we see in real life when designers invent new, new elements into the design system that aren't there instead of using what's there.

And that's okay.

I think that you need to explore those things.

When you have new use cases, you absolutely should explore them, but that needs to be a conversation that you have with the design system team or owner or yourself.

You need to make sure.

Am I designing something that is necessary because it's a new use case, or do I need to extend the component that's in the design system with these new options and then be consistent in it?

Otherwise there's no sense in having a design system.

So, that's interesting.

It did all that analysis and then it came up with this.

I prefer the compactness of this.

but that's for another day.

think about this.

If you generated this screen and had to present it to a stakeholder or anyone, could you explain why every element on the screen is on the screen?

That's one of the key accountability positions the designer is in.

And it's awesome to be in that position because no one else is thinking about it.

There should be a reason why every element is on the screen in the viewable area and then screen by screen, like why we're doing that.

That is purpose driven design.

If you can't explain it, then should it be there?

And it doesn't have to be a metric oriented explanation or some sort of deep scientific rationale.

It could Be something very appropriate, like why are there icons here in the menu?

Or why are these buttons rounded and not square?

And you can have a brand reason why those exist.

You could have a, It's a visibility issue.

We're able to identify items more clearly, more consistently because they have these certain features to them.

But every aspect of every element should be explainable.

And so AI doesn't give you that explanation.

You have to trust that it made the right decision.

And that's tricky because it's really important.

But as a designer, the real value of having that ability is as you are putting things on the screen, you should be critiquing your own designs in real time and only put those elements that are appropriate.

Now the other thing that this didn't have, which actually pencil has this feature where you can have parallel agents doing the same prompt at the same time, which is kind of neat.

But I like to think of that in a designer thinking mode where if I'm in the middle of putting this screen together, I'm going to have a new idea midway through.

Many times midway through I'm going to say what if?

And I'm going to duplicate this entire screen or that section.

I'm going to go off on a little scratch area and I'm going to try all the variations and satisfy my curiosity because in my head I think it'll work awesome to add an icon here or add an affordance or try the different positions of this content in the table rows and I'll go work on that and then I'll come back and put it in context.

Like that sort of exploration not only gives you the ability to go to stakeholders and users and say, hey look, we tried everything or we tried these variations, or we tried these variations and these are three different options that are really effective in their own right.

They have trade offs and we need to discuss what the trade offs are.

Fascinating approach to it.

You're not getting that here and it's very hidden even if it is.

So take a thought of that as you see these screens generated.

Take a thought of this as you design your own screens.

And if you are interested in getting real time guidance, I offer coaching that is over a 12 week period where we can dive in and guide you in what you're working on, what your goals are as a designer, but also what your product organization, where they're going with their product and how can you tap into that and start asking these questions and start making these design decisions so you'll find all that on designy.com and you can go there.

You can sign up for the free newsletter.

I also have a podcast, the Daily Sprint, you can listen to and keep up to date on topics like this.

If you like this, please leave a comment below and I'd love to hear from you.

Talk to you later.

And remember, today is a great day to design with a why.