मैंने सालों का सबसे बड़ा Site Redesign नाश्ते के दौरान पूरा किया
मैंने AI की मदद से 3 दिनों में अपनी पूरी website rebuild की — coding assistant के रूप में नहीं, बल्कि actual developer के रूप में। मैंने decisions लिए; Claude Code ने 28,000 lines लिखे।
सुबह के 8:47 बज रहे हैं, शनिवार का दिन है। मैं Vietnamese pork baguette (Banh Mi Heo Quay) खा रहा हूँ। और मैंने अभी-अभी उस सबसे comprehensive redesign का आख़िरी टुकड़ा deploy किया है जो मेरी personal site ने 2021 के बाद देखी है।
पाँच साल। इतने समय में मैंने अपनी website में कुछ substantial नहीं किया था। हाँ, कुछ copy tweak की, यहाँ-वहाँ blog post जोड़ी। लेकिन design? Architecture? Overall experience? Pandemic के सच में ख़त्म होने से पहले से untouched था।
इस सुबह, मैंने TRANSMISSION design system पूरा किया — नए typography, color palette, animations, और एक premium products page के साथ एक complete visual overhaul। लेकिन यह बस 3-day sprint के finale थी जिसने सब कुछ बदल दिया।
Numbers:
- 3 दिनों में 40 commits
- 28,129 lines of code added
- 4,950 lines of new CSS
- 11 CSS files (1 से बढ़कर)
- Complete dark mode system
- Mobile-first responsive everything
- Real screenshots के साथ custom products page
पूरे redesign का कुल समय: 3 दिनों में बस कुछ घंटे। Day 1 पर अकेले 36 commits। आज का final push: नाश्ता खाते हुए 30 मिनट।
कोई design agency नहीं। कोई Figma mockups नहीं। कोई multi-month timeline नहीं। बस मैं और Claude Code। :D
यहाँ एक बात स्पष्ट करना ज़रूरी है: मैंने CSS की एक भी line नहीं लिखी। मैंने PHP नहीं लिखी। मैंने deployment commands manually नहीं चलाए। Claude Code ने 100% implementation किया — design, code, git commits, deployment। मैंने बस decisions लिए। "ज़्यादा glow।" "वह font ग़लत लगता है।" "Cards को premium बनाएं।"
2026 में AI-assisted development यही दिखता है।
---
शुरुआती बिंदु: 2021 से abandoned
मुझे honest रहने दें कि मैं कहाँ था।
1 जनवरी 2026 को मेरी site:
- एक CSS file जिसमें 700 lines का spaghetti था
- Poppins font हर चीज़ के लिए (यह "मैंने typography के बारे में सोचा ही नहीं" वाला choice था)
- कोई design system नहीं — colors everywhere hardcoded
- Basic dark mode जो आधे pages पर टूटा हुआ था
- Products page: कोई product page नहीं, पूरी site बस blog है।
- Mobile experience जो उसी तरह "responsive" था जैसे एक सस्ता suit "fits" करता है
मैं अपनी main job, Generative AI सीखने, और फिर STRAŦUM और DIALØGUE बनाने में इतना व्यस्त था कि मेरी personal site cobbler के नंगे बच्चों जैसी हो गई थी।
हर बार जब कोई potential client या collaborator आता, वे एक ऐसी site देखते थे जो चिल्ला रही थी "2021 ने call किया, वे अपना WordPress theme वापस चाहते हैं।"
---
अभी क्यों? और इस तरह क्यों?
Late 2025 में दो चीज़ें हुईं:
पहली, मैंने STRAŦUM और DIALØGUE ship किए। दो production AI applications, solo में बनाए जबकि एक global advertising agency में VP की day job बनाए रखी। Real users, real revenue discussions, real credibility at stake।
मेरी personal site अब actual products का front door थी। उसे match करना ज़रूरी था।
दूसरी, मैंने Claude Code को seriously use करना शुरू किया। Chatbot के रूप में नहीं। एक development environment के रूप में। और मैंने कुछ ऐसा discover किया जिसने सब कुछ बदल दिया: `frontend-design` plugin।
यह plugin सिर्फ़ CSS नहीं लिखता। यह design के बारे में *सोचता* है। Typography pairings। Color theory। Spatial composition। यही चीज़ है जो AI-generated code को "AI slop" जैसा दिखने से रोकती है।
मैंने सोचा: क्या हो अगर मैं... सब कुछ rebuild कर दूं? Weekend hack में नहीं। ठीक से। एक real design system के साथ। Claude Code heavy lifting करे जबकि मैं decisions लूं।
---
3-Day Sprint: क्या वास्तव में हुआ
Day 1: The Big Bang — 36 Commits
मैंने plan नहीं किया था कि एक दिन में 36 commits होंगे। लेकिन एक बार शुरू हुआ तो रुक नहीं सका।
Initial setup, existing theme backup, CSS modularization की शुरुआत।
पूरी CSS architecture rebuild हुई। वह single 700-line file बन गई:
```
css/
├── style.css # Design tokens only
├── components.css # Buttons, cards, navigation
├── homepage.css # Hero, products, posts sections
├── about.css # About page specific
├── blog.css # Blog archive
├── dark-mode.css # Complete dark mode system
├── mobile-nav.css # Bottom navigation bar
├── search.css # Search overlay
├── single-post.css # Blog post typography
└── products.css # Premium products page
```
हर file का एक काम है। हर file root से CSS variables use करती है। किसी button का ग़लत color क्यों है यह ढूंढने के लिए 700 lines खंगालने की ज़रूरत नहीं। :P
Dark mode overhaul। मेरा पुराना dark mode embarrassing था — text disappear हो जाता, buttons में कोई contrast नहीं। मैंने इसे scratch से rebuild किया:
- 658 lines dedicated dark mode CSS
- Proper contrast ratios (WCAG compliant)
- सभी 89 `!important` declarations हटाए (हाँ, 89)
- Semantic color tokens जो automatically swap होते हैं
दिन के अंत तक: Homepage redesign, About page rebuild, mobile bottom nav जोड़ी, newsletter integration पूरी। 36 commits।
Day 2: Architecture & Infrastructure — 9 Commits
Day 2 सब कुछ maintainable बनाने के बारे में था।
बड़ा refactor: `functions.php` chaos की 724 lines से clean includes की 25 lines में:
```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```
Local development के लिए Docker भी setup किया, GCP security audit किया, और documentation लिखी।
Day 3: TRANSMISSION Finale — The Breakfast Sprint
यहाँ frontend-design plugin ने अपना worth साबित किया।
मैंने describe किया कि मैं क्या चाहता था: "Retro-futuristic। Analog past meets digital future। Premium but not corporate। Technical but warm।" फिर मैं नाश्ता लेने चला गया।
जब मैं अपनी bánh mì के साथ वापस आया, Claude Code ने complete TRANSMISSION design system generate कर दिया था:
Typography:
- Playfair Display — Headlines (elegant, editorial)
- DM Sans — Body text (clean, readable)
- JetBrains Mono — Code और data (technical credibility)
Colors:
```css
--color-cream: #fffbeb; /* Warm background */
--color-navy: #0f172a; /* Deep primary */
--color-cyan: #22d3ee; /* Energy accent */
--color-amber: #f59e0b; /* Warm accent */
```
Fluid Typography:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Headlines mobile से desktop तक automatically scale होते हैं। कोई media queries नहीं।
फिर मैंने products page tackle किया। जो page बस text था वह बन गया:
Hero Section:
- Terminal-style eyebrow text
- Playfair headline: "What I'm Building"
- Stats bar: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- Subtle animations के साथ floating geometric shapes
Product Cards:
- Premium navy gradient backgrounds
- Production sites के real screenshots (mockups नहीं)
- Window control dots के साथ browser-frame containers
- Cyan/amber glows के साथ hover states
- Arrow markers के साथ feature lists
- Full-width CTAs
Screenshots अकेले एक journey थे। Claude Code ने मेरी production sites navigate किए, pages capture किए, उन्हें 1.8MB से 229KB (86% छोटा) optimize किया, और styled containers में wrap किया।
---
Stack: Surprisingly Simple
यहाँ मैंने जो कुछ use किया:
Claude Code — AI जो code लिखता है, commands चलाता है, और context maintain रखता है। यह एक AI है जिसके पास मेरे filesystem तक access है, git commands चला सकता है, और याद रखता है कि हमने कल क्या बनाया।
frontend-design plugin — "AI-generated CSS" और "CSS that looks designed" के बीच का फ़र्क़। Typography theory, color relationships, spatial composition built in।
Docker — Local WordPress development। एक `docker-compose up` और मेरे पास production mirror है।
Chrome DevTools MCP — Claude Code एक browser control कर सकता है। "Mobile dark mode check करो" → rendered page का actual screenshot। कोई tab-switching नहीं।
gcloud CLI: जिसे Claude control करता है
---
Honest हिस्से
यह जादू नहीं था। चीज़ें ग़लत हुईं:
Nested folder chaos: Docker copy ने `gambit-child/gambit-child/` structure बनाई। Debug करने में 10 मिनट लगे।
Dark mode text disappearing: कुछ headings ग़लत colors inherit कर रहे थे। Selectors को ज़्यादा specific करने से fix हुआ।
Image optimization: Raw screenshots बहुत बड़े थे। सीखना पड़ा कि macOS पर `sips -Z 800` बाहरी tools के बिना images resize करता है।
WordPress template assignment: भूल गया था कि नए products page को WP admin में assign करना होगा। Classic।
फ़र्क़ यह है कि debugging में घंटों की बजाय मिनट लगे। Claude Code rendered page देख सकता था, issue identify कर सकता था, और same conversation में fixes propose कर सकता था।
---
Before & After: The Numbers
| Metric | 1 जनवरी 2026 | 10 जनवरी 2026 |
|---|---|---|
| CSS Files | 1 | 11 |
| Lines of CSS | ~700 | 4,950 |
| PHP Architecture | Monolithic | Modular (6 files) |
| Typography | 1 font | 3-font system |
| Color Tokens | ~5 hardcoded | 15+ semantic |
| Dark Mode | Broken | 658 lines, WCAG compliant |
| Products Page | Plain text | Screenshots के साथ Premium |
| Mobile Nav | None | 6 actions के साथ Bottom bar |
| Animations | 0 | 7 (fadeInUp, float, glow, आदि) |
| Last Major Update | 2021 | आज |
कुल transformation: 3 दिनों में 40 commits में 123 files में 28,129 lines जोड़ी गईं। सभी Claude Code ने लिखीं।
---
इसकी क्या cost आई
पैसा: Design के लिए $0। Claude Code subscription। GCP hosting जो पहले से थी।
समय: 3 दिन elapsed। लेकिन मेरा actual active time? शायद कुल 2-3 घंटे। मैं describe करता, Claude Code build करता, और मैं बाद में review करने के लिए वापस आता। इस सुबह मैंने final redesign kickoff किया, नाश्ते पर गया, और confirm करने के लिए वापस आया — actual attention का 30 मिनट।
मेरा actual contribution: Code की शून्य lines। मैंने describe किया कि मैं क्या चाहता था, review किया कि Claude Code ने क्या बनाया, और "hover state को ज़्यादा glow चाहिए" या "वह spacing off लगती है" जैसी बातें कहीं।
तुलना: एक design agency इस scope के लिए 8-12 हफ़्ते और $10,000+ quote करती। और मुझे फिर भी उनकी Figma files खुद implement करनी पड़तीं।
---
मैंने क्या सीखा
1. मैं अब developer नहीं हूँ — मैं creative director हूँ। Claude Code ने code की हर line लिखी। मैंने taste decisions लिए। "वह animation बहुत slow है।" "Dark mode में cyan को ज़्यादा glow चाहिए।" "Hero stats को ज़्यादा prominent बनाओ।" यह coding से fundamentally अलग skill है।
2. पहले modularize करें। Claude Code की पहली instinct visual changes करने से पहले codebase को logical files में split करने की थी। इस foundation की वजह से हर subsequent change आसान था।
3. Design systems compound होते हैं। एक बार TRANSMISSION tokens exist हो गए, हर नया component बस existing variables combine करना था। Products page 45 मिनट में बना क्योंकि system पहले से था।
4. frontend-design plugin ही फ़र्क़ है। Regular AI-generated CSS "AI slop" जैसी दिखती है — generic, safe, forgettable। frontend-design plugin typography pairings, color theory, spatial composition के बारे में सोचता है। इसीलिए यह AI-generated नहीं दिखता।
5. Incrementally ship करें। 40 commits, 1 नहीं। हर piece तैयार होते ही live हो गई। Claude Code ने git workflow handle किया — staging, committing, pushing, creating PRs।
---
खुद आज़माएं
अगर आपकी personal site 2021 से "काफ़ी अच्छी" रही है:
1. Claude Code install करें `frontend-design` plugin के साथ
2. Vibe describe करें जो आप चाहते हैं (मेरा: "retro-futuristic, analog meets digital")
3. Architecture से शुरू करें — beautify करने से पहले modularize करें
4. Design system build करें — tokens, typography, colors
5. फिर pages build करें — हर एक वह system use करता है जो आपने बनाया
6. अक्सर deploy करें — "done" का इंतज़ार मत करें
सबसे मुश्किल हिस्सा technology नहीं है। यह decide करना है कि आपकी site को *कैसा* feel होना चाहिए।
एक बार आप यह जान लेते हैं, बाकी बस conversation है।
Update: Implementation पर taste के उस सबक के बारे में और स्पष्ट हुआ जब मैं Swift जाने बिना एक native iOS app बनाने लगा। Claude ने एक शाम में 7,568 lines का scaffold तैयार किया — लेकिन इसे सही feel कराने का "creative director" काम? वह अभी भी पूरी तरह human है।
आपने आख़िरी बार कब कुछ ऐसा rebuild किया जिसे आप सालों से टाल रहे थे? आपको शुरू करने पर किस चीज़ ने मजबूर किया — और जब यह हो गया तो कैसा लगा?
शुभकामनाओं सहित,
Chandler
---
*अभी भी build कर रहा हूँ, अभी भी ship कर रहा हूँ, अभी भी वह bánh mì enjoy कर रहा हूँ।*
---
