4e: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"] 4f: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"] 50: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"] 51:Te87,# Mission Generate a coherent **pack** of brand-aligned SVG visual assets for SaaS and digital products. Output structured, editable SVGs that teams can ship directly in products, websites, landing pages, design systems, and marketing workflows. # Supported asset types - Icons (feature, navigation, status) - Empty states - Hero illustrations - Badges and labels (for example "new feature", "beta", "pro") - Feature graphics - Onboarding visuals - Changelog illustrations - Dashboard or modal visuals # Workflow 1. If the user has not provided enough context, ask for at least one of: - company website or domain; - product or feature description; - explicit brand profile (colors, tone, audience, product category). 2. Load the `brand-visual-assets` skill and run its pack workflow end to end. 3. Use the `context-dev` MCP connection through `connection_search` to discover Context.dev tools. Use `search_docs` when you need exact SDK method or parameter names, then use `execute` to gather source data. 4. Through Context.dev MCP, retrieve at minimum: - brand data for the domain, including name, description, colors, logos, industry labels, and social/profile fields when available; - homepage or provided page markdown when a URL is available; - styleguide/design-system data for colors, typography, spacing, shadows, and component cues when available. 5. Treat Context.dev brand, content, and styleguide outputs as the source of truth for brand name, positioning, palette, typography cues, logos, and factual product claims. 6. Use up to four reference images when they will improve visual fidelity. Prefer Context.dev logo, backdrop, or product screenshot URLs; state what to preserve from each reference and what should change for the new asset. 7. Generate each finalized asset by calling `generate_svg_with_arrow`, which uses `quiverai/arrow-1.1` through Vercel AI Gateway's image-generation endpoint. Use the returned SVG markup as the draft asset, then score it against the skill references before including it in the final pack. 8. If `generate_svg_with_arrow` fails because AI Gateway credentials are missing or the upstream image model errors, stop and report the configuration or model failure. Do not fabricate replacement SVGs. 9. If the Context.dev MCP connection fails because the API key is missing, invalid, rate-limited, or unavailable, stop and report the configuration or API failure. Do not fabricate brand facts. # Output contract Return: 1. A short "Brand brief" section summarizing palette, typography cues, tone, and Context.dev source URLs. 2. An "Asset pack" section listing each asset with filename suggestion, purpose, and dimensions. 3. Each asset under a Markdown heading that includes the suggested filename, followed by exactly one fenced `svg` block containing SVG markup only. Do not put filenames inside `svg` fences. 4. A short "Usage notes" section covering light/dark theming, recommended sizes, and where each asset fits (marketing page, in-app empty state, onboarding, and so on). 5. An "Assumptions" section only when visual choices rely on inference rather than explicit source data. # Guardrails - Do not invent customer logos, testimonials, statistics, or product claims. - Do not expose the Context.dev API key or any environment variables. - Do not output raster-only images or generic image-generation prompts when SVG is expected. - Do not skip brand extraction and guess a palette when a domain or brand profile was provided. - Do not use a language-model subagent for `quiverai/arrow-1.1`; it is an image model and must be called through `generate_svg_with_arrow`. 52:T714,# Per-asset brief template Include every field in each `generate_svg_with_arrow` brief: | Field | Value | | --- | --- | | `assetType` | `icon` \| `empty-state` \| `hero` \| `badge` \| `feature-graphic` \| `onboarding` \| `changelog` \| `dashboard-modal` | | `filename` | kebab-case ending in `.svg` | | `purpose` | one sentence on where it ships | | `dimensions` | viewBox or aspect ratio (for example `1200x630` hero, `24x24` icon) | | `palette` | named colors with hex from the locked brand profile | | `subject` | what to depict | | `text` | exact copy if the SVG includes text | | `styleNotes` | stroke weight, corner radius, illustration density, metaphors to use or avoid | | `tasteNotes` | what should make the asset feel sharp, premium, and brand-specific | | `referenceImages` | optional public image URLs or base64 references from Context.dev logos/backdrops/screenshots when they materially improve style, palette, typography, or composition | | `preserveFromReference` | when references are used, the exact style, color relationships, layout, typography direction, or structure to preserve | | `changeFromReference` | when references are used, the subject, dimensions, or asset-specific details that should change | | `constraints` | for example `currentColor`, no gradients, dark-mode safe | Every brief must include at least one negative constraint, such as "avoid generic globe/network art", "avoid repeated decorative dot grids", or "avoid stock SaaS dashboard cards". Negative constraints prevent the SVG tool from falling back to obvious visual clichés. Keep the brief compact and structured. Prefer one concrete vector concept over a long prose dump of brand facts. Use reference images for brand style or composition when Context.dev returns suitable logos, backdrops, or source images. 53:T531,# Visual scorecard Score the full pack from 1 to 10 before accepting it. Accept only scores above 8. | Dimension | Pass condition | | --- | --- | | Composition | One clear focal idea; no chaotic crossings, accidental overlaps, or unbalanced empty regions | | Brand specificity | Visual metaphor comes from the brand/product context, not generic SaaS decoration | | Coherence | Hero, icons, and badge share stroke weight, corner radius, palette, and geometry language | | Craft | Pixel-aligned icons, centered badge text, clean curves, purposeful grouping | | Implementation | Valid SVG, semantic groups, themeable icons, no raster embeds, no bloated filler | ## Automatic score caps - Cap at 6 if the hero relies on random node networks, globes, floating dashboard cards, or disconnected UI wireframes. - Cap at 6 if icons use a visibly different stroke weight or visual style from the hero. - Cap at 7 if any icon is muddy at 24px or unclear at 16px. - Cap at 7 if the badge text is not optically centered. - Cap at 7 if the SVG uses hardcoded backgrounds where transparency or theming is expected. - Cap at 8 if the pack is clean but generic. ## Regeneration note When a score is capped, name the cap reason in the next `generate_svg_with_arrow` brief and ask for a specific replacement metaphor, not vague polish. 54:T5fb,# Visual taste bar Reject and regenerate any asset that feels generic, cluttered, or decorative without purpose. ## Prefer - One memorable focal idea per asset - Asymmetric composition with deliberate negative space - Brand-specific geometry, product metaphors, or motion cues from the source website - A restrained palette: primary, one accent, neutral, and background - Simple reusable structures: ``, ``, or grouped motifs instead of dozens of copied primitives - Icons that read at 16px and feel crisp at 24px - Integrated compositions where interface, data, and product metaphors interact as one scene ## Avoid - Generic fintech globes, random network nodes, stock dashboard cards, and floating rectangles unless the brief explicitly asks for them - Split scenes where a literal UI wireframe sits beside unrelated abstract lines or floating nodes - Decorative dot grids that do not support the composition - Centered "everything connected to everything" layouts - Gradients, shadows, or glows used to compensate for weak composition - Text inside tiny icons - Overly literal currency symbols unless the asset specifically needs payment or currency meaning ## Regeneration prompt pattern When an asset fails this bar, regenerate only that asset with a tighter note: > The previous asset is too generic. Keep the same palette and dimensions, but > replace the visual metaphor with [specific direction]. Use fewer shapes, stronger > negative space, semantic groups, and no decorative filler. 55:Tb64,--- name: brand-visual-assets description: Scope and ship a brand-aligned pack of SVG assets for SaaS products. Use when the user wants a visual pack, feature launch assets, icons, empty states, hero illustrations, badges, feature graphics, onboarding visuals, changelog art, or dashboard/modal graphics. --- # Pack workflow Run these steps in order. A **pack** is one coherent set of SVG assets that share palette, stroke language, and illustration metaphors. ## 1. Scope the pack List every asset the run will produce: type, filename, purpose, and channel (marketing page, in-app empty state, onboarding, and so on). **Done when:** every requested asset has a named slot; no orphan types remain. If the user gave no item list, load `references/default-pack.md` and adopt that pack unless they named specific types or channels. ## 2. Lock the brand profile Capture the palette and tone the pack will obey from Context.dev output or the user's explicit brand profile. **Done when:** primary and secondary hex colors, neutral/background tones, typography personality, logo constraints, product category, audience, and tone adjectives are all recorded before any brief is written. Also collect up to four useful reference images when available, such as Context.dev logo URLs, brand backdrops, or product screenshots. Use them only when they improve style, color, layout, or typography fidelity. ## 3. Write a brief per asset For each pack slot, compose one self-contained **brief** for `generate_svg_with_arrow`. **Done when:** every slot has a brief containing every field in `references/brief-template.md`. ## 4. Generate Call `generate_svg_with_arrow` once per brief. Pass the full brief, asset type, filename, dimensions, and any reference images selected for that asset. **Done when:** every brief has a matching tool result with `ok: true` and SVG markup. If the tool reports missing AI Gateway credentials or an upstream model error, stop and report the configuration failure instead of inventing SVGs. ## 5. Score the pack Run the pack through the scorecard before accepting it. **Done when:** every asset passes `references/quality-bar.md`, `references/consistency.md`, `references/visual-taste.md`, and scores above 8 on `references/scorecard.md`; any asset that is ugly, generic, off-palette, visually incoherent, or scores 8 or below is regenerated individually with a tighter brief, not the whole pack unless the brand profile changed. ## 6. Deliver the SVGs Return the actual final SVG markup for every accepted asset. Put each asset under a Markdown heading that includes the filename, followed by exactly one fenced `svg` block containing only that asset's SVG markup. **Done when:** the final answer contains one fenced `svg` block per accepted asset. A summary that says the pack is complete but omits the SVG blocks is a failed delivery and must be corrected before finishing. 56:T454c,import { generateImage, NoImageGeneratedError } from "ai"; import { defineTool } from "eve/tools"; import { z } from "zod"; const ARROW_MODEL = "quiverai/arrow-1.1"; const RESPONSE_PREVIEW_LENGTH = 1200; const MAX_ARROW_REFERENCES = 4; const BASE64_PATTERN = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/u; const MIN_ACCENT_LIGHTNESS = 0.15; const MAX_ACCENT_LIGHTNESS = 0.9; const MIN_ACCENT_SATURATION = 0.25; const referenceImageSchema = z.union([ z.object({ url: z .string() .url() .refine(isHttpUrl, { message: "Reference image URL must use http or https.", }) .describe("Public HTTP(S) image URL to use as a style or composition reference."), }), z.object({ base64: z .string() .min(1) .refine(isBase64Payload, { message: "Reference image must be a standard base64 payload.", }) .describe("Base64-encoded PNG, JPEG, WebP, GIF, or SVG reference image payload."), }), ]); const inputSchema = z.object({ filename: z .string() .min(1) .describe("Suggested SVG filename, for example feature-hero.svg."), assetType: z .string() .min(1) .describe("Asset type, for example hero illustration, icon, badge, or empty state."), brief: z .string() .min(20) .describe("Self-contained creative brief with brand profile, subject, style notes, and constraints."), dimensions: z .string() .min(1) .describe("Intended dimensions or viewBox, for example 1200x720 or 0 0 64 64."), referenceImages: z .array(referenceImageSchema) .max(MAX_ARROW_REFERENCES) .optional() .describe( "Optional Quiver reference images for style, palette, composition, or typography. Arrow 1.1 supports up to 4.", ), }); type GenerateSvgInput = z.infer; type ReferenceImageInput = z.infer; type QuiverReference = { base64: string } | { url: string }; type GenerateSvgOutput = | { byteLength: number; filename: string; mediaType: "image/svg+xml"; model: typeof ARROW_MODEL; ok: true; revisedPrompt?: string; svg: string; } | { error: string; filename: string; missingEnv?: "AI_GATEWAY_API_KEY or VERCEL_OIDC_TOKEN"; ok: false; responsePreview?: string; status?: number; }; export default defineTool({ description: "Generate one editable SVG asset by calling the Quiver Arrow image model through Vercel AI Gateway. Use once per finalized asset brief.", inputSchema, async execute(input): Promise { const credential = readGatewayCredential(); if (!credential) { return { ok: false, filename: input.filename, error: "AI Gateway credentials are required to call quiverai/arrow-1.1. Set AI_GATEWAY_API_KEY or VERCEL_OIDC_TOKEN.", missingEnv: "AI_GATEWAY_API_KEY or VERCEL_OIDC_TOKEN", }; } const prompt = buildPrompt(input); const generatedSvg = await generateSvgWithGateway({ prompt, referenceImages: input.referenceImages, }); if (!generatedSvg.ok) { return { ok: false, filename: input.filename, error: generatedSvg.error, responsePreview: generatedSvg.responsePreview, }; } const rawSvg = generatedSvg.svg; if (!looksLikeSvg(rawSvg)) { return { ok: false, filename: input.filename, error: "Quiver Arrow returned data that does not look like SVG markup.", responsePreview: preview(rawSvg), }; } if (!hasViewBox(rawSvg)) { return { ok: false, filename: input.filename, error: "Quiver Arrow returned SVG markup without a viewBox.", responsePreview: preview(rawSvg), }; } if (hasUnsafeSvgContent(rawSvg)) { return { ok: false, filename: input.filename, error: "Quiver Arrow returned SVG markup with raster or active content.", responsePreview: preview(rawSvg), }; } const normalizedSvg = normalizeViewBox(rawSvg, input); const themeableSvg = enforceThemeableIconSvg(normalizedSvg, input); const svg = ensureAccessibleSvg(themeableSvg, input); return { ok: true, filename: input.filename, model: ARROW_MODEL, mediaType: "image/svg+xml", byteLength: Buffer.byteLength(svg, "utf8"), svg, }; }, toModelOutput(output) { return { type: "json", value: output, }; }, }); function readGatewayCredential(): string | undefined { return ( process.env.AI_GATEWAY_API_KEY?.trim() || process.env.VERCEL_OIDC_TOKEN?.trim() ); } function buildPrompt(input: GenerateSvgInput): string { return [ JSON.stringify( { subject: input.brief, intended_use: `${input.assetType} saved as ${input.filename}`, style: "Production-ready SVG/vector output. Use one clear vector concept, clean geometry, and deliberate negative space.", composition: `Fit ${input.dimensions}. Prefer a simple, balanced composition over dense UI mockups or many small details.`, color_palette: "Use only colors named in the brief. For icons, use currentColor for strokes and no fixed fills except one purposeful accent if requested.", typography: "Avoid text unless the brief explicitly requires exact copy. If text is required, keep it short and optically centered.", preserve_from_reference: "When referenceImages are provided, preserve the reference style, color relationships, composition, and typography direction.", change_from_reference: "Change only the subject, dimensions, and asset-specific details requested in the brief.", constraints: "Return complete editable SVG markup only. Include viewBox, title, desc, and semantic group ids. Do not embed raster images. Avoid generic SaaS filler such as globes, random node networks, decorative dot grids, and disconnected floating dashboards.", }, null, 2, ), ].join("\n"); } async function generateSvgWithGateway({ prompt, referenceImages, }: { prompt: string; referenceImages?: ReferenceImageInput[]; }): Promise<{ ok: true; svg: string } | { error: string; ok: false; responsePreview?: string }> { try { const { image } = await generateImage({ model: ARROW_MODEL, prompt: buildImagePrompt({ prompt, referenceImages }), n: 1, providerOptions: { quiverai: { operation: "generate", instructions: "Return a complete SVG document only. The SVG must be editable markup, not raster data.", maxOutputTokens: 6000, references: normalizeReferenceImages(referenceImages), temperature: 0.45, topP: 0.9, }, }, }); return { ok: true, svg: new TextDecoder().decode(image.uint8Array).trim(), }; } catch (error) { if (NoImageGeneratedError.isInstance(error)) { return { ok: false, error: "AI Gateway did not return SVG image data.", responsePreview: preview(String(error.cause ?? error.message)), }; } return { ok: false, error: "Quiver Arrow SVG generation failed through AI Gateway.", responsePreview: preview(errorMessage(error)), }; } } function buildImagePrompt({ prompt, referenceImages, }: { prompt: string; referenceImages?: ReferenceImageInput[]; }): string | { images: string[]; text: string } { const base64Images = referenceImages?.flatMap((referenceImage) => "base64" in referenceImage ? [referenceImage.base64] : [], ) ?? []; if (base64Images.length === 0) { return prompt; } return { text: prompt, images: base64Images, }; } function normalizeReferenceImages( referenceImages: ReferenceImageInput[] | undefined, ): QuiverReference[] | undefined { if (!referenceImages || referenceImages.length === 0) { return undefined; } return referenceImages.map((referenceImage) => { if ("url" in referenceImage) { return { url: referenceImage.url }; } return { base64: referenceImage.base64 }; }); } function errorMessage(error: unknown): string { if (error instanceof Error) { return error.message; } return String(error); } function looksLikeSvg(value: string): boolean { return value.includes(""); } function hasViewBox(value: string): boolean { return /\sviewBox\s*=/iu.test(value); } function hasUnsafeSvgContent(svg: string): boolean { return ( /<\s*(script|foreignObject|iframe|object|embed|image)\b/iu.test(svg) || /\son[a-z]+\s*=/iu.test(svg) || /\b(?:href|xlink:href)\s*=\s*["']\s*(?:javascript:|data:(?!image\/svg\+xml)|https?:\/\/|\/\/)/iu.test(svg) ); } type ViewBox = { height: number; minX: number; minY: number; width: number; }; function normalizeViewBox( svg: string, input: z.infer, ): string { const targetViewBox = parseTargetViewBox(input.dimensions); const sourceViewBox = parseSvgViewBox(svg); if (!targetViewBox || !sourceViewBox || sameViewBox(sourceViewBox, targetViewBox)) { return svg; } const innerSvg = extractInnerSvg(svg); if (!innerSvg) { return svg; } const scale = Math.min( targetViewBox.width / sourceViewBox.width, targetViewBox.height / sourceViewBox.height, ); const scaledWidth = sourceViewBox.width * scale; const scaledHeight = sourceViewBox.height * scale; const translateX = targetViewBox.minX + (targetViewBox.width - scaledWidth) / 2 - sourceViewBox.minX * scale; const translateY = targetViewBox.minY + (targetViewBox.height - scaledHeight) / 2 - sourceViewBox.minY * scale; const transform = `translate(${formatNumber(translateX)} ${formatNumber(translateY)}) scale(${formatNumber(scale)})`; const outerTag = buildSvgOpeningTag(svg, targetViewBox); return `${outerTag}\n\n${innerSvg.trim()}\n\n`; } function parseTargetViewBox(value: string): ViewBox | undefined { const viewBoxParts = value .trim() .split(/\s+/u) .map((part) => Number(part)); if (viewBoxParts.length === 4 && viewBoxParts.every(Number.isFinite)) { const [minX, minY, width, height] = viewBoxParts; if (width > 0 && height > 0) { return { height, minX, minY, width }; } } const sizeMatch = /^(?\d+(?:\.\d+)?)x(?\d+(?:\.\d+)?)$/iu.exec( value.trim(), ); if (!sizeMatch?.groups) { return undefined; } const width = Number(sizeMatch.groups.width); const height = Number(sizeMatch.groups.height); if (!(width > 0 && height > 0)) { return undefined; } return { height, minX: 0, minY: 0, width }; } function parseSvgViewBox(svg: string): ViewBox | undefined { const match = /\sviewBox\s*=\s*["']([^"']+)["']/iu.exec(svg); if (!match?.[1]) { return undefined; } return parseTargetViewBox(match[1]); } function sameViewBox(left: ViewBox, right: ViewBox): boolean { return ( left.minX === right.minX && left.minY === right.minY && left.width === right.width && left.height === right.height ); } function extractInnerSvg(svg: string): string | undefined { const match = /]*>([\s\S]*?)<\/svg>/iu.exec(svg); return match?.[1]; } function buildSvgOpeningTag(svg: string, viewBox: ViewBox): string { const openingMatch = /]*>/iu.exec(svg); const openingTag = openingMatch?.[0] ?? '

Brand Visual Asset Generator

Installation

Files

~

Styles