← Back to home
Plific

Financial solutions for gig workers

B2CGig EconomySoftwareFinance
Delivery worker on a bike in front of an office building, with three Plific app screens overlaid

Early Pay

Created for gig economy professionals, such as app drivers and delivery workers. The product allows users to view earnings from different platforms, check the amount available for anticipation, and receive part of that money before the scheduled payout date.

Role
Product Engineer
Tools
Claude CodeFigmaGitHub
Skills
UX/UI DesignWeb DesignVibe coding
Timeline
1 week
Overview

Rebuilding a product from scratch with AI

The goal of this project was to revisit a receivables anticipation product I worked on in 2021 and rebuild it with an AI-driven workflow. I started with the existing knowledge about users, context, business rules, and value proposition to focus the experiment on product execution.

More than just testing AI's ability to generate interfaces, the project aimed to understand how it can enhance a Product Designer's execution capacity. The comparison between the process carried out by a multidisciplinary team in 2021 and the reconstruction led by a single person in 2026 highlighted gains in speed and autonomy, without eliminating the need for repertoire, critical thinking, and craft.

Process

Setup

The first step was to structure the work environment and connect the tools that would support the entire product construction cycle, from interpreting design references to code versioning and application publishing.

Figma
Claude
GitHub
Vercel

I started with the integration with Figma. The goal was to provide Claude Code with a more complete visual and structural context about the project. With this access, it was possible to consult components, variables, styles, layout properties, and assets used as references for the interface implementation. This setup began to function as a source of context for the AI, rather than just an isolated visual reference.

Next, I connected the project to GitHub and defined the repository as the central source of code. This integration allowed for organizing application files, recording project evolution through commits, and maintaining traceability of changes made during development.

Finally, I set up Vercel as the hosting and publishing platform. The integration with GitHub enabled the automation of the deployment process and the generation of new application versions whenever relevant changes were pushed to the repository.

Claude Code connectors panel showing GitHub, Vercel, Figma and Claude in Chrome connected

Planning the execution

I defined an execution order to break the project into smaller stages, with clear scopes and objectives. Instead of building the entire experience at once, I organized the work incrementally, starting with the landing page and later moving on to the platform.

Landing page→Platform

Still in its initial version, before any refinement round conducted by me, the landing page was published in a functional environment, with structure, content, and interface generated by AI based on the provided context. This allowed for evaluating the result in a real usage situation, identifying visual inconsistencies, testing responsiveness, and adjusting the process before expanding the scope.

This approach allowed for validating the complete development flow right from the first delivery. With the landing page, I was able to test the interpretation of Figma references, the implementation of the interface, versioning on GitHub, and deployment on Vercel before starting the more complex part of the product.

Execution

First prompt

Before requesting any implementation, I transformed all the discovery knowledge into a structured product briefing. I shared with Claude Code the problem, user profile, value proposition, available data, business rules, main flow, experience principles, tone of voice, and visual guidelines. I also defined the deliverables, technical infrastructure, and execution order.

This level of specificity reduced ambiguity and provided clear criteria for AI decision-making. It prevented decisions from being made in isolation throughout development. Claude Code knew, for example, that the product should not be presented as a loan, that the rate would be fixed at 4%, that the anticipation flow would have a maximum of three screens, and that all costs should be visible before confirmation.

Business context → User → Business rules → Flows → Experience and content → Visual identity → Deliverables → Infrastructure → Expected outcome

Claude Code chat showing the structured product briefing prompt for the Plific rebuild

I did not provide wireframes or ready layouts for the first version. I made the style guide, assets, and necessary references available, but let the AI interpret the context and propose the interface structure. Thus, the first delivery became a way to evaluate not only the visual result but also the AI's ability to understand the problem and transform the defined constraints into a functional experience.

See the first result generated by Claude Code:

First AI-generated version of the Plific landing page, dark hero and a cost breakdown card

Refinement

Prompt with clear direction: transforming a first version into a refined one.

The first delivery generated by AI served as a starting point, not a final result. From it, I evaluated hierarchy, spacing, visual consistency, responsiveness, interaction behavior, and adherence to the product identity. Each new request was transformed into a specific direction, with references, expected behavior, and clear implementation criteria.

Instead of generic commands like "make it prettier," I described the problem, the necessary change, and the expected effect on the experience. This process highlights the designer's role in building with AI: critically analyzing, making decisions, setting priorities, and guiding execution until the result reaches the expected quality level.

Six tilted screenshots of Claude Code sessions iterating on animations, tooltips and dark mode

The craft applied to refinement

1. Rhythm and visual composition

I created images, adjusted margins, spacings, proportions, and border radius to create consistency among components and improve interface readability.

2. Responsiveness beyond screen adaptation

I reviewed each delivery on mobile, tablet, and desktop, adjusting structure, information density, and element behavior across different resolutions.

3. Interactions with clear feedback

I directed the creation of tooltips, hover states, click feedback, and behaviors that helped users understand what was interactive.

4. Movement with purpose

Animations were used to reinforce hierarchy, guide attention, and create continuity between sections, without competing with the main content.

5. References translated into decisions

I used real products and experiences as references but transformed each inspiration into instructions suitable for the context, identity, and limitations of the project.

6. Continuous validation and debugging

After each change, I reviewed the result in the functional environment, identified inconsistencies, and requested specific corrections before moving on to the next stage.

Refined Plific landing page with a cost clarity section and platform mockup

In general, AI accelerated execution, but the final quality depended on the ability to evaluate, direct, and refine each design decision.

Learnings

The value lies in direction, not just execution

The project showed that AI can concentrate activities that previously depended on different specialties, such as interface structuring, development, versioning, and deployment, into a single person. However, this acceleration only happened because the product context, business rules, references, and quality criteria were already well defined.

It also became clear that the AI's first response rarely represents the best solution. The result evolved through continuous cycles of analysis, direction, implementation, and validation. The more specific the prompts, the greater the precision of the deliveries and the less rework.

The main gain was not eliminating design work but reducing the operational effort needed to transform decisions into products. This opened up more space to focus on aspects that require judgment, such as hierarchy, clarity, consistency, responsiveness, behavior, and appropriateness of the experience to the user's context.

Conclusion

A new model of building

Rebuilding this product allowed for a comparison of two execution models. In 2021, its construction required the participation of a multidisciplinary team. In 2026, I was able to develop a new end-to-end version with the support of AI, taking on the direction of product, design, and implementation.

The experiment reinforced that AI enhances a designer's execution capacity but does not replace repertoire, critical thinking, or craft. It was responsible for accelerating production, while my role was to provide context, define criteria, evaluate results, and guide each refinement until reaching a coherent and functional experience.

AI reduced the distance between decision and execution. The quality of the product continued to depend on design direction.

Result

Access the live product!

AI as pilot co-pilot

Access
Plific landing page open in a browser window