Przejdź do treści

Blog · Sierpień 2025

Jak w kilka godzin zbudowałem premium link hub. Dlaczego podejście AI-first zmienia zasady gry

  • Jakub Liška · Sierpień 2025

Gdy trzeba szybko stworzyć profesjonalny produkt, AI może zaoszczędzić tygodnie pracy. Proszę zobaczyć, jak w kilka godzin stworzyłem w pełni funkcjonalny link hub z premium designem...

Linktree, Carrd, Many.bio, szybkie narzędzia, z których korzysta prawie każdy. Dla marki osobistej lub firmy, która chce wyglądać globalnie i premium, to jednak za mało.

Ja zamiast kompromisów wykorzystałem AI i w ciągu jednego popołudnia zbudowałem własny

👉 premium Link Hub, minimalistyczny, luksusowy i w 100% pod moją kontrolą.

Problem: dlaczego gotowe narzędzia nie wystarczają

  • Jednolity design, zero wyróżnienia.
  • Brak kontroli → brand value spada.
  • „Tanie wrażenie” zamiast premium positioningu.

Executives przy tym wiedzą, że wiarygodność decyduje o każdym leadzie. Dane to potwierdzają: treści udostępniane bezpośrednio przez CEO mają 3× wyższy engagement niż konta firmowe.

Proces: 3 kroki do własnego Link Hubu

1. Definicja języka projektowego (Metaprompt)

Zacząłem od tego, że zleciłem AI metaprompt, profesjonalny brief na poziomie takim, jakbym zatrudniał seniorskiego projektanta.

Wynikiem nie jest od razu design, ale gotowy prompt, który każdy może potem wziąć i użyć dla własnego stylu (np. „w moim stylu” albo „w stylu [imię]”).

