Shakira's Studio ✦
⚙️ My Process
How I Design & Build

The tools, rhythm, and principles behind how I work from brief to shipped product.

8+ tools in active use
Systems-first designer
AI-augmented workflow
Design Philosophy
Good design ships.
Great design ships and keeps moving.
My workflow is built around one thing: getting from fuzzy problem to clear, working solution, fast and without losing the craft. Every tool, every habit exists to reduce friction between thinking and making.
🎯 Outcome-first
Bias to action
🤝 Dev-friendly handoffs
🔄 Systems over one-offs
🧠 AI-augmented
🛠️ Design Stack
Tools I actually use
Click any tool to see when and how it fits.
🤖
Claude + MCPs
Core workflow
Design system health, component states, dev handoffs, all via direct MCP connection to my actual tools.
When I use this ↓
🎨
Figma + Figma Make
Design + Proto
Primary design tool for full state coverage, system alignment, and production readiness.
When I use this ↓
💜
Lovable
Functional builds
Gets me to a working, demoable product fast. Where NotchNote QA was built and shipped.
When I use this ↓
🧵
Google Stitch
Early UX
First stop for early UX concepting: structure and flows before visual design begins.
When I use this ↓
Vercel
Deploy & review
Deploys preview builds in seconds for async design reviews on any device.
When I use this ↓
📝
Granola
Meeting notes
Handles meeting notes automatically so nothing falls through the cracks mid-sprint.
When I use this ↓
📅 Sprint Rhythm
A week in my workflow
Not every week looks like this but most do.
MON
Align & plan
Review sprint goals, surface Granola notes from last week's sessions, sync with the PM. Use an LLM to draft a quick brief and surface risks before the week starts.
Granola Claude
TUE
Concept & structure
Stitch for IA sketches and early flows. Sometimes generate an HTML preview to align with engineering before I open Figma. Gets the interaction model right first.
Stitch Claude
WED
Design & system work
Deep Figma sessions. MCP integration keeps the design system healthy: token audits, component states, pattern consistency throughout.
Figma Claude MCPs
THU
Prototype & validate
Interactive concepts and quick usability checks. Deploy builds to Vercel for async stakeholder review. No scheduling required.
Figma Make Lovable Vercel
FRI
Handoff & contribute
AI packages dev handoff specs with zero back-and-forth. Share patterns and prompts with the wider team. Retro notes captured via Granola.
Claude Vercel Granola
✦ Principles
How I think about work
01
Own it end to end
Partner with PM and engineering from problem definition through launch and iteration, not just at the handoff gate.
02
Start in the LLM, not the canvas
Clarify intent, surface edge cases, draft a short brief. Align the team before a single frame is drawn.
03
Research as velocity, not a gate
Talk to customers, run quick tests, adjust direction. Treat validation as a speed tool, not a process tax.
04
Design for the 80/20
Encode judgment and complexity under the hood. Keep the default experience simple and successful for most people.
05
Contribute to patterns, not just pixels
Share prompts, patterns, and learnings. Participate in crits that raise the bar for the whole team.
🧠 UX Research
How I talk to users
My research process shifts depending on what I'm trying to learn. Select a context to see my approach and the questions I actually ask.
⚡ Feature
🐛 Bug fix
🚀 0→1 launch
🔁 Redesign
🌐 Website
📱 App
🗂️ Workflow by project type
Typical timeline
Select a project type, then click any stage to see how I think about it.
In-house
Feature Sprint
Client
🚀 0→1 Product
🛠️ Rapid Prototype
🧱 Design System
🔁 Redesign
Typical timeline ~10 weeks
← Select a stage
Vibe-codingSipping coffeeInterface obsessedCreating on FigmaPlaying ValorantFeeding catsTuning my superbikeTaking design courseOrganizing filesListening to Linkin ParkLearning codeExploring BaliQueuing Apex LegendsCreating design systemsOn a waffle dateWriting design notesTalking to devs