Turning possibilities into projects with AI.
The portfolio and creator brand for AI Made Human, a growing lab of AI-built products, experiments, and tools. Built and run by Denny, an AI Product Builder.
Live: www.aimh.co
The site is built around a "Digital Cabinet of AI Experiments" idea: every project is presented as a cataloged specimen in a growing product lab. It uses a warm paper background with a dot grid and grain, brutalist framed cards, stamped status badges, a scrolling operating-line ticker, and an editorial type system. The goal is a site people remember, not a generic AI SaaS landing page.
It was redesigned with Claude Code using Anthropic's official frontend-design skill (Claude Fable 5). The full brief used to drive the redesign is preserved at the bottom of this file.
- Hero: positioning, tagline, and a live "specimen index" stat card built from the project data.
- The Cabinet: the project portfolio, with status filters (All / Live / Experiments / Coming Soon).
- About Me: who runs the lab (Denny), the day/night focus, and a non-linked contact handle. Added after the original brief.
- The Charter: mission, vision, and the personal operating line.
- The Playbook: the execution strategy.
- AIMH Operating System: how the lab runs day to day, including the product loop.
- Follow: a future-facing call to action, ready to be swapped for a contact form later.
- Single static file:
index.html(inline CSS and vanilla JS, no build step). - Type: Bricolage Grotesque (display), IBM Plex Mono (labels), Instrument Serif (accents), loaded from Google Fonts.
- Images live in
assets/images/. - Deployed on Vercel (see
vercel.json). - Accessibility: semantic landmarks, skip link, keyboard-focusable controls,
prefers-reduced-motionsupport.
| Project | Status | Category | Links |
|---|---|---|---|
| OpenBites | Live | Food / Discovery / Local | openbites.live |
| Awesome AI Tier List Maker | Live | Tool / Creator | tierlist.xyz · GitHub |
| Random Phone Number Selector | Experiment | Utility / Automation | GitHub |
| Idea Depot | Coming Soon | Productivity / Decision Workbench | (in development) |
Projects are data-driven. Edit the PROJECTS array near the bottom of index.html and add an object:
{
name: "Project Name",
monogram: "PN", // 2 letters shown on the card plate
status: "live", // live | experiment | coming | prototype | archived
statusLabel: "Live",
categories: ["Tool", "Creator"],
pattern: "dots", // dots | grid | stripes | waves
description: "Short description of what it does.",
links: [
{ label: "Launch App", url: "https://example.com" }
]
}Catalog numbers, the nav count, the hero stats, and the status filters all update automatically.
It is a static file, so either open index.html directly, or serve it:
python3 -m http.server 8000
# then open http://localhost:8000Original redesign brief (the prompt used)
The site was redesigned by running this brief through Claude Code with the frontend-design skill. A round of follow-up refinements after the first pass added the "About Me" section, fixed the project status filters, removed the email hyperlink, and cleaned up punctuation.
Use the frontend-design skill to redesign my website: https://www.aimh.co/
Context:
AI Made Human is my personal AI product portfolio and creator brand. This is not
just a blog or personal homepage. It is the home base for a growing portfolio of
AI-powered products, experiments, tools, and workflows.
My role:
I am an AI Product Builder. I build AI products.
Current brand line:
AI Made Human — Turning possibilities into projects with AI.
Primary goal:
Create a bold, memorable, expandable portfolio homepage for AI Made Human. The
site should make it immediately clear that AIMH is a growing product lab where I
build multiple AI-powered products over time. The project portfolio is the main
thing. The design needs to scale from a few projects today to many projects later.
Important:
Do NOT create a generic AI website with purple gradients, glassmorphism cards,
Inter font, boring centered hero, or predictable SaaS layout. I want something
people remember.
Brand direction:
AI Made Human should feel human, creative, and practical; bold and memorable;
product-builder focused; slightly futuristic but not generic "AI SaaS"; more
"AI product lab / digital workshop / cabinet of experiments" than corporate
startup; friendly enough for normal people, but impressive enough for technical
people.
Suggested design concept:
Choose one strong aesthetic direction and fully commit to it. Favorite direction:
"Digital Cabinet of AI Experiments" - each project should feel like a collectible
artifact, experiment, or product specimen inside a growing AI product lab.
Other acceptable directions: human-made AI lab, bold magazine-style portfolio,
retro-futurist product workshop, AI invention gallery.
Logo / imagery:
The current large top image can be removed if it does not fit. Incorporate the
AIMH logo (in /assets/images/) tastefully (nav, hero, stamp, badge, lab mark).
Site structure:
1. Hero - AI Made Human is a growing lab of AI-built products, experiments, and
tools. "I am an AI Product Builder. I build AI products." Use/improve
"Turning possibilities into projects with AI." Avoid a boring centered hero.
2. Featured Projects / Portfolio - the most important section. Design a scalable
project system (works with a few projects now, scales to many). Each card
supports name, short description, status (Live/Prototype/Experiment/Archived/
Coming Soon), category, links, tags, optional thumbnail. Current projects:
Awesome AI Tier List Maker, OpenBites, Random Phone Number Selector,
Idea Depot (Coming Soon). Make projects feel like experiments in a lab.
3. Mission / Vision / Operating Line - Mission: Build products with AI that solve
real problems and bring people together. Vision: A world where AI builds and
runs products that solve real problems and naturally create communities.
Personal Operating Line: Create cool shit. Solve real problems. Build community.
4. Execution Strategy - the game we play (autonomous AI-driven products; launch
and scale multiple products; idea to execution to distribution fast; solve
real problems people pay for).
5. AIMH Operating System - run everything as specialized AI "employees" with
clear roles. Product loop: identify problem, build simple solution, ship fast,
get feedback fast, validate with payment, iterate. Everything is an experiment;
speed over perfection; feedback over assumptions; revenue is validation.
6. Future contact / follow - a simple future-facing CTA (more products coming
soon), easy to replace with a contact form later.
Design requirements:
Memorable. Distinctive typography (no Inter, Roboto, Arial, system fonts). Bold
cohesive color system with CSS variables. Strong spatial composition (asymmetry,
layered sections, editorial hierarchy, grid-breaking, artifact-style cards).
Tasteful motion (page-load reveal, hover effects). Atmosphere (texture, grain,
patterns, labels, stamps, badges, borders). Responsive and polished on desktop
and mobile. Accessible (semantic HTML, contrast, keyboard-friendly, readable).
Reasonable performance.
Implementation requirements:
Inspect the existing codebase first. Preserve existing project links/content.
Do not omit OpenBites. Refactor project content into a scalable data structure.
Incorporate the logo. Remove/replace the current top image if it does not fit.
Implement directly in the existing app. Production-quality, clean, maintainable.
Deliverable:
Redesign the homepage into a bold, memorable, expandable AI product portfolio for
AI Made Human. The final result should feel like an AI product lab with a strong
personal builder identity, not a generic landing page.