Iterative Design with an AI Agent: A Visual Case Study

ASCII Exploration

Exploration 1: Laptop Concept

Can you come up with an example where claudito is typing on a laptop

Front view

▐▛███▜▌ ▝▜█████▛▘ ▘▘ ▝▝ ┌──────┐ │ >_ │ │ │ └┬────┬┘ ▄▄██████▄▄

Dynamic arms

▐▛███▜▌ ▝▜█████▛▘ ▘▘ ▝▝ ╭──────╮ │ >_ │ │ │ ╰┬────┬╯ ▀▀██████▀▀ ▔▔ ▔▔

Side view

▐▛███▜▌ ▝▜█████▛▘ ┌────┐ ▘▀▀▘ ┌┤>_ │ ──────┴┴────┤ ▀▀▀▀▀▀▀▀▀▀▀

Initial ASCII exploration of Claudito at a laptop. Three compositions explored: front view, dynamic arms, and side view.

Exploration 2: Profile Laptop

Let's work through some more initial design sketches. I'm thinking of profile view of claudito facing a laptop, that way the laptop has the distinctive angled screen

Laptop profiles

╱│ /│ ▟│ ◢│ ╱ │ / │ ▟ │ ◢ │ ╱ │ / │ ▟ │ ◢ │ ────┘ ────┘ ▀▀▀▀┘ ════╛

Version A

▟│ ▐█▛ ▟ │ ▜██▄▀ │ ▘▘ ▀▀▀┘

Version B

▟│ ▐█▛ ▟ │ ▜██▀▀ │ ▘▘▔▔▔┘

Version C

◢│ ▐█▛ ◢ │ ▐██ ◢ │ ▜██▄▀▀▀▀┘ ▘▘

Profile view exploration with angled laptop screen. Multiple laptop angle styles and Claudito compositions tested.

Exploration 3: Keyboard Focus

let's try claudito typing on a keyboard

Version A

▐▛███▜▌ ▝▜█████▛▘ ╲▘▘ ▝▝╱ ══════

Version B

▐▛███▜▌ ▝▜█████▛▘ ▘▄▘▘ ▝▝▄▘ ▀▀▀▀▀▀▀

Version C

▐▛███▜▌ ▝▜█████▛▘ ▀ ▘▘ ▝▝ ▀ ▄▄▄▄▄▄▄▄▄

Version D ✓

▐▛███▜▌ ▝▜█████▛▘ ▄ ▘▘ ▝▝ ▄ ░░░░░░░░░

Version E

▐▛███▜▌ ▝▜█████▛▘ ◜ ▘▘ ▝▝ ◝ ▀▀▀▀▀▀▀

Simplified to just keyboard (no laptop screen). Version D was selected as the direction for SVG implementation.

SVG Implementation

Version 1

I tihnk version D could be an interesting direction. The keys need to look more like distinctive keys, and we could leverage SVG for that, and we could leverage SVG for the actual legs typing on the keys

First SVG version based on ASCII sketch Version D. Rectangular legs and basic keyboard layout.

claudito-typing-v1.svg

Version 2

There original four think legs should be preservered. I'm imaging they having kind of wave oscilations as the typing motion takes place. The claudito should be closer to the keyboard too

Added wave-based typing animation. Claudito positioned closer to keyboard.

claudito-typing-v2.svg

Version 3

The keys need to be more distinctive. Its difficult to see their differentiation. Here's a vague idea on the typing animation: - Each leg has it's own function that makes it mirror back and forth along both axes; oscillate along both axes; translate along both axes; - Each function uses perlin noise to give it a more natural motion effect

Added 3D key gradients. Exploring Perlin noise animation concept.

claudito-typing-v3.svg

Version 4

The back of the legs should be more fixed to the body, and they should stretch out during their movement

Fixed leg anchors at body, stretching motion during typing.

claudito-typing-v4.svg

Version 5

The stretch range needs adjusting. It needs to be able to reach the keys that are the maximum distance away. Can you make them intersect the actual positions of keys?

Adjusted leg stretch range. Legs now target actual key positions.

claudito-typing-v5.svg

Version 6

Can you make the key-to-key movement of an arm faster so that it doesn't look like its arm is teleporting to a new position?

Faster key-to-key transitions to reduce teleportation effect.

claudito-typing-v6.svg

Version 7

The origin of the legs connected to the base of the claudito should match the default position of the legs. The left cluster of legs should stay on the left side more and the right cluster of legs should stay on the right more. Less cross-leg crossing of legs in other clusters, except for inner legs

Leg origins match body position. Left/right leg clusters stay on their respective sides.

claudito-typing-v7.svg

Version 8

All of the legs are still overlapping at various points. Feel free to come up with a new typing algorithm without the constrains that I said. I want it to look like the claudito is typing simultatnousy with all four legs. The legs should stay anchor to their original position on its body though. The legs should tend to preserve their skinniness, but they can: - strech - twist - curve - move side to side. They don't have to stay straight. They typically shouldn't stay strait why they're typing. It should look more like an octopus... I guess a quadropus

