4 Tools for Building Better Websites With AI

A generated homepage can look clean and cool in a screenshot and become less convincing once you start using it. Items on a page that rearrange when you choose a different category - for example, a short transition helps you follow where the remaining cards went, while an abrupt reshuffle leaves you searching for the thing you were about to click.

Once you’ve settled what the website needs to do, choosing the right web design tools can save you from asking an agent to rebuild familiar interactions from scratch. These four cover different jobs, with some useful overlap.

Quick Answer

Motion handles movement, Bklit UI supplies charts and Kokonut UI provides components to adapt, while Manus can build and host the app. Motion and Kokonut are our clearest starting recommendations; Bklit’s chart behaviour needs checking with real data, and Manus’s running costs deserve attention before publishing.

Which Tool for What?

The component libraries belong in a code project; they aren’t complete website themes or plugins for a page editor. Bklit and many Kokonut components already use Motion, so this is a menu of options rather than four separate installations every site needs.

1. Motion: Make Changes Easier to Follow

Motion is the most straightforward recommendation here when an interface needs better movement. It supports spring animations and dragging, along with layout transitions and effects for elements entering or leaving the page.

For the card grid in the opening example, Motion’s React layout prop can animate changes in an element’s position and size. AnimatePresence handles exit animations, giving a removed card time to leave before disappearing. You can make a filter feel more understandable without redesigning the page around an animation.

For JavaScript or React, install the library with:

npm install motion

React projects import from motion/react; Motion also has a plain JavaScript API and a separate Vue package. For supported coding agents, its repository documents npx motion-ai to install the Motion skill and set up documentation tools. The core library is MIT-licensed, with additional tools and examples available through the paid Motion+ offering.

One setting is worth getting right early: MotionConfig reducedMotion="user" respects the visitor’s device preference for reduced motion. The documented default is "never", so installing the library doesn’t automatically make that choice for you.

We’d use Motion where movement explains what changed or makes an interaction easier to control. A button that only needs to change colour on hover is usually simple enough to handle with CSS, and a working page doesn’t improve merely because more things move.

2. Bklit UI: Build Charts Around Real Data

Bklit UI provides React charts you can customise, including line, bar, scatter and candlestick components. Its shadcn registry installs source files into your project, giving you code you can adapt to the surrounding interface.

For an AI comparison page, a scatter chart could show generation time against cost, with each point identifying a model. The useful work is choosing clear units and labels, then making the values available when someone interacts with the chart. The visual treatment should help someone compare the results.

In a React project, initialise shadcn if needed, then add a chart:

npx shadcn@latest init
npx shadcn@latest add @bklit/line-chart

The installation guide explains the registry configuration. Underneath, the chart registry uses visx packages and Motion; the chart components are MIT-licensed, while Bklit Studio, its visual editor, has a separate proprietary licence.

We’d be careful about recommending it for a financial dashboard without checking the relevant chart types. An open report from September describes incorrect negative bars and missing segments in horizontal stacked bars. The current bar-chart source still sets its default value scale from zero upward, and bar.tsx contains the stacking calculation identified in that report.

Bklit remains interesting, but our recommendation is conditional: try the chart with data whose correct result you already know, including negative values or stacked series if your product uses them.

3. Kokonut UI: Start With a Component You Can Adapt

Kokonut UI is useful when you know the kind of interface element you want and would rather adapt an existing implementation. The public catalogue includes cards, navigation and inputs as well as text effects and animated backgrounds.

The distinction between the free collection and Pro matters. When we checked, the homepage listed 75 components in the public catalogue, while its “100+” promotion referred to Kokonut UI Pro. The open-source project is MIT-licensed.

The Apple Activity Card is a concrete example. It animates progress rings and counts up their values, and its source includes reduced-motion handling. An account dashboard could use it to display progress toward a user’s goals, with your own code supplying the numbers.

With shadcn set up in a compatible React project, the documented installation is:

npx shadcn@latest add https://kokonutui.com/r/apple-activity-card.json

The component arrives as source, so you can change its typography and colours to suit the rest of the site. Those changes are part of the job, along with maintaining the code you adopt.

We’d choose one component that solves a clear problem and adapt it properly before adding another. A site assembled from several attractive demos can still feel disjointed if every section uses a different idea of spacing or movement, and an animated background behind a form may simply make the form harder to read.

4. Manus: Build and Publish the Whole App

Manus is a different kind of choice: an AI platform for creating and publishing a complete application, with backend and database features included. Its feature page lists analytics for visits and engagement, automatic SEO metadata and structured data, plus code export. Those features give you things to inspect in the finished site; they don’t establish how well it will rank.

For a small booking app, describe what someone can reserve and where the reservation should be stored, then use the generated preview to make and cancel a test booking. That checks a real user journey before you publish, instead of treating a convincing booking screen as evidence that the booking works.

Manus’s documented workflow moves from a prompt to a generated app and then publication, with a visual editing mode for changes to the interface. If the app has accounts or private records, our app-security guide covers checks that go beyond whether the login screen opens.

The ongoing cost needs a separate decision. According to Manus’s billing documentation, subscription credits primarily cover using the AI to build, while deployed applications consume a separate WebDev allowance or usage balance. Custom-domain websites also require an active subscription; sites on a Manus-provided domain can remain online subject to their available running allowance or balance.

That distinction has surprised users. In one discussion about website credits, the poster assumed their subscription covered keeping the site running. It’s the same budgeting distinction we explain in our AI-built app cost breakdown: paying for development and paying to operate the finished app are separate expenses.

Manus could suit someone who wants a single place to build and publish. We’d check the required features and running costs against the current plan, and try its advertised code export before committing a business that may need to move elsewhere later.

Using an Existing App as a Starting Point

If you already have a reference product in mind, Replica Skill adds an optional workflow for Claude Code. Its eleven skills cover studying the reference through to preparing an independently branded build.

Three are particularly relevant here. replica-recon maps screens and user journeys, replica-design turns the findings into files such as replica/design/tokens.json and component specifications, and replica-diff compares the implementation with the planned features and screen layouts.

Installed as a Claude Code plugin, commands use names such as /replica-skill:replica-recon. A scheduling app, for example, could provide a reference for how visitors choose a time, while the new build uses its own assets and connects to services through its own accounts.

This is a product-building instruction kit, unlike the software-analysis tooling in our REA guide. It doesn’t give you another company’s private backend, and a comparison score cannot establish that your own app works correctly.

# Website Rules
Use the existing type, colour and spacing styles.
Reuse the current component patterns.
Keep working navigation, URLs and media intact.
Add dependencies only when the task needs them.
Keep animations compatible with reduced motion.
Preserve visible keyboard focus.
Check the changed page at phone and desktop widths.
Check a middle width where the layout changes.
Report which previews and interactions you checked.

Final Verdict

We’d start with Motion for a specific interaction or Kokonut for a component that already comes close to what the project needs. Bklit deserves a look with known data, while Manus is a larger commitment because it affects how you build and keep the app running.

Choose the part that improves an actual user task, then check it in the surrounding page. The point of borrowing an existing implementation is to spend more attention on the product you’re making, including the details a demo cannot decide for you.