Nový web DesignDev jsme postavili jako AI-first.

Před pár měsíci jsme si oblékli nový kabát - máme nové logo a barvy. Ve skutečnosti jsme ale změnili mnohem víc. Z digitální agentury jsme se přeorientovali na AI-first produktové studio: místo abyste si u nás najímali chybějící specialisty na kus vývojového cyklu, najímáte nás, abychom vám spustili celý produkt a převzali za něj odpovědnost.

Není to jen deklarace, ale způsob, jakým už teď reálně pracujeme. A nejlepší důkaz máme zde: náš nový web, postavený přesně tak, jak teď vývoj u nás vypadá.

AI-first implementace, osvědčený postup

Nový web běží jako Next.js aplikace napojená na headless CMS Payload. Hned na začátku jsme si ušetřili spoustu manuální práce – obsah blogu jsme kompletně nascrapovali ze starého webu, automatizovaně ho překlopili do nového a rovnou vyřešili i přesměrování (redirecty), abychom neztratili historii a SEO.

Jde o čistě AI-first implementaci, ale s jedním zásadním pravidlem: lidská ruka u nás vše pevně diriguje. Kombinujeme naši expertízu s nástroji jako Claude Code a Claude Design, díky čemuž se vyhýbáme tomu, aby vznikal nekvalitní "AI slop". Touhle cestou jsme od nuly do produkce úspěšně nasadili už náš 6. projekt.

Náš proces vývoje na designdev.cz funguje zhruba takto:

1. Strategie, vizuál a agilní copy: Začali jsme hloubkovými interními rozhovory se stakeholdery, abychom znali směr. Vizuální identita, počáteční návrh obsahu a wireframy vznikly primárně lidskou rukou. V průběhu tvorby webu se nám ale měnila firemní strategie, čemuž jsme museli průběžně uzpůsobovat i obsah. Aktuální strategii jsme proto definovali přímo do podkladů (kontextu) pro Clauda, kterému jsme zároveň pro tento účel nastavili specifické "copy" skilly. Díky tomu pak člověk mohl Clauda efektivně dirigovat a texty s ním postupně iteroval a tvořil přesně podle nového směru.
2. AI-assisted Design: Následně se zapojil Claude Design. Designér s jeho pomocí nejprve postupně skládal komponenty podle vizuálního stylu. Potom, na základě připravených wireframů, dělal designér společně s Claude Designem finální obrazovky, kde se rovnou řešily i interakce a stavěl se design systém.
3. Implementace přes agenty: Navržené obrazovky šly do vývoje, kde pomocí Claude Code vznikla technická specifikace a implementační plán. Samotné kódování pak probíhalo přes pokročilá workflows – dirigující AI agent rozděloval práci subagentům (s přesně nastaveným modelem a effortem) a celou implementaci hlídal. Součástí tohoto workflow byla automatická kontrola výsledků – subagenti přímo v prohlížeči vizuálně porovnávali výstup se zadáním a hlídali, jestli se vše shoduje 1:1 s návrhem.

Michal Roth CTO:

Byť nám AI vývojový cyklus silně urychlilo, nezapomínáme ale ani na performance a bezpečnost. Mít hotový kvalitní web je v dnešní době s AI otázkou chvíle. Mít ho bezpečný, dodržující předpisy a škálovatelný, je přesně to místo, kde uplatňujeme nejen AI, ale především naší expertízu.

Nejde ale jen o to rychle vygenerovat kód. Jedeme striktní Test-Driven Development (TDD), takže je celý projekt detailně rozsekaný na kousky a pokrytý E2E, unit a integračními testy.

AI využíváme napříč celým životním cyklem projektu – pomáhá nám s nasazováním na stage prostředí a se sledováním pipeline. Po celou dobu vývoje jsme navíc průběžně (částečně manuálně a částečně pomocí AI agentů) prováděli detailní bezpečnostní, rychlostní a SEO audity.