⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
algorithmic-color-palette
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.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
// README
dembrandt-skills
Enterprise UX secrets, now built into your AI agent.
Your agent writes the component in seconds. It does not know the modal should be a drawer, or that the grey it picked fails contrast. These skills carry that judgment: what to do, and what breaks otherwise. Works with Claude Code, Cursor, Codex, GitHub Copilot and any agent that reads the Open Agent Skills format.
Quick start
npx skills add dembrandt/dembrandt-skills --all
Skills load only when a prompt needs them, so --all costs nothing. --global installs for every project.
Usage
Ask in your own words and the matching skill loads. Ask broadly, "review this screen", and the dembrandt skill runs the whole pipeline.
| Ask | What loads |
|---|---|
| I have one brand colour, #133174. Build me a full UI palette. | algorithmic-color-palette |
| My font sizes feel random. Set up a proper type scale. | modular-scale-typography |
| Review this interface for usability issues. | nielsen-usability-heuristics |
| Our buttons, inputs and badges look like three different products. | component-family-consistency |
| Design a multi-step onboarding flow for a B2B SaaS tool. | user-flows-and-guided-paths |
| Does this pass WCAG 2.2 AA? | wcag-accessibility |
| Extract the design system from stripe.com. | extract-design, needs the engine |
Skills
Brand & Visual Identity
| Skill | What it covers |
|---|---|
brand-visual-language | Shape language, icon style, typography tone |
color-mode-and-theme | Light vs dark vs combined, when to offer a theme selector |
marketing-vs-product-system | What a marketing site and the product may differ on, and what is drift |
algorithmic-color-palette | Derive states and brand-tinted greys from brand colours |
Design Tokens & Scales
| Skill | What it covers |
|---|---|
modular-scale-typography | Ratio-based type scales, minimum sizes, context-aware usage |
elevation-and-depth | Shadow scale, border-radius, card and modal patterns |
surface-separation | One separation strategy per surface; opacity as state, not tint |
button-states | Six states: rest, hover, active, focus, disabled, loading |
component-family-consistency | Buttons, inputs, pills: shared radius, colour, height |
sizing-units | px vs rem vs relative: which values move when the user enlarges text |
Layout & Structure
| Skill | What it covers |
|---|---|
layout-paradigms-and-consistency | Choose the layout paradigm that fits the content; reuse the page skeleton across screens |
gestalt-ui-organisation | Group related controls: proximity, similarity, common region |
visual-emphasis-and-hierarchy | One CTA per view, colour and size as emphasis |
information-architecture | Naming, mental models, data UI, confirm dialogs |
ui-context-and-scope | Hierarchy, breadcrumbs, colour regions, scope communication |
responsive-paradigms | Mobile/tablet/desktop: nav, sections, sticky behaviour |
ui-density | Match density to platform and user type |
sticky-and-fixed-elements | Headers, bottom toolbars, z-index tokens |
scroll-areas | Avoid inner scroll, one axis only, user-controlled |
Components & Interaction
| Skill | What it covers |
|---|---|
real-world-metaphors | Cards, carousels, drawers: when to use and how |
form-design | Helper text, placeholder, validation, submit state |
tab-navigation | Tab types, overflow handling, roving tabindex, ARIA tablist, URL state |
modal-and-overlay-patterns | Overlay hierarchy, focus trap, dismiss rules, destructive confirms |
data-display-and-selection | Grid/list/table, large hit areas, mass actions |
repeated-component-alignment | Repeated components as slot models: equal size, pinned anchors, clamp + recover text |
operational-expert-tool-ui | Dense, workflow-driven UIs for trained daily B2B users |
coordinated-data-views | Keep a table and a visual view (map, diagram, chart) in sync |
domain-expert-configuration | Expose solver/algorithm settings in domain language |
app-shell | Top bar, app launcher, tenant and environment cue, status bar: one shell across an estate |
global-toolbar-controls | Currency, language, region and unit selectors: frequent but not primary |
notifications-and-recovery | Toasts, banners, retry, undo: always a path forward |
status-colors-and-errors | Minimal semantic colours, error recovery, prevention |
UX Principles
| Skill | What it covers |
|---|---|
nielsen-usability-heuristics | 10 usability principles with review checklists |
wcag-accessibility | WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA |
user-flows-and-guided-paths | Wizards, purchase flows, onboarding sequences |
authentic-product-representation | Real content and real output over staged mockups and marketing chrome |
micro-interactions | Animated icons, toggles, reveals, celebrations |
loading-states-and-perceived-performance | Spinners, skeleton screens, and staggered entry animations |
motion-and-storytelling | Disney principles and cinematic language in UI |
Technical Foundation
| Skill | What it covers |
|---|---|
semantic-html-and-seo | HTML5, alt texts, Open Graph, progressive enhancement |
performance-and-web-vitals | Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading |
Pipeline & Orchestration
| Skill | What it covers |
|---|---|
extract-design | Extract real design tokens from any live website via Dembrandt CLI or MCP (requires dembrandt ≥ 0.23.1) |
clone-website | Rebuild a live page 1:1 from capture and computed styles, into Figma, Penpot or code |
generate-ui-from-brand | URL or DESIGN.md to tokens to decisions to UI spec (requires dembrandt ≥ 0.23.1) |
dembrandt | Full 6-stage UX orchestrator: brand, tokens, layout, components, polish, a11y gate |
The engine
Dembrandt turns any live website into design tokens in seconds, then enforces them in CI. It catches brand drift on every pull request, before it ships. Free and open source, at dembrandt.com.
Two skills, extract-design and generate-ui-from-brand, read tokens off a live site and need it. Add it to your agent's MCP config:
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]
}
}
}
Contributing
Changes to skills/** go through a pull request, however small. A push to main is live to every install. Run npm test before opening one; CI validates frontmatter, cross-links and the manifest.
License
MIT
// HOW IT'S BUILT
KEY FILES