@hasna/skills 0.1.60 → 0.1.61

package/skills/product-mockup/src/docs.ts

@@ -0,0 +1,134 @@
+import type { CliOptions, VariantPlan } from "./types.js";
+
+export function imagePrompts(options: CliOptions, plans: VariantPlan[]): string {
+  return `# Image prompts — ${options.product}
+
+The SVG frames in \`variants/\` are drawn deterministically by this skill and are
+ready to use as-is. This file is the *other* half: written prompts you can paste
+into whichever image model you use. **This skill never calls an image model and
+never needs a key** — copy a prompt out and run it wherever you like.
+
+- Product: ${options.product}
+- Audience: ${options.audience}
+- Style direction: ${options.style}
+- Scene family: ${options.scene}
+
+## Prompt anatomy
+
+\`\`\`
+<subject and surface> , <composition> , <lighting> , <color> , <finish> , <negatives>
+\`\`\`
+
+Keep the subject concrete, name the camera position, and always add negatives —
+image models over-decorate product shots by default.
+
+${plans
+  .map(
+    (plan) => `## ${plan.id} — ${plan.scene}${plan.device ? ` (${plan.device})` : ""}
+
+**Prompt**
+
+> ${promptFor(options, plan)}
+
+**Negative prompt**
+
+> lorem ipsum text, garbled letterforms, watermark, stock-photo people, heavy drop shadows, lens flare, skeuomorphic gradients, cluttered UI, extra fingers, distorted geometry
+
+**Settings to try**: ${plan.width}x${plan.height} (matches \`${plan.file}\`), guidance 5-7, 2 seeds per prompt.
+`,
+  )
+  .join("\n")}
+## Compositing recipe
+
+1. Render the prompt above at the same aspect ratio as the matching SVG.
+2. Open the SVG, delete the \`canvas\` layer, and export the frame with a transparent background.
+3. Place the generated image behind the frame — the SVG layer names in
+   \`asset-metadata.json\` tell you exactly what each group is.
+4. Keep the real UI text in the SVG layer. Image models still cannot render legible product copy.
+`;
+}
+
+function promptFor(options: CliOptions, plan: VariantPlan): string {
+  const surface =
+    plan.scene === "dashboard"
+      ? "a wide analytics dashboard screen floating on a soft studio backdrop"
+      : plan.device === "phone"
+        ? "a modern smartphone held upright, screen facing the camera"
+        : plan.device === "laptop"
+          ? "an open thin-bezel laptop on a clean desk, screen facing the camera"
+          : "a desktop browser window floating in a clean studio space";
+  const tone = plan.tokens.dark ? "low-key lighting, deep charcoal background" : "bright even lighting, soft neutral background";
+  return `Product marketing shot of ${surface} showing ${options.product} for ${options.audience}, ${options.style}, three-quarter camera at eye level with a slight perspective, ${tone}, accent color ${plan.tokens.accent}, crisp focus edge to edge, subtle contact shadow, high-detail render, no text artifacts`;
+}
+
+export function mockupBrief(options: CliOptions, plans: VariantPlan[]): string {
+  return `# Mockup brief — ${options.product}
+
+| Field | Value |
+|-------|-------|
+| Product | ${options.product} |
+| Headline in frame | ${options.title ?? options.product} |
+| Audience | ${options.audience} |
+| Scene | ${options.scene} |
+| Style input | ${options.style} |
+| Style preset matched | ${plans[0].tokens.name} |
+| Variants | ${options.variants} |
+
+## What was generated
+
+${plans
+  .map(
+    (plan) =>
+      `- **${plan.id}** — ${plan.notes} Accent \`${plan.tokens.accent}\`, surface \`${plan.tokens.surface}\`, seed \`${plan.seed}\`.`,
+  )
+  .join("\n")}
+
+## Reproducibility
+
+Variant geometry is seeded from the product text, scene, style, and variant
+index. Re-running the same command reproduces the same SVGs exactly. Change
+\`--style\` or \`--accent\` to move the palette without changing the layout.
+`;
+}
+
+export function usageNotes(options: CliOptions, plans: VariantPlan[]): string {
+  return `# Usage notes
+
+## Editing
+
+Every frame is plain SVG with named groups. Open it in Figma (File > Import),
+Illustrator, Inkscape, or a text editor. The group ids are listed per file in
+\`asset-metadata.json\`; the common ones are:
+
+- \`canvas\` — the full-bleed background rect. Delete it for a transparent export.
+- \`chrome\` / \`device-body\` / \`lid\` — the frame hardware.
+- \`page-content\` / \`app-content\` / \`app-window\` — the screen contents you will
+  usually replace with a real screenshot.
+- \`kpi-row\`, \`chart-bar\`, \`chart-line\`, \`table\` — dashboard modules.
+
+## Dropping in a real screenshot
+
+1. Delete the content group (\`page-content\`, \`app-content\`, or the dashboard modules).
+2. Place your screenshot and clip it to the \`screen\` rect.
+3. Keep the frame hardware on top so the bezel corners stay clean.
+
+## Exporting
+
+\`\`\`bash
+# any SVG renderer works; here are two common ones
+rsvg-convert -w 2560 variants/variant-01.svg -o variant-01@2x.png
+inkscape variants/variant-01.svg --export-type=png --export-width=2560
+\`\`\`
+
+## Sizes in this package
+
+${plans.map((plan) => `- \`${plan.file}\` — ${plan.width}x${plan.height}`).join("\n")}
+
+## Color
+
+The accent rotates per variant so a set reads as a family rather than a repeat.
+Pass \`--accent "#RRGGBB"\` to lock every variant to your brand color.
+`;
+}
+
+

