# I Hate UI

> Extract, deconstruct, and transform any reference website UI into clean, rebranded, and customized modern frontend code. Use when the user wants to mirror, clone, or replicate UI/UX design inspirations from a live web URL while systematically rebranding and modernizing it.

- Skill: `khan-masud/i-hate-ui` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add khan-masud/i-hate-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/khan-masud/i-hate-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: khan-masud (https://skillmd.com/u/khan-masud)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/khan-masud/i-hate-ui

---


# `i-hate-ui` — Web UI Replicator & Rebrand Architect

`i-hate-ui` is an advanced Antigravity skill designed for developers who want world-class UI/UX without starting from scratch. It captures the DOM structure, computed layout matrices (CSS Grid, Flexbox, Padding, Shadows), keyframe animations, typography, and section-by-section cropped screenshots from any reference URL, breaks them down into modular components, and guides the user through an intelligent rebranding and customization process.

--------------------------------------------------------------------------------

## Standard Operating Procedure (SOP)

When this skill is invoked with a target URL, execute the following 5-phase workflow:

```
[Phase 1: Deep Extraction & Visual Screenshot Cropping]
                         ↓
[Phase 2: Multimodal Section Discovery & Matrix Analysis]
                         ↓
[Phase 3: Interactive Section Selection & Scope Alignment]
                         ↓
[Phase 4: Smart Rebranding & Algorithmic Theming Interview]
                         ↓
[Phase 5: Production Component Synthesis (shadcn / Next.js / Tailwind)]
```

---

### Phase 1: Deep Extraction & Visual Screenshot Cropping
1. **Run the Scraping Utility:**
   Execute the automated Playwright extractor:
   ```bash
   node .agents/skills/i-hate-ui/scripts/scrape_ui.mjs "<TARGET_URL>" --output "./extracted_ui"
   ```
2. **Inspect Scraped Assets:**
   - Review `extracted_ui/sections.json` for computed layout matrices (`gridTemplateColumns`, `gap`, `boxShadow`, `backdropFilter`).
   - Inspect `extracted_ui/sections/` for high-res cropped PNGs (`section_01.png`, `section_02.png`) to visually cross-reference UI details with multimodal vision.
   - Review `extracted_ui/tokens.json` for CSS variables, fonts, and keyframes.

---

### Phase 2: Section Discovery & Breakdown
Present a structured breakdown of detected landmark sections to the user:
- `Navbar / Header` (Logo, navigation links, CTA button, mobile drawer)
- `Hero Section` (Headline, subheadline, CTA group, hero media/mockup, social proof badges)
- `Bento Grid / Features` (Multi-column feature cards, icon badges, interactive tabs)
- `Showcase / Interactive Demos` (Product mockups, comparison sliders, video frames)
- `Social Proof / Testimonials` (Review cards, client logo ticker, star ratings)
- `Pricing Table` (Monthly/Annual billing toggle, tier cards, feature checkmarks, highlight badge)
- `FAQ Accordion` (Expandable accordion items, search/filter)
- `Call-to-Action (CTA) Banner` (High-contrast conversion banner)
- `Footer` (Multi-column links, newsletter subscription, copyright, social icons)

---

### Phase 3: Interactive Section Selection
Ask the user to select their desired scope:
1. **Full Page Rebrand:** Re-architect the entire reference page end-to-end.
2. **Modular Section Selection:** Pick only specific components (e.g., *Hero + Bento Grid + Pricing Table*).
3. **Design System & Tokens Only:** Extract color palette, typography scale, cards, and button styles.

---

### Phase 4: Smart Rebranding & Algorithmic Theming
Guide the user through a structured rebrand consultation:

1. **Brand Identity & Positioning:**
   - Product / Brand Name & Core Slogan.
   - Industry context (e.g., AI/SaaS, FinTech, E-Commerce, DevTools, Agency) to generate high-converting, context-specific copy (no generic lorem ipsum).

2. **Smart Color Palette & Theme:**
   - Primary Brand Color (e.g., `#6366F1` or `#10B981`).
   - Run the color engine if needed:
     ```bash
     node .agents/skills/i-hate-ui/scripts/color_engine.mjs "<HEX_COLOR>"
     ```
   - Theme Mode: Sleek Dark Mode (Slate-950 + Glow accents), Minimal Light Mode, or Dynamic Dark/Light Toggle.

3. **Typography & Iconography:**
   - Modern Google Font pairing (`Plus Jakarta Sans + Inter`, `Outfit + Inter`, `Space Grotesk + Geist`).
   - Map scraped SVG icons to clean **Lucide React** or **Heroicons** standard vectors.

4. **Target Framework & Architecture:**
   - **Next.js 15 (App Router) + Tailwind CSS + Framer Motion + Lucide**
   - **shadcn/ui Compatible Components** (`Button`, `Card`, `Accordion`, `Badge`)
   - **React (Vite) + Tailwind CSS**
   - **Vue 3 / Nuxt 3**
   - **Single-File HTML + Tailwind CDN** (for instant browser preview)

---

### Phase 5: Production Component Synthesis & Verification
1. **Generate Clean, Production-Ready Code:**
   - Translate computed grid/flex matrices into clean Tailwind classes (e.g., `grid grid-cols-1 md:grid-cols-3 gap-8`).
   - Apply micro-interactions (`hover:-translate-y-1 hover:shadow-2xl transition-all duration-300`).
   - Implement accessibility standards (semantic HTML5, ARIA labels, minimum 4.5:1 contrast).
2. **Deliver and Verify:**
   - Output the file(s) into the user's project workspace.
   - Provide instant preview and customization instructions.

--------------------------------------------------------------------------------

## Reference Documentation

- [Rebranding & Design Token Checklist](./references/rebranding_checklist.md)