Building appsBeginner · about 30 minFree · no signup
Improve your AI website with five design tools
Use Anime.js, Motion, Kokonut UI, Bklit UI and Manus to turn a generic first draft into a website people can use.
By Alan Brown
Start with the page’s purpose, then choose a tool for the job: animation, reusable components, data visualisation or generating the initial build.
- 1. Anime.js — a JavaScript animation engine for custom movement and coordinated sequences. Use it when a page needs deliberate animation choreography. Official site: animejs.com/
- 2. Motion — animation tools for JavaScript and React, useful for transitions, gestures and interface feedback. Start with the animation library your project already uses. Official site: motion.dev/
- 3. Kokonut UI — the library called “Coconut UI” in the caption. It offers 100+ components built with React, Tailwind CSS and Motion. Adapt selected components to your typography and colours. Official site: kokonutui.com/
- 4. Bklit UI — the chart library referred to as “Backlit UI” in the caption. It provides customisable charts and utilities for React and shadcn projects. Choose the chart for the question your data answers. Official site: ui.bklit.com/
- 5. Manus — an AI agent with website-building capabilities. Give it the audience, page structure, visual direction and acceptance checks, then review the generated result. Official site: manus.im/
Context & limitations
Good design starts with readable content, clear priorities and an obvious next action. Use the prompt below to improve one complete page, then check it on mobile and with a keyboard.
Do this yourself
SET THE DESIGN DIRECTION
Inspect the supplied page or code first. If you cannot access it, ask for the relevant files or screenshots. Identify the three biggest problems with hierarchy, typography, spacing, colour or navigation. Define a coherent visual direction with font roles, colour tokens, spacing and reusable component styles. Preserve working content and functionality.CHOOSE THE RIGHT TOOLS
Review the current official documentation for Anime.js (https://animejs.com/), Motion (https://motion.dev/), Kokonut UI (https://kokonutui.com/), Bklit UI (https://ui.bklit.com/) and Manus (https://manus.im/). If browsing is unavailable, ask me for relevant documentation instead of inventing APIs. Recommend only the tools needed for this page and explain each choice. Reuse existing dependencies where possible; do not install all five by default. Check framework compatibility, setup requirements, licences and any paid features before using them.BUILD ONE COMPLETE PAGE
Implement the most important page in my existing stack. For a Manus build, produce one self-contained build prompt with the same requirements. Use a clear headline, a meaningful primary action and consistent components. Add restrained animation where it explains a state change or directs attention. Respect prefers-reduced-motion and keep content usable without animation. Add charts only if they answer a real user question; label demo data and provide units, readable labels and a text summary.CHECK THE RESULT
Check narrow mobile and desktop layouts, keyboard navigation, visible focus, text contrast, loading and empty states, and the main user action. Check for layout shifts and unnecessary animation dependencies. Report what you actually tested and any remaining gaps. Finish with the changed files or complete build prompt, the three main design improvements, and a short manual review checklist.A clear visual direction and a focused implementation brief give the AI concrete design decisions to follow.
Want to build this with a teacher?
Pathwise Academy runs small, hands-on AI classes in Singapore for ages 10–17 and adults.