Casa Ferreira
A fictional azulejo shop, built in a weekend, to speed test a new way of working with AI
Open Link
WRITING DETAILS
TYPE
Vibe coding / personal project
DATE
April 2026
TOOLS
React, Vite, CSS Modules, Claude Code
CASA FERREIRA
During the last few weeks in Lisbon, I’ve found myself continually pausing at one of the most jaw dropping artistic expressions of the city. Azulejos are painted ceramic tiles that cover facades, staircases, churches, and shop fronts. Hand drawn, geometric, centuries old, and somehow still the most visually arresting thing in a region full of beautiful things.
I hadn't flexed my creative muscles in a few weeks and was feeling the narrowness that comes with enterprise SaaS work. I wanted to make something that started with atmosphere and a feeling, and worked outward from there. The brief I gave myself was to create a brand around a fictional azulejo workshop in Alfama, one of the oldest neighborhoods in Lisbon:
Casa Ferreira, Nº 17, Rua dos Remédios, has been run by one person since 1961. Every tile is unique in its own visual aesthetic, and hand crafted nature.
The experience would have two modes: the outside world of the shop, and the workshop inside it. The landing page is a place you arrive at, and the tile creator is what you find when you go through the door. This distinction (world first, tool second) shaped every design decision that followed. The question was never "what should the UI look like”, but rather "what does it feel like to stand outside this atmospheric shop at night, and what do you find when you step inside”.
Visual language
Aesthetics came directly from the references I am currently surrounded by, and those I have been inspired from: Studio Ghibli's approach to lived in spaces with warm lamp lit storefronts of films like Spirited Away, combined with the actual visual texture of Alfama (dark wood, worn plaster, cobalt and ivory tile, brass hardware, notices tacked to doors). The palette was pulled from azulejo photography:
Cobalt
#2a4a7a: the dominant blue of traditional tileIvory
#f0e8d4: unglazed clay, aged paperOchre
#c47820: lantern light, brass, warm woodTerracotta
#c45030: fired clay, worn redDeep brown
#1a0e06: night, the wall behind everything
The typography mixes Portuguese and English throughout. "Entre aqui · enter here." "Cria o teu azulejo · design your tile." “Cada peça é única · every piece is one of a kind.”
Mid-journey atmosphere ideation session
The landing page
The shop facade is illustrated entirely in CSS and HTML without images or SVG files. Layered arches create depth, while the hanging lanterns glow at low opacity, lighting the wall around them. A figure visible through the upper window helps make the building feel occupied and lived in. The door is the single interactive element on the page. No nav links, scroll prompts, or hero CTAs. Just entre aqui, or enter here. The hierarchy of the scene exists entirely to make that one action feel inevitable. When you click the door, it swings open on a CSS perspective hinge (from the left edge, like a real door) before the transition carries you inside.
The workshop
The tile creator itself was designed to belong in a world of building and artistry:
Color swatches rendered as paint pots with varying heights, arranged like objects on a shelf
The tile canvas has the texture of an unglazed ceramic blank (off white, with a barely visible pencil grid guide)
Symmetry controls labeled in Portuguese: nenhuma, horizontal, vertical, quádrupla, the same four modes used in real azulejo pattern making
"Fire in kiln" saves your tile to a collection rendered as physical ceramic squares with slight rotation variation, as if someone laid them out on a table
The repeat preview (como fica na parede · how it looks on the wall) shows how a simple painted pattern becomes a tile that could style a facade.
The AI workflow
This project was designed with Claude Code as a collaborator throughout, but I believe it’s important to separate what was done by Claude, and what was personally completed. The decisions (the palette, the aesthetic direction, the choice to use atmospheric illustration over photography, the Portuguese/English voice, the two zone workshop structure) were all mine. What Claude did do was compress the time between having an idea and seeing it. This case study is partly about azulejos and partly about what it looks like when AI is used as a design collaborator rather than a generation tool…
Concept development: I concepted the shop I was imagining: an elderly artisan, generational knowledge, warm / lived-in, a door that opens. Claude was used to stress test the idea.
Iteration speed: Instead of spending half a day building a rough prototype, I could describe what I wanted ("the arch needs to feel set into the wall, not drawn on it, add two concentric shapes behind the door") and get a working version in minutes. This meant quicker iterations, better decision making, and a final output closer to the original vision.
Code generation: The full React app (routing, tile creator state management, canvas-based PNG export, CSS Modules, the door transition sequence) was built through Claude Code. I directed the architecture and visual language, while Claude wrote and debugged the implementation.
Design critique: At several points I used Claude as a sounding board and surface blind spots I was too close to see. I didn't accept all of it, but having a fast, honest outside perspective compressed what would normally take a peer review session into minutes.
What I learned
Designing a world first and a product second is a useful constraint. When the atmosphere is decided every UI decision has a reference point. Does this button belong in Dona Ferreira's workshop? No? Then change it until it does. The mixed language copy was a late instinct that changed the project's register entirely. "Cria o teu azulejo" followed by "design your tile" in smaller, muted text is a design decision about whose world this is and who's being invited into it.
I also came away with a more practical kind of fluency by navigating Claude Code, understanding how a React project is structured well enough to direct it confidently, and deploying a live site through the terminal. These aren't design skills in the traditional sense, but they matter. In a world where developers are increasingly making design decisions through vibe-coding, there's something worth reclaiming in the opposite direction: a designer who understands the medium well enough to build in it, without losing the design thinking that makes the work worth building.
Casa Ferreira is a self initiated project. The shop and Dona Ferreira do not exist, but the tiles you make are real.
