🎨 AI Tools for Front-end & UI Development

A curated, searchable directory of 500+ AI tools for every stage of front-end and UI work.

🧭 Categories · ✨ Features · ⚡ Quick start · 🛠️ Edit tools · 🙌 Submit a tool

---

]

🧭 What this is

One clean, self-contained HTML file that lists 513 AI tools across 16 categories, each with a description, pricing tier, tags, and a direct link to the official site.

• 🔍 Live search and 🏷️ category filters — no build, no server, no dependencies.
• 💰 Pricing badges — Free · Freemium · Paid · Open source.
• 📱 Responsive dark theme that works on desktop and mobile.

---

🧭 Categories

#	Category	Tools
1	🧑‍💻 Code Assistants	35
2	🪄 UI & App Generation	42
3	🧩 Design-to-Code	25
4	🖼️ Image Generation	42
5	🎬 Video & Animation	28
6	🧊 3D & Avatar	19
7	📐 Prototyping	19
8	🧱 Component Libraries	62
9	🎨 CSS & Styling	33
10	🧿 Icons & Assets	33
11	✅ Testing & QA	39
12	🤖 AI Models & SDKs	42
13	🤝 Design & Collab	21
14	🌈 Color, Type & Copy	19
15	🔧 Dev Tools & Build	29
16	📊 Analytics & Docs	25

---

✨ Features

Feature	Detail
🔍 Live search	Matches tool name, category, description, and tags
🏷️ Category filters	One-click chips with per-category counts
💰 Pricing badges	Free · Freemium · Paid · Open source
📱 Responsive	Dark theme, adapts to desktop and mobile
⚡ Zero dependencies	CSS + JS + data all inline in one HTML file
♿ Accessible	Semantic markup, labeled search, keyboard-reachable, lang="en"
🔗 Direct links	Every card links to the official site

---

⚡ Quick start

No build step or dependencies required — just open the file:

# Option 1 — open directly (double-click works too)
start index.html      # Windows
open index.html       # macOS
xdg-open index.html   # Linux

# Option 2 — serve with any static server
python -m http.server 8000
# then visit http://localhost:8000/

---

📁 Repository structure

.
├── index.html     # The list — 513 tools (self-contained)
├── nginx.conf     # Static hosting config (Function Compute / nginx)
├── LICENSE        # MIT license
└── README.md      # This file

💡 nginx.conf is only needed for the Function Compute nginx environment. For GitHub Pages or any static host, index.html alone is enough.

---

🛠️ How to add or edit tools

All data lives in a single const TOOLS = [...] array at the bottom of index.html (inside the <script> block). Each entry has this shape:

{
  name: "Tool Name",   // required
  cat: "Category",     // must match a CAT_COLORS key
  tier: "freemium",    // free | freemium | paid | open
  desc: "Short one-line description.",
  tags: ["tag one", "tag two"],
  url: "https://example.com"
}

To add a tool, copy an existing entry, edit the fields, and save — the page re-renders automatically. 🎉

• Category colors → the CAT_COLORS object (same <script> block)
• Hero copy / title → the <section class="hero"> block and the <title> tag
• Footer disclaimer → the <footer> block
• Theme colors / fonts → the :root CSS variables in the <style> block
• Search placeholder → the #search input's placeholder attribute

---

🙌 Submit a tool

Found something missing? Contributions are welcome!

1. 🍴 Fork this repository
2. ✏️ Add your tool to the TOOLS array in index.html
3. 📦 Open a Pull Request

---

⚠️ Disclaimer

Pricing tiers and feature sets are a general snapshot and may change over time. Always verify the current plans on each product's official site before purchasing. Product names and logos belong to their respective owners.

---

📄 License

Released under the MIT License — feel free to use and adapt this list. Attribution is appreciated but not required.

Made with ❤️ for the design & code community