Extract Design Systems Instantly From Any Url
Dembrandt is an author of skills that help an AI agent design user interfaces, covering visual systems such as shape language, radius and icon choices, layout paradigms for feeds, tables, dashboards and landing pages, and interaction details like button states, form validation and surface separation. Their work also reaches into motion design for transitions and onboarding, real-world metaphors for navigation, and configuration screens for domain experts who are not developers. The skills stand out for treating interface decisions as connected rules that can be applied consistently from one screen to the next.
Dembrandt Skills
45 skills · 185 stars · MIT
Algorithmic Color Palette Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, sema…
App Shell Top bar, sidebar rail, app launcher, tenant and environment cue, status bar.
Authentic Product Representation Product visuals must show the real product with real data.
Brand Visual Language Shape language across type, radius and icons carries brand personality.
Button States Rest, hover, active, focus, disabled and loading states, derived from the base colour.
Clone Website Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it.
Color Mode And Theme Light, dark or both, and when a theme selector is worth it.
Component Family Consistency Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing.
Coordinated Data Views Show a table and its map, diagram, timeline or chart together, with selection synced both ways.
Data Display And Selection View modes, row selection, mass actions, sorting, filters, search and table patterns.
Dembrandt Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and acces…
Domain Expert Configuration Settings for experts who are not developers — domain language, sane defaults, grouping by profess…
Elevation And Depth Shadows and layering that lift elements above the surface.
Extract Design Extract colours, typography, spacing, components and W3C design tokens from a live website with D…
Form Design Helper text, placeholders, validation and submit behaviour.
Generate Ui From Brand Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec.
Gestalt Ui Organisation Group controls with Gestalt principles so users see what belongs together.
Global Toolbar Controls Currency, language, region and unit selectors live in a low-profile header or footer spot.
Information Architecture Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes.
Layout Paradigms And Consistency Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it acro…
Loading States And Perceived Performance Spinners, skeletons and staggered reveals that manage wait times.
Marketing Vs Product System A marketing site and its product may differ in density and scale but share one token layer.
Micro Interactions Small purposeful animations — toggles, animated icons, success moments.
Modal And Overlay Patterns Modals, drawers, bottom sheets and popovers, each with its scope and blocking level.
Modular Scale Typography Ratio-based type scale where every size relates to the others.
Motion And Storytelling Disney's animation principles and cinematic technique applied to UI motion.
Nielsen Usability Heuristics Nielsen's 10 usability heuristics.
Notifications And Recovery Toasts, inline errors, banners and recovery paths.
Operational Expert Tool Ui Dense, linear, status-at-a-glance UI for specialists who use a tool all day.
Performance And Web Vitals Lighthouse audits and Core Web Vitals — LCP, CLS, INP.
Real World Metaphors Cards, drawers, carousels and other patterns borrowed from the physical world.
Repeated Component Alignment Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies.
Responsive Paradigms Mobile, tablet and desktop are different paradigms, not one layout scaled.
Scroll Areas Avoid inner scroll containers; when unavoidable, one axis at a time.
Semantic Html And Seo Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns.
Sizing Units rem, px or relative units for each kind of value.
Status Colors And Errors Few semantic colours, each meaning one thing, and errors with a way forward.
Sticky And Fixed Elements Sticky headers, bottom toolbars, floating action buttons and pinned table headers.
Surface Separation Set a surface apart by one means — border, elevation or fill — and keep opacity for state.
Tab Navigation Tabs swap views under a shared context.
Ui Context And Scope Show where the user is and what their actions affect — breadcrumbs, regions, scope labels.
Ui Density Match information density to platform and user type.
User Flows And Guided Paths Guided multi-step paths and wizards.
Visual Emphasis And Hierarchy Size, colour, weight and position mark what matters most.
Wcag Accessibility WCAG 2.2 AA compliance as required by the European Accessibility Act.