@tomako/tools-runtime 0.1.0

package/src/i18n/messages/en/tools/product-poster-generator.ts

@@ -0,0 +1,294 @@
+const productPosterGenerator = {
+  meta: {
+    title: "AI Product Poster Generator: Turn Screenshots, Benefits, and CTAs Into Posters",
+    displayTitle: "AI Product Poster Generator",
+    description:
+      "Enter a product name, benefits, audience, and CTA. Add a URL, logo, screenshots, and brand colors when available to generate a product promo poster for websites, social posts, ads, and OG images.",
+    intro: "Turn product context into a downloadable promo poster.",
+    category: "SEO marketing tools",
+    keywords: [
+      "AI product poster generator",
+      "product promo poster generator",
+      "SaaS marketing poster generator",
+      "product screenshot poster",
+      "app promo poster generator",
+      "web product ad creative",
+      "brand consistent ad creative",
+    ],
+    inputSignal: "Product name / benefits / screenshots / logo",
+    outputSignal: "Product poster / PNG",
+    boundarySignal: "Human review before publishing",
+  },
+  examples: [
+    {
+      label: "SaaS website promo",
+      input: "Product name, dashboard screenshot, 3 benefits, CTA: Book demo",
+      expectedOutput:
+        "A product poster for website hero and social launch use, plus a pre-publish review checklist.",
+    },
+    {
+      label: "App launch poster",
+      input: "App screenshots, logo, target audience, channels: Product Hunt / X",
+      expectedOutput:
+        "A launch poster preview, channel ratio cues, asset usage status, and next review steps.",
+    },
+  ],
+  guide: {
+    workspaceHeading: "AI Product Poster Generator",
+    workspaceHint:
+      "Add the product name, benefits, audience, CTA, and use case. Optionally include a URL, logo, screenshots, format, style, and brand colors. Preview and download the PNG when it is ready.",
+    workspaceBadge: "PNG poster output",
+    standard: {
+      benefits: {
+        title: "What this AI product poster generator helps you create",
+        cards: [
+          {
+            title: "Downloadable product posters",
+            body: "Turn product name, benefits, audience, and CTA into a previewable product promo poster you can download as PNG.",
+          },
+          {
+            title: "Product and brand consistency",
+            body: "Add a logo, screenshots, and colors so the poster starts from the real interface instead of a generic template.",
+          },
+          {
+            title: "Clear review boundaries",
+            body: "Check screenshot privacy, ad claims, crop safety, and asset rights before treating the generated image as publish-ready.",
+          },
+        ],
+      },
+      imageTextSections: [
+        {
+          id: "poster-brief",
+          title: "From product context\nto a downloadable poster",
+          body: [
+            "A product promo poster is not just a decorative background. It needs to explain what the product is, who it is for, which value matters, and what CTA should stand out.",
+            "Start with a compact brief. The tool turns the product description, audience, use case, and assets into a poster preview for website, social, or growth workflows.",
+          ],
+          image: {
+            src: "/tools/product-poster-generator-section-primary-8bit-v2.webp",
+            alt: "Pixel-art AI product poster generator visual showing product context becoming a downloadable poster.",
+          },
+          imageFirst: true,
+        },
+        {
+          id: "poster-variations",
+          title: "One product brief,\ndifferent launch channels",
+          body: [
+            "Website heroes, launch posts, ad tests, Product Hunt images, and OG cards all need different density and crop behavior.",
+            "Choose the target use case, format, and visual style so the poster can prioritize headline, screenshot, benefit, and CTA for the channel.",
+          ],
+          image: {
+            src: "/tools/product-poster-generator-section-variation-8bit-v2.webp",
+            alt: "Pixel-art product poster channel visual showing Web, Social, and Ad poster formats.",
+          },
+        },
+        {
+          id: "poster-review",
+          title: "Review screenshots,\nclaims, and crops before download",
+          body: [
+            "The generated image can move into design, launch, or paid media work, but it is not an approved campaign final by itself.",
+            "Before downloading, check that screenshots do not include private data, claims are not overstated, brand assets are cleared, and the crop works for the target platform.",
+          ],
+          image: {
+            src: "/tools/product-poster-generator-section-support-8bit-v2.webp",
+            alt: "Pixel-art product poster review visual showing PNG download, asset checks, and pre-publish review.",
+          },
+          imageFirst: true,
+        },
+      ],
+      generation: {
+        title: "How to generate\na product promo poster",
+        imageAlt: "Pixel-art product poster workflow showing product brief to PNG download.",
+        ctaLabel: "Generate poster",
+        steps: [
+          {
+            title: "Write the product brief",
+            body: "Enter the product name, context, audience, and primary CTA. Specific benefits lead to a more focused poster.",
+          },
+          {
+            title: "Choose the poster use case",
+            body: "Pick website, social, ad, Product Hunt, or OG use so the hierarchy and base ratio fit the channel.",
+          },
+          {
+            title: "Add brand assets",
+            body: "Upload a logo and product screenshots, then choose format, style, and brand colors. You can still generate a first draft without assets.",
+          },
+          {
+            title: "Preview and download PNG",
+            body: "Review the poster image, asset status, and pre-publish checklist, then download the PNG for design or launch work.",
+          },
+        ],
+      },
+      faqIntro:
+        "These answers clarify input assets, use cases, commercial review, and how this differs from generic poster templates.",
+      faqCtaLabel: "Read questions",
+    },
+    faq: "Frequently asked questions",
+    faqItems: [
+      {
+        question: "What should I prepare for product poster generation?",
+        answer:
+          "At minimum, prepare the product name, product context, target audience, and CTA. Better inputs include a product URL, logo, 1-4 UI screenshots, brand colors, and target channel.",
+      },
+      {
+        question: "What products is this screenshot poster generator best for?",
+        answer:
+          "It works best for SaaS, apps, web tools, plugins, AI products, and developer tools. Use it for website hero images, social launch posts, ad creatives, Product Hunt images, and OG cards.",
+      },
+      {
+        question: "Can I use the generated product poster commercially?",
+        answer:
+          "The poster can enter a commercial design workflow, but review screenshot privacy, trademark rights, ad claims, platform dimensions, and campaign policy before publishing.",
+      },
+      {
+        question: "Can I generate an app promo poster without a logo or brand colors?",
+        answer:
+          "Yes. Start with product context, audience, and screenshots. Once your brand system is stable, regenerate with a logo and brand colors for more consistent output.",
+      },
+      {
+        question: "How is this different from Canva or Adobe Express poster templates?",
+        answer:
+          "General design tools are strong for template editing. This tool starts from product context, UI screenshots, benefits, and channel needs before generating an internet-product-specific poster.",
+      },
+    ],
+    ctaPrimary: "Create app store images",
+    ctaSecondary: "Generate a logo first",
+    ctaHint:
+      "If you need app store creatives, start with listing screenshots. If the brand mark is not stable yet, create logo directions first.",
+  },
+  widget: {
+    productNameLabel: "Product name",
+    productNamePlaceholder: "e.g. Tomako Launch",
+    productUrlLabel: "Product URL",
+    productUrlPlaceholder: "https://yourproduct.com",
+    contextLabel: "Product context and benefits",
+    contextPlaceholder:
+      "Explain what the product does and the 2-3 benefits to highlight. Example: creates all launch marketing assets for indie builders.",
+    audienceLabel: "Target audience",
+    audiencePlaceholder: "e.g. SaaS founders, growth teams, indie builders",
+    ctaLabel: "Primary CTA",
+    ctaPlaceholder: "Try it free / Book demo / Download app",
+    posterIntentLabel: "Poster use case",
+    formatLabel: "Poster format",
+    styleLabel: "Visual style",
+    brandColorsLabel: "Brand colors",
+    optional: "Optional",
+    advancedLabel: "Add assets and style",
+    logoUpload: "Upload logo",
+    logoChoose: "Choose logo",
+    logoReplace: "Replace logo",
+    logoRemove: "Remove logo",
+    screenshotUpload: "Upload product screenshots",
+    screenshotUploadHint: "Up to 4 PNG / JPG / WebP screenshots",
+    screenshotChoose: "Choose screenshots",
+    screenshotRemove: "Remove screenshot",
+    screenshotCount: "{count} screenshots",
+    uploadHint: "PNG / JPG / WebP",
+    submit: "Generate product poster",
+    submitLoading: "Generating...",
+    reset: "Reset",
+    reviewNote:
+      "Only upload assets you can share publicly. Before downloading, review screenshot privacy, brand rights, ad claims, and platform dimensions.",
+    emptyPreviewTitle: "Fill the brief to generate a poster",
+    emptyPreviewHint:
+      "Product name, benefits, audience, CTA, and use case determine the headline, hierarchy, and download result.",
+    loadingTitle: "Generating product poster",
+    loadingTipLabel: "Tip",
+    loadingTip:
+      "This usually takes under a minute. Keep the page open and the downloadable PNG will appear on the right.",
+    loadingSteps: {
+      prepare: "Organizing product context",
+      compose: "Composing headline, benefits, and CTA",
+      render: "Rendering poster preview",
+      finish: "Preparing download result",
+    },
+    errorTitle: "Add the key product details first",
+    submitErrorTitle: "Poster generation request did not start",
+    taskErrorTitle: "Poster generation failed",
+    resultErrorTitle: "Poster result is not available yet",
+    unreadableResultTitle: "Result cannot be read right now",
+    timeoutErrorTitle: "Generation is taking longer than expected",
+    retry: "Generate again",
+    errors: {
+      required: "Add the required fields before creating the product poster.",
+      productName:
+        "Add the product name. It will be used in the poster title, file name, and product positioning.",
+      productContext:
+        "Add product context and benefits. Include what the product does and the value you want to highlight.",
+      audience:
+        "Add the target audience, such as SaaS founders, growth teams, indie builders, or enterprise buyers.",
+      primaryCta:
+        "Add the primary CTA, such as Try it free, Book demo, Start now, or Download app.",
+      invalidUrl: "Use a valid http or https product URL, or leave it blank.",
+      weakContext:
+        "The product context looks like placeholder text. Add what the product does and the main benefits.",
+      submitFailed: "The poster generation service is temporarily unavailable. Try again later.",
+      pollFailed: "The poster result is not ready yet. Try again later.",
+      imageFailed:
+        "The poster image could not be generated. Simplify the benefits, choose another format, or try again later.",
+      unreadableResult: "The result cannot be read right now. Try again later.",
+      timeout: "Generation is taking longer than expected. Try again later.",
+    },
+    readyKicker: "Poster ready",
+    readyTitle: "Product promo poster is ready",
+    readyHint:
+      "Preview and download the PNG. Before publishing, review screenshot privacy, claims, and brand rights.",
+    downloadPng: "Download PNG",
+    generatedPosterAlt: "Generated product promotional poster preview based on the product context.",
+    posterDetails: "Poster settings",
+    posterChecklist: "Pre-publish checklist",
+    assetLogoApplied: "Logo: applied as an exact final PNG layer",
+    assetLogoUploadedNotApplied: "Logo: uploaded; review the final poster for exact placement",
+    assetLogoMissing: "Logo: not uploaded, no brand mark is invented",
+    assetScreenshotReferenceCount: "Product screenshots: {count} reference image(s) sent to generation",
+    assetScreenshotInventoryOnly:
+      "Product screenshots: {count} file name(s) recorded, not sent as image references",
+    assetScreenshotMissing: "Product screenshots: not uploaded, no real UI is invented",
+    assetFinalLogoLayer:
+      "Final download: model poster kept, then the uploaded logo was layered on top",
+    posterChecklistItems: [
+      "Confirm that the headline explains product value instead of using a generic slogan.",
+      "Check screenshots for private data, test accounts, and unauthorized brands.",
+      "Review crop ratio for the target platform and make sure the CTA is readable on mobile.",
+      "Before publishing, review brand rights, ad claims, and platform policies.",
+    ],
+    posterIntentLabels: {
+      websiteConversion: "Website hero conversion",
+      websiteFeature: "Website feature section",
+      socialLaunch: "Social product launch",
+      socialContent: "Social content cover",
+      paidAcquisition: "Paid acquisition test",
+      paidRetargeting: "Retargeting ad creative",
+      productHuntLaunch: "Product Hunt launch",
+      ogBlogCover: "Blog / OG share image",
+    },
+    formatLabels: {
+      multiSize: "Auto",
+      ultrawide: "21:9",
+      landscape: "16:9",
+      landscape32: "3:2",
+      landscape43: "4:3",
+      square: "1:1",
+      portrait34: "3:4",
+      portrait: "2:3",
+      story: "9:16",
+    },
+    styleLabels: {
+      cleanSaas: "Clean SaaS",
+      boldLaunch: "Bold launch",
+      premiumEditorial: "Premium editorial",
+      playfulApp: "Playful app",
+      enterpriseTrust: "Enterprise trust",
+    },
+    brandPaletteLabels: {
+      auto: "Auto",
+      tomako: "Tomako",
+      ocean: "Tech green",
+      violet: "Launch violet",
+      mono: "Mono",
+      sunset: "Warm orange",
+    },
+  },
+} as const;
+
+export default productPosterGenerator;

package/src/i18n/messages/en/tools/product-ui-generator.ts

@@ -0,0 +1,234 @@
+const productUiGenerator = {
+  meta: {
+    title: "AI Product UI Generator",
+    description: "Enter a product idea, audience, and visual direction to generate app or web interface concepts, visual systems, interaction logic, and an exportable OnePage coding prompt.",
+    intro: "Turn a rough product concept into a polished interface direction. Validate the idea with high-quality UI concepts, then export a design spec and coding prompt for AI coding tools.",
+    category: "Design tools",
+    keywords: [
+      "AI product UI generator",
+      "AI app interface generator",
+      "product page UI generator",
+      "UI prompt generator",
+      "design spec generator",
+    ],
+    inputSignal: "Product idea, target users, platform, and visual direction",
+    outputSignal: "Multi-screen UI plan, visual system, flow, and OnePage prompt",
+    boundarySignal: "Generated output is a design draft and needs product review",
+  },
+  guide: {
+    workspaceHeading: "Generate product UI concepts",
+    workspaceHint:
+      "Enter a rough idea, audience, and visual direction to generate review-ready app or web screens, then export a OnePage prompt for AI coding tools.",
+    workspaceBadge: "UI package + OnePage",
+    outputs: "What you get",
+    outputItems: [
+      {
+        title: "Multi-screen interface plan",
+        body:
+          "Generate 3-6 key screens with purpose, layout, visual direction, and interaction notes tied to the product job.",
+      },
+      {
+        title: "Premium visual system",
+        body:
+          "Get mood, palette, type, component, and motion guidance so the result feels like a designed product, not a wireframe.",
+      },
+      {
+        title: "Feature and business OnePage",
+        body:
+          "Turn the product definition, feature details, business requirements, user scenarios, and risks into one handoff document.",
+      },
+      {
+        title: "Copy-ready coding prompt",
+        body:
+          "Export a prompt that describes layout, components, states, responsive behavior, and visual details for AI coding tools.",
+      },
+    ],
+    exportHeading: "Export the direction to AI coding",
+    exportBody:
+      "The output is not just a pretty preview. It packages the product context, design rationale, feature logic, and implementation cues into a OnePage so the build step can stay close to the design intent.",
+    exportBullets: [
+      "Product definition: what it is, who it serves, and why it matters.",
+      "Feature details: how each feature works, where it appears, and what states it needs.",
+      "Business and requirements: scenarios, logic, boundaries, risks, and review notes.",
+      "Implementation cues: component hierarchy, layout ratios, visual style, motion, and responsive behavior.",
+    ],
+    standardHeading: "What makes a good UI generator",
+    standardItems: [
+      {
+        title: "It impresses visually first",
+        body:
+          "The tool gives visual taste real weight, so the user can feel the product's potential before judging the logic.",
+      },
+      {
+        title: "It does not invent the logic",
+        body:
+          "The screen structure must match the submitted product task, audience, platform, and must-have requirements.",
+      },
+      {
+        title: "It is reproducible",
+        body:
+          "Each screen includes layout, component, state, and implementation notes instead of a mood-board image that cannot be rebuilt.",
+      },
+      {
+        title: "It keeps review boundaries clear",
+        body:
+          "The package is a design draft. It does not replace product decisions, real data validation, legal review, or production QA.",
+      },
+    ],
+    scopeHeading: "Scope and boundaries",
+    scopeBody:
+      "Best for early product validation, design exploration, PRD drafts, and context preparation before AI coding. It does not prove market demand or produce a production-ready final interface in one pass.",
+    scopeBullets: [
+      "Supports app, web, desktop, or mixed interface directions.",
+      "Works with rough ideas, but clearer users and scenarios produce sharper concepts.",
+      "High-risk legal, medical, or financial interfaces still need expert review.",
+      "Do not submit customer privacy, unreleased secrets, keys, or sensitive material.",
+    ],
+    useCaseHeading: "Test ideas through visuals",
+    useCaseBody:
+      "A product idea can feel abstract in a note. Once it becomes interface screens, users and teams can judge faster whether it feels understandable, desirable, and worth building.",
+    useCaseBullets: [
+      "Turn a one-line idea into the first reviewable screen set.",
+      "Clarify information architecture, main flow, and visual tone before coding.",
+      "Show investors, designers, developers, or teammates a more concrete product direction.",
+    ],
+    useCases: "Best-fit use cases",
+    useCaseItems: [
+      {
+        title: "Indie builders validating a product",
+        body: "Generate screens and a OnePage before deciding whether to move into AI coding, prototyping, or MVP work.",
+      },
+      {
+        title: "PMs clarifying fuzzy requirements",
+        body: "Turn user scenarios, feature priority, and interaction structure into material that design and engineering can discuss.",
+      },
+      {
+        title: "Early design exploration",
+        body: "Compare platform and visual directions quickly before spending time on high-fidelity details.",
+      },
+      {
+        title: "AI coding prompt prep",
+        body: "Export product, requirement, interface, and visual context so coding tools need to guess less.",
+      },
+    ],
+    faq: "FAQ",
+    faqItems: [
+      {
+        question: "Does it generate production code?",
+        answer:
+          "No. It generates UI concepts, product context, and an exportable coding prompt. You can feed the OnePage into an AI coding tool to continue implementation.",
+      },
+      {
+        question: "Can I start with a rough idea?",
+        answer:
+          "Yes. The tool can create a first direction from a rough concept and list missing information. Clearer product, audience, and scenario details improve the output.",
+      },
+      {
+        question: "Can I hand the result to a designer or developer?",
+        answer:
+          "Use it as a strong starting point and implementation guide, then review business logic, data states, brand rules, compliance boundaries, and final interaction details.",
+      },
+      {
+        question: "Why export more than an image?",
+        answer:
+          "An image only shows surface appearance. The OnePage carries product definition, feature details, requirements, and implementation prompts that help AI coding tools reproduce the interface.",
+      },
+      {
+        question: "Can it generate mobile and web together?",
+        answer:
+          "Yes. Choose mixed platform to get cross-device key screens and a note on which device each screen is best suited for.",
+      },
+      {
+        question: "How is submitted information used?",
+        answer:
+          "The form content is used as context for the UI package and OnePage. Do not submit sensitive customer data, keys, secret source code, or unauthorized material.",
+      },
+    ],
+    ctaHint: "After the UI direction is clear, turn the business story into presentation-ready material.",
+    ctaPrimary: "Generate a business deck",
+    ctaSecondary: "Back to all tools",
+    visualAlt: {
+      hero: "AI product UI generator hero visual showing a rough idea becoming a polished product interface package.",
+      export: "OnePage export visual showing UI concepts transformed into design specs and a coding prompt.",
+      scope: "Scope visual showing app, web, and product requirements entering one interface plan.",
+      useCase: "Idea validation visual showing a team judging whether a product is worth building from UI concepts.",
+    },
+  },
+  widget: {
+    formTitle: "Describe your product concept",
+    formHint: "Keep it lightweight. Give the Agent enough context to judge the product job, audience, and visual direction.",
+    productNameLabel: "Product name",
+    productNamePlaceholder: "Example: Flowmint, optional",
+    ideaLabel: "Product idea",
+    ideaPlaceholder:
+      "Describe what the product does, who it serves, and what problem it solves. Example: an AI workspace that turns long podcast episodes into short video scripts and a publishing calendar.",
+    targetUsersLabel: "Target users",
+    targetUsersPlaceholder: "Example: indie builders, podcast creators, B2B sales teams",
+    coreScenarioLabel: "Core scenario",
+    coreScenarioPlaceholder: "Example: first-run workspace that creates a complete brand",
+    platformLabel: "Platform",
+    toneLabel: "Visual tone",
+    languageLabel: "Output language",
+    mustIncludeLabel: "Must include",
+    mustIncludePlaceholder: "Example: home, brand list, generated results, export button, team collaboration",
+    mustAvoidLabel: "Avoid",
+    mustAvoidPlaceholder: "Example: no purple-blue gradients, no card overload, not too enterprise-dashboard",
+    submit: "Generate UI package",
+    generating: "Generating...",
+    workspaceAlt: "Workspace side visual showing a few inputs becoming polished interface concepts.",
+    workspaceCaption: "Start with a little product context, generate a reviewable UI direction, then export the full OnePage.",
+    trustNotes: [
+      "Final results render only from structured Agent writeback, not local template output.",
+      "The OnePage includes product definition, feature details, business requirements, and an AI coding prompt.",
+      "The generated package is a design draft and still needs human review.",
+    ],
+    platforms: {
+      web: "Web",
+      mobile: "Mobile app",
+      desktop: "Desktop tool",
+      mixed: "Mixed",
+    },
+    tones: {
+      premium: "Premium restraint",
+      minimal: "Minimal and clean",
+      playful: "Light and playful",
+      editorial: "Editorial",
+      enterprise: "Professional workspace",
+    },
+    languages: {
+      zh: "中文",
+      en: "English",
+    },
+    status: {
+      submitting: "Creating task",
+      running: "Agent is generating the package",
+      awaitingResult: "Waiting for structured result writeback",
+    },
+    errors: {
+      submit: "Submit failed. Please try again later.",
+      timeout: "No structured result was found yet. Try again with a more specific product description.",
+      resultInvalid: "The result format was incomplete. Please retry.",
+    },
+    errorLabels: {
+      ideaMin: "Describe the product idea in at least 24 characters.",
+      placeholder: "Enter a real product idea, not test, demo, or pure numbers.",
+      audience: "Describe a real audience or leave this empty.",
+    },
+    resultLabels: {
+      loadingTitle: "Generating the UI package",
+      loadingBody: "The Agent is defining the product, then creating screens, visual system, and an exportable OnePage.",
+      errorTitle: "Generation did not complete",
+      resultEyebrow: "Generated UI package",
+      thesis: "Design thesis",
+      visualSystem: "Visual system",
+      features: "Feature details",
+      requirements: "Business and requirements",
+      flow: "Interaction flow",
+      copy: "Copy OnePage",
+      copied: "Copied",
+      download: "Download OnePage",
+    },
+  },
+};
+
+export default productUiGenerator;