All right. I’ve decided to build something in public. The main objective here is to document and showcase my process.

In fact, I’m building two ideas, and I’ll do my best to make the process public so everyone can collaborate or leave their thoughts. Hopefully, I’ll get enough insights and interactions that will allow me to learn new things, make new connections, and show my creative process — not sure if I ever mentioned it here, but I am passionate about the creative process and creating things.

I’ll outline the main phases of my process until now, since I believe that there are some interesting insights and aspects even for the first iteration.

I do not intend to teach how to create a digital product from scratch, and will assume whoever is reading this has a basic sense of how software engineering and product management work. I’m more of an enthusiast than a specialist, still, my curiosity and past experiences gave me a solid background to conduct this “experiment” as close to the current industry standards and (good?) practices.

First things first: The MVP’s MVP.

Before anything, there was an idea. The gap between the idea and the product is the execution. The motivation for the execution is the feasibility. This is the reason I suggest this first step: creating a very basic, raw — almost visceral — version of your idea. The objective here is simply to understand if this idea is worth our effort. I’ve used claude code for this stage and a single prompt was able to generate a simple version. I just wanted to validate if I could fetch GitHub data and feed an LLM, asking for insights

Prompt was not far from:

Career Keeper is a tool to help developers keep their resumes updated based on their current contribution history. The objective is to scan the user’s GitHub history and gather enough information to update their current experience in their resume. It will also serve as an assistant to improve and adjust the resume based on job descriptions and their experiences. Other data points may also be used, such as: current resume, LinkedIn, and other social media presence, and so on.

And this is the result:

The MVP’s MVP

The result was solid enough to keep me going. But, since I had no clue regarding how this was built in technical terms, I'll aim for a more detailed definition in the next iteration. Also, I’ll talk about it in the future, don’t worry — you’ll overlook stuff, that’s normal.

Looks good, or almost? Let us proceed to the next step.

PROP: Project Roadmap Organization Prompt

I may be ignorant (probably), or just old? In this phase, the main tool is the natural intelligence — still, we can enhance it…maybe in my next take? — The sky is the limit in terms of what you would need to define the initial skeleton for your product. In my situation, I did a mix of brainstorming, user story mapping, and architectural decision records to shape my basic idea: user flows, technologies, out-of-the-box ideas, and data sources.

Once I had a more elaborate version of my idea, I went to prompt my AI assistant. This time I’ve used cursor and a couple of MCP tools to enhance my workflow. This part is crucial for the rest of the process, so it is acceptable to try a couple of times, refining the prompt based on previous outputs. As I mentioned before, you’ll overlook and forget details. It is easier to change now, so you define a good direction before jumping into the actual implementation phase.

The PRD file

The main take here is to make the LLM shape the roadmap in terms of tasks and objectives. To achieve this, our first prompt — AKA prompt zero - will explain the whole concept of the application and ask the model to generate a PRD - Product requirements document - for the product. You can find a lot of templates over the web to feed your LLM as reference, the more you prepare and detail, the better the outcome. Even if this sounds way too academic, the LLM doesn't care. It craves context, and you’ll benefit from the organization.

Enter the MCP: Taskmaster

Not all heroes wear capes. To be honest, I’m not sure, since I don’t know the guy who created https://www.task-master.dev/ — a very nice tool to add to your workflow when using AI agents as a code assistant.

Won’t get deep in the weeds here about the tool itself, but I’ve used it to parse the PRD file into a proper task list, the granularity is up to you - just take into consideration that it consumes LLM credits, there are some free models as well as far as I could see. Taskmaster will be your companion, keeping track of what you have already done and still need to do. It is your AI-assistant roadmap.

Wrapping up

These first two steps prepare the ground for the prompt engineering (AKA vibe coding) cycle. I’m pretty sure that quickly pre-validating the MVP and organizing the roadmap will enable quality results and provide better control over what is being generated. My next article will cover this cycle, trying to balance: not so much vibe nor so much coding, and explore ways to achieve quality code, avoid rework, and have more of a pair-programming experience, than feeling that code is generated out of thin air.

See ya soon!

Current repo: https://github.com/dudouz/career-keeper

In the software development market, the pressure for results, quick deliveries, and the constant rise and fall of technologies and positions often lead us to a state of anxiety or mental exhaustion.

Much more than having technical mastery over our capabilities, we must seek emotional and psychological control to avoid traps and situations that put us down and leave us in conditions such as imposter syndrome or burnout.

There are cases in which we put ourselves in these situations, other times things beyond our control happen or even interpersonal relationships at work bring us feelings of incapacity and exhaustion.

It is evident that in extreme cases (or not so much) the help of a professional is necessary, but we can identify these situations and work on our mentality to be more hardy and resilient.

