code design
RU EN
~/wiki /ux-i-interfeisy/

UX and interfaces

Screen structure, navigation, shapes, readability, typography and user scenarios.

How to use this section

This page is a compact route through one topic. It collects only public, indexable materials and helps move from overview to action without searching the whole wiki.
15 materials
01
Start from the newest material if you need a current tool or release context.
02
Open the most practical guide first when you are solving a concrete project task.
03
Use Glossary for terms and Jobs for demand signals around this topic.

$ ls ./sections

Sections in this direction

Basics of VibeDesign/

Base to start: roles, process, brief, taste, visibility and work with an AI designer.
0 articles

News/

News and important updates from the world of AI and development: tool releases, platform changes and their practical impact on work.
0 articles

UX and interfaces/

Screen structure, navigation, shapes, readability, typography and user scenarios.
15 articles

Research and UX Methods/

Интервью, CJM, Jobs To Be Done, быстрые UX-проверки, гипотезы, пользовательские боли и способы принимать дизайн-решения на фактах.
0 articles

Figma and layouts/

Layouts, wireframe, auto-layout, components, screen preparation and work with Figma through AI.
0 articles

AI Design Tools/

Claude Design, Open Design, Google Stitch, Pencil.dev and other AI-powered design tools.
0 articles

Design system and components/

Colors, tokens, UI-kit, components, states, patterns and a single visual language of the product.
0 articles

Branding and identity/

Позиционирование, визуальный стиль, логотипы, тон коммуникации, бренд-система и упаковка продукта для узнаваемости и доверия.
0 articles

Motion and animation/

Микроанимации, переходы, интерактивные состояния, motion-принципы и анимация, которая помогает интерфейсу, а не отвлекает.
0 articles

Prototypes and handoffs/

Quick prototypes, clickable scripts, transfer to development and implementation control.
0 articles

Redesign and audit/

Website Update, UX Audit, Visual Verification, SEO Preservation and Chaos-Free Release.
0 articles

Accessibility/

Contrast, focus, keyboard navigation, readability, aria patterns and interfaces that are convenient for different people to use.
0 articles

Portfolio and cases/

Workshops, redesign cases, portfolio design and packaging of the result for the client.
0 articles

Design news/

Releases AI-design tools, fresh approaches, updates Figma/Claude/Stitch and analysis of new products.
0 articles
UX and interfaces
6/18/2026 17 min

Site audit through PageSpeed, Lighthouse and Core Web Vitals: step-by-step analysis

In 2021, Google officially included Core Web Vitals in the ranking algorithm. Since then, site speed is not only a UX metric, but also an SEO factor. A slow site loses search and conversion positions at the same time. The problem is that most teams run PageSpeed every six months, see a score of 47, shrug their shoulders and close the tab. Because it is unclear what to fix, in what order, and how it affects real users. This article is a practical algorithm. How to read reports, what each metric means, where to look for problems and how to fix them. No water, no specifics.
productivityPageSpeedLighthouseCore Web Vitals
UX and interfaces
6/12/2026 14 min

Six checks of the AI interface before showing to the customer: a checklist of real errors

Lovable generated screens in an hour. Looks good. I think we can show it. It is at this point that most people are wrong. AI makes a happy path – the scenario where the user does everything right, there is enough data, there are no errors. But the product doesn't live in a happy path. He lives in situations that are not described in the prompt: an empty list on the first day, a hung request, text that does not fit in the card, a button that looks the same on three different screens. The six tests below are not a theory. These are the specific places where the AI interface breaks down most often.
VibeDesignAI designUXchecklist
UX and interfaces
6/12/2026 8 min

AGENTS.md, CLAUDE.md, .cursorrules: what format your AI reads and how to set it up

You open Cursor, Lovable or Claude Code and describe the task. AI is starting to work. But how does he know your buttons are called Button/Primary, not btn-main? That you don't have Inter? What is not allowed in the src/lib/billing/ folder? Not if you didn't tell me. And each time to explain it again in the Prompt is not a workflow, it is a waste of time. To do this, there are steering files: markdown documents in the repository that AI reads automatically before starting work. In 2024-2025, each instrument came up with its own format. In 2026, the standard appeared, but the old formats did not go away.
VibeDesignDesign. mdClaude. mdAgents. md
UX and interfaces
6/10/2026 8 min

Why users leave in 3 seconds and how to fix it

The user opens the page. He doesn't have a task to figure out - he just assesses: is this what I need? Will it take a long time? Is that even clear? If the answers don’t come quickly, they leave. Not because of bad design. Because the brain makes a decision “too difficult” before the person has time to realize it. Three seconds is not a pretty number for a headline. When a page loads longer than three seconds, the bounce rate begins to rise sharply. At up to five seconds, about 38% of users have already left. This is data on the download speed – but the same logic works for the perception of content: if in the first seconds the interface did not answer the question “where I got and why”, the person closes. This article outlines the specific reasons why this happens and what to do about each of them.
UXUIVibeDesignhierarchy