[한글자막] 최고의 AI 디자인은 레벨 3에서만 나옵니다

Core thesis: “Best AI design” appears only at Level 3

The video argues that the quality difference between “looks custom” vs “screams AI-generated” comes from a 3-level design workflow:

1. Level 1: Single-page design (most tutorials stop here)
2. Level 2: System-level design for the whole app/site
3. Level 3: Programmatic testing of the design, using an engineering-like loop similar to TDD

---

Level 1 — Prompting to avoid generic/AI-looking output

Problem with single-page prompts

• Even when model design quality improves (example mentioned: Opus 4.7 design capability is better and “AI slop” reduced),
• Models still tend to converge to safe patterns.
• There’s a recurring default style; when that style appears, the site is likely generated by Opus 4.7 and will quickly become the next “AI slop.”
• Therefore, you must go beyond basic “create a landing page” prompting.

How to structure the prompt (key technical guidance)

The prompt should include, in order:

• Intent: what kind of website/app you’re building
• Non-negotiables: required app features and UI element appearance
• Color system
  • Use OKLCH instead of RGB/HSL
  • OKLCH improves human-perceived lightness/chroma/hue handling
  • Produces smoother gradients than uneven hex-based gradients
• Contrast rules / contrast flows
  • Contrast creates visual hierarchy
  • If omitted, the model treats everything as equal importance
• Typography constraints
  • Explicitly ban fonts known to be default “AI slop giveaways” (examples cited: Inter, Gist)
  • Specify which fonts to use in which regions
• Layout strategy
  • Explain symmetry vs asymmetry
  • Symmetry = grid-aligned, “professional/straight” look
  • Asymmetry = more artistic, works well with negative space
  • Choose based on the product type/goal
• Sections, materials, responsiveness requirements
• Anti-patterns
  • Must explicitly forbid known “AI slop” hallmarks (examples: centered CTA patterns, Lucid-icon style, glassmorphism gradients)

Implementation workflow mentioned

After the prompt is supplied to an agent (e.g., Claude Code), it:

• Implements the app “just like the prompt”
• Uses asymmetry/negative space when prompted for that goal
• Attempts to avoid “anti-patterns” through instruction

---

Level 2 — Keep design consistent across pages using shared design files

Why Level 2 matters

When generating whole apps, the model often:

• Produces a decent landing page
• Then breaks style consistency on dashboards/other pages:
  • different button styles, spacing, typography
  • pages feel like they aren’t part of the same product
  • sometimes only dashboards break the style

Solution: maintain a design “system” via two files

The video recommends creating:

• claude.md
  • Contains project info only, not design content
  • Reason: keeps design context from distracting the agent (loaded continuously)
  • Still anchors overall context that helps coherent design
• design.md
  • Contains the full visual system:
    • colors, typography, spacing/layout rules, etc. from Level 1
  • Designed so any agent can pick it up and understand the visual system immediately

Iterative refinement for design consistency

• Add an instruction at the top of design.md telling the agent to:
  • append any new design rules/values it discovers
  • so each session begins with a more refined design system

Validation using templates + cross-checks

• The video references Google’s open-source template for the design.md
• The template includes commands to cross-verify and flag errors
• Agents are prompted to iterate until the design system matches best-practice format/structure

Auditing against evolving design principles

• Use an open-source “skill” that audits designs against UI principles.
• They specifically mention Versal Lab skill:
  • not hard-coded rules; it points to an external actively maintained source
  • keeps principles updated instead of freezing at an old “state-of-the-art”

---

Sponsor segment (product mention)

• Zill’s Cloud (video sponsor) for RAG apps and vector search performance.
• Mentions Milvvis as an open-source vector database (high GitHub stars; “over 44,000”).
• Claim: Zill’s Cloud is a fully managed option:
  • up to 10x faster
  • setup “in minutes”
  • keeps the same API
  • includes cluster performance/storage/data metrics in real time
• Demonstrates semantic search relevance + recommendation-style similarity query results under a second.

---

Level 3 — Design testing via TDD-like workflows (design “tests”)

Main idea

Since design is subjective, you can’t test it like deterministic code inputs/outputs—but you can still create “tests” by:

• pinning down expected behaviors and constraints
• enforcing them programmatically using rules/anti-patterns

Test-first loop using claude.md + design.md as the source of truth

• Tests are written before implementation
• The video warns:
  • If tests are added after code, the agent “slacks off” and writes tests that match what it already built
• Test-first forces the implementation to satisfy the expected design constraints

What becomes test cases

• The design.md content includes anti-patterns and rules
• Each anti-pattern/rule becomes:
  • a static test (programmatic checks for presence/violation)
  • plus visual/regression tests (screenshot-based)

Tools mentioned for testing

1. Playwright-based visual testing

   • Used for regression checks
   • Provides screenshot comparisons as tests evolve

2. Vizly test (CLI) for UI TDD

   • Runs local TDD as the UI changes
   • Provides better diffs than simple screenshot side-by-side:
     • reports which pixels changed and by how much
   • Workflow described:
     • Install/initialize CLI from docs
     • In Claude Code, instruct it to use Vizly as the testing medium
     • Running “Vizly TDD” starts a local server that monitors screenshot changes
     • Claude writes separate tests (named “Vizly”) that push screenshots to a viewer
     • You approve/deny diffs
     • Rejected diffs become feedback for the next iteration
   • Goal: design converges to what the human wants, not what the agent assumes.

Distribution mention

• Prompts used for this process are available in AIABS Pro for this and prior videos.

---

Main speakers / sources (as indicated by the video text)

• Primary speaker/narrator: the channel host (“I recently started using…”, “let’s have a word from our sponsor,” “That brings us to the end of this video”)
• AI system sources mentioned:
  • Claude Code
  • Opus 4.7
• External references/tools mentioned:
  • Google (open-sourced design.md template)
  • Versal Lab skill
  • Playwright
  • Vizly (CLI)
  • Milvvis / Zill’s Cloud (sponsor)