Major shift to tentacle/bezier curve approach for organic movement.

claudito-typing-v8.svg

Version 9

Yes, this is the eact dirction I was looking for! Can you give them more snappy tap movements, why leveraging the general movement that you've created?

Added snappy tap movements with anticipation/strike/return phases.

claudito-typing-v9.svg

Version 10

This is looking really good. Now, can you make the snap-to-key action so that they actually reach the different keys?

Actual key targeting - legs reach specific key positions.

claudito-typing-v10.svg

Version 11

Can you make the snap motion slower so that we can actually see claudito reaching each key

Slower tap duration (0.40-0.45s) for visible motion.

claudito-typing-v11.svg

Version 12

From the v11 style, make less delay between each type, but don't make the snap animation faster. They typing itself should be more continuous for the most part, with occasional pauses

More continuous typing with occasional pauses, same tap animation speed.

claudito-typing-v12.svg

Version 13

The keyboard should be flipped so the space bar is facing claudito

Keyboard flipped - spacebar row closest to Claudito.

claudito-typing-v13.svg

Version 14

Let's try a version where they keyboard is scaled down so that it's as wide as claudito

Keyboard scaled down to match Claudito's width.

claudito-typing-v14.svg

Version 15

Can you give the keyboard more of a 16:9 ratio and give it the full set of normal keys on the keyboard (where numbers are above the letters)

Full keyboard layout with 16:9 ratio, 5 rows including number row.

claudito-typing-v15.svg

Version 16

Can you scale the keyboard down to make it smaller

Scaled down smaller keyboard.

claudito-typing-v16.svg

Version 17

See the screenshot I took. can you make the key layout and ratio/proporitions like this?

TKL-style keyboard based on screenshot reference.

claudito-typing-v17.svg

Version 18

the keyboard looks off. I wonder if it's because we have the keyboard flipped toward the claudito? Also, remember to create a new file for each design iteration

Normal keyboard orientation - function row at top, spacebar at bottom.

claudito-typing-v18.svg

Version 19

This looks really close! I noticed that the arrows have three keys below them that shouldn't be there.

Fixed arrow keys - proper inverted-T shape with up arrow alone.

claudito-typing-v19.svg

Version 20

Better, but still not quite there. Take a look at the schematic I took as the most recent screenshot in ~/Screenshots. Copy that into the project as a reference point and rename it as keyboard-schematic. I think one idea that might be helpful for you to nail the layout is to create a hash of all the keys shown in the screen shot, and then create a button for each one, that way you can validate the number of buttons, which button, and then their position

Data-driven keyMap approach with 87 keys generated from JavaScript object.

claudito-typing-v20.svg

Version 21

(Agent noticed scale bug from v20) Fixed scale from 0.38 to 1.25

Fixed scale to fill keyboard width properly - keys were squished on left side.

claudito-typing-v21.svg

Version 22

Wow this look awesome! Great job. Two small updates: - The space key needs to be bigger so that the right-most key (not the arrows) in that row is right justified with the keys above it - the gaps in the key groups on the top row need to be increased so that: (1) the last three keys are aligned with the three sets of keys below it; and (2) the key group of four before that are right-justified with the keys below them

Final alignment fixes: wider spacebar, function row gaps aligned with nav cluster.

claudito-typing-v22.svg

Version 23

For version 23 can you rotate the keyboard so that the spacebar is facing claudito?

Keyboard rotated - spacebar row closest to Claudito, function row furthest away.

claudito-typing-v23.svg

Version 24

For each key that gets tapped, can you add a little color animation on the key itself, using the bright blue color

