# Are Frontend Developers at Risk? ## AI Is Already Writing HTML for Us **Łukasz Piotr Łuczak** Software Architect • Consultant • Researcher DevFest Łódź 2025 --- > ⚠️ **Repository Archived** — This is a snapshot of the conference experiment. > Active development: [github.com/lukaszpiotrluczak/lukaszpiotrluczak.me](https://github.com/lukaszpiotrluczak/lukaszpiotrluczak.me) --- #
⚠️
Repository Status **This repository is now ARCHIVED** DevFest Łódź 2025 snapshot — experiment completed. **Preview the experiment result:** [lukaszpiotrluczak.github.io/devfest-lodz-2025](https://lukaszpiotrluczak.github.io/devfest-lodz-2025/) **Active development continues:** [github.com/lukaszpiotrluczak/lukaszpiotrluczak.me](https://github.com/lukaszpiotrluczak/lukaszpiotrluczak.me) --- # The Problem - No online business card - Manual networking is inefficient - Scattered social profiles --- # The Premise **"AI will replace us"** Let's test this claim: - Can AI build a production-ready platform? - From scratch to deployment? - No manual coding? --- # The Project **Digital Business Card Platform** - Single-link contact hub - Bilingual (EN/PL) - Mobile-first, SEO-optimized - Tabs: Me, Consulting, Contact, Events, Publications - Production-grade standards --- # The AI-Assisted Process
**Artifacts Pipeline:** 1. Information Architecture 2. Brand & Visual Identity 3. Design Profile (design-profile.json) 4. Tailwind Theme CSS 5. HTML Prototypes 6. Repository DX Setup 7. Architecture (NestJS + Astro) 8. Implementation
--- # Key Constraint **No manual fixes — only prompts** - Every change via AI prompt - Follow-up prompts for refinement - Execution logs replaced chat logs - Quality gates made issues visible --- # Friction Point 1 **pnpm Version Conflict** - CI specified `version: 9` - package.json specified `pnpm@9.15.0` - pnpm/action-setup@v4 detected conflict **Solution:** Remove CI version, use package.json as single source of truth --- # Friction Point 2 **Missing pnpm Lockfile** - CI ran pnpm install - No pnpm-lock.yaml committed - Non-deterministic builds **Solution:** Generate and commit pnpm-lock.yaml --- # Friction Point 3 **Prettier Format Check Failures** - AI-generated code wasn't formatted - CI format check failed **Solution:** Run pnpm run format:fix before commit --- # Friction Point 4 **ESM/CommonJS Module Mismatch** - NestJS built as ESM - Astro SSR adapter expected CommonJS - Runtime crash: "Cannot use import outside module" **Solution:** Add build:postprocess to write package.json with type: commonjs --- # What Works Today
- ✅ Bilingual SPA (EN/PL) - ✅ Tabs with icon + label - ✅ Light/Dark mode - ✅ SEO metadata + JSON-LD - ✅ Security headers (CSP, HSTS) - ✅ Contact form API (stub) - ✅ CI/CD quality gates - ✅ Coolify-ready deployment
--- ## It works.  --- ## Still functional.  --- ## This is fine.  --- # What's Intentionally Unfinished - ⏳ Contact form email integration (stub only) - ⏳ CAPTCHA (planned, GDPR-friendly) - ⏳ CSP hardening (remove unsafe-inline) - ⏳ Analytics (privacy-first, post-MVP) --- # The Repository as the Product
**Everything is public:** - All prompts (prompts/) - All conversation logs (conversations/) - All design artifacts (docs/) - All code (app/) - All CI failures and fixes **[github.com/lukaszpiotrluczak/devfest-lodz-2025](https://github.com/lukaszpiotrluczak/devfest-lodz-2025)**
--- # Key Lessons **AI accelerates, but needs guidance** - AI is a powerful tool, not a replacement - Quality gates are essential - Humans steer strategy and architecture - Works best for structured, well-scoped tasks - Struggles with runtime debugging and edge cases --- # The Honest Takeaway **Can AI replace frontend developers?** - ❌ Not for complex, production systems - ✅ For simple, well-defined tasks - ✅ As an accelerator with human oversight - ✅ When paired with quality gates **Developers who use AI > Developers who don't** --- # Thank You
**Explore the archived repo:** [github.com/lukaszpiotrluczak/devfest-lodz-2025](https://github.com/lukaszpiotrluczak/devfest-lodz-2025) **Connect:** - [lukaszpiotrluczak.me](https://lukaszpiotrluczak.me) - [linkedin.com/in/lukaszpiotrluczak](https://linkedin.com/in/lukaszpiotrluczak) - [github.com/lukaszpiotrluczak](https://github.com/lukaszpiotrluczak) **Support this work:** [buymeacoffee.com/lukaszpiotrluczak](https://buymeacoffee.com/lukaszpiotrluczak)