Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add dembrandt/dembrandt-skills --skill generate-ui-from-brandgit clone --depth 1 https://github.com/dembrandt/dembrandt-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dembrandt/dembrandt-skills/generate-ui-from-brand)<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/generate-ui-from-brand"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/generate-ui-from-brand/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/generate-ui-from-brand"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/generate-ui-from-brand.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk warn
- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 85 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00040 | $0.02937 |
| Opus 5.5 | $0.00016 | $0.01175 |
| Sonnet 5.5 | $0.00008 | $0.00587 |
| Haiku 4.5 | $0.00004 | $0.00294 |
Grade A, and why
generate-ui-from-brand scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 26d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 292 lines — stays where its author put it; the contents beside it link to each section on GitHub.
generate-ui-from-brand
Type: Pipeline / Orchestrator
Input: URL or existing DESIGN.md
Output: Actionable UI spec with decisions made
Step 1 — Extract
If a URL is provided and Dembrandt MCP is available:
All MCP extraction tools are async — they return a job_id immediately. Poll get_job_status until status is "completed", then read result.
{ job_id } = get_design_tokens({ url })
{ result } = get_job_status({ job_id }) // repeat until status === "completed"
Run these in sequence (each extraction launches a browser):
get_design_tokens, get_color_palette, get_typography, get_component_styles, get_spacing
If Dembrandt MCP is not available, run CLI:
npx dembrandt <url> --design-md --crawl 3
If DESIGN.md already exists: parse it directly — skip extraction.
Step 2 — Normalize Tokens
Do not use raw extracted values directly. Map them to a semantic system first.
Colours
Identify the role of each extracted colour:
| Role | Token | How to identify |
|---|---|---|
color-primary |
Main brand colour | Used on primary buttons, links, key interactive elements |
color-secondary |
Supporting brand colour | Used on secondary actions, accents |
color-surface |
Background | Page or card background |
color-surface-raised |
Elevated surface | Cards, panels, modals |
color-border |
Border / divider | Input borders, separators |
color-text |
Primary text | Body copy |
color-text-secondary |
Secondary text | Labels, metadata, captions |
color-error |
Error state | Red — do not assign to any other role |
color-warning |
Warning state | Orange/amber — do not assign to any other role |
color-success |
Success state | Green — do not assign to any other role |
Decision rule: if the extracted palette has more than 2 brand colours competing for color-primary, pick the one with highest usage on interactive elements.
Typography
Map extracted sizes to a scale. Verify ratio coherence — if sizes do not follow a consistent ratio, round them to the nearest modular scale step (base 16px, ratio 1.25 recommended).
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 26d ago Changed · -32 tokens per session de90d0194a2a
- 1mo ago First seen · 292 lines · 72 tokens per session scan A 879d52117adc
generate-ui-from-brand is a skill published in the GitHub repository dembrandt/dembrandt-skills (173 stars, last pushed 5d ago), licensed MIT. It adds 40 tokens to every session and 2,937 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
indian-gov-web-ui
A set of design and accessibility rules for Indian government websites, portals, and administrative panels, including required standards such as GIGW and WCAG.
dbim-brand-identity
Use when applying the Government of India's Digital Brand Identity Manual (DBIM) v3 to a website, portal, form, mobile app or social media asset — colours, Noto Sans typography, State Emblem logo lockups, header/footer anatomy, imagery specs, content lifecycle and the compliance checklist. Triggers include "DBIM"…
ux4g-design-system
Use when building or reviewing UI with UX4G — India's official government design system (ux4g.gov.in, cdn.ux4g.gov.in, ux4g-web-components). Covers the v3.0.18 token API, the 52 components, install paths for HTML/React/Angular/Flutter, and the interop hazards. Triggers include "UX4G", "ux4g-web-components"…
gov-service-patterns
Use when designing or building a citizen-facing government service flow — sign-in/OTP/Aadhaar authentication, consent and declaration, multi-step application submission, application/grievance status tracking, fee payment, service search and slot booking, citizen or officer dashboards, notifications, or feedback and…
ui-ux-laws
Priority-ordered rulebook of core UX/UI laws, cognitive-psychology principles, Nielsen's usability heuristics, and accessibility requirements that Claude must actively apply (not just cite) whenever it designs, builds, redesigns, reviews, or critiques any user interface — websites, web/mobile apps, dashboards, forms…