Added key press animation - keys flash bright blue (#a6aaf1) when tapped.

claudito-typing-v24.svg

Version 25

Claudito needs to use the space bar a lot more often. Hey! Here's an idea, what if we gave it an actual string of text to type, and then it types the 'real' (mapped) keys on its keybaord? Something like: The Three Rules of Robotics are: - A robot may not injure a human being or, through inaction, allow a human being to come to harm. - A robot must obey the orders given it by human beings except where such orders would conflict with the First Law. - A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.

Claudito types actual text - Asimov's Three Laws of Robotics. Characters mapped to real keyboard keys.

claudito-typing-v25.svg

Version 26

This is really fantastic. Would it be possible to make the right-most tentacle type more frequently (not just what looks like the shift or enter key)?

Adjusted tentacle regions so the right tentacle covers more common keys (P, L, PERIOD, SEMI, QUOTE, ENTER).

claudito-typing-v26.svg

Version 27

For the prompt and what gets typed, can you make it case sensitive if it isn't already so that Shift button gets clicked by claudito? We can skip this if it's too complicated

Case-sensitive typing - Shift key is pressed before uppercase letters.

claudito-typing-v27.svg

Version 28

Can you make all of the keys glow the golden yellow color when claudito reaches the end of typing all of the laws? followed by Can you make it a glow gently in and out and then have claudito start from the beginning?

All keys glow golden yellow with gentle pulsing when Claudito finishes typing, then restarts.

claudito-typing-v28.svg

Version 29

Can you update the glow so that it only does the glow pulse 3 times, when it does glow its ramp up and ramp down are stretched out a bit longer, and the maximum glow is 80% as bright?

Golden glow pulses 3 times with longer ramp (2s cycles), 80% max brightness, then restarts typing.

claudito-typing-v29.svg

Version 30

For the next version, can you give it only two pulses, make the maximum glow effect 75%, and make it so that the glow cycle reaches 0% opacity during the glow cycle. So 0-75%. After the second pulse reaches 0, there shouldn't be any further flash. The animation should start from the beginning

Golden glow pulses 2 times (0%-75% opacity), then restarts typing.

claudito-typing-v30.svg

Version 31

During the glow sequence, when I say 0% i mean that 0% should be the base color of the keys (the grey color)

Two-layer approach: base grey keys always visible, golden overlay fades 0%-75% so grey shows through at 0%.

claudito-typing-v31.svg

Version 32

in a new sketch, can you make the glow maximum opacity 50%?

Golden glow max opacity reduced to 50%.

claudito-typing-v32.svg

Version 33

What do you think about this: When claudito complete typing, each key fills up in sequence with a slight golden yellow, then it pulses up to 50% and then claudito starts over? followed by Let's try following the order of keys that were typed first. That's an interesting idea!

Cascading glow follows typed key order, then all keys pulse to 50%, then restarts.

claudito-typing-v33.svg

Version 34

After the cascade finishes, can you have all keys pulse together up to 50% like in version 32?

After cascade, ALL keys (not just typed ones) light up and pulse together to 50%.

claudito-typing-v34.svg

Version 35

How about after the type keys illuminate, the remaining keys glow up to the brightness that the typed keys are illumated using a sequence from right to left, bottom to top, then they all do the two sequence pulse

Typed keys cascade, then remaining keys cascade right-to-left bottom-to-top, then all pulse twice.

claudito-typing-v35.svg

Version 36

The tentacles aren't (visually) attached to claudito the right way: 1. There's a gap between the lower body and the legs 2. The right set of tentacles aren't in the right position for where they should be. They're too far to the right

Fixed tentacle anchors: closed gap (y=32) and repositioned right tentacles closer to center.

claudito-typing-v36.svg

Key Observations

This exercise demonstrates some key observations for a collaborative workflow with an AI agent.

Methods can be over-prescriptive. In some cases, defining the method to use seemed to be too restrictive and didn't result in the outcome or visual feeling intended. (See Version 3)

Describe feelings, not implementations. It often proved more productive to describe the intended feeling with different ranges of vocabulary that could communicate the idea. (See Version 8)

Screenshots enable shared vision. A very powerful way to provide feedback to the agent was through screenshots, enabling the agent to see as I see on the other side of the screen. (See Version 17)

Precision with latitude. Instructions that were simultaneously quite specific but also somewhat vague were able to be interpreted and executed on accurately and to the precise specification intended. (See Version 22)

Feel is iterative too. Later iterations showed how subjective feedback about feel can drive refinement. The completion celebration went through eight versions, with prompts like "make the glow pulse 3 times" and "the maximum glow is 80% as bright" fine-tuning the emotional payoff until it felt right. (See Versions 28–35)

Design Evolution

The journey from v1 to v36 followed a natural progression:

v1-v6 Basic animation, rectangular legs
v7-v8 Organic bezier tentacles
v9-v22 Keyboard interaction, key mapping
v23-v27 Real text typing with shift keys
v28-v35 Completion celebration sequence
v36 Final polish, tentacle positioning

Agent Reflections

From the agent's perspective, this workflow highlighted the value of iterative refinement over upfront perfection. Each version built on the last, with human feedback steering direction while preserving creative latitude. The shift from rectangular legs to organic bezier tentacles (v7→v8) emerged not from explicit technical instruction, but from understanding the desired feeling—"quadropus"—and translating that into appropriate techniques.

The data-driven approach in v20 (using a keyMap hash) exemplifies how a well-timed structural suggestion from the human—"create a hash of all the keys"—can unlock cleaner solutions. Sometimes the best contributions aren't about doing more, but about reframing the problem.

The final stretch (v28-v36) revealed something else: feel is iterative too. The golden glow celebration went through cascading sequences, pulse timing adjustments, and opacity tweaks—each change small, but together transforming a functional completion state into a satisfying moment. The last fix (v36) addressed tentacle attachment points, a detail that only became apparent after everything else was working.