package/skills/product-mockup/src/index.ts

@@ -0,0 +1,182 @@
+#!/usr/bin/env bun
+
+import { mkdir, writeFile } from "fs/promises";
+import { join, resolve, relative } from "path";
+
+import { parseArgs } from "./cli.js";
+import { buildTokens, fnv1a, mulberry32, selectPreset, xmlEscape } from "./design.js";
+import { imagePrompts, mockupBrief, usageNotes } from "./docs.js";
+import { renderBrowser, renderDashboard, renderLaptop, renderPhone, round } from "./render.js";
+import type { SceneInput, VariantPlan } from "./types.js";
+
+const VERSION = "0.1.0";
+
+interface WrittenFile {
+  path: string;
+  type: string;
+  bytes: number;
+}
+
+async function writeOutput(
+  outDir: string,
+  relPath: string,
+  contents: string,
+  type: string,
+  files: WrittenFile[],
+): Promise<void> {
+  const target = join(outDir, relPath);
+  await mkdir(join(target, ".."), { recursive: true });
+  await writeFile(target, contents, "utf8");
+  files.push({ path: relPath, type, bytes: Buffer.byteLength(contents, "utf8") });
+}
+
+
+async function main(): Promise<void> {
+  const options = parseArgs(process.argv.slice(2));
+  const product = options.product!.trim();
+  const title = (options.title ?? product).trim();
+  const outDir = resolve(options.output);
+  const preset = selectPreset(options.style);
+
+  const files: WrittenFile[] = [];
+  const plans: VariantPlan[] = [];
+
+  for (let i = 0; i < options.variants; i += 1) {
+    const index = i + 1;
+    const id = `variant-${String(index).padStart(2, "0")}`;
+    const seed = fnv1a(`${product}|${title}|${options.scene}|${options.style}|${index}`);
+    const rng = mulberry32(seed);
+    const tokens = buildTokens(preset, i, options.accent);
+
+    let device: "phone" | "laptop" | undefined;
+    if (options.scene === "device") {
+      device = options.device === "auto" ? (i % 2 === 0 ? "phone" : "laptop") : options.device;
+    }
+
+    const sceneInput: SceneInput = { title, product, url: options.url, tokens, rng, index };
+    const rendered =
+      options.scene === "dashboard"
+        ? renderDashboard(sceneInput)
+        : options.scene === "device"
+          ? device === "laptop"
+            ? renderLaptop(sceneInput)
+            : renderPhone(sceneInput)
+          : renderBrowser(sceneInput);
+
+    const file = `variants/${id}.svg`;
+    const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${rendered.width} ${rendered.height}" width="${rendered.width}" height="${rendered.height}" role="img" aria-labelledby="title-${index} desc-${index}">
+  <title id="title-${index}">${xmlEscape(`${title} — ${options.scene} mockup ${index}`)}</title>
+  <desc id="desc-${index}">${xmlEscape(rendered.notes)}</desc>
+${rendered.body}
+</svg>
+`;
+
+    await writeOutput(outDir, file, svg, "image/svg+xml", files);
+
+    plans.push({
+      id,
+      index,
+      seed,
+      scene: options.scene,
+      device,
+      width: rendered.width,
+      height: rendered.height,
+      file,
+      tokens,
+      layers: rendered.layers,
+      notes: rendered.notes,
+    });
+  }
+
+  const scenePlan = {
+    product,
+    title,
+    audience: options.audience,
+    scene: options.scene,
+    style: { input: options.style, preset: preset.name, dark: preset.dark },
+    url: options.url,
+    variants: plans.map((plan) => ({
+      id: plan.id,
+      seed: plan.seed,
+      scene: plan.scene,
+      device: plan.device ?? null,
+      file: plan.file,
+      tokens: plan.tokens,
+      notes: plan.notes,
+    })),
+  };
+
+  const assetMetadata = {
+    generatedAt: new Date().toISOString(),
+    assets: plans.map((plan) => ({
+      file: plan.file,
+      format: "svg",
+      width: plan.width,
+      height: plan.height,
+      viewBox: `0 0 ${plan.width} ${plan.height}`,
+      aspectRatio: round(plan.width / plan.height),
+      layers: plan.layers,
+      accent: plan.tokens.accent,
+      background: plan.tokens.background,
+      dark: plan.tokens.dark,
+    })),
+  };
+
+  await writeOutput(outDir, "scene-plan.json", `${JSON.stringify(scenePlan, null, 2)}\n`, "application/json", files);
+  await writeOutput(
+    outDir,
+    "asset-metadata.json",
+    `${JSON.stringify(assetMetadata, null, 2)}\n`,
+    "application/json",
+    files,
+  );
+  await writeOutput(outDir, "image-prompts.md", imagePrompts(options, plans), "text/markdown", files);
+  await writeOutput(outDir, "mockup-brief.md", mockupBrief(options, plans), "text/markdown", files);
+  await writeOutput(outDir, "usage-notes.md", usageNotes(options, plans), "text/markdown", files);
+
+  const manifest = {
+    skill: "product-mockup",
+    version: VERSION,
+    generatedAt: new Date().toISOString(),
+    deterministic: true,
+    input: {
+      product,
+      title,
+      scene: options.scene,
+      device: options.device,
+      variants: options.variants,
+      style: options.style,
+      stylePreset: preset.name,
+      audience: options.audience,
+      accent: options.accent ?? null,
+      url: options.url,
+    },
+    outputDir: outDir,
+    files: files.slice().sort((a, b) => a.path.localeCompare(b.path)),
+  };
+
+  const manifestPath = join(outDir, "manifest.json");
+  await mkdir(outDir, { recursive: true });
+  await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, "utf8");
+
+  if (options.json) {
+    process.stdout.write(`${JSON.stringify({ ...manifest, scenePlan, assetMetadata }, null, 2)}\n`);
+    return;
+  }
+
+  console.log(`product-mockup: wrote ${files.length + 1} files to ${outDir}`);
+  console.log(`  product    ${product}`);
+  console.log(`  scene      ${options.scene}${options.scene === "device" ? ` (${options.device})` : ""}`);
+  console.log(`  style      ${options.style} -> preset "${preset.name}"${preset.dark ? " (dark)" : ""}`);
+  for (const plan of plans) {
+    console.log(`  ${plan.id}  ${plan.width}x${plan.height}  accent ${plan.tokens.accent}  layers: ${plan.layers.join(", ")}`);
+  }
+  console.log(`  manifest   ${relative(process.cwd(), manifestPath) || manifestPath}`);
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.message : String(error);
+  process.stderr.write(`product-mockup: ${message}\n`);
+  process.exit(1);
+});