Your first coding project: build an AI tools dashboard

You’ve set up a working directory and your agent knows which Python to use. Now let’s actually build something with it — something small, useful, and satisfying, where you see the result the moment it’s done. My first real project with Hermes was a dashboard of all my AI tools, and it turned out to be an ideal starting point. Here’s how it went, and how you can build your own.

Why a dashboard is a great first project

I use a lot of AI tools — several chat interfaces, a handful of API consoles, a couple of research notebooks, some local utilities. They were scattered across bookmarks, tabs, and memory. I wanted one page: every tool as a clickable tile, grouped by category, that I could pin as my browser homepage.

As a first coding project, this ticks every box:

• It’s a single file. One .html file with the styling and logic inside it. Nothing to install, no framework, no build step.
• Testing is trivial. Double-click the file and it opens in your browser. That’s the whole test loop. Change something, refresh, see it.
• The result is visible. This isn’t an abstract script that prints to a console. It’s something that looks good, that you’ll actually use.
• It’s personal. Everyone’s tool list is different, so you can’t just copy someone else’s — you describe yours, and the agent builds around it.

Start cheap, finish strong

This is the most useful lesson from the whole exercise, and it’s a practical version of the “match the model to the task” idea from the model providers article.

I started with an inexpensive model — DeepSeek — to get the idea down. For a first rough version, there’s no reason to spend on a premium model: you’re just establishing the shape of the thing, and a cheap fast model does that fine. It gave me a working dashboard with my tools in categories. Functional, a bit plain, but a real starting point.

Then, once I wanted it to actually look good, I switched to a stronger model — Claude — for the design work. Creative and visual tasks are exactly where a top-tier model earns its cost. The jump in quality was immediate: better typography, a proper grid, hover animations, a cohesive colour scheme.

So the pattern is: sketch cheap, refine expensive. Use the composer’s model picker to switch between them mid-project — the free or cheap model for the first draft and small fixes, the strong model when you want a real leap in quality.

The first prompt: less is more

You don’t need to write a detailed spec. I gave the agent my list of tools — names and URLs, roughly grouped — and one sentence:

Here are my AI tools and their links, grouped into categories. Make a dashboard out of them, with icons.

That was genuinely it. The agent figured out the layout, pulled favicons for the icons, added a clock, counted the tools. You describe what you want, not how to build it — that’s the whole point of working with an agent. If you over-specify the first prompt, you box it in before it’s had a chance to show you something better than you’d have thought of.

Iterating on the design — and the trick that matters

The first version is never the final one. Mine went through several rounds — the file ended up named v3 for a reason. I’d look at it and ask for changes: warmer colours, bigger tiles for the tools I use most, a cleaner header.

Trick 1: give it permission to start over

But here’s the trick that made the biggest difference, and it’s not obvious. When you keep asking a model to “make it nicer”, it tends to cling to the design it already made. You get the same layout with a slightly different colour, over and over. Small tweaks, no leaps.

The fix is to explicitly give it permission to start over:

Feel free to completely redesign this. Don't hold on to the current layout — show me something genuinely different.

That one instruction unlocks the model. Instead of nudging the existing design, it reaches for a fresh concept — a different grid, a different visual language. You can always go back to a previous version if you prefer it, but you won’t discover the better design unless you let the model off the leash. This applies to any creative work with an AI, not just dashboards.

Trick 2: if it’s stuck, switch models

And if a model still won’t give you what you want — if even with permission to start over it keeps circling the same ideas — switch to a different one. A stronger, more creative model will often produce in one shot what a cheaper one couldn’t reach after five tries. This is exactly why I moved from DeepSeek to Claude for the design stage: not because the cheap model was bad, but because creative leaps are where a top-tier model earns its keep. Don’t be afraid to hand the same request to two different models and keep the better result — the composer’s model picker makes switching a two-second job.

Testing: just open the file

Because it’s a single HTML file, testing needs no explanation. The agent saves the file to your working directory; you open it in your browser and look. Something off? Describe it, let the agent edit, refresh the page. That tight loop — describe, edit, refresh — is what makes a single-file project such a good place to start. There’s no server to restart, no build to wait for.

When you’re happy with it, set it as your browser’s homepage or new-tab page, and every tool you use is one click away.

The template: open it, make it yours

Here’s the finished dashboard, ready to run. It opens straight in your browser, and you can view its source to see exactly how it’s built — the same design I ended up with, with a small set of example tools you can replace with your own.

The only part you need to edit is the list near the top of the script — each line is one tool. t is the title, u is the URL, c is the category (chat, api, research, or tools), and e is the domain, used to fetch the icon automatically:

const links = [
  // AI Chat
  { t:"Claude",      u:"https://claude.ai/new",              c:"chat", e:"claude.ai" },
  { t:"ChatGPT",     u:"https://chatgpt.com/",               c:"chat", e:"chatgpt.com" },
  { t:"Gemini",      u:"https://gemini.google.com/app",      c:"chat", e:"gemini.google.com" },
  { t:"DeepSeek",    u:"https://chat.deepseek.com/",         c:"chat", e:"chat.deepseek.com" },
  { t:"Perplexity",  u:"https://www.perplexity.ai/",         c:"chat", e:"perplexity.ai" },
  { t:"Grok",        u:"https://grok.com/",                  c:"chat", e:"grok.com" },

  // API & Developer Consoles
  { t:"OpenRouter",       u:"https://openrouter.ai/",             c:"api", e:"openrouter.ai" },
  { t:"Google AI Studio", u:"https://aistudio.google.com/",       c:"api", e:"aistudio.google.com" },
  { t:"DeepSeek Platform",u:"https://platform.deepseek.com/",     c:"api", e:"platform.deepseek.com" },
  { t:"GroqCloud",        u:"https://console.groq.com/",          c:"api", e:"console.groq.com" },

  // Research & Notebooks
  { t:"NotebookLM",  u:"https://notebooklm.google.com/",     c:"research", e:"notebooklm.google.com" },
  { t:"Hugging Face",u:"https://huggingface.co/",            c:"research", e:"huggingface.co" },

  // Tools & Utilities
  { t:"Ollama",        u:"https://ollama.com/",              c:"tools", e:"ollama.com" },
  { t:"Google Colab",  u:"https://colab.research.google.com/",c:"tools", e:"colab.research.google.com" },
];

Change those lines, add as many as you want, and the dashboard rebuilds itself — the categories, counts, and layout all update automatically. Or skip the manual edit entirely: hand the file to Hermes and say “swap in my tools and redesign it however you like,” then iterate from there using the trick above.

What you’ve learned

Beyond a working dashboard, this project teaches the core rhythm of building with an agent: describe what you want in plain language, let the model figure out the how, iterate on the result, and switch models deliberately — cheap to sketch, strong to polish. And when you’re refining something creative, give the model explicit permission to start fresh.

A single HTML file is just the beginning. The same describe-iterate-refine loop scales up to scripts, tools, and bigger projects as you get comfortable. This article is part of the Agentic AI series. The next article moves on to giving your agent a memory, so it starts to remember who you are between sessions.