DEV Community

AI-KSK
AI-KSK

Posted on

Building an Interactive AI Character Site with VibeX and Chinese Chat: No Code, No Server, Live Gaze Tracking

#webdev #tutorial #ai #nocode

Building an Interactive AI Character Site with VibeX and Chinese Chat: No Code, No Server, Live Gaze Tracking

You do not need code, a frontend background, a server, or a domain to ship a public interactive AI character site. This episode walks through building one with RunningHub's VibeX by chatting in Chinese. The notes below come from the episode subtitles; no workflow JSON or mirror was shipped with this episode, so no node-level parameters are claimed.

What the finished site does

  • A silver-haired android character on the right side; her head and gaze follow the mouse pointer in real time.
  • Below that, the author's RunningHub workflows, the matching Bilibili tutorials, and AI apps that run when clicked.
  • The whole site was not hand-coded: it was generated through VibeX's Chinese conversation.

The build, step by step

  1. Write a detailed brief and paste it into VibeX; send it.
  2. Generate the skeleton first. Do not upload the character image or links yet — just get the page structure out. The author's brief was very detailed, which helps.
  3. Answer VibeX's direction question. It offers options if you are unsure; the author had a clear direction and told it to follow the brief.
  4. Wait for generation. The result already had the AIKSK brand mark top-left, a reserved character zone on the right, and three entrances for workflows, tutorials and AI apps — but they were only skeleton, with no interactions yet.
  5. Upload a static character image. Add it through the source/source-code panel, then use the uploaded image URL in a second prompt to replace the placeholder with the real character while keeping the blend natural.
  6. Iterate in conversation. Adjust size, position and behaviour by chatting; no manual coding.

Practical notes from the episode

  • VibeX works by chatting in Chinese; the author tested it without code.
  • RunningHub gives 50 million tokens per day free, which the author says is enough for repeated practice and iteration.
  • Uploaded assets can be referenced by their URL in later prompts.
  • For images, WebP is recommended.
  • Because the site is interactive, you need to prepare the interactivity pieces — the episode walks this through.

Links

Limits

  • This is a walkthrough of the author's build, not a guarantee that the same prompt produces the same site.
  • Token allowance and VibeX features are as described at recording time and may change.
  • The site depends on the RunningHub platform and its hosting.

Top comments (0)