Practical Know-how for Bridging Visual Communication Gaps with AI

Have you ever experienced multiple back-and-forth exchanges with AI to convey a problem that humans would understand at a glance - "the line spacing is too wide"?

Through a real-world case of "font size and line spacing adjustment," let's explore efficient methods to bridge the visual communication gap with AI.

The Actual Problem

Case: Font Size and Line Spacing Adjustment

Human: "The text is too small overall"
AI: [Changes font size from 18px to 24px]
Human: "Text got bigger where it shouldn't!"
AI: [Adjusts sizes overall]
Human: "Letter spacing on detail pages is too wide"
AI: [Adjusts letter-spacing] ← Wrong
Human: "Not letter spacing! Line spacing!"
AI: [Adjusts line-height]
Human: "It's not working except on mobile"
AI: [Adds responsive handling]

This exchange took over 30 minutes for what should have been a 5-minute adjustment.

Why Do These Gaps Occur?

1. AI Lacks Visual Perception

AI cannot make visual judgments about:

• Overall design balance
• Visual relationships between elements
• Cultural or conventional "unnaturalness"
• Appearance differences across devices

2. Terminology Interpretation Differences

3. Lack of Context

Since AI doesn't see the entire screen:

• Cannot predict how partial fixes affect the whole
• Cannot anticipate desktop vs mobile differences
• Cannot consider layout differences between languages

Efficient Communication Methods

1. Include Specific Values and Conditions

❌ Poor example:
"Line spacing is too wide"

✅ Good example:
"The h1 title line spacing on news detail pages 
is too wide on desktop display.
Currently looks like 1.5, want it around 1.2"

2. Clarify Comparison Points

❌ Poor example:
"Text is small"

✅ Good example:
"Body text font size is small.
Currently 16px, but 18px would be more readable.
Headings can stay as is"

3. Specify Device and Context

❌ Poor example:
"Layout is broken"

✅ Good example:
"When viewing on iPad landscape (1024px),
the sidebar overlaps the main content"

4. Utilize Screenshots

Current AI (Claude) can view screenshots:

"The padding in the red box area of this image is too large.
I'd like it reduced by half"
[Attach screenshot]

Practical Templates

Design Adjustment Request Template

【Target】
- Page/Component: 
- Element: 
- Device: □ Mobile □ Tablet □ Desktop

【Current State】
- Current value/state: 
- Problem: 

【Desired】
- After change value/state: 
- Reference: 

【Additional Info】
- Scope of impact: 
- Priority: 

Concrete Example

【Target】
- Page: News detail page
- Element: Article title (h1)
- Device: ☑ Desktop

【Current State】
- Current value: line-height: 1.5
- Problem: Line spacing too wide when wrapping to 2+ lines

【Desired】
- After change: line-height: 1.2
- Reference: Similar density to Medium article titles

【Additional Info】
- Keep mobile as is
- Especially noticeable with long Japanese titles

AI Evolution and Future

Current AI Visual Capabilities

As of 2024:

• Can recognize static images
• Cannot check screens in real-time
• Difficult to make "intuitive" design judgments

Future Possibilities

• Real-time adjustments via screen sharing
• Integration with design systems
• Automated visual A/B testing

Best Practices

1. Phased Approach

1. First communicate the general problem
2. Check AI's response
3. Give specific adjustment instructions
4. Fine-tune as needed

2. Unified Naming Conventions

Standardize terms within project:
- Letter spacing → letter-spacing
- Line spacing → line-height
- Space → margin (outside) / padding (inside)

3. Use Design Tokens

/* Manage with design tokens */
:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
}

Checklist

Before requesting design adjustments from AI:

• Clearly identified target element?
• Confirmed current values?
• Decided specific desired values?
• Specified device sizes?
• Considered scope of impact?
• Prepared screenshots (if possible)?

Summary

While visual communication gaps with AI certainly exist, learning proper communication methods can significantly reduce these gaps.

Key points:

1. Specificity - Avoid ambiguous expressions
2. Context - Clarify situations and conditions
3. Phased approach - Don't try to solve everything at once

These techniques will remain useful even as AI visual capabilities improve, because clear communication forms the foundation of efficient collaboration, whether with AI or humans.