Trong phát triển frontend, có vấn đề thường gặp: khách hàng không có file Figma, website cũ không có tài liệu màu sắc hay font, developer phải mở DevTools inspect từng component. Dembrandt tự động phân tích website đang chạy và tạo ra Design System dưới dạng tokens.
Input: https://example.com
Output: colors, typography, spacing, components → JSON / DESIGN.md / DTCGDembrandt Giải Quyết Vấn Đề Gì?#
Thông thường khi clone hoặc maintain website, developer phải: mở DevTools → inspect HTML → tìm CSS → copy màu → kiểm tra font → đo khoảng cách → viết token. Mất vài giờ.
Dembrandt tự động hoá: Browser automation → Computed CSS analysis → Design Tokens → JSON.
Lấy Được Những Gì?#
Color tokens:
{
"primary": "#0ea5e9",
"text": "#111827",
"background": "#ffffff"
}Bao gồm brand, button, text, gradient, CSS variables.
Typography:
{
"heading": { "size": "48px", "weight": 700 },
"body": { "size": "16px", "weight": 400 }
}Font family, size, weight, heading scale.
Spacing system:
{
"spacing": ["4px", "8px", "16px", "32px", "64px"]
}Component styles: Button radius, padding, hover — card, input, link, surface.
Responsive breakpoints: { "sm": "640px", "md": "768px", "lg": "1024px" }
Cài Đặt#
npm install -g dembrandtHoặc dùng trực tiếp:
npx dembrandt example.comSử Dụng#
# Extract design tokens
dembrandt https://vercel.com
# Export JSON
dembrandt example.com --save-output
# Export DESIGN.md (for AI agents)
dembrandt example.com --design-mdOutput:
✓ Colors extracted
#000000 #ffffff #0070f3
✓ Typography - Inter - 48px heading - 16px body
✓ Spacing - 4px 8px 16px 32pxDùng Với AI Agent#
Hỗ trợ MCP — Claude Code, Cursor, Windsurf:
claude mcp add --transport stdio dembrandt -- npx -y dembrandt-mcpSau đó AI agent tự gọi Dembrandt: “Extract design tokens from my website”.
Workflow Thực Tế#
Làm lại website khách hàng:
Website cũ → Dembrandt → design-system.json → Tailwind config → Website mớiKết hợp Tailwind CSS:
export default {
theme: { extend: { colors: { primary: "#2563eb" } } }
}Migration: Bootstrap → Dembrandt → Extract tokens → Tailwind + React.
Audit nội bộ: Kiểm tra màu, spacing, font có đồng nhất giữa các sản phẩm.
Design Token Là Gì?#
Design token là lưu giá trị thiết kế thành biến dùng chung:
:root { --color-primary: #2563eb; }
.button { background: var(--color-primary); }Lợi ích: đổi màu toàn bộ app dễ dàng, đồng bộ designer/developer, tạo design system.
Dembrandt vs Figma#
Figma: Design → Code. Dembrandt: Website thật → Design System. Hữu ích khi không có file Figma, website đã deploy, cần reverse engineer UI.
Hạn Chế#
- Canvas/WebGL không phân tích được
- Dynamic content có thể thiếu
- Dark mode cần bật riêng
- Website nhiều JS cần chờ load
Kết Luận#
Dembrandt biến website đang chạy thành Design System + Design Tokens + Documentation + AI Context. Thay vì inspect CSS hàng giờ, chỉ cần:
dembrandt yourwebsite.comPhù hợp khi làm React, Next.js, Tailwind CSS, Design System, AI coding workflow.