@easybits.cloud/html-tailwind-generator 0.2.84 → 0.2.86

package/dist/directions.d.ts

@@ -51,6 +51,8 @@ declare function generateHeroPreview(options: {
     model?: string;
     /** Called with partial HTML as it streams in */
     onChunk?: (partialHtml: string) => void;
+    /** Reference image data URL — AI will replicate this design style */
+    referenceImage?: string;
 }): Promise<string>;
 
 export { type DesignDirection, DesignDirectionSchema, type DirectionsOptions, generateDirections, generateHeroPreview };

package/dist/directions.js

@@ -53,7 +53,7 @@ async function generateDirections(options) {
   const { object } = await generateObject({
     model,
     schema: z.object({
-      directions: z.array(DesignDirectionSchema).length(count)
+      directions: z.array(DesignDirectionSchema).describe(`Exactly ${count} design directions`)
     }),
     system: DIRECTIONS_SYSTEM,
     prompt: `Project brief: "${prompt}"
@@ -63,7 +63,7 @@ Generate ${count} design directions. Make them as visually distinct as possible.
   return object.directions;
 }
 async function generateHeroPreview(options) {
-  const { prompt, direction, anthropicApiKey, openaiApiKey, product = "landing", model: modelId, onChunk } = options;
+  const { prompt, direction, anthropicApiKey, openaiApiKey, product = "landing", model: modelId, onChunk, referenceImage } = options;
   const model = await resolveModel({
     openaiApiKey,
     anthropicApiKey,
@@ -118,10 +118,7 @@ Start with: <link href="${fontsUrl}" rel="stylesheet">
 Then a <section> with min-h-[80vh].
 Use the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.
 Make it look like a $50K agency landing page hero.`;
-  const result = streamText({
-    model,
-    system: systemPrompt,
-    prompt: `Brief: "${prompt}"
+  const textPrompt = `Brief: "${prompt}"
 
 Design direction: "${direction.name}" \u2014 ${direction.tagline}
 Layout: ${direction.layoutHint}
@@ -130,7 +127,20 @@ Body font: ${direction.bodyFont}
 Colors: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}, surfaceAlt=${direction.colors.surfaceAlt}, text=${direction.colors.text}
 Mood: ${direction.mood}
 
-${sectionInstruction}`
+${sectionInstruction}`;
+  const messages = [{
+    role: "user",
+    content: referenceImage ? [
+      { type: "image", image: referenceImage },
+      { type: "text", text: `Replicate the visual design style, layout, and aesthetic from the reference image above.
+
+${textPrompt}` }
+    ] : textPrompt
+  }];
+  const result = streamText({
+    model,
+    system: systemPrompt,
+    messages
   });
   let html = "";
   let chunkCount = 0;

package/dist/directions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/directions.ts"],"sourcesContent":["import { generateObject, streamText } from \"ai\";\nimport { z } from \"zod\";\nimport { nanoid } from \"nanoid\";\nimport { resolveModel } from \"./streamCore\";\n\nexport const DesignDirectionSchema = z.object({\n  name: z.string().describe(\"Creative direction name, e.g. 'The Editorial'\"),\n  tagline: z\n    .string()\n    .describe(\"One-line vibe description, e.g. 'Bold serif typography meets minimalist space'\"),\n  headingFont: z\n    .string()\n    .describe(\"Google Font name for headings, e.g. 'Playfair Display'\"),\n  bodyFont: z\n    .string()\n    .describe(\"Google Font name for body text, e.g. 'Inter'\"),\n  colors: z.object({\n    primary: z.string().describe(\"Main brand color as hex, e.g. '#6366f1'\"),\n    accent: z.string().describe(\"Accent/CTA color as hex, e.g. '#f59e0b'\"),\n    surface: z.string().describe(\"Background surface color as hex, e.g. '#ffffff'\"),\n    surfaceAlt: z.string().describe(\"Alt surface (cards, alternating sections) as hex, e.g. '#f8fafc'\"),\n    text: z.string().describe(\"Main text color as hex, e.g. '#0f172a'\"),\n  }),\n  mood: z.enum([\"dark\", \"light\", \"warm\", \"cool\", \"vibrant\"]),\n  layoutHint: z\n    .string()\n    .describe(\"Layout archetype: 'split-screen', 'editorial', 'immersive-gallery', 'community-feed', 'bento-grid', 'magazine'\"),\n});\n\nexport type DesignDirection = z.infer<typeof DesignDirectionSchema>;\n\nexport interface DirectionsOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  count?: number;\n  /** \"landing\" generates hero sections, \"document\" generates cover pages */\n  product?: \"landing\" | \"document\";\n  /** Override the model ID (default: gpt-4o-mini) */\n  model?: string;\n}\n\nconst DIRECTIONS_SYSTEM = `You are an elite creative director at a top design agency (Pentagram, Sagmeister, Collins).\n\nGiven a project brief, propose design directions that are MAXIMALLY diverse from each other.\n\nRULES:\n- Each direction must feel like a completely DIFFERENT design agency made it\n- Vary these axes: typography style (geometric sans, humanist sans, serif, slab, display/decorative), color mood (dark, light, warm, cool, vibrant), layout approach (editorial, split-screen, immersive, bento-grid, community)\n- Fonts MUST be popular Google Fonts that render well. Good examples:\n  SANS: Inter, DM Sans, Space Grotesk, Outfit, Plus Jakarta Sans, Manrope, Sora, Figtree, Urbanist\n  SERIF: Playfair Display, Lora, Merriweather, Source Serif 4, Cormorant Garamond, Libre Baskerville, DM Serif Display\n  DISPLAY: Bebas Neue, Oswald, Archivo Black, Righteous, Anton, Alfa Slab One\n  MONO: JetBrains Mono, Space Mono, IBM Plex Mono\n- NEVER use the same heading font twice\n- NEVER use the same color palette twice\n- AT LEAST one direction must be dark-mode\n- AT LEAST one must use serif headings\n- AT LEAST one must be bold/editorial with huge typography\n- AT LEAST one layoutHint must include \"photo\" (e.g. \"split-screen-photo\", \"immersive-gallery\") — this tells the preview generator to use a real image\n- Colors must be cohesive palettes, not random. Think Dribbble-worthy.\n- Names should be evocative (\"The Chronicle\", \"Neon Pulse\", \"Warm Atelier\")`;\n\n/**\n * Generate N design directions for a landing page.\n * Uses generateObject for type-safe structured output.\n */\nexport async function generateDirections(\n  options: DirectionsOptions\n): Promise<DesignDirection[]> {\n  const { prompt, count = 4, openaiApiKey, anthropicApiKey, model: modelId } = options;\n\n  const model = await resolveModel({\n    openaiApiKey,\n    anthropicApiKey,\n    modelId,\n    defaultOpenai: \"gpt-4o-mini\",\n    defaultAnthropic: \"claude-haiku-4-5-20251001\",\n  });\n\n  const { object } = await generateObject({\n    model,\n    schema: z.object({\n      directions: z.array(DesignDirectionSchema).length(count),\n    }),\n    system: DIRECTIONS_SYSTEM,\n    prompt: `Project brief: \"${prompt}\"\n\nGenerate ${count} design directions. Make them as visually distinct as possible.`,\n  });\n\n  return object.directions;\n}\n\n/**\n * Generate a hero section preview for a given design direction.\n * Fast Haiku call, returns raw HTML string with Google Fonts link.\n */\nexport async function generateHeroPreview(options: {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  direction: DesignDirection;\n  product?: \"landing\" | \"document\";\n  /** Override model ID */\n  model?: string;\n  /** Called with partial HTML as it streams in */\n  onChunk?: (partialHtml: string) => void;\n}): Promise<string> {\n  const { prompt, direction, anthropicApiKey, openaiApiKey, product = \"landing\", model: modelId, onChunk } = options;\n\n  const model = await resolveModel({\n    openaiApiKey,\n    anthropicApiKey,\n    modelId,\n    defaultOpenai: \"gpt-4o-mini\",\n    defaultAnthropic: \"claude-haiku-4-5-20251001\",\n  });\n\n  const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n\n  const isDocument = product === \"document\";\n\n  const systemPrompt = isDocument\n    ? `You create stunning document cover pages with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nThis is a LETTER-SIZE document cover page (8.5\" × 11\"), NOT a website hero.\nUse the EXACT fonts and colors provided. The cover must feel premium and print-ready.\nUse real-looking content specific to the brief (Spanish text).\n\nCRITICAL — TEXT MUST BE VISIBLE AND READABLE:\n- The document title MUST be large (text-4xl or bigger), bold, and clearly visible\n- Include: document title, subtitle or description, date, optional author/company name\n- ALL text must have strong contrast against its background — if background is dark, text MUST be white/light\n- NEVER let text disappear into the background\n\nDESIGN APPROACHES (vary across directions):\n- Approach A: Solid color background (bg-[primary]) with large white text — NO image needed\n- Approach B: Split layout — image on one half, text on solid color half\n- Approach C: Full-bleed image WITH a solid overlay (bg-black/50 or bg-[primary]/80) AND white text on top\n- Approach D: Geometric/abstract design with color blocks, no image\n- If the layout hint contains \"photo\", you MUST use Approach B or C (with a real image).\n- Otherwise, choose the approach that best fits the mood. NOT every cover needs a full-bleed image.\n\nIf using images:\n- Pattern: <img data-image-query=\"specific english search query\" alt=\"description\" class=\"absolute inset-0 w-full h-full object-cover\"/>\n- ALWAYS add a dark overlay on top: <div class=\"absolute inset-0 bg-black/50\"></div>\n- Text goes ABOVE the overlay with z-10 and text-white\n- NEVER include a src attribute — ONLY data-image-query\n\nNO buttons or CTAs — this is a print document cover.\nNO emoji — use geometric shapes or SVG icons for decoration.`\n    : `You create stunning hero sections with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nUse the EXACT fonts and colors provided. The hero must feel premium and polished.\nUse real-looking content specific to the brief (Spanish text).\nInclude: headline (huge), subtitle, 1-2 CTAs, and optionally a hero image via <img data-image-query=\"...\" alt=\"...\" class=\"...\">.\nNEVER use src on img tags. Use data-image-query with English search terms.`;\n\n  const sectionInstruction = isDocument\n    ? `Generate a document cover page. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section class=\"w-[8.5in] h-[11in] relative overflow-hidden\"> sized for letter paper.\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nUse full-bleed backgrounds, geometric accents, elegant typography hierarchy.\nMake it look like a $50K design agency document cover.`\n    : `Generate a hero section. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section> with min-h-[80vh].\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nMake it look like a $50K agency landing page hero.`;\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    prompt: `Brief: \"${prompt}\"\n\nDesign direction: \"${direction.name}\" — ${direction.tagline}\nLayout: ${direction.layoutHint}\nHeading font: ${direction.headingFont}\nBody font: ${direction.bodyFont}\nColors: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}, surfaceAlt=${direction.colors.surfaceAlt}, text=${direction.colors.text}\nMood: ${direction.mood}\n\n${sectionInstruction}`,\n  });\n\n  let html = \"\";\n  let chunkCount = 0;\n  for await (const chunk of result.textStream) {\n    html += chunk;\n    chunkCount++;\n    if (onChunk && chunkCount % 3 === 0) {\n      onChunk(html);\n    }\n  }\n  if (onChunk) onChunk(html);\n\n  // Clean markdown fences if present\n  html = html.trim();\n  if (html.startsWith(\"```\")) {\n    html = html.replace(/^```(?:html|xml)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n  }\n\n  return html;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/directions.ts"],"sourcesContent":["import { generateObject, streamText } from \"ai\";\nimport { z } from \"zod\";\nimport { nanoid } from \"nanoid\";\nimport { resolveModel } from \"./streamCore\";\n\nexport const DesignDirectionSchema = z.object({\n  name: z.string().describe(\"Creative direction name, e.g. 'The Editorial'\"),\n  tagline: z\n    .string()\n    .describe(\"One-line vibe description, e.g. 'Bold serif typography meets minimalist space'\"),\n  headingFont: z\n    .string()\n    .describe(\"Google Font name for headings, e.g. 'Playfair Display'\"),\n  bodyFont: z\n    .string()\n    .describe(\"Google Font name for body text, e.g. 'Inter'\"),\n  colors: z.object({\n    primary: z.string().describe(\"Main brand color as hex, e.g. '#6366f1'\"),\n    accent: z.string().describe(\"Accent/CTA color as hex, e.g. '#f59e0b'\"),\n    surface: z.string().describe(\"Background surface color as hex, e.g. '#ffffff'\"),\n    surfaceAlt: z.string().describe(\"Alt surface (cards, alternating sections) as hex, e.g. '#f8fafc'\"),\n    text: z.string().describe(\"Main text color as hex, e.g. '#0f172a'\"),\n  }),\n  mood: z.enum([\"dark\", \"light\", \"warm\", \"cool\", \"vibrant\"]),\n  layoutHint: z\n    .string()\n    .describe(\"Layout archetype: 'split-screen', 'editorial', 'immersive-gallery', 'community-feed', 'bento-grid', 'magazine'\"),\n});\n\nexport type DesignDirection = z.infer<typeof DesignDirectionSchema>;\n\nexport interface DirectionsOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  count?: number;\n  /** \"landing\" generates hero sections, \"document\" generates cover pages */\n  product?: \"landing\" | \"document\";\n  /** Override the model ID (default: gpt-4o-mini) */\n  model?: string;\n}\n\nconst DIRECTIONS_SYSTEM = `You are an elite creative director at a top design agency (Pentagram, Sagmeister, Collins).\n\nGiven a project brief, propose design directions that are MAXIMALLY diverse from each other.\n\nRULES:\n- Each direction must feel like a completely DIFFERENT design agency made it\n- Vary these axes: typography style (geometric sans, humanist sans, serif, slab, display/decorative), color mood (dark, light, warm, cool, vibrant), layout approach (editorial, split-screen, immersive, bento-grid, community)\n- Fonts MUST be popular Google Fonts that render well. Good examples:\n  SANS: Inter, DM Sans, Space Grotesk, Outfit, Plus Jakarta Sans, Manrope, Sora, Figtree, Urbanist\n  SERIF: Playfair Display, Lora, Merriweather, Source Serif 4, Cormorant Garamond, Libre Baskerville, DM Serif Display\n  DISPLAY: Bebas Neue, Oswald, Archivo Black, Righteous, Anton, Alfa Slab One\n  MONO: JetBrains Mono, Space Mono, IBM Plex Mono\n- NEVER use the same heading font twice\n- NEVER use the same color palette twice\n- AT LEAST one direction must be dark-mode\n- AT LEAST one must use serif headings\n- AT LEAST one must be bold/editorial with huge typography\n- AT LEAST one layoutHint must include \"photo\" (e.g. \"split-screen-photo\", \"immersive-gallery\") — this tells the preview generator to use a real image\n- Colors must be cohesive palettes, not random. Think Dribbble-worthy.\n- Names should be evocative (\"The Chronicle\", \"Neon Pulse\", \"Warm Atelier\")`;\n\n/**\n * Generate N design directions for a landing page.\n * Uses generateObject for type-safe structured output.\n */\nexport async function generateDirections(\n  options: DirectionsOptions\n): Promise<DesignDirection[]> {\n  const { prompt, count = 4, openaiApiKey, anthropicApiKey, model: modelId } = options;\n\n  const model = await resolveModel({\n    openaiApiKey,\n    anthropicApiKey,\n    modelId,\n    defaultOpenai: \"gpt-4o-mini\",\n    defaultAnthropic: \"claude-haiku-4-5-20251001\",\n  });\n\n  const { object } = await generateObject({\n    model,\n    schema: z.object({\n      directions: z.array(DesignDirectionSchema).describe(`Exactly ${count} design directions`),\n    }),\n    system: DIRECTIONS_SYSTEM,\n    prompt: `Project brief: \"${prompt}\"\n\nGenerate ${count} design directions. Make them as visually distinct as possible.`,\n  });\n\n  return object.directions;\n}\n\n/**\n * Generate a hero section preview for a given design direction.\n * Fast Haiku call, returns raw HTML string with Google Fonts link.\n */\nexport async function generateHeroPreview(options: {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  direction: DesignDirection;\n  product?: \"landing\" | \"document\";\n  /** Override model ID */\n  model?: string;\n  /** Called with partial HTML as it streams in */\n  onChunk?: (partialHtml: string) => void;\n  /** Reference image data URL — AI will replicate this design style */\n  referenceImage?: string;\n}): Promise<string> {\n  const { prompt, direction, anthropicApiKey, openaiApiKey, product = \"landing\", model: modelId, onChunk, referenceImage } = options;\n\n  const model = await resolveModel({\n    openaiApiKey,\n    anthropicApiKey,\n    modelId,\n    defaultOpenai: \"gpt-4o-mini\",\n    defaultAnthropic: \"claude-haiku-4-5-20251001\",\n  });\n\n  const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n\n  const isDocument = product === \"document\";\n\n  const systemPrompt = isDocument\n    ? `You create stunning document cover pages with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nThis is a LETTER-SIZE document cover page (8.5\" × 11\"), NOT a website hero.\nUse the EXACT fonts and colors provided. The cover must feel premium and print-ready.\nUse real-looking content specific to the brief (Spanish text).\n\nCRITICAL — TEXT MUST BE VISIBLE AND READABLE:\n- The document title MUST be large (text-4xl or bigger), bold, and clearly visible\n- Include: document title, subtitle or description, date, optional author/company name\n- ALL text must have strong contrast against its background — if background is dark, text MUST be white/light\n- NEVER let text disappear into the background\n\nDESIGN APPROACHES (vary across directions):\n- Approach A: Solid color background (bg-[primary]) with large white text — NO image needed\n- Approach B: Split layout — image on one half, text on solid color half\n- Approach C: Full-bleed image WITH a solid overlay (bg-black/50 or bg-[primary]/80) AND white text on top\n- Approach D: Geometric/abstract design with color blocks, no image\n- If the layout hint contains \"photo\", you MUST use Approach B or C (with a real image).\n- Otherwise, choose the approach that best fits the mood. NOT every cover needs a full-bleed image.\n\nIf using images:\n- Pattern: <img data-image-query=\"specific english search query\" alt=\"description\" class=\"absolute inset-0 w-full h-full object-cover\"/>\n- ALWAYS add a dark overlay on top: <div class=\"absolute inset-0 bg-black/50\"></div>\n- Text goes ABOVE the overlay with z-10 and text-white\n- NEVER include a src attribute — ONLY data-image-query\n\nNO buttons or CTAs — this is a print document cover.\nNO emoji — use geometric shapes or SVG icons for decoration.`\n    : `You create stunning hero sections with HTML + Tailwind CSS.\nOutput ONLY the raw HTML — no markdown fences, no explanation.\nThe HTML must include a <link> tag for Google Fonts and a <section> tag.\nUse the EXACT fonts and colors provided. The hero must feel premium and polished.\nUse real-looking content specific to the brief (Spanish text).\nInclude: headline (huge), subtitle, 1-2 CTAs, and optionally a hero image via <img data-image-query=\"...\" alt=\"...\" class=\"...\">.\nNEVER use src on img tags. Use data-image-query with English search terms.`;\n\n  const sectionInstruction = isDocument\n    ? `Generate a document cover page. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section class=\"w-[8.5in] h-[11in] relative overflow-hidden\"> sized for letter paper.\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nUse full-bleed backgrounds, geometric accents, elegant typography hierarchy.\nMake it look like a $50K design agency document cover.`\n    : `Generate a hero section. Use inline style for font-family referencing the Google Fonts.\nStart with: <link href=\"${fontsUrl}\" rel=\"stylesheet\">\nThen a <section> with min-h-[80vh].\nUse the exact hex colors in Tailwind arbitrary values like bg-[${direction.colors.primary}] text-[${direction.colors.text}] etc.\nMake it look like a $50K agency landing page hero.`;\n\n  const textPrompt = `Brief: \"${prompt}\"\n\nDesign direction: \"${direction.name}\" — ${direction.tagline}\nLayout: ${direction.layoutHint}\nHeading font: ${direction.headingFont}\nBody font: ${direction.bodyFont}\nColors: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}, surfaceAlt=${direction.colors.surfaceAlt}, text=${direction.colors.text}\nMood: ${direction.mood}\n\n${sectionInstruction}`;\n\n  const messages: any[] = [{\n    role: \"user\" as const,\n    content: referenceImage\n      ? [\n          { type: \"image\" as const, image: referenceImage },\n          { type: \"text\" as const, text: `Replicate the visual design style, layout, and aesthetic from the reference image above.\\n\\n${textPrompt}` },\n        ]\n      : textPrompt,\n  }];\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    messages,\n  });\n\n  let html = \"\";\n  let chunkCount = 0;\n  for await (const chunk of result.textStream) {\n    html += chunk;\n    chunkCount++;\n    if (onChunk && chunkCount % 3 === 0) {\n      onChunk(html);\n    }\n  }\n  if (onChunk) onChunk(html);\n\n  // Clean markdown fences if present\n  html = html.trim();\n  if (html.startsWith(\"```\")) {\n    html = html.replace(/^```(?:html|xml)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n  }\n\n  return html;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.84",
+  "version": "0.2.86",
   "description": "AI-powered landing page generator with Tailwind CSS — canvas editor, streaming generation, and one-click deploy",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",