Building Wild Week Athens - From Experiment to Reality

Intro

As we were prepping for our 7th Wild Week, the yearly gathering where the whole company meets in flesh, we set ourselves a challenge. Can we build a fully functional info page in 1.5 weeks with 1.5 designers, using only AI and no-code tools?

The outcome: https://week.wild.plus/athens-26

This wasn’t about proving if AI can replace designers. It was about demonstrating the importance of aesthetics, creativity and qualitative thinking by orchestrating AI and no-code tools. It was about elevating our skills and being in control of our output, working in harmony with AI and trusting our instincts. Basically about demonstrating the importance of our role as designers.

A lot of people asked how it came together, so here’s the walkthrough.

A new way of designing

The traditional way of building has significantly changed over the last year or two. It has moved from a rather linear way of working between different disciplines into something highly iterative, where disciplines overlap and affect each other, with a constant back and forth for improvements. Instead of a few big steps, we’re taking many more small steps, making it easier to adapt or pivot directions.

This means we’re looking at more volume in explorations, more flexibility and a lot more control over the designer’s vision. It’s the right time to combine our holistic design knowledge with our fascination for technology.

Workload Split

• 60% Exploration

• 20% Building

• 20% Refine & Test

Explore
Define the style and embrace the chaos
> Moodboards, Figma, Weavy

Generate
Build recipes, prototypes or tools
> Weavy, Claude Code

Assemble
Bring it all together
> Figma, Framer

Refine
Test it, improve it and add details
> All tools

I’m not going to dive deeper into coming up with concepts, ideas, creating moodboards or building layouts with no-code tools. I’m purely focusing on the steps taken in Claude, Weavy and Framer, and the resulting learnings.

Let those tokens burn in Weavy

The weavy workflow is split up into three main steps:

1. Illustration

It felt like focusing on the illustration itself, before merging it into a relief, gave us far more control over the composition and the motifs. The style description was extracted from existing illustrations found in a book and refined with guardrails and constraints. After achieving a consistent outcome, an iterator was added to generate multiple illustrations at once. The only issue we weren’t able to solve was avoiding genitals. No matter what constraints we added, an occasional Greek shrimp or nipple popped up randomly. A pleasant surprise at first, but very annoying after the 50th time.

Continue exploring styles, save what works and appreciate surprises.

2. Relief

The relief was pretty straightforward, a simple prompt and a reference image and it was ready to go. It still needed some manual color correction in Photoshop. But since we already refined and combined some of the compositions there, it wasn’t much of an extra step.

3. Normal Map + Mask

The last step was generating a normal map, so we could add the metallic effect later on. The initial ideas was a watercolor reveal effect, the metallic effect came together while playing around with the controls in the Claude Code prototype. Nanobanana Pro did a really great job with the normal maps and it worked right away most of the time. We first generated the B/W masks as well, but decided to move over to Photoshop to save some tokens.

Bring it to live in Claude Code

We mainly used Claude Code to build a WebGL tool that can be implemented as an interactive component on any website. It all started with a simple prompt, and many refinements later, we landed on something we could work with.

The most important part of building interactive components is adding a GUI. If you know what you’re looking for, explain the settings you need. If you have no idea what’s going on, let Claude suggest settings and add tooltips with a short description on hover. This will help you understand the settings and their behavior. Play around with all of them, and let their effect hit you by surprise. It might spark some more ideas.

To make it usable in Framer, simply tell Claude to prepare it as a custom code component for Framer, and after some back and forth, it’s ready to go.

Tips that might be helpful to tell Claude along the way…

• Perform a performance audit

• Optimize it for mobile

• Do cross browser testing

• Suggest improvements

• Point out accessibility issues

Assemble it in Framer

The whole layout was designed in Figma and then transferred over to Framer. It could’ve been done in Framer directly, but I still feel that exploring options in Figma is quicker and smoother. The only limitation we agreed on was a 3-column grid, only with 1:1, 2:1 or 3:1 elements (horizontally or vertically), and one highlight color: blue.

Coming from Figma, Framer is quite easy to learn and it's extremely convenient to work with. A basic understanding of frontend development definitely helps.

Keep elevating

It’s all about the details, so take the time you saved along the way and spend it on refining everything else. Did you see? We added some sound and functionality to the vinyl play,

Conclusion

It was an exciting exercise and even if the result isn't perfect, it proofed to get production ready results with the help of different AI tools. It's just the matter of how you use and combine them.