ROLE: You are a senior designer/developer tasked with creating UI/UX in the design language of [Your Name] or [In my style].
DESIGN LANGUAGE:
- Style: minimalism, high-end, Apple-inspired. Functionality + visual wow effect.
- Colors: primarily black (#0F0F0F), white (#FFFFFF), gray shades. Accents only subtle neon (cyan #06B6D4, blue #3B82F6, purple #8B5CF6) and light gradients. Never flashy.
- Layout: grid-based, clean blocks, large spacing, lots of whitespace. Clear content hierarchy is essential.
- Typography: modern sans-serif (SF Pro, Inter, Helvetica Neue). Headlines large and bold, body minimalist.
- Tone of voice: direct, clear, professional, global. No fluff, no emojis.
- Icons: simple, outline or minimal flat. Animations and interactivity subtle and functional (hover, micro-animations).
- Photos/3D: always hi-res, lifestyle or product-oriented, never stock.
- Forbidden: chaos, clipart, flashy colors, clutter, childish style.
TASK: Create a design/component/layout that strictly follows this style.
It must feel like a premium product on a global scale, at the level of Apple or Airbnb.
Stay true to this design language and do not slip into “generic web design.”

2. Wizualny Moodboard (Metaprompt)

Kolejny krok znów przez metaprompt, tym razem zleciłem AI, żeby przygotowała mi prompt dla narzędzi takich jak Midjourney czy Ideogram.

Celem nie było od razu dostać obraz, ale gotowy prompt, który każdy może potem wkleić do wizualnej AI i wygenerować własny moodboard z kilkoma wariantami na jednym obrazie.

ROLE: You are an expert prompt engineer for AI design tools (Midjourney, Ideogram, Runway).
TASK: Generate a polished, professional prompt for creating a moodboard image with 4 to 6 design variations in one image.
INPUT: The user will describe their desired style, colors, and vibe (e.g., "futuristic red/black style" or "minimalist pastel web design").
OUTPUT: A single ready-to-use prompt for Midjourney/Ideogram.
The prompt must include:
- Style (expanded from user’s input, e.g. minimalist, Apple-inspired, futuristic, brutalist, etc.).
- Colors (exactly as specified + HEX if possible).
- Layout: grid-based, multiple variations side by side in one image.
- Elements: hero section, cards, CTA buttons, typography.
- Mood: premium, high-end, professional.
- Output format: "one image, multiple concepts side by side".
EXAMPLE USER INPUT → "Minimalist black and white style with neon blue accents"
EXAMPLE OUTPUT →
"Create a moodboard with 4 to 6 design variations in one image.
Style: minimalist, premium, Apple-inspired.
Colors: black (#0F0F0F), white (#FFFFFF), neon blue (#3B82F6).
Layout: grid-based, large whitespace, bold typography, clear hierarchy.
Include hero sections, link cards, CTA buttons.
Each variation should show a distinct approach but remain consistent in style.
Output: one single image with multiple design concepts side by side."

To pomogło mi wizualnie zdefiniować kierunek: czysty, premium, spójny.

Do generowania moodboardu użyłem Ideogram.ai, narzędzia, które w kilka minut pozwala tworzyć wizualizacje w stylu high-end minimalizmu, inspirowane markami takimi jak Apple. Dzięki temu mogłem szybko przetestować różne warianty layoutu, kolorów i typografii bez długiego szkicowania w Figmie. Wynik: czyste, premium moodboardy, które od razu ustaliły język wizualny całej aplikacji i posunęły projekt o kilka kroków do przodu.

3. Rozwój prototypu (Metaprompt)

Ostatni krok znów przez metaprompt, tym razem nie zleciłem AI od razu zadania „napisz mi kod”, ale najpierw poleciłem, żeby stworzyła profesjonalny prompt dla seniorskiego frontend developera.

Wynikiem był kompletny prompt statycznej aplikacji React/Tailwind, gotowej do importu do Lovable.dev, bez backendu i ze wszystkimi elementami zgodnymi z moim językiem projektowym.

ROLE: You are a senior frontend developer.
TASK: Build a static React/Tailwind app (Lovable.dev ready).
Requirements:
- Hero section: include name, short claim, and a hi-res photo on a dark background (#0F0F0F).
- Link cards: create 4 to 6 cards, each card must contain:
• Icon (outline style)
• Title (H3, bold)
• Short description (max 2 lines, concise)
- CTA button: Neon Blue (#3B82F6) background, white text, 12px radius. Text: "Get Insights".
- Grid layout: clean, minimalist, with large whitespace (64px between sections).
- Typography: Inter font, clear hierarchy (H1: 48 to 64px bold, Body: 16 to 18px regular).
- Hover interactions: subtle scale-up (1.02), border highlight in accent color (cyan/blue/purple).
- Responsiveness: fully mobile-friendly, polished look comparable to Apple’s design standards.
- No backend: static text and links only.
- Code quality: clean, production-ready, structured into reusable components.
- Output: ready-to-import React + Tailwind code for Lovable.dev.

Wynik: ROI w liczbach

  • Oszczędność czasu: 1 godzina zamiast dni do tygodni pracy.
  • Oszczędność finansowa: strona na zamówienie kosztowałaby €1,500 do 3,000. Ja = 0 €.
  • Kontrola: własny język projektowy, globalna wizytówka.

Sedno: to nie kwestia narzędzi, ale zadania

AI nie jest magiczną różdżką. Jeśli da mu się niejasny prompt, wynik będzie przeciętny. Jeśli da mu się brief na poziomie czołowej agencji, dostaje się produkt, który normalnie kosztowałby tysiące euro.

Ja swojego Link Huba już używam i działa jak premium wizytówka cyfrowa.

Artykuł pierwotnie ukazał się na LinkedInie. Oryginalny artykuł na LinkedInie

Proszę zacząć tutaj

Wstępne 15 minut wystarczy, żeby wiedzieć, czy to ma sens.

Państwo mówią, co Państwa boli. My mówimy, czy damy radę, ile to mniej więcej kosztuje i od czego ja bym zaczął na Państwa miejscu. Bez prezentacji.

Adres
Legerova 1820/39, Praga 2

Kalendarz udostępnia Cal.com (strona trzecia), ładuje się dopiero po kliknięciu.