Because I have already faced (and suffered) several times with uncomfortable situations, which resulted in burnout, frustrations, and depression, I decided to share a little of my experiences on this subject and focus on a point that we must mature more and more in our lives: the ability to say no.

Sometimes this “no” is for ourselves, sometimes it is for certain situations and it can also be for people.

Regardless of the context, knowing when to deny a behavior or situation can save us from difficult situations.

Say no to a false impression of obtaining knowledge

One of the most common mistakes I see in technology (and I’ve suffered a lot from this) is trying to learn everything at once.

Common Symptoms:

• Lessons in 2x “to finish the course faster”.
• Just watch courses without applying anything in practice.
• Seeing a new tech being launched and immediately starting a miraculously paid training that promises mastery of this tech in 3 months.

Take your time. We all have our own. Don’t be fooled by progress bars on boot camp platforms. Don’t be in a hurry: speeding up a video doesn’t speed up your learning.

The most important thing is to build and maintain a solid foundation and reconcile more focused studies on technologies that are relevant to a professional objective: outplacement, promotion, obtaining better clients and/or projects, etc.

Say no to taking your job for granted

Sometimes we may fool ourselves and think that we are bored at work.

Bull****.

We can always improve by practicing. We gain technical ownership in a given subject through real practice, without copypaste and with attention to what and why we are doing it.

It is with daily and consistent repetition that we acquire experience. Attention, however, experience is nothing without a practical application consistent with the needs of the market.

Keep going, stick with this cycle consistently and you will improve professionally and be more selective with what you need to learn.

Employed or not, keep an eye on what the market needs and practice relevant skills a lot. Repeat.

Say no to sedentarism

Speaking of practice, never neglect your health. Physical activities, preferably outdoors, are crucial for good mental health.

Mens sana in corpore sano: (“A healthy mind in a healthy body”).

Have a hobby or a sport that makes you move and get out of your office, like surfing or hiking

Maybe you can adopt a dog and take him for a walk every day, it’s up to you.

[Bonus] Last, but not least: Say no to working with idiots

This is a personal one, legend has it that I read this term in some lost article on the internet. Sometimes the problem is not exactly in us and we can be involved in some toxic situations, usually caused by an idiot.

Resilience has a limit and in some cases the best option is to seek your space elsewhere, leaving the idiots behind.

💡 Have you ever been in some situation where you had to say “no” to succeed? Let’s talk if you wish to share anything!

Hope these “no`s” come in handy when you see yourself in one of those situations. Or at least make you think about it and identify them when they happen.

As are all web development layout techniques and patterns, CSS is changing a lot. Being a former user interface designer, I can’t help but try to always bridge the gap between what CSS allows us to do technically and the basic principles of layout composition in terms (and mindset) of design.

Thankfully, nowadays CSS and browsers have evolved to a point where we can afford to start defining good practices that narrow the gap, especially when it comes to thinking about how to build an interface, between designers and software engineers.

Positioning and arranging items is tricky and it is carefully thought and crafted by the designers. We as developers have the responsibility of keeping the same line of thought when coding our interfaces. This will end up adding improving overall end-user experience.

That said, I’m going to start with the first pattern:

Use grid for the big picture

I believe designers will agree with this one: Usually design people think on grids when laying out a component or a screen. I’ve never heard of a designer that thinks on “flex boxes”.

And since CSS now allows us to properly use grids, we can achieve exciting things by tagging along the designers and understanding the “whys” behind the overall composition idea. You’ll note that terms like “column”, “row”, and “gap” can be easily shared and applied between the two areas, providing a more consistent approach.

So we can start asking: “Will this column have a flexible width?” or “Does this area change position when different types or sizes of screens are rendering it?” and just rely on CSS grid to achieve it. Sometimes even breakpoints aren’t necessary!

Technically, the CSS grid allows us to define flexible layouts by introducing the fr measure, which stands for fraction, so you don’t need to struggle with percentage calculation anymore! Besides that, you can have named grid areas to allow responsiveness on steroids.

Leave flex for inline or isolated components (even though you can achieve almost everything with grid).

Prioritize gap over margins

Use cases of margin when applying grids become more specific as gap plays its role for column and row spacing, and — usually —, we use padding to set spacing around elements, this way we keep it consistent as even though designers do not have a “padding and margin” mindset, it allows easier discussions when thinking about padding and gap as “space around the element” and “space between elements”

Define a common minimum module

This is as basic and as helpful as it gets. Defining a minimum module measure and respecting it allows both designers and engineers to have a trained eye for that context. Module progressions usually affect typography, column sizing, gaps and spacing, and component blocks optimal sizing. When balanced, all these elements bring harmony and coherence to our layouts.

Know the minimum module and you’ll be able to extend your impact as an engineer by suggesting quick compositions that respect the overall looks of your application and impress your peer designers!

TL;DR

Start adopting a grid-first mindset instead of a mobile-first mindset when laying out screens or components nowadays.

This will help you get on the same page (lol) with the designers, and by leveraging the same vocabulary and expressions you can enhance the way your components are laid out.

About the Author

Eduardo Rosa Iotti is a Brazilian Front-End developer, with an interesting background: Graduated in Advertising, carreer in graphic and user interface design and nowadays spends his days building user interfaces with React / TypeScript mostly.

CSS Grid: Creativity unleashed!

In this article i would like to show you some of the possibilities that css grid layouts brought to us in terms of experience, art direction and interface design for the web nowadays.

My background experiences granted me many experiences and I’ve started with that on purpose to give you a taste of where we’ll get in this atricle.

How we did back in the days?

Even though today we make jokes about table layouts, at some time using tables to build webpages was the mainstream methodology.

But, let’s skip this dark past and go further on to a more professional approach to state our mark zero:

The 12 cols: from 960.gs to Bootstrap

The first organized layout-structuring purpose that I’ve adopted was 960.gs, on both front-end and graphic design projects (oh those Adobe Photoshop gridline and guidelines templates…). Although the 12 column grid template had it’s peak with Bootstrap.

What kind of problem they solved

Just bring up old tools’s names is pointless. Lets focus on the problem they solved: Column layouts.

At that time we hadn’t native ways to approach this problem, which lead us to inconsistent solutions, specially when it comes to calculating column gap between different screen sizes and resolutions.

That’s until those frameworks stepped into the scene, providing us with utility classes for dealing with the complicated calculation issue.

But, then we created another problem

Even though the problem was solved, apparently, we got into other uncomfortable situation: Now we’re stuck in 12, or 16 columns with fixed spacing, column width, etc, etc.

Welcome to the era where creativity began to be murdered on web layouts. Now we can only solve user interfaces interactions with jumbotrons, 4 image-per-line galleries, bla bla bla…

So isn’t more space to be creative on web layouts? Is the graphic design dead for the web?

Used to be like this, until the arrival of CSS Grid layouts!

Now we have a native solution to lay out things on our screens and we can achieve it using this perfect and graphic design-leading combination: Creativity and engineering.

Let’s step out the web universe a little bit and define what is a “Grid”

Muller-Brockmann, One of the founding fathers of the grid concept declares “The use of the grid system implies the intention to systematize, to seek clarity, the intention to penetrate to the essential, to concentrate, the intention to cultivate objectivity instead of subjectivity, the intention to rationalize the creative and technical processes of production, the intention to integrate elements of color, form and material, the intention to achieve architectural mastery over surface and space […]”

Or we can say it on a non-philosophical way: Order surfaces and spaces inside grids means lay out texts, images and diagrams following objective and functional criteria.

We can go further and say that the responsive layout concept has in it’s own roots a well designed grid. And that said we must state: wel designed isn’t imposed (960.gs, bootstrap etc…)

Muller-Brockmann was a graphic designer from switzerland and very known for his published posters. Nowadays we can compare webpages directly to posters with an additional layer of interactivity and flexibility. CSS grid came to show us the way to achieve great compositions with creativity and functionality.

CSS Grid breaking changes

Units of measure: We don’t need to use % anymore, we can use fractions calculated by the grid itself with fr, ems and rems (preferably) for size references proportional to the screens we are working on.

Breakpoints: We no longer need to use breakpoints in the traditional way, grid functions such as auto fill, auto fit and minmax bring us flexibility to solve responsiveness issues and use media queries for specific and personalized situations.

Independent Speakers: No longer tied to 12 fixed columns or anything like that, we open the door to even more active collaboration with art direction, brand voice and user experience.

Graphic Desginer Jen Simmons, show us how easily we can achieve otherwise complex layouts through css grid.

Now we’re talking creativity!

The doors of creativity in terms of layout composition were opened by the CSS Grid that encourages us to create contextual layouts and experiences adapted according to the screen that is showing our interfaces.

Technically my favorite way to create adaptable experiences, and not have so many disagreements with variations and creative proposals from the design and marketing team, is using grid areas.

Where will we get?

We have in our hands the possibility of thinking together with user experience and interface designers new approaches to building layouts that can break the paradigm of 12 fixed columns and offer richer and more contextualized interactions, bringing graphic design closer to the user experience, user interface and, of course, its materialization through the front-end engineering!

Read it in English

Gostaria de mostrar um pouco das possibilidades que o css grid nos trouxe em termos de experiência, direção de arte e criação de interfaces nos dias de hoje.

Meu background já entrega que flutuei por diferentes áreas e eu coloquei propositalmente minha formacão para que voces ja sintam o rumo que eu quero levar este artigo.

Como fazíamos até uns dias atrás?

Hoje em dia fazemos piadas ou brincadeiras, mas já foi coisa séria criar layouts utilizando tabelas por exemplo.

Apesar desse passado obscuro eu quero levar um pouco mais adiante o nosso marco zero:

Do 960 GS ao Bootstrap

A primeira proposta organizada que eu adotei foi o 960gs, tanto em projetos de criação de interfaces do usuário como designer, quanto ao aplicar em projetos front-end. A evolução mais tradicional e popularizada desse projeto foi o Bootstrap.

O que resolviam

Dar nome aos bois não é exatamente o que nos avançará na discussão. Vamos focar no que eles resolviam: Layouts de colunas.

Não tínhamos solucões nativas para resolver este problema, o que nos levava a soluções manuais inconsistentes, principalmente para calcular gaps entre as linhas das colunas. Então estes frameworks nos proviam soluções aceitáveis para estes resultados.

O que isso resultou

Apesar do problema estar resolvido: 12 colunas, responsividades, media queries etc… em termos de design gráfico ficamos presos a esta forma das 12 colunas (ou algo do tipo).

A criatividade em interfaces de sites foi esmagadas pelos jumbotrons de 12 colunas ou ultra-wides, galerias de fotos de quatro imagens que cada uma ocupava três colunas do grid blá bla blá.

Será que não temos mais espaço para o design gráfico em meios digitais?

Não tínhamos. O Css grid veio para nos proporcionar uma solução nativa para organizar o posicionamento dos itens em nossas telas. E nós podemos combinar duas coisas para fazer isso, que na minha opinião norteiam o design gráfico: Engenharia e Criatividade.

Vamos abstrair um pouco e definir um grid em termos de design gráfico:

Muller-Brockmann (um dos pais do conceito de grid, ou grelha como traduzido para português) declara “o uso do sistema de grelha implica a intenção de sistematizar, de buscar a clareza, a intenção de penetrar ao essencial, de concentrar, a intenção de cultivar objetividade ao invés de subjetividade, a intenção de racionalizar os processos criativos e técnicos de produção, a intenção de integrar elementos de cor, forma e material, a intenção de alcançar domínio arquitetural sobre a superfície e o espaço […]”

Ou de maneira sintética: Ordenar superfícies e espaços dentro do quadro do grid significa dispor textos, fotografias e diagramas segundo critérios objetivos e funcionais.

Dá pra dizer que o conceito de layout responsivo depende em sua raiz de um grid bem pensado. Veja bem: bem pensado, não é impostamente estabelecido (bootstrap, 960gs etc…).

Muller-Brockmann foi um designer suíço talentosíssimo, com muitos pôsteres publicados. Utilizava o grid de forma criativa. Hoje em dia, podemos comparar diversas páginas web com pôsteres que podem apresentar uma camada adicional de interatividade e flexibilidade que seus primos impressos. O CSS grid veio nos proporcionar através de combinação de técnicas que sejamos criativos em nossas intefaces.

Breaking changes do CSS Grid.

Unidades de medida: Não precisamos mais de %, podemos utilizar frações calculadas pelo próprio grid com fr, ems e rems (preferencialmente) para referências de tamanho proporcionais às telas que estamos trabalhando.

Breakpoints: Não precisamos mais utilizar os breakpoints da maneira tradicional, funções do grid como auto fill, auto fit e minmax nos trazem flexibilidade para resolver questões de responsividade e utilizar media queries para situações específicas e personalizadas.

Colunas independentes: Não estamos mais presos a 12 colunas fixas ou algo do tipo, abrimos as portas para uma colaboração ainda mais ativa com direção de arte, voz de marca e experiência do usuário.

A designer Jen Simmons, no exemplo acima, mostra como é fácil fazer o que outrora foi complicadíssimo.

Possibilidades criativas!

As portas da criatividade em termos de composição de layouts foram abertas pelo CSS Grid que nos encoraja a criar layouts contextuais e experiências adaptadas de acordo com a tela que está mostrando nossas interfaces.

Tecnicamente o meu jeito preferido de criar experiências adaptáveis, e não ter tantas desavenças com variações e propostas criativas da equipe de design e marketing, é através das grid areas.

Onde queremos chegar

Temos em nossas mãos a possibilidade de pensar, junto a designers de experiência do usuário e designers de interface, novas aproximações de construção de layouts que possam quebrar o paradigma das 12 colunas fixas e oferecer interações mais ricas e contextualizadas, aproximando o design gráfico da experiência do usuário e sua materialização através do front-end!

CSS Grid: Sim, nós podemos ser criativos em layouts web was originally published in Petlabs on Medium, where people are continuing the conversation by highlighting and responding to this story.