Dałem czterem modelom AI identyczne zadanie: przeprojektuj stronę mojej firmy. Ten sam prompt, ta sama noc, zero pytań, zero poprawek. Kimi K3, Claude Opus 4.8, Claude Fable 5 i GPT-5.6. Rano oceniałem cztery gotowe strony nie wiedząc, którą zrobił który model. Kolejność wylosowana, mapowanie zaplombowane do końca nagrania.
Cały test nagrałem. Film znajdziesz na końcu tego wpisu, a tu jest to, o co pytacie najczęściej: pełny prompt.
To nie jest "zrób mi ładną stronę"
Prompt ma 798 linii. Nie dlatego, że lubię długie dokumenty. Dlatego, że różnica między stroną generyczną a stroną, którą można wypuścić na produkcję, siedzi w zadaniu, nie w modelu.
Klient pyta mnie czasem, czy AI zrobi mu stronę. Zrobi. Pytanie, co dostanie w briefie. Model, który dostaje "nowoczesna strona dla firmy konsultingowej", zwraca szablon z Behance. Model, który dostaje fakty o firmie, hierarchię decyzji i twarde granice, zwraca coś, co broni się przed publikacją.
Z czego składa się ten prompt
Autonomiczny one-shot. Model ma zakaz zadawania pytań i proszenia o akceptację koncepcji. Podejmuje decyzje, implementuje, testuje i raportuje. Jeden strzał, pełna odpowiedzialność.
Hierarchia prawdy. Kiedy model musi wybierać, wie, co poświęcić: fakty biznesowe i dostępność stoją nad strukturą referencji, referencja nad brandem, brand nad obecnym layoutem. Bez tej drabiny każdy konflikt kończy się losowo.
Referencja, którą model musi obejrzeć. Nie wklejam linku "zrób coś w tym stylu". Referencyjna strona jest pocięta na 19 klatek z pełnego scrolla, z rozpisem scen w katalogu obok kodu. Model ma je przeczytać zanim zacznie projektować. Pracuje na tym, co jest, nie na wyobrażeniu.
Twarde zasady prawdy. Zero zmyślonych klientów, metryk i opinii. Pusty moduł jest lepszy niż wymyślony. To jest reguła, którą łamie większość generowanych stron, i pierwsza rzecz, którą sprawdzam przy odbiorze.
Craft floor, poniżej którego nie schodzimy. Kontrast AA. Reduced motion jako pełnoprawna wersja, nie wyłączone animacje. Strona ma wyglądać na zaprojektowaną także z wyłączonym JavaScriptem.
Wyznaczone terytorium kreatywne. Litera K przechodzi w znak |>, surowa geometria. Model dostaje jedno pole, w którym ma eksperymentować, zamiast eksperymentować wszędzie naraz.
Self-audyt na końcu. Model sam testuje wynik i raportuje, co zrobił i dlaczego. Raport czyta się szybciej niż kod.
Co z tego wyszło
Cztery różne strony. Każdy model znalazł inne dobre rozwiązanie i każdy zostawił inne słabe miejsce. Werdykt i porównanie są w filmie, a runda poprawek w części drugiej. Nie spoileruję.
Pełny prompt
Prompt jest po angielsku, bo w tym języku modele pracują najprecyzyjniej. Struktura jest ważniejsza niż język: podmień fakty o firmie, referencję i terytorium kreatywne, a masz gotowy szkielet pod własny test.
# KULIBERDA LABS HOMEPAGE — AUTONOMOUS ONE-SHOT REDESIGN
Build a complete, production-quality, conceptually original redesign of the Kuliberda Labs homepage.
This is an autonomous one-shot task.
Do not stop to request creative approval, choose between concepts, or ask clarifying questions. Inspect the available source material, make the strongest defensible design decisions, implement them fully, test the result, and report what was done.
## WORKSPACE
Repository: this directory (an isolated sandbox clone of the production source; no remote, deployment disabled). Work only inside this directory.
Live website (observation only, do not modify or deploy): `https://kuliberda.ai`
Primary creative reference: `https://x.com/jumperz/status/2077841331037094042?s=20`
**The reference is available LOCALLY in `_reference/motion-study/`:** `frames/f01.png` through `f19.png` (one frame per ~1.5s of a full scroll capture), `contact.png` (contact sheet), and `SCENES.md` (scene-by-scene breakdown of the composition and motion grammar). Before designing anything, READ the frames and SCENES.md. They are the actual reference; do not work from imagination of what the link might contain.
## AUTHORITY AND PRIORITY
Use the following hierarchy when making decisions:
1. Business truth, factual accuracy, usability, accessibility, and working functionality
2. The reference's structural and motion principles
3. Kuliberda Labs brand identity and voice
4. Existing repository assets and production content
5. The current website's visual layout
The existing homepage is a factual and functional baseline, not a layout baseline.
The completed homepage should be structurally closer to the reference's continuous cinematic experience than to a conventional consulting landing page.
Do not merely reskin or animate the current section structure.
## HOW TO USE THE REFERENCE
Study the reference as a system of composition and movement, using the local frames and SCENES.md.
Extract and apply its transferable formal qualities, including:
* continuous scroll-controlled narrative
* oversized typography used as spatial architecture
* strong static compositions that work before animation
* connected transitions rather than independent section reveals
* deliberate changes in pacing
* controlled pinning where it strengthens the sequence
* typography, numbers, lines, crops, and existing geometry transforming between states
* compositions that change layout rather than merely enter and leave
* deliberate contrast between dense and quiet moments
* meaningful color inversion
* visual elements that remain present long enough to become part of the next composition
Do not copy:
* its visible motif
* its brand language
* its colors
* its exact scene order
* its layouts
* its copy
* its assets
* its exact animations
Do not recreate the Kimi K portal or replace it with a literal equivalent based on the Kuliberda Labs logo.
The reference should influence the page's rhythm, continuity, scale, spatial composition, and transition logic—not provide a motif to imitate.
## PRIMARY OUTCOME
Create a homepage that makes Kuliberda Labs feel like the strongest small AI implementation studio for Polish companies:
* technically serious
* visually exceptional
* direct and specific
* personal without resembling a personal-brand template
* credible to Polish SME owners
* clearly operated by one accountable specialist
* focused on working systems rather than presentations
Within the first two viewports, the visitor must understand:
* what Dawid does
* what kind of operational work he removes
* why this is different from generic AI consulting
* what the visitor should do next
The experience may be cinematic and experimental, but clarity, trust, and conversion are non-negotiable.
## BUSINESS TRUTH
Kuliberda Labs is:
* Dawid Kuliberda
* a one-person AI automation and agent studio based in Kraków
* serving Polish companies
* building real operational systems around email, documents, invoices, statuses, research, reporting, and custom internal processes
* responsible for diagnosis, implementation, testing, deployment, and ongoing care
* direct, technical, honest, and anti-corporate
* operator-grade consulting
* code and working systems, not slide decks
Never imply that Kuliberda Labs is a large agency, a multi-person team, a venture-backed software company, or an abstract strategy consultancy.
The audience is not searching for "AI transformation."
They have real work trapped in inboxes, spreadsheets, documents, invoices, status questions, fragmented tools, and repetitive decisions.
## SOURCE MATERIAL
Before designing or modifying the homepage, inspect at minimum:
* `_reference/brand/essence.md`
* `_reference/brand/voice.md`
* `CLAUDE.md`
* `DESIGN.md`
* `messages/pl.json`
* the current homepage implementation
* the current global navigation
* the current contact flow
* `public/images/`
* `public/promo/`
* `_reference/brand/assets/`
* `_reference/motion-study/` (the reference frames and SCENES.md)
Relevant existing material includes:
* the Kuliberda Labs `|>` mark
* `inbox-02.png`
* `faktury-b.png`
* `status-c.png`
* `dawid-kuliberda-2.jpg`
* `process-16x9.mp4` and its poster
* existing diagrams
* existing brand SVGs
Treat these as raw visual material.
You may crop, mask, enlarge, fragment, sequence, abstract, layer, recolor within the brand system, or omit them.
Do not use stock photography, unrelated generated imagery, fake dashboards, or decorative assets that are not grounded in the business.
The existing mark is available as visual material, but do not assume it must become the central metaphor or control the entire page.
## CREATIVE AUTONOMY
Discover the central visual concept after inspecting the complete source material.
The concept must be specific to Kuliberda Labs and should express the movement from unresolved operational work toward a controlled working system.
However, do not default automatically to:
* a literal pipeline
* a conveyor belt
* an input/output diagram
* an inbox animation
* a before-and-after comparison
* a process flowchart
* the `|>` mark used as a portal
* one separate scene for every service or content requirement
Consider multiple viable creative directions before selecting one.
Choose the direction that best combines:
* distinctiveness
* relevance to the actual business
* compatibility with the reference's formal language
* clarity for Polish SME owners
* strong static composition
* potential for connected transformations
* responsive feasibility
* accessible reduced-motion behavior
* production reliability
Do not pause for approval.
Document the selected direction and two credible rejected directions in `DESIGN-RATIONALE.md` after making the decision.
The rejected directions should be genuinely different concepts, not minor visual variations.
## CENTRAL CREATIVE TERRITORY
Use the reference's treatment of the letter K as a starting point for investigating the typography and geometry already present in the Kuliberda Labs identity.
Do not reproduce the reference's K portal, its exact transformations, or its scene structure. (This territory overrides the earlier caution about logo-based equivalents: the letter K as typographic raw material is encouraged; only the portal/zoom-through mechanic itself remains off-limits.)
Instead, explore the latent visual relationship between:
* K
* KULIBERDA
* LABS
* the Kuliberda Labs `|>` mark
The K may act as an initial typographic source rather than a permanent logo motif.
Its vertical stem, diagonals, counters, crops, and fragments may transform into:
* parts of the word KULIBERDA
* the `|>` execution mark
* divisions between compositions
* masks for existing imagery
* rails, cuts, layers, or alignment systems
* typographic architecture
* transitions between personal authorship and technical execution
The relationship should be discovered through design, not explained literally to the visitor.
Avoid turning the sequence into a conventional logo animation such as:
`K → KULIBERDA LABS → |>`
The transformation should be spatial, layered, editorial, and capable of carrying an extended scroll narrative.
Letters may remain partially visible, become cropped beyond recognition, split into multiple planes, reveal other content, or return later in a different function.
The mark should feel like raw geometry rather than a repeated decorative logo.
### Conceptual tension
The visual system may explore the tension between:
* KULIBERDA — the accountable person
* LABS — the place of testing and implementation
* `|>` — the moment something begins to execute
* unresolved manual work — the material being transformed
Do not represent these as four literal chapters.
Use them as conceptual forces that can overlap, interrupt, merge, or exchange visual roles.
The strongest result should feel closer to:
* an experimental typographic identity
* a digital title sequence
* an editorial system in motion
* a technical object being assembled
It should not feel like:
* an agency portfolio
* a consulting template
* an animated corporate brand book
* a SaaS landing page with cinematic transitions added on top
## REFERENCE PROXIMITY
The completed homepage should be meaningfully close to the reference in formal ambition and experiential structure.
This means it should adopt comparable levels of:
* typographic scale
* visual layering
* aggressive but controlled cropping
* continuous transformation
* scroll-directed composition
* spatial tension
* scene-to-scene inheritance
* moments where a single typographic object dominates several viewports
* layouts that reorganize while remaining visibly connected
* deliberate contrast between monochrome, inversion, and accent color
* editorial confidence
Do not reduce the influence of the reference to general qualities such as "good pacing" or "high craft."
Its core contribution should be the idea that the homepage behaves like one evolving composition rather than a stack of designed sections.
At the same time, the result must not resemble a reskinned Kimi website.
Its content density, emotional tone, typography, imagery, rhythm, and meaning must emerge from Kuliberda Labs.
## COMPOSITIONAL FREEDOM
Do not begin by assigning business content to sections.
Begin by establishing:
1. the dominant typographic object
2. the visual tension that will drive its transformation
3. the geometry that can survive between compositions
4. the moment at which the visitor understands the offer
5. the moment at which personal accountability becomes visible
6. the moment at which the narrative resolves into an action
Only then distribute the required content through the experience.
Content requirements are raw narrative material, not page architecture.
Do not automatically create separate sections for:
* operational problems
* product starting points
* the custom agent
* the process
* proof
* Dawid
* contact
Several of these may occupy the same composition.
One subject may return multiple times in different visual states.
A business fact may first appear as a small technical label and later become the main typographic statement.
An image may begin as texture or cropped geometry before its full meaning becomes visible.
The page may contain fewer large movements rather than many scenes, provided the experience remains clear and complete.
## TRANSFORMATION RULES
Every major state should emerge from material already visible on screen.
This inheritance may be geometric, typographic, photographic, semantic, or rhythmic.
Prioritize transformations such as:
* a letter fragment becoming a structural division
* a crop opening into a new field of content
* a word changing scale until it becomes architecture
* an image mask becoming a layout boundary
* small metadata becoming dominant typography
* an accent state expanding into a full composition
* a personal element becoming a technical system, or the reverse
* foreground content becoming background structure
* multiple layers aligning into a single precise state
These are transformation categories, not a required storyboard.
Do not implement all of them mechanically.
Avoid transitions based primarily on:
* fading one complete section out
* fading another complete section in
* clearing the viewport
* repeatedly introducing a new centered headline
* placing unrelated content inside the same animation pattern
* treating every content group as a self-contained component
The user should feel that the page is continuously changing its interpretation of the same visual material.
## CREATIVE DECISION
After inspecting the repository and assets, determine whether the K-to-`|>` typographic territory is strong enough to carry the full experience.
If it is, develop it with restraint and depth.
If repository discoveries reveal a demonstrably stronger central concept, use that concept instead, but it must retain the reference's level of typographic continuity, transformation, and spatial ambition.
Do not abandon the K and `|>` relationship merely to produce a safer or more conventional consulting website.
Do not force it into every viewport merely for brand consistency.
Document the final decision and its rationale in `DESIGN-RATIONALE.md`.
## STRUCTURAL PRINCIPLE
The homepage must be perceived primarily as one connected visual narrative, not as a sequence of independent landing-page sections.
Conventional sections may exist where functionality requires them, particularly around contact and legal content, but they should not define the dominant experience.
Every major composition must inherit at least one visible or conceptual element from the preceding composition.
Possible inherited elements include typography, alignment, scale, crop, line, number, image fragment, negative space, rhythm, or navigation state.
Do not clear the screen and restart with an unrelated composition unless the interruption is intentional and narratively justified.
The number of scenes, their order, their height, and their duration are yours to determine.
Do not stretch the page to meet an arbitrary viewport-height target.
Do not reproduce the current homepage's component boundaries.
Do not map each business fact to a separate scene.
## CONTENT INVENTORY
The following are required factual and narrative materials, not prescribed sections.
Combine, compress, overlap, sequence, repeat, or integrate them according to the selected concept.
### Core promise
The central promise is:
"Zdejmuję z firm ręczną pracę."
Agents and automations handle repetitive operational work.
The human retains control over decisions.
### Concrete operational problems
The homepage must make the work tangible through real examples such as:
* customer enquiries waiting in inboxes
* invoices and payment reminders processed manually
* repeated order-status questions
* information distributed across email, documents, CRM systems, and spreadsheets
Avoid generic descriptions of AI capability.
### Existing starting points
Communicate the real offer examples:
* Skrzynka Pod Kontrolą
* Faktura i Przypomnienia
* Status Zamówienia
They do not need to appear as three cards, three columns, or three independent scenes.
### Custom implementation
Explain that processes outside the existing catalogue can be implemented around the company's actual operational workflow.
The governing principle is:
"System przygotowuje, człowiek decyduje."
Do not imply uncontrolled autonomous operation.
### Engagement model
Communicate:
* AUDYT
* TEST
* SYSTEM
Make the progression feel practical, low-risk, and easy to understand.
Do not present it as an abstract consulting framework.
### Proof
Use only real proof already present in the repository or current production website, including where appropriate:
* Tomek Prusak / Hotel Małopolanka
* Norbert Buszek
* the honest statement that the reference list is still being built
* verified implementation facts
* verified operating ranges
Do not invent:
* metrics
* savings
* customer counts
* logos
* uptime
* benchmarks
* testimonials
* project outcomes
* company names
Empty or quiet space is preferable to fabricated proof.
### Dawid
Dawid must be visibly accountable for the work.
Use the real portrait when it materially strengthens the selected composition.
Avoid the standard layout of a founder portrait beside a biography.
The portrait may be cropped, masked, enlarged, fragmented, converted to monochrome, partially obscured, or integrated into typography.
### Conversion
The final action is a free diagnosis of approximately 30 minutes.
Preserve and clearly expose:
* the existing contact form
* Calendly
* email
* phone
* privacy guidance
* form validation
* clear focus states
The CTA must feel like the conclusion of the visual narrative, not an unrelated form appended after the designed experience.
## COPY
The site is Polish-first.
Use current production copy and verified repository content as the factual source.
You may:
* shorten copy
* split sentences into display fragments
* change hierarchy
* convert selected phrases into large typographic compositions
* remove repetition
* reposition content
* create concise connective copy where necessary
Do not introduce unverified claims.
Do not rewrite the offer into generic agency language.
Voice:
* direct
* concrete
* concise
* calm
* first-person singular where appropriate
* technically confident
* anti-corporate
* free from hype
Avoid:
* "transformacja AI"
* "kompleksowe rozwiązania"
* "skaluj swój biznes"
* "rewolucja AI"
* English marketing slogans inside Polish body copy
* exclamation marks
* fake urgency
* inflated promises
Any meaningful new copy that changes the existing positioning should be listed separately in `DESIGN-RATIONALE.md`, together with the reason for the change.
## VISUAL IDENTITY
The established identity is based on:
* near-black
* off-white
* one green execution accent
Preserve that recognition without treating the existing palette as a fixed page template.
A deliberate temporary inversion or paper-like state is acceptable when it improves the narrative.
Green should indicate execution, activation, decision, confirmation, routing, or a major climax.
Do not distribute it decoratively across every scene.
Typography should carry much of the experience.
Choose a production-appropriate typographic system with:
* strong Polish character support
* editorial asymmetry
* extreme but controlled scale
* intentional cropping
* restrained monospace metadata where useful
* clear functional hierarchy
* generous negative space
* contrast between dense and quiet compositions
The page must look intentionally designed in a static screenshot and with JavaScript disabled.
Do not rely on animation to rescue weak layouts.
## MOTION
Motion must explain a transformation, relationship, or change in state.
Prefer:
* scroll-linked transforms
* masks
* clip paths
* typographic scaling
* variable font width or weight changes where supported
* connected layout transformations
* inherited geometry
* controlled pinned sequences
* object continuity
* deliberate changes in speed
* number or label choreography when justified by the selected concept
Avoid:
* constant fade-up reveals
* random parallax
* bouncing
* springs
* overshoot
* excessive smooth-scroll lag
* decorative floating elements
* long loaders
* animation that delays access to important content
* transitions that exist only to demonstrate animation skill
* identical reveal logic repeated throughout the page
The motion should feel heavy, calm, exact, and directly connected to scrolling.
Do not force motion into every viewport.
Quiet static moments are valuable.
## TECHNOLOGY
Use the existing Next.js 15, React 19, and TypeScript project.
You may add GSAP ScrollTrigger and restrained Lenis smoothing when they materially improve the implementation.
They are tools, not requirements.
Do not introduce WebGL unless the selected concept genuinely cannot be implemented cleanly with HTML, CSS, SVG, masks, clip paths, and transforms.
Requirements:
* text remains real HTML
* semantic headings and landmarks
* existing routes remain functional
* skip link
* keyboard navigation
* visible focus states
* sufficient contrast
* accessible contact form
* no scroll traps
* no hijacked wheel behavior
* no broken browser history
* no layout shift after fonts load
* clean animation lifecycle and cleanup
* breakpoint-aware timeline recalculation
* no persistent console errors
* no hydration warnings
* performance appropriate for ordinary laptops and mobile devices
Prefer transforms and opacity for animation performance.
Use CSS and layout changes deliberately and avoid unnecessary frame-by-frame layout recalculation.
## RESPONSIVE ART DIRECTION
Design desktop, tablet, and mobile as related but separately composed versions.
Verify:
* 1440px
* 1280px
* 1024px
* 768px
* 430px
* 390px
* 360px
Do not merely scale down the desktop composition.
On mobile:
* preserve the selected narrative concept
* replace unsuitable horizontal or pinned sequences with authored vertical alternatives
* maintain clear reading order
* keep all content reachable
* shorten or remove expensive motion
* preserve strong typography without accidental clipping
* maintain usable navigation and form controls
Mobile should feel designed, not degraded.
## REDUCED MOTION
`prefers-reduced-motion` is a first-class version of the homepage.
It must:
* disable smooth scrolling
* remove pinning that interferes with normal document flow
* remove large zoom journeys
* remove unnecessary scroll-linked movement
* expose all content directly
* preserve hierarchy and composition
* retain navigation
* retain all form functionality
* remain complete and understandable
## STRICTLY AVOID
* generic SaaS card grids
* bento layouts
* rounded floating panels
* glassmorphism
* glowing neon blobs
* decorative gradients
* gradient text
* fake terminals used as filler
* random particles
* AI brain imagery
* robot imagery
* stock office photography
* generic icon grids
* pill buttons
* testimonial logo strips
* invented dashboards
* invented metrics
* excessive blur
* repeated centered headline, subtitle, and button stacks
* copying the reference's visible motif
* converting the site into a creative-agency portfolio with an unclear offer
* sacrificing comprehension or conversion for a showreel
## IMPLEMENTATION WORKFLOW
Complete the following without pausing for approval:
1. Inspect the repository, brand documents, current website, routes, content, dependencies, assets, navigation, and contact flow. Read the reference frames and SCENES.md.
2. Evaluate several conceptually distinct design directions.
3. Select the strongest direction using the criteria in this brief.
4. Establish the static art direction and responsive compositions before adding complex motion.
5. Implement the selected homepage concept on a feature branch (the sandbox has its own local git; commit as you go).
6. Improve shared navigation or footer only where needed to support the homepage.
7. Preserve the current production deployment.
8. Do not deploy.
9. Test the complete experience.
10. Fix discovered issues rather than only documenting them.
## DESIGN RATIONALE
Create `DESIGN-RATIONALE.md` containing:
* the selected central concept
* a concise description of two rejected alternative concepts
* why the selected concept is specific to Kuliberda Labs
* how the reference influenced structural and motion decisions
* the visual grammar
* the motion grammar
* the role of typography
* the role of existing assets
* how the first two viewports establish clarity
* how the narrative supports trust
* how the final CTA concludes the experience
* meaningful new copy introduced
* significant departures from the current homepage
Do not use the rationale to justify weak implementation decisions after the fact.
The implementation itself is the primary deliverable.
## QUALITY STANDARD
Before calling the work complete, verify:
* The homepage looks authored with JavaScript disabled.
* The dominant experience feels like one connected composition.
* The structure is closer to the reference's cinematic continuity than to a standard consulting landing page.
* The selected concept could not be transferred unchanged to another AI consultancy.
* Each significant animation advances the story.
* Major compositions inherit geometry, meaning, or visual material from preceding compositions.
* A Polish SME owner can quickly understand the offer.
* Dawid is visibly accountable for the implementation.
* Every factual claim is grounded in existing sources.
* The mobile version feels separately art-directed.
* Reduced-motion remains complete.
* The final CTA feels like the natural conclusion.
* The result is clearly stronger than the current homepage, not merely more animated.
Iterate until these conditions are satisfied.
## VERIFICATION
Run and report exact results for:
* `npm run lint`
* `npm run typecheck`
* `npm test`
* `npm run build`
Also verify:
* all primary navigation actions
* contact form behavior without submitting real personal data
* validation and error states
* Calendly link
* email link
* phone link
* mobile navigation
* keyboard-only navigation
* focus visibility
* reduced-motion mode
* browser console
* hydration
* layout at every required breakpoint
* animation cleanup after navigation
* animation cleanup after resize
* performance under ordinary laptop and mobile conditions
## DELIVERABLES
Return:
1. Complete working homepage implementation
2. `DESIGN-RATIONALE.md`
3. `TEST-REPORT.md` with exact commands and results
4. List of dependencies added
5. List of changed files
6. Summary of the implemented concept
7. Known residual risks, if any
8. Confirmation that no deployment was performed
Film z całego testu
Część 1 (test w ciemno i odsłonięcie): obejrzyj na YouTube Część 2 (runda poprawek i piąty model): wkrótce.
Jeśli chcesz zobaczyć, jak taki proces wygląda na Twoich procesach, nie na mojej stronie: bezpłatna diagnoza, pół godziny, konkret.