skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

generate-ui-from-brand

Convert a website URL or DESIGN.md into a brand-aligned UI specification with normalized design tokens.

33|6|Updated Apr 19, 2026
Search Tags:#accessibility#design tokens#ux audit#ui generation#component governance#brand design system#multi-brand theming
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill generate-ui-from-brand-dembrandt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-ui-from-brand
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/generate-ui-from-brand
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill generate-ui-from-brand-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork of turning an existing brand, website, or DESIGN.md into a coherent interface by extracting visual tokens, normalizing them, and applying clear UX and accessibility decisions.

Core Features & Use Cases

  • Brand Extraction: Retrieve design tokens, colour palettes, typography, component styles, spacing, and border radii from a live URL or parse an existing DESIGN.md.
  • UI System Generation: Convert raw brand values into semantic design tokens, concrete component structures, layout recommendations, and copy-pasteable CSS.
  • Design System Governance: Audit inconsistent interfaces, consolidate tokens across brands, migrate outdated design eras, promote recurring patterns, and identify components or features for deprecation.
  • Accessibility Review: Check WCAG 2.2 AA contrast, enforce readable type sizes, establish interaction states, and reserve status colours for their intended meanings.
  • Use Case: Provide a company website URL and receive a normalized design token file, prioritized UX decisions, and an actionable page structure for building a branded SaaS dashboard.

Quick Start

Use the generate-ui-from-brand skill to extract the design system from the provided website URL and produce an accessible UI specification with semantic tokens and component structure.

Frequently Asked Questions about generate-ui-from-brand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a live website URL to generate a UI specification?▼

To extract design tokens from a live website URL, you need a live extraction tool like Dembrandt MCP or CLI. The skill retrieves color palettes, typography, spacing, and component styles, normalizing them into a concrete, brand-aligned UI specification with semantic tokens.

Can I use a DESIGN.md file to generate a brand-aligned UI system and component structure?▼

Yes, you can parse an existing DESIGN.md file to generate a brand-aligned UI system. The skill converts raw brand values into semantic design tokens, concrete component structures, layout recommendations, and copy-pasteable CSS for your interface.

How does this approach help with multi-brand theming and design system governance?▼

For multi-brand theming and design system governance, this approach consolidates tokens across different brands, audits inconsistent interfaces, migrates outdated design eras, promotes recurring patterns, and identifies components for deprecation.

Do I need Dembrandt MCP or the Dembrandt CLI to audit visual consistency and extract brand tokens?▼

Yes, you need either Dembrandt MCP or the Dembrandt CLI for live extraction from a website URL. These dependencies allow you to retrieve design tokens, audit visual consistency, and validate typography, spacing, contrast, and hierarchy.

What is the best way to ensure my generated UI meets WCAG 2.2 AA accessibility contrast standards?▼

To ensure your generated UI meets WCAG 2.2 AA accessibility contrast standards, the skill automatically checks contrast ratios, enforces readable type sizes, establishes interaction states, and reserves status colours for their intended meanings during token normalization.

What are the limitations of refactoring interfaces using normalized design tokens?▼

When refactoring interfaces with normalized design tokens, you are limited by the source material provided. Extraction relies entirely on the live URL or DESIGN.md content, meaning incomplete or unstructured brand inputs will result in less comprehensive UX decisions and component structures.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

extract-design

Extract design tokens from live websites using Dembrandt.

Community
Advanced
jfrometajfrometa

tailwind-patterns

Implement CSS-first Tailwind v4 patterns with container queries and design tokens.

Community
Advanced
Canhada-LabsCanhada-Labs
2

Design System & Component Architecture

Governs design tokens and component architecture standards for frontend development and review workflows.

Official
Advanced
Dev-Dennis-040Dev-Dennis-040
10

testing-accessibility-auditor

Audit web interfaces for WCAG 2.2 AA conformance and ARIA compliance.

Community
Advanced