4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Ta01,import { anthropic } from "@ai-sdk/anthropic"; import { generateText } from "ai"; import { ContextDev } from "context.dev"; import { deriveCssVariables, deriveTailwindTheme } from "./derive-tokens"; import type { LiveBrand, LiveStyleguide } from "./derive-tokens"; import { buildDesignMdPrompt, DESIGN_MD_SYSTEM } from "./design-md"; const client = new ContextDev({ apiKey: process.env.CONTEXT_DEV_API_KEY ?? "", }); interface DesignSignals { styleguide: unknown; brand: unknown; screenshotUrl: string | null; markdown: string; } async function fetchSignals(domain: string): Promise { const [styleguide, brand, screenshot, markdown] = await Promise.all([ client.web.extractStyleguide({ domain, timeoutMS: 120_000 }), client.brand.retrieve({ domain }), client.web.screenshot({ domain, fullScreenshot: "false", handleCookiePopup: "true", }), client.web.webScrapeMd({ includeImages: false, includeLinks: true, url: `https://${domain}`, useMainContentOnly: true, }), ]); return { brand: brand.brand ?? null, markdown: markdown.markdown ?? "", screenshotUrl: screenshot.screenshot ?? null, styleguide: styleguide.styleguide ?? null, }; } async function generateDesignMd( domain: string, signals: DesignSignals ): Promise { const prompt = buildDesignMdPrompt({ contextStyleguide: signals.styleguide, domain, markdown: signals.markdown, screenshotUrl: signals.screenshotUrl ?? undefined, }); const { text } = await generateText({ messages: [ { content: signals.screenshotUrl ? [ { image: new URL(signals.screenshotUrl), type: "image" }, { text: prompt, type: "text" }, ] : [{ text: prompt, type: "text" }], role: "user", }, ], model: anthropic("claude-sonnet-4-6"), system: DESIGN_MD_SYSTEM, temperature: 0.2, }); return text.trim(); } export interface DesignMdResult { designMd: string; tailwind: string; css: string; } export async function composeDesignMd(domain: string): Promise { const signals = await fetchSignals(domain); const designMd = await generateDesignMd(domain, signals); const styleguide = signals.styleguide as LiveStyleguide | null; const brand = (signals.brand as LiveBrand | null) ?? undefined; return { css: deriveCssVariables(domain, brand, styleguide), designMd, tailwind: deriveTailwindTheme(domain, brand, styleguide), }; } 53:T86d9,/** Verbatim port from designmd-supply. */ export interface LiveColor { hex: string; name: string | null; } export interface LiveBrand { colors?: LiveColor[]; } interface LiveStyleguideButton { backgroundColor?: string; borderColor?: string; borderRadius?: string; borderStyle?: string; borderWidth?: string; boxShadow?: string; color?: string; css?: string; fontFallbacks?: string[]; fontFamily?: string; fontSize?: string; fontWeight?: number; padding?: string; } interface LiveStyleguideCard { backgroundColor?: string; borderColor?: string; borderRadius?: string; borderStyle?: string; borderWidth?: string; boxShadow?: string; css?: string; padding?: string; textColor?: string; } interface LiveStyleguideText { fontFallbacks?: string[]; fontFamily?: string; fontSize?: string; fontWeight?: number; letterSpacing?: string; lineHeight?: string; } interface LiveStyleguideShadows { inner?: string; sm?: string; md?: string; lg?: string; xl?: string; } interface LiveStyleguideSpacing { xs?: string; sm?: string; md?: string; lg?: string; xl?: string; } interface LiveStyleguideFontLink { type?: "google" | "custom"; category?: string; displayName?: string; files?: Record; } export interface LiveStyleguide { mode?: "light" | "dark"; colors?: { accent?: string; background?: string; text?: string }; components?: { button?: { primary?: LiveStyleguideButton; secondary?: LiveStyleguideButton; link?: LiveStyleguideButton; }; card?: LiveStyleguideCard; }; typography?: { headings?: { h1?: LiveStyleguideText; h2?: LiveStyleguideText; h3?: LiveStyleguideText; h4?: LiveStyleguideText; }; p?: LiveStyleguideText; }; elementSpacing?: LiveStyleguideSpacing; shadows?: LiveStyleguideShadows; fontLinks?: Record; raw?: unknown; } /* ------------------------------------------------------------ */ /* Color utilities */ /* ------------------------------------------------------------ */ interface RGB { r: number; g: number; b: number; } function parseHex(hex: string | null | undefined): RGB | null { if (!hex) { return null; } const clean = hex.trim().replace(/^#/, ""); if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(clean)) { return null; } if (clean.length === 3) { return { b: Number.parseInt(clean[2] + clean[2], 16), g: Number.parseInt(clean[1] + clean[1], 16), r: Number.parseInt(clean[0] + clean[0], 16), }; } if (clean.length === 6 || clean.length === 8) { return { b: Number.parseInt(clean.slice(4, 6), 16), g: Number.parseInt(clean.slice(2, 4), 16), r: Number.parseInt(clean.slice(0, 2), 16), }; } return null; } function toHex(c: RGB): string { const h = (n: number) => Math.max(0, Math.min(255, Math.round(n))) .toString(16) .padStart(2, "0"); return `#${h(c.r)}${h(c.g)}${h(c.b)}`; } function mix(a: RGB, b: RGB, t: number): RGB { return { b: a.b + (b.b - a.b) * t, g: a.g + (b.g - a.g) * t, r: a.r + (b.r - a.r) * t, }; } const WHITE: RGB = { b: 255, g: 255, r: 255 }; const BLACK: RGB = { b: 0, g: 0, r: 0 }; function luminance({ r, g, b }: RGB): number { const f = (c: number) => { const s = c / 255; return s <= 0.039_28 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; }; return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b); } const isDark = (c: RGB) => luminance(c) < 0.5; const readable = (bg: RGB): string => (isDark(bg) ? "#ffffff" : "#0a0a0a"); function clamp(n: number, min: number, max: number): number { return Math.min(Math.max(n, min), max); } function formatNumber(n: number, decimals = 4): string { const fixed = n.toFixed(decimals); return fixed.replace(/\.?0+$/, ""); } function rgbToHslToken({ r, g, b }: RGB): string { const rr = r / 255; const gg = g / 255; const bb = b / 255; const max = Math.max(rr, gg, bb); const min = Math.min(rr, gg, bb); const delta = max - min; let h = 0; if (delta !== 0) { if (max === rr) { h = ((gg - bb) / delta) % 6; } else if (max === gg) { h = (bb - rr) / delta + 2; } else { h = (rr - gg) / delta + 4; } h *= 60; if (h < 0) { h += 360; } } const l = (max + min) / 2; const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); return `hsl(${formatNumber(h, 1)} ${formatNumber(s * 100, 1)}% ${formatNumber( l * 100, 1 )}%)`; } function normalizeCssColor( raw: string | null | undefined ): { color: string; opacity?: number } | null { if (!raw) { return null; } const value = raw.trim(); const hex = parseHex(value); if (hex) { return { color: rgbToHslToken(hex) }; } const hsl = value.match(/^hsla?$(.+)$$/i); if (hsl) { const body = hsl[1].trim(); const [channels, alphaPart] = body.includes("/") ? body.split("/") : [body, undefined]; const parts = channels .split(/[,\s]+/) .map((p) => p.trim()) .filter(Boolean); if (parts.length >= 3) { const h = Number.parseFloat(parts[0]); const s = Number.parseFloat(parts[1]); const l = Number.parseFloat(parts[2]); const alpha = alphaPart !== undefined ? Number.parseFloat(alphaPart) : parts[3] !== undefined ? parseFloat(parts[3]) : undefined; if ([h, s, l].every(Number.isFinite)) { return { color: `hsl(${formatNumber(h, 1)} ${formatNumber(s, 1)}% ${formatNumber( l, 1 )}%)`, opacity: typeof alpha === "number" && Number.isFinite(alpha) ? clamp(alpha, 0, 1) : undefined, }; } } } const rgb = value.match(/^rgba?$(.+)$$/i); if (rgb) { const body = rgb[1].trim(); const [channels, alphaPart] = body.includes("/") ? body.split("/") : [body, undefined]; const parts = channels .split(/[,\s]+/) .map((p) => p.trim()) .filter(Boolean); if (parts.length >= 3) { const toChannel = (part: string) => { const n = Number.parseFloat(part); return part.endsWith("%") ? (n / 100) * 255 : n; }; const color = { b: toChannel(parts[2]), g: toChannel(parts[1]), r: toChannel(parts[0]), }; const alpha = alphaPart !== undefined ? Number.parseFloat(alphaPart) : parts[3] !== undefined ? parseFloat(parts[3]) : undefined; if ([color.r, color.g, color.b].every(Number.isFinite)) { return { color: rgbToHslToken(color), opacity: typeof alpha === "number" && Number.isFinite(alpha) ? clamp(alpha, 0, 1) : undefined, }; } } } return null; } /* ------------------------------------------------------------ */ /* Length utilities */ /* ------------------------------------------------------------ */ function toPx(value: string | null | undefined): number | null { if (!value) { return null; } const m = value.trim().match(/^(-?\d*\.?\d+)\s*(px|rem|em)?$/i); if (!m) { return null; } const n = Number.parseFloat(m[1]); if (!Number.isFinite(n)) { return null; } const unit = (m[2] ?? "px").toLowerCase(); if (unit === "rem" || unit === "em") { return n * 16; } return n; } function toPxList(value: string | null | undefined): number[] { if (!value) { return []; } return value .trim() .split(/\s+/) .map((part) => toPx(part)) .filter((part): part is number => part !== null && part > 0); } function pxToRem(px: number): string { const rem = px / 16; const fixed = rem.toFixed(4); return `${fixed.replace(/\.?0+$/, "")}rem`; } /* ------------------------------------------------------------ */ /* Font utilities */ /* ------------------------------------------------------------ */ const SANS_FALLBACKS = ["ui-sans-serif", "system-ui", "sans-serif"]; const SERIF_FALLBACKS = ["ui-serif", "Georgia", "serif"]; const MONO_FALLBACKS = ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"]; function quoteIfNeeded(name: string): string { const trimmed = name.trim().replaceAll(/^["']|["']$/g, ""); if (!trimmed) { return trimmed; } if (/[^a-zA-Z0-9_-]/.test(trimmed) && !/^[a-z-]+$/.test(trimmed)) { return `"${trimmed}"`; } return trimmed; } function buildFontStack( primary: string | undefined, fallbacks: string[] | undefined, generic: string[] ): string { const seen = new Set(); const stack: string[] = []; const push = (name: string | undefined) => { if (!name) { return; } const trimmed = name.trim().replaceAll(/^["']|["']$/g, ""); if (!trimmed) { return; } const key = trimmed.toLowerCase(); if (seen.has(key)) { return; } seen.add(key); stack.push(quoteIfNeeded(trimmed)); }; push(primary); (fallbacks ?? []).forEach(push); generic.forEach(push); return stack.join(", "); } function classifyFamily( family: string | undefined, fontLinks: Record | undefined ): "sans" | "serif" | "mono" | "unknown" { if (!family) { return "unknown"; } const first = family .split(",")[0] ?.trim() .replaceAll(/^["']|["']$/g, ""); if (first && fontLinks?.[first]?.category) { const cat = fontLinks[first].category!.toLowerCase(); if (cat.includes("mono")) { return "mono"; } if (cat.includes("serif") && !cat.includes("sans")) { return "serif"; } if ( cat.includes("sans") || cat.includes("display") || cat.includes("hand") ) { return "sans"; } } const stripped = family.toLowerCase().replaceAll("sans-serif", ""); if (/\b(monospace|mono)\b/.test(family.toLowerCase())) { return "mono"; } if (/\bserif\b/.test(stripped)) { return "serif"; } if (/\bsans-serif\b/.test(family.toLowerCase())) { return "sans"; } return "unknown"; } function findMonoFamily( fontLinks: Record | undefined ): string | undefined { if (!fontLinks) { return undefined; } for (const [name, link] of Object.entries(fontLinks)) { if (link.category?.toLowerCase().includes("mono")) { return name; } } return undefined; } function findSerifFamily( fontLinks: Record | undefined, exclude: Set ): string | undefined { if (!fontLinks) { return undefined; } for (const [name, link] of Object.entries(fontLinks)) { if (exclude.has(name.toLowerCase())) { continue; } const cat = link.category?.toLowerCase() ?? ""; if (cat.includes("serif") && !cat.includes("sans")) { return name; } } return undefined; } interface FontTokens { sans: string; serif: string; mono: string; } function pickFonts(styleguide: LiveStyleguide | null | undefined): FontTokens { const body = styleguide?.typography?.p; const h1 = styleguide?.typography?.headings?.h1; const links = styleguide?.fontLinks; const sansFamily = body?.fontFamily ?? h1?.fontFamily; const sansFallbacks = body?.fontFallbacks ?? h1?.fontFallbacks; const sans = buildFontStack(sansFamily, sansFallbacks, SANS_FALLBACKS); const used = new Set(); if (sansFamily) { used.add(sansFamily.toLowerCase()); } let serif: string | undefined; const headingCandidates: (LiveStyleguideText | undefined)[] = [ h1, styleguide?.typography?.headings?.h2, styleguide?.typography?.headings?.h3, ]; for (const head of headingCandidates) { const fam = head?.fontFamily; if (!fam || used.has(fam.toLowerCase())) { continue; } if (classifyFamily(fam, links) === "serif") { serif = buildFontStack(fam, head?.fontFallbacks, SERIF_FALLBACKS); break; } } if (!serif) { const fromLinks = findSerifFamily(links, used); if (fromLinks) { serif = buildFontStack(fromLinks, undefined, SERIF_FALLBACKS); } } const monoFamily = findMonoFamily(links); const mono = buildFontStack(monoFamily, undefined, MONO_FALLBACKS); return { mono, sans, serif: serif ?? buildFontStack(undefined, undefined, SERIF_FALLBACKS), }; } /* ------------------------------------------------------------ */ /* Radius / shadows / spacing */ /* ------------------------------------------------------------ */ const MIN_SPACING_PX = 3.5; const DEFAULT_SPACING_PX = 4; const MAX_SPACING_PX = 5; function pickRadius(styleguide: LiveStyleguide | null | undefined): string { const cardRadius = toPx(styleguide?.components?.card?.borderRadius); const buttonRadius = toPx( styleguide?.components?.button?.primary?.borderRadius ); const px = cardRadius ?? buttonRadius; if (px === null) { return "0.5rem"; } const clamped = Math.min(Math.max(px, 2), 16); return pxToRem(clamped); } interface ShadowTokens { x: string; y: string; blur: string; spread: string; opacity: string; color: string; shadow2xs: string; xs: string; sm: string; base: string; md: string; lg: string; xl: string; shadow2xl: string; } interface ParsedShadow { x: string; y: string; blur: string; spread: string; color?: string; opacity?: number; } function normalizePxToken(value: string | undefined, fallback: string): string { const px = toPx(value); if (px === null) { return fallback; } return `${formatNumber(px, 2)}px`; } function splitShadowLayers(value: string): string[] { const layers: string[] = []; let depth = 0; let start = 0; for (let i = 0; i < value.length; i++) { const ch = value[i]; if (ch === "(") { depth++; } if (ch === ")") { depth = Math.max(0, depth - 1); } if (ch === "," && depth === 0) { layers.push(value.slice(start, i).trim()); start = i + 1; } } layers.push(value.slice(start).trim()); return layers.filter(Boolean); } function findColorSnippet(layer: string): string | null { const functional = layer.match(/\b(?:rgba?|hsla?)$[^)]+$/i); if (functional) { return functional[0]; } const hex = layer.match(/#[0-9a-f]{3,8}\b/i); return hex?.[0] ?? null; } function parseBoxShadow(value: string | null | undefined): ParsedShadow | null { if (!value || value.trim().toLowerCase() === "none") { return null; } const layer = splitShadowLayers(value)[0]; if (!layer) { return null; } const colorSnippet = findColorSnippet(layer); const color = normalizeCssColor(colorSnippet); const withoutColor = colorSnippet ? layer.replace(colorSnippet, " ") : layer; const lengths = withoutColor .replaceAll(/\binset\b/gi, " ") .split(/\s+/) .map((part) => part.trim()) .filter((part) => toPx(part) !== null); if (lengths.length < 2) { return null; } return { blur: normalizePxToken(lengths[2], "3px"), color: color?.color, opacity: color?.opacity, spread: normalizePxToken(lengths[3], "0px"), x: normalizePxToken(lengths[0], "0px"), y: normalizePxToken(lengths[1], "2px"), }; } function colorWithOpacity(color: string, opacity: number): string { const alpha = formatNumber(clamp(opacity, 0, 1), 4); const hsl = color.match(/^hsl$(.+)$$/i); if (hsl) { return `hsl(${hsl[1]} / ${alpha})`; } const rgb = color.match(/^rgb$(.+)$$/i); if (rgb) { return `rgb(${rgb[1]} / ${alpha})`; } return color; } function fallbackShadowColor(palette: Palette, mode: "light" | "dark"): string { const bg = parseHex(palette.background); const fg = parseHex(palette.foreground); if (mode === "dark") { return "hsl(0 0% 5%)"; } if (bg && fg) { return rgbToHslToken(mix(fg, bg, 0.15)); } return fg ? rgbToHslToken(fg) : "hsl(0 0% 5%)"; } function buildShadowTokens(base: { x: string; y: string; blur: string; spread: string; color: string; opacity: number; }): ShadowTokens { const half = base.opacity * 0.5; const heavy = Math.min(base.opacity * 2.5, 0.75); const main = colorWithOpacity(base.color, base.opacity); const quiet = colorWithOpacity(base.color, half); const loud = colorWithOpacity(base.color, heavy); const first = `${base.x} ${base.y} ${base.blur} ${base.spread}`; const second = (y: string, blur: string, spread: string) => `${base.x} ${y} ${blur} ${spread}`; return { base: `${first} ${main}, ${second("1px", "2px", "-1px")} ${main}`, blur: base.blur, color: base.color, lg: `${first} ${main}, ${second("4px", "6px", "-1px")} ${main}`, md: `${first} ${main}, ${second("2px", "4px", "-1px")} ${main}`, opacity: formatNumber(base.opacity, 4), shadow2xl: `${first} ${loud}`, shadow2xs: `${first} ${quiet}`, sm: `${first} ${main}, ${second("1px", "2px", "-1px")} ${main}`, spread: base.spread, x: base.x, xl: `${first} ${main}, ${second("8px", "10px", "-1px")} ${main}`, xs: `${first} ${quiet}`, y: base.y, }; } function pickShadows( styleguide: LiveStyleguide | null | undefined, palette: Palette, mode: "light" | "dark" ): ShadowTokens { const s = styleguide?.shadows; const candidates = [ s?.md, styleguide?.components?.card?.boxShadow, styleguide?.components?.button?.primary?.boxShadow, s?.sm, s?.lg, s?.xl, ]; const parsed = candidates.map(parseBoxShadow).find(Boolean); return buildShadowTokens({ blur: parsed?.blur ?? "3px", color: parsed?.color ?? fallbackShadowColor(palette, mode), opacity: parsed?.opacity ?? 0.18, spread: parsed?.spread ?? "0px", x: parsed?.x ?? "0px", y: parsed?.y ?? "2px", }); } function median(values: number[]): number | null { if (values.length === 0) { return null; } const sorted = [...values].toSorted((a, b) => a - b); const mid = Math.floor(sorted.length / 2); if (sorted.length % 2 === 1) { return sorted[mid]; } return (sorted[mid - 1] + sorted[mid]) / 2; } function pickSpacing(styleguide: LiveStyleguide | null | undefined): string { const sp = styleguide?.elementSpacing; const scaleCandidates = [ toPx(sp?.xs), toPx(sp?.sm) ? toPx(sp?.sm)! / 2 : null, toPx(sp?.md) ? toPx(sp?.md)! / 4 : null, toPx(sp?.lg) ? toPx(sp?.lg)! / 6 : null, toPx(sp?.xl) ? toPx(sp?.xl)! / 8 : null, ].filter((value): value is number => value !== null && value > 0); const componentPadding = [ styleguide?.components?.button?.primary?.padding, styleguide?.components?.button?.secondary?.padding, styleguide?.components?.card?.padding, ].flatMap((value) => toPxList(value)); const paddingCandidates = componentPadding.map((value) => value / 4); const picked = median([...scaleCandidates, ...paddingCandidates]) ?? DEFAULT_SPACING_PX; const safeUnit = clamp( Math.round(picked * 2) / 2, MIN_SPACING_PX, MAX_SPACING_PX ); return pxToRem(safeUnit); } function pickTrackingNormal( styleguide: LiveStyleguide | null | undefined ): string { const values = [ styleguide?.typography?.p?.letterSpacing, styleguide?.typography?.headings?.h1?.letterSpacing, ]; const value = values.find((v) => v && v.trim().toLowerCase() !== "normal"); if (!value) { return "0em"; } const trimmed = value.trim(); const m = trimmed.match(/^(-?\d*\.?\d+)\s*(px|rem|em)?$/i); if (!m) { return trimmed; } const n = Number.parseFloat(m[1]); if (!Number.isFinite(n)) { return "0em"; } const unit = (m[2] ?? "em").toLowerCase(); if (unit === "px") { return `${formatNumber(n / 16, 4)}em`; } return `${formatNumber(n, 4)}em`; } /* ------------------------------------------------------------ */ /* Palette */ /* ------------------------------------------------------------ */ interface Palette { background: string; foreground: string; card: string; cardForeground: string; popover: string; popoverForeground: string; primary: string; primaryForeground: string; secondary: string; secondaryForeground: string; muted: string; mutedForeground: string; accent: string; accentForeground: string; destructive: string; destructiveForeground: string; border: string; input: string; ring: string; chart: [string, string, string, string, string]; sidebar: string; sidebarForeground: string; sidebarPrimary: string; sidebarPrimaryForeground: string; sidebarAccent: string; sidebarAccentForeground: string; sidebarBorder: string; sidebarRing: string; } function buildPalette( brand: LiveBrand | undefined, styleguide: LiveStyleguide | null | undefined, mode: "light" | "dark" ): Palette { const sgMode = styleguide?.mode; const sourceIsLight = sgMode !== "dark"; const direct = mode === (sourceIsLight ? "light" : "dark"); const brandColors = (brand?.colors ?? []) .map((c) => parseHex(c.hex)) .filter((c): c is RGB => c !== null); const namedBrandAccent = parseHex( (brand?.colors ?? []).find((color) => /accent|secondary|highlight|support/i.test(color.name ?? "") )?.hex ); const sgBg = parseHex(styleguide?.colors?.background); const sgFg = parseHex(styleguide?.colors?.text); const sgAccent = parseHex(styleguide?.colors?.accent); const btnPrimary = styleguide?.components?.button?.primary; const btnSecondary = styleguide?.components?.button?.secondary; const btnLink = styleguide?.components?.button?.link; const card = styleguide?.components?.card; const sgPrimaryBg = parseHex(btnPrimary?.backgroundColor); const sgPrimaryFg = parseHex(btnPrimary?.color); const sgSecondaryBg = parseHex(btnSecondary?.backgroundColor); const sgSecondaryFg = parseHex(btnSecondary?.color); const sgLinkAccent = parseHex(btnLink?.backgroundColor ?? btnLink?.color); const sgCardBg = parseHex(card?.backgroundColor); const sgCardFg = parseHex(card?.textColor); const sgCardBorder = parseHex(card?.borderColor); const sgBtnBorder = parseHex( btnSecondary?.borderColor ?? btnPrimary?.borderColor ); const sourceAccent = sgAccent ?? sgLinkAccent ?? namedBrandAccent ?? brandColors[1] ?? null; let background: RGB; let foreground: RGB; let primary: RGB; let primaryForeground: RGB | null; let secondary: RGB; let secondaryForeground: RGB | null; let accent: RGB; let cardBg: RGB; let cardFg: RGB | null; let border: RGB | null; if (direct) { background = sgBg ?? (mode === "light" ? WHITE : { b: 21, g: 23, r: 23 }); foreground = sgFg ?? (mode === "light" ? { b: 10, g: 10, r: 10 } : { b: 244, g: 245, r: 245 }); primary = sgPrimaryBg ?? brandColors[0] ?? sourceAccent ?? foreground; primaryForeground = sgPrimaryBg ? sgPrimaryFg : null; accent = sourceAccent ?? primary; secondary = sgSecondaryBg ?? (sourceAccent ? mix(background, sourceAccent, 0.16) : undefined) ?? mix(background, primary, 0.18); secondaryForeground = sgSecondaryBg ? sgSecondaryFg : null; cardBg = sgCardBg ?? mix(background, foreground, 0.03); cardFg = sgCardFg; border = sgCardBorder ?? sgBtnBorder; } else { if (mode === "light") { background = WHITE; foreground = { b: 10, g: 10, r: 10 }; } else { background = { b: 21, g: 23, r: 23 }; foreground = { b: 244, g: 245, r: 245 }; } const basePrimary = sgPrimaryBg ?? brandColors[0] ?? sourceAccent ?? foreground; if (mode === "dark" && isDark(basePrimary)) { primary = mix(basePrimary, WHITE, 0.3); } else if (mode === "light" && !isDark(basePrimary)) { primary = mix(basePrimary, BLACK, 0.15); } else { primary = basePrimary; } primaryForeground = sgPrimaryBg ? sgPrimaryFg : null; const baseAccent = sourceAccent ?? primary; if (mode === "dark" && isDark(baseAccent)) { accent = mix(baseAccent, WHITE, 0.25); } else if (mode === "light" && !isDark(baseAccent)) { accent = mix(baseAccent, BLACK, 0.12); } else { accent = baseAccent; } const baseSecondary = sgSecondaryBg ?? mix(background, accent, mode === "light" ? 0.16 : 0.24) ?? mix(background, primary, 0.18); secondary = baseSecondary; secondaryForeground = sgSecondaryBg ? sgSecondaryFg : null; cardBg = mix(background, foreground, mode === "light" ? 0.03 : 0.07); cardFg = null; border = null; } const muted = mix(background, foreground, mode === "light" ? 0.05 : 0.1); const mutedFg = mix(foreground, background, 0.4); const finalBorder = border ?? mix(background, foreground, mode === "light" ? 0.12 : 0.2); const sidebar = mix(background, foreground, mode === "light" ? 0.04 : 0.05); const chartCandidates = [accent, primary, secondary, ...brandColors]; const seenChartColors = new Set(); const uniqueChartColors = chartCandidates.filter((color) => { const hex = toHex(color); if (seenChartColors.has(hex)) { return false; } seenChartColors.add(hex); return true; }); const chart: [RGB, RGB, RGB, RGB, RGB] = [ uniqueChartColors[0] ?? primary, uniqueChartColors[1] ?? mix(primary, WHITE, 0.3), uniqueChartColors[2] ?? mix(primary, BLACK, 0.25), uniqueChartColors[3] ?? mix(primary, WHITE, 0.55), uniqueChartColors[4] ?? mix(primary, BLACK, 0.45), ]; return { accent: toHex(accent), accentForeground: readable(accent), background: toHex(background), border: toHex(finalBorder), card: toHex(cardBg), cardForeground: toHex(cardFg ?? foreground), chart: chart.map(toHex) as [string, string, string, string, string], destructive: mode === "light" ? "#dc2626" : "#ef4444", destructiveForeground: "#ffffff", foreground: toHex(foreground), input: toHex(finalBorder), muted: toHex(muted), mutedForeground: toHex(mutedFg), popover: toHex(cardBg), popoverForeground: toHex(cardFg ?? foreground), primary: toHex(primary), primaryForeground: primaryForeground ? toHex(primaryForeground) : readable(primary), ring: toHex(accent), secondary: toHex(secondary), secondaryForeground: secondaryForeground ? toHex(secondaryForeground) : readable(secondary), sidebar: toHex(sidebar), sidebarAccent: toHex(accent), sidebarAccentForeground: readable(accent), sidebarBorder: toHex(finalBorder), sidebarForeground: toHex(foreground), sidebarPrimary: toHex(primary), sidebarPrimaryForeground: primaryForeground ? toHex(primaryForeground) : readable(primary), sidebarRing: toHex(accent), }; } /* ------------------------------------------------------------ */ /* Output formatting */ /* ------------------------------------------------------------ */ function paletteLines(p: Palette): string[] { return [ `--background: ${p.background};`, `--foreground: ${p.foreground};`, `--card: ${p.card};`, `--card-foreground: ${p.cardForeground};`, `--popover: ${p.popover};`, `--popover-foreground: ${p.popoverForeground};`, `--primary: ${p.primary};`, `--primary-foreground: ${p.primaryForeground};`, `--secondary: ${p.secondary};`, `--secondary-foreground: ${p.secondaryForeground};`, `--muted: ${p.muted};`, `--muted-foreground: ${p.mutedForeground};`, `--accent: ${p.accent};`, `--accent-foreground: ${p.accentForeground};`, `--destructive: ${p.destructive};`, `--destructive-foreground: ${p.destructiveForeground};`, `--border: ${p.border};`, `--input: ${p.input};`, `--ring: ${p.ring};`, `--chart-1: ${p.chart[0]};`, `--chart-2: ${p.chart[1]};`, `--chart-3: ${p.chart[2]};`, `--chart-4: ${p.chart[3]};`, `--chart-5: ${p.chart[4]};`, `--sidebar: ${p.sidebar};`, `--sidebar-foreground: ${p.sidebarForeground};`, `--sidebar-primary: ${p.sidebarPrimary};`, `--sidebar-primary-foreground: ${p.sidebarPrimaryForeground};`, `--sidebar-accent: ${p.sidebarAccent};`, `--sidebar-accent-foreground: ${p.sidebarAccentForeground};`, `--sidebar-border: ${p.sidebarBorder};`, `--sidebar-ring: ${p.sidebarRing};`, ]; } function nonColorLines( fonts: FontTokens, radius: string, shadows: ShadowTokens, trackingNormal?: string, spacing?: string ): string[] { const lines: string[] = []; lines.push(`--font-sans: ${fonts.sans};`); lines.push(`--font-serif: ${fonts.serif};`); lines.push(`--font-mono: ${fonts.mono};`); lines.push(`--radius: ${radius};`); lines.push(`--shadow-x: ${shadows.x};`); lines.push(`--shadow-y: ${shadows.y};`); lines.push(`--shadow-blur: ${shadows.blur};`); lines.push(`--shadow-spread: ${shadows.spread};`); lines.push(`--shadow-opacity: ${shadows.opacity};`); lines.push(`--shadow-color: ${shadows.color};`); lines.push(`--shadow-2xs: ${shadows.shadow2xs};`); lines.push(`--shadow-xs: ${shadows.xs};`); lines.push(`--shadow-sm: ${shadows.sm};`); lines.push(`--shadow: ${shadows.base};`); lines.push(`--shadow-md: ${shadows.md};`); lines.push(`--shadow-lg: ${shadows.lg};`); lines.push(`--shadow-xl: ${shadows.xl};`); lines.push(`--shadow-2xl: ${shadows.shadow2xl};`); if (trackingNormal) { lines.push(`--tracking-normal: ${trackingNormal};`); } if (spacing) { lines.push(`--spacing: ${spacing};`); } return lines; } function indent(lines: string[]): string { return lines.map((l) => ` ${l}`).join("\n"); } function themeInlineBlock(): string { const lines = [ `--color-background: var(--background);`, `--color-foreground: var(--foreground);`, `--color-card: var(--card);`, `--color-card-foreground: var(--card-foreground);`, `--color-popover: var(--popover);`, `--color-popover-foreground: var(--popover-foreground);`, `--color-primary: var(--primary);`, `--color-primary-foreground: var(--primary-foreground);`, `--color-secondary: var(--secondary);`, `--color-secondary-foreground: var(--secondary-foreground);`, `--color-muted: var(--muted);`, `--color-muted-foreground: var(--muted-foreground);`, `--color-accent: var(--accent);`, `--color-accent-foreground: var(--accent-foreground);`, `--color-destructive: var(--destructive);`, `--color-destructive-foreground: var(--destructive-foreground);`, `--color-border: var(--border);`, `--color-input: var(--input);`, `--color-ring: var(--ring);`, `--color-chart-1: var(--chart-1);`, `--color-chart-2: var(--chart-2);`, `--color-chart-3: var(--chart-3);`, `--color-chart-4: var(--chart-4);`, `--color-chart-5: var(--chart-5);`, `--color-sidebar: var(--sidebar);`, `--color-sidebar-foreground: var(--sidebar-foreground);`, `--color-sidebar-primary: var(--sidebar-primary);`, `--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);`, `--color-sidebar-accent: var(--sidebar-accent);`, `--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);`, `--color-sidebar-border: var(--sidebar-border);`, `--color-sidebar-ring: var(--sidebar-ring);`, ``, `--font-sans: var(--font-sans);`, `--font-mono: var(--font-mono);`, `--font-serif: var(--font-serif);`, ``, `--radius-sm: calc(var(--radius) - 4px);`, `--radius-md: calc(var(--radius) - 2px);`, `--radius-lg: var(--radius);`, `--radius-xl: calc(var(--radius) + 4px);`, ``, `--shadow-2xs: var(--shadow-2xs);`, `--shadow-xs: var(--shadow-xs);`, `--shadow-sm: var(--shadow-sm);`, `--shadow: var(--shadow);`, `--shadow-md: var(--shadow-md);`, `--shadow-lg: var(--shadow-lg);`, `--shadow-xl: var(--shadow-xl);`, `--shadow-2xl: var(--shadow-2xl);`, ]; return `@theme inline {\n${indent(lines)}\n}`; } const LAYER_BASE = `@layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } }`; /* ------------------------------------------------------------ */ /* Public API */ /* ------------------------------------------------------------ */ export function deriveTailwindTheme( _domain: string, brand?: LiveBrand, styleguide?: LiveStyleguide | null ): string { const light = buildPalette(brand, styleguide, "light"); const dark = buildPalette(brand, styleguide, "dark"); const fonts = pickFonts(styleguide); const radius = pickRadius(styleguide); const lightShadows = pickShadows(styleguide, light, "light"); const darkShadows = pickShadows(styleguide, dark, "dark"); const spacing = pickSpacing(styleguide); const trackingNormal = pickTrackingNormal(styleguide); const rootBody = [ ...paletteLines(light), ...nonColorLines(fonts, radius, lightShadows, trackingNormal, spacing), ]; const darkBody = [ ...paletteLines(dark), ...nonColorLines(fonts, radius, darkShadows), ]; return [ `@import "tailwindcss";`, ``, `@custom-variant dark (&:is(.dark *));`, ``, `:root {`, indent(rootBody), `}`, ``, `.dark {`, indent(darkBody), `}`, ``, themeInlineBlock(), ``, LAYER_BASE, ``, ].join("\n"); } export function deriveCssVariables( domain: string, brand?: LiveBrand, styleguide?: LiveStyleguide | null ): string { const light = buildPalette(brand, styleguide, "light"); const dark = buildPalette(brand, styleguide, "dark"); const fonts = pickFonts(styleguide); const radius = pickRadius(styleguide); const lightShadows = pickShadows(styleguide, light, "light"); const darkShadows = pickShadows(styleguide, dark, "dark"); const spacing = pickSpacing(styleguide); const trackingNormal = pickTrackingNormal(styleguide); const rootBody = [ ...paletteLines(light), ...nonColorLines(fonts, radius, lightShadows, trackingNormal, spacing), ]; const darkBody = [ ...paletteLines(dark), ...nonColorLines(fonts, radius, darkShadows), ]; return [ `/* ${domain} — design tokens (vanilla CSS) */`, `:root {`, indent(rootBody), `}`, ``, `.dark {`, indent(darkBody), `}`, ``, ].join("\n"); } 54:Ta9e,/** DESIGN.md prompt spec and helpers. */ export const DESIGN_MD_SPEC_SUMMARY = `DESIGN.md is a self-contained plain-text representation of a design system. It contains optional YAML frontmatter with normative machine-readable tokens and a Markdown body with human-readable rationale. YAML frontmatter: - Must begin and end with a line containing exactly --- - Common top-level keys: version, name, description, colors, typography, rounded, spacing, components - Color values must be SRGB hex strings beginning with # - Typography tokens may include fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, and fontVariation - Dimension units may be px, em, or rem; unitless lineHeight is allowed - Token references use {path.to.token}; component tokens may reference composite values Markdown body sections should appear in this order when relevant: 1. Overview 2. Colors 3. Typography 4. Layout 5. Elevation & Depth 6. Shapes 7. Components 8. Do's and Don'ts Recommended token names include colors primary, secondary, tertiary, neutral, surface, on-surface, error; typography headline-display, headline-lg, headline-md, body-lg, body-md, body-sm, label-lg, label-md, label-sm; rounded none, sm, md, lg, xl, full.`; export const DESIGN_MD_SYSTEM = "You are a senior design systems writer. Produce concise, implementation-grade DESIGN.md files that follow the requested spec."; export function buildDesignMdPrompt(input: { domain: string; contextStyleguide: unknown; screenshotUrl?: string; markdown?: string; }): string { const markdownExcerpt = input.markdown ? input.markdown.slice(0, 3000) : "No Markdown returned."; return `Generate a polished DESIGN.md document for ${input.domain}. Follow this Google DESIGN.md specification summary: ${DESIGN_MD_SPEC_SUMMARY} Use the Context.dev extracted styleguide as the primary source of design tokens. Use the screenshot URL and Markdown page content as supporting evidence for tone, component usage, and layout guidance. Requirements: - Return only DESIGN.md content, no commentary before or after it. - Include YAML frontmatter with version: alpha, name, description, colors, typography, rounded, spacing, and components. - Include the Markdown sections in the specified order. - Prefer precise values present in the Context.dev payload. - If data is missing, infer conservatively and state uncertainty in prose, not in token values. - Make Do's and Don'ts concrete enough for another AI agent to use. Context.dev styleguide JSON: ${JSON.stringify(input.contextStyleguide, null, 2).slice(0, 18_000)} Screenshot URL: ${input.screenshotUrl ?? "No screenshot returned."} Homepage Markdown excerpt: ${markdownExcerpt}`; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@dawn-ai/sdk",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dawn-ai%2Fsdk","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@dawn-ai/sdk"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://agentcn.vercel.app/r/langgraph/extract-design-md.json","proxyUrl":"https://shadcnregistry.com/r/agentcn/langgraph-extract-design-md","itemId":"@agentcn/langgraph-extract-design-md"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"index.ts","content":"import { agent } from \"@dawn-ai/sdk\";\n\nexport default agent({\n description:\n \"Dawn agent that turns a domain into a self-contained DESIGN.md — gathering the styleguide, screenshot, and homepage Markdown from context.dev, then composing the document in a single Claude call with the screenshot as a vision image.\",\n model: \"anthropic/claude-sonnet-4-6\",\n systemPrompt:\n \"You turn a website into a self-contained DESIGN.md design-system document.\\n\\nGiven a domain:\\n\\n1. Call `compose_design_md` once with the domain. It gathers the styleguide,\\n brand, screenshot, and homepage Markdown from context.dev and returns three\\n artifacts: `designMd`, `tailwind` (a Tailwind v4 `@theme` block), and `css`\\n (vanilla CSS `:root` tokens).\\n2. Present all three verbatim, each in its own fenced code block under a clear\\n heading (DESIGN.md, Tailwind v4, CSS variables). Do not summarize, reformat,\\n or alter their contents.\\n\",\n});\n","type":"registry:file","target":"index.ts"},{"path":"instructions.md","content":"You turn a website into a self-contained DESIGN.md design-system document.\n\nGiven a domain:\n\n1. Call `compose_design_md` once with the domain. It gathers the styleguide,\n brand, screenshot, and homepage Markdown from context.dev and returns three\n artifacts: `designMd`, `tailwind` (a Tailwind v4 `@theme` block), and `css`\n (vanilla CSS `:root` tokens).\n2. Present all three verbatim, each in its own fenced code block under a clear\n heading (DESIGN.md, Tailwind v4, CSS variables). Do not summarize, reformat,\n or alter their contents.\n","type":"registry:file","target":"instructions.md"},{"path":"lib/compose.ts","content":"$52","type":"registry:file","target":"lib/compose.ts"},{"path":"lib/derive-tokens.ts","content":"$53","type":"registry:file","target":"lib/derive-tokens.ts"},{"path":"lib/design-md.ts","content":"$54","type":"registry:file","target":"lib/design-md.ts"},{"path":"tools/compose_design_md.ts","content":"import { composeDesignMd } from \"../lib/compose\";\n\nexport default async (inputData: { readonly domain: string }) => {\n const { domain } = inputData;\n const normalized = domain\n .trim()\n .toLowerCase()\n .replace(/^https?:\\/\\//, \"\")\n .replace(/^www\\./, \"\")\n .replace(/\\/.*$/, \"\");\n if (!normalized) {\n return { error: `\"${domain}\" is not a valid domain.` };\n }\n return await composeDesignMd(normalized);\n};\n","type":"registry:file","target":"tools/compose_design_md.ts"}]}]]}],"$L55"]}]

Extract DESIGN.md Agent

Installation

Files

lib

tools

Styles