Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
日本語の概要は準備中です。原文の説明を表示しています。
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Foundational principles for evaluating and designing usable interfaces. Apply these as a review checklist and as design constraints from the start — not only as a post-hoc audit tool.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Users cannot make good decisions without knowing the current state of the system. Trust is built through clear, timely feedback.
In practice:
Review question: After any user action, is the outcome visible within 1 second?
The design should speak the users' language — words, phrases, and concepts familiar to the user, not internal jargon or system terminology.
Follow real-world conventions and natural mapping so the interface feels intuitive rather than requiring translation.
In practice:
Review question: Would a user unfamiliar with this product understand every label and term?
Users often perform actions by mistake. They need a clearly marked emergency exit to leave an unwanted state without going through an extended process.
Easy undo and escape paths foster confidence and prevent users from feeling trapped.
In practice:
Review question: Can the user get out of any state without losing their work or needing to contact support?
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Consistency reduces cognitive load by meeting expectations users have built from other products.
In practice:
Review question: Does the same action always look and behave the same way throughout the product?
Good error messages matter, but the best designs prevent errors from occurring in the first place.
Prevention addresses both slips (unintentional actions) and mistakes (misunderstanding of design intent).
In practice:
Review question: For every destructive or irreversible action, is there a confirmation step or an undo path?
Minimise the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another.
Recognition requires less cognitive effort than recall. Visible affordances reduce the work of using the product.
In practice:
Review question: Does a returning user need to remember anything to pick up where they left off?
Shortcuts — hidden from novice users — may speed up interaction for expert users. The design should serve both.
Accelerators, customisation, and personalisation let experienced users work faster without adding complexity for beginners.
In practice:
Review question: Can a power user complete their most frequent task significantly faster than a first-time user?
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information competes with relevant information and reduces its relative visibility.
Focus content and visual design on the essentials that support primary user goals. Less is more, only when the less is the right less.
In practice:
Review question: Does every element on screen earn its place, or is something there "just in case"?
Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.
Error messages are a UX surface — they deserve the same care as any other UI copy.
In practice:
Review question: Does every error message tell the user what happened, why, and what to do next?
It is best if the system does not need any additional explanation. However, it may be necessary to provide documentation to help users complete tasks.
Help should be contextual, searchable, and actionable — not a last resort buried in a footer.
In practice:
Review question: Can a confused user find help without leaving the current screen?
| # | Heuristic | Check |
|---|---|---|
| 1 | System status | Every action gives visible feedback within 1s |
| 2 | Real-world language | No jargon, terminology matches user vocabulary |
| 3 | User control | Undo available, exit paths always visible |
| 4 | Consistency | Same action = same label and behaviour everywhere |
| 5 | Error prevention | Irreversible actions have confirmation or undo |
| 6 | Recognition over recall | Options visible in context, no hidden commands |
| 7 | Flexibility | Power users have faster paths to frequent tasks |
| 8 | Minimalist design | Every element earns its place |
| 9 | Error recovery | Error messages are plain, specific, and actionable |
| 10 | Help and docs | Help is contextual and available at point of need |
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
日本語の概要は準備中です。原文の説明を表示しています。
Top bar, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell or navigation between apps behind one login.
日本語の概要は準備中です。原文の説明を表示しています。
Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.
日本語の概要は準備中です。原文の説明を表示しています。
Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.
日本語の概要は準備中です。原文の説明を表示しています。
Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.
日本語の概要は準備中です。原文の説明を表示しています。
Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.
日本語の概要は準備中です。原文の説明を表示しています。