How does this skill avoid 'AI-looking' websites?

It avoids generic aesthetics by using curated component libraries, real photography from Unsplash instead of simple icons, specific data-driven copy, and sophisticated CSS normalization.

Yes, it includes standard SEO meta tags and Generative Engine Optimization (GEO) to ensure both traditional and AI search engines can crawl and summarize the site effectively.

Can I use it for complex web apps?

This skill is specifically tuned for marketing sites, landing pages, and professional portfolios; complex dashboards or state-heavy internal tools should use different implementation patterns.

Which tech stack does this skill use?

It is optimized for a modern React stack including Next.js, Tailwind CSS, shadcn/ui, Framer Motion, and Magic UI.

What is the ANIF framework?

ANIF stands for Assemble, Normalize, Illustrate, and Fill—a workflow designed to create websites using real components, professional assets, and researched content rather than generic AI output.

ANIF Website Builder

Name: ANIF Website Builder
Author: ErikTMA

byErikTMA

0•

Design Tools

Builds premium, designer-grade marketing websites and landing pages using the ANIF framework to eliminate generic AI-generated aesthetics.

The ANIF Website Builder skill implements the Assemble, Normalize, Illustrate, Fill (ANIF) framework to create production-ready websites that look custom-designed rather than AI-generated. By utilizing curated component libraries like Magic UI and shadcn/ui, sourcing high-quality photography from Unsplash, and applying sophisticated design normalization, it produces polished marketing pages with professional typography, sticky navigation, and engaging visual rhythm. It also includes Generative Engine Optimization (GEO) to ensure sites are discoverable by both humans and AI search engines.

Key Features

01Applies design normalization for consistent typography, color palettes, and spacing.

020 GitHub stars

03Implements the ANIF (Assemble, Normalize, Illustrate, Fill) framework for professional web design.

04Automates sourcing and integration of real photography from Unsplash and Pexels.

05Optimizes content for Generative Engine Optimization (GEO) to improve AI discoverability.

06Auto-installs and configures high-end components from Magic UI and shadcn/ui libraries.

Use Cases

01Creating a high-converting startup landing page that avoids the typical 'AI look'.

02Rapidly prototyping a production-grade web presence with a cohesive design system.

03Building a professional marketing site with advanced animations and visual depth.

Key Features

01Applies design normalization for consistent typography, color palettes, and spacing.

020 GitHub stars

03Implements the ANIF (Assemble, Normalize, Illustrate, Fill) framework for professional web design.

04Automates sourcing and integration of real photography from Unsplash and Pexels.

05Optimizes content for Generative Engine Optimization (GEO) to improve AI discoverability.

06Auto-installs and configures high-end components from Magic UI and shadcn/ui libraries.

Use Cases

01Creating a high-converting startup landing page that avoids the typical 'AI look'.

02Rapidly prototyping a production-grade web presence with a cohesive design system.

03Building a professional marketing site with advanced animations and visual depth.