24.09 Algorütm: AI teeb ekraani valmis. Kes ütleb, kas see on hea?

Technological concepts & product/workflow analysis (code-based design vs Figma)

Designing by coding (UI/UX designer as frontend engineer)

• Elis (Codeborne UI/UX designer) primarily prototypes in code, rather than building in Figma. Code is treated as the “preferred tool” for interactive prototypes.
• Figma is used only when needed, for example:
  • quickly drawing/updating screenshots, or
  • when an existing component library can be leveraged.

Component libraries / prototyping base

• Codeborne maintains an internal base set of reusable UI pieces to speed up prototyping.
  • This base is regularly updated with additions/removals.
• The base is not one-to-one reusable across all projects, but it’s sufficient for prototyping many client works.
• Reuse is easier when the prototype stack matches the production dev stack (they try to keep them aligned to reduce rewrites).

Svelte-focused prototyping stack

• The mentioned project basis is Svelte, with a kit and standard frontend practices.
• It’s described as “front-end only” (no database/backend folders), which makes prototyping closer to the real frontend.

Why code prototypes outperform Figma for complex interactivity

• Both perspectives agree that Figma is strong for:
  • UI layout,
  • responsiveness,
  • animations, etc.
• Code prototyping is strongest for high interactivity, such as:
  • calculators with continuous recalculation,
  • map-based interactions and navigation,
  • complex flows with decision trees,
  • scenarios where “real interaction” drives UX decisions.

Developer experience (DX) and integration with feedback

• Sharing a link to a realistic prototype helps clients and teams:
  • clients can test it like a website,
  • feedback can be detailed enough to jump into the next design sprint.
• Developers also benefit: sometimes designers provide prototypes that are already almost ready to implement, reducing the gap between mock and production code.

Component/system coherence & maintainability (brand changes)

• A key advantage: when using component systems, brand/style changes (e.g., colors, spacing, corner radius) can update consistently across pages.
• Code-based prototyping helps surface issues like:
  • “Design looks consistent on one page but breaks on another,”
  • which can happen when designers customize components page-by-page.

AI-related tools & practical guidance

AI in design instructions is error-prone

• Elis notes that “explaining design” to AI can be difficult.
• Even small pixel-level changes may require manual rework.
• A common failure mode is layout drift, e.g.:
  • “Move button two pixels → everything breaks.”

Two workaround approaches

1. Do small fixes manually
   • Avoid wasting time when the AI would struggle with tiny differences.
2. Use voice feedback to generate an AI to-do list
   • Speak what you like/dislike into a microphone.
   • Have AI convert it into clear correction instructions.
   • Then ask AI to apply corrections based on that instruction list.
   • Language detail: Elis uses English (better transcription/output quality than Estonian in his current setup). ChatGPT is also mentioned as potentially capable.

AI code generation still requires human review

• Elis prefers to review AI changes due to security/reliability concerns.
• He checks:
  • which files were modified,
  • whether AI introduced unwanted “extra” code,
  • ensuring new component usage doesn’t miss other references.

AI + UI testing ideas (Playwright/screenshot validation)

• There’s interest/partial use of tools like Playwright to automate UI checks and generate screenshots for review.
• Applicability depends on project setup and client constraints.

Accessibility consideration (practical reminder)

• Accessibility is largely handled by the existing component base/system.
• However, brand/style changes and layout restructuring still require re-testing.
• Example: after layout changes, keyboard navigation should be re-checked to confirm correct tab order/functionality.

Tutorial / training-style product: “Train your design eye”

• The video promotes a workshop/event called “Train your design eye”.
• Goal: teach design principles that help validate not only human-made UI, but also AI-generated UI.
• The training emphasizes spotting issues like:
  • incorrect spacing/alignment,
  • including “looking at what’s not there” (whitespace).
• Accessibility and design rules are framed as a skill built through observation + feedback.

Key event mentioned

• Digital conference “Digit”
  • When/where: October, in Tartu, at the Comb Factory in Tartu.
  • Elis is highlighted as a (notably) single designer among mostly IT/developer topics.
  • Purpose: provide broader perspectives for both AI/IT skills and design eye training.

---

Main speakers / sources

• Eerik Jõgi (host)
• Martin Kapp (co-host/helper)
• Elis Laasik (guest, Codeborne UI/UX designer)