スキルを探す

Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.

日本語の概要は準備中です。原文の説明を表示しています。

Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.

日本語の概要は準備中です。原文の説明を表示しています。

Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.

日本語の概要は準備中です。原文の説明を表示しています。

A marketing site and its product may differ in density and scale but share one token layer. Use when the two drift apart, share components or need a single token owner.

日本語の概要は準備中です。原文の説明を表示しています。

rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.

日本語の概要は準備中です。原文の説明を表示しています。

Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.

日本語の概要は準備中です。原文の説明を表示しています。

Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.

日本語の概要は準備中です。原文の説明を表示しています。

Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.

日本語の概要は準備中です。原文の説明を表示しています。

WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.

日本語の概要は準備中です。原文の説明を表示しています。

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.

日本語の概要は準備中です。原文の説明を表示しています。

Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.

日本語の概要は準備中です。原文の説明を表示しています。

Settings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when designing settings panels, solver configuration or constraint editors.

日本語の概要は準備中です。原文の説明を表示しています。

Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.

日本語の概要は準備中です。原文の説明を表示しています。

Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.

日本語の概要は準備中です。原文の説明を表示しています。

Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand, auditing a design system or fixing visual inconsistency.

日本語の概要は準備中です。原文の説明を表示しています。

Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.

日本語の概要は準備中です。原文の説明を表示しています。

Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.

日本語の概要は準備中です。原文の説明を表示しています。

Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.

日本語の概要は準備中です。原文の説明を表示しています。

Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.

日本語の概要は準備中です。原文の説明を表示しています。

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

日本語の概要は準備中です。原文の説明を表示しています。

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

日本語の概要は準備中です。原文の説明を表示しています。

Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.

日本語の概要は準備中です。原文の説明を表示しています。

Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.

日本語の概要は準備中です。原文の説明を表示しています。

Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.

日本語の概要は準備中です。原文の説明を表示しています。