WebberUI
繁體中文

AI Generation Tool

AI generation app plus marketing page: generation UI, token economy, marketplace.

ProContentAI8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/ai-generation-tool.en.json?t=<install token>"

The whole page lands in app/templates/ai-generation-tool/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Navigation and Hero

    A dark neon nav bar over a typing prompt box, with the hero generating four AI variants live.

    hero
  2. 2

    Conversational Editing

    Replies stream in word by word as chat bubbles, showing how an image gets refined by talking to the model like a creative director.

    content
  3. 3

    Capability Grid

    An irregular card grid covering five core capabilities, from style switching and layer editing to super-resolution upscaling.

    features
  4. 4

    Three-Step Workflow

    Animated connectors link the three steps: describe the image, pick a style and ratio, then refine and export.

    timeline
  5. 5

    Token Economy and Style Market

    Token spend and balance explained on the left, with community-published style recipe cards laid out below.

    product
  6. 6

    Pricing

    Three token subscriptions — Starter, Pro and Studio — with the middle plan framed in neon.

    pricing
  7. 7

    Closing Call to Action

    A brand mark and two buttons over a parallax glow, inviting visitors to start generating for free.

    cta
  8. 8

    Footer

    A dark footer with a brand blurb, social links and three link columns for product, resources and company.

    footer

AI Generation Tool is a React AI generation tool website template: a marketing page that demos a prompt being typed, a generating state and four results, plus a word-by-word streamed reply, a process section, a token economy and a style marketplace. It is built with Next.js App Router, Tailwind CSS and Motion; the generation is a front-end animation and no AI model is connected.

When to use it

  • Website for an AI image or content generation product
  • Intro page for a prompt marketplace or style asset platform
  • Pre-launch demo page for an AI tool
  • Product pages that need to explain credit or token billing

What to change after installing

  1. The demo prompt is `PROMPT_TEXT` in page.tsx, and the four results are gradient tiles in `RESULT_TILES`; connect `GenerationDemo` to your own generation API to show real output.
  2. The reply in the co-creation section comes from the `STREAM_WORDS` string, revealed by a timer; it is not real streaming.
  3. Features, steps, marketplace items and plans are in the `FEATURES`, `STEPS`, `MARKET_ITEMS` and `PLANS` arrays.
  4. The neon palette lives in the `NEON` object at the top of the file, and the starfield background is drawn on a canvas by `StarfieldCanvas`.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →