디자인 스킬

Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards, panels, list rows, toolbars or any container.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse, logistics, scheduling or other B2B operations tools.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Extract a design system from a screenshot (PNG/JPG/WEBP) or a live URL and produce a schema-compliant `design.v1.json` file plus a ready-to-use agent prompt for applying the design to any website/app. When run inside the sleek-ui repository, offers to add the extracted design to the public catalog as a PR — updating `public/designs/`, `src/data/designs/`, `src/data/designs.ts`, and generating a preview. Use when users ask to "extract a design from this screenshot", "clone this site's design", "reverse-engineer the design tokens", "reskin my app to look like {site}", "generate a sleek-ui design from this URL", or provide an image/URL and want a reusable design system.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics UI, settings screen, onboarding flow, or marketing/landing page that should feel calm, dense and native, and whenever the user mentions Open Analytics' look, 'clean SaaS design', cards, dropdowns, tab bars, empty states, skeletons, or UI animation quality, even if they never say the words 'design system'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Check product and brand names for conflicts across trademarks, domains, social handles, and package registries. Returns a risk level and Proceed/Modify/Abandon verdict. Don't use for name brainstorming, logo design, or trademark filings.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Generate professional SVG logos from project context: 7 brand variants plus a showcase HTML page. Use for product marks, wordmarks, icons, and favicons. Don't use for raster-only logos, illustrations, or full brand guidelines.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.