ui-craft

UI Craft

Create an intentional interface, not merely valid frontend code. Make the page fit its product, help the user act, and hold up under real browser inspection.

Establish the design brief

Before editing, identify:

• the user and the situation in which they reach this interface;
• the primary job, decision, or action the interface must support;
• the information that must be noticed first, second, and later;
• the dominant behavior: scan, operate, enter, compare, learn, or explore;
• the important default, loading, empty, error, success, disabled, and permission states;
• the target viewports, input methods, accessibility needs, and engineering constraints.

Ask a small number of focused questions only when a missing answer would materially change the result. Otherwise proceed with conservative assumptions and preserve the user's scope.

Read the existing visual language

Inspect the rendered page and the source that actually defines it. Read relevant:

• routes and page composition;
• layout shells and navigation;
• theme, token, and global style files;
• nearby components and their variants;
• typography, icons, imagery, and other assets;
• copy conventions and product terminology;
• responsive rules and existing breakpoints.

Treat the repository as the source of truth. Reuse its components and tokens before adding new ones. Do not introduce a parallel palette, spacing scale, radius family, shadow language, or component pattern for one screen.

Preserve the established product language unless the request explicitly calls for a redesign. If the current interface is inconsistent, improve the requested surface without casually rewriting unrelated global styles.

Choose the composition before decoration

Let the dominant user behavior determine the page structure:

• For scanning or monitoring, favor density, stable alignment, glanceable status, and clear exceptions.
• For operating or managing, favor selection state, nearby actions, feedback, and efficient repeated work.
• For entering or configuring, favor grouping, progressive disclosure, validation, and a clear completion path.
• For comparing, align equivalent information and make differences easy to inspect.
• For learning or deciding, build a paced narrative with one clear idea or action at a time.
• For exploring, make search, filters, results, preview, and wayfinding the primary composition.