Praveen Punnen Jose

Staff UX Designer @Walmarttech . Talk to me about User eXperience design #UXD, Data Visualisation and Product management. Loves @figma

[Praveen Punnen Jose @VizMaestro]

Warehouse associates ship liquidation & donation inventory to vendors, school districts & charities.

I built a production-grade address book dashboard for exactly that.

#Nextjs 16 · #React 19 · #Figma MCP · 186 design tokens

Vibecoding CAN be production-ready. Here's how

[Praveen Punnen Jose @VizMaestro]

@rauchg @leerob @swyx @vercel @figma @reactjs @tailwindcss @cursor_ai @AnthropicAI @github @ThePrimeagen @buildkite

[Praveen Punnen Jose @VizMaestro]

Warehouse associates ship liquidation & donation inventory to vendors, school districts & charities.

I built a production-grade address book dashboard for exactly that.

#Nextjs 16 · #React 19 · #Figma MCP · 186 design tokens

Vibecoding CAN be production-ready. Here's how

[Praveen Punnen Jose @VizMaestro]

Vibecoding with discipline = force multiplier.

AI handles translation.
You handle architecture, governance & craft.

The future of frontend isn't AI vs engineer.
It's AI × engineer.

👉 Live app: https://t.co/C47HbmH9oP

Who else is building production-grade with vibes? 👇

[Praveen Punnen Jose @VizMaestro]

The result? Open source. Go read tokens.css.
Read the resolution log. Every decision documented.

Any new dev can open it and understand every design choice.

That's maintainability. That's scale.

👉 GitHub: https://t.co/0s1FPeuB7U

[Praveen Punnen Jose @VizMaestro]

Step 5 — Figma MCP as a precision instrument.

→ Extract exact node IDs
→ Pull semantic token names from annotations
→ Cross-reference DS token docs
→ Flag where Figma deviated from the token spec

Design-to-code with receipts.

[Praveen Punnen Jose @VizMaestro]

Step 4 — Component architecture, not soup.

NavigationSidebar / PageHeader / MetricsRow
MapContainer / SearchResultCard / AddAddressModal

Each: single responsibility, typed props, token-driven styles.

Next.js 16 + React 19 + TypeScript + Tailwind v4.

[Praveen Punnen Jose @VizMaestro]

Step 3 — Systematic audit of hardcoded values.

Every magic number flagged.
The 7 remaining ones? Documented with WHY they couldn't map.
(content-driven widths, no DS token equivalent)

Principal engineers don't just fix — they LOG reasoning.

[Praveen Punnen Jose @VizMaestro]

Step 2 — Token mapping as a first-class task.

430 lines. 186 tokens. 8 UI sections.

Every color, radius, spacing & typography value traced
back to a DS variable.

tokens.css = source of truth.
Not Tailwind hardcodes. Not inline styles.

[Praveen Punnen Jose @VizMaestro]

Step 1 — Design system first, always.

Used @figma MCP to pull design context at the node level.
Not screenshots — actual component specs, spacing,
typography & radii piped directly into coding context.

👉 Figma: https://t.co/wkk5eSxtvI

[Praveen Punnen Jose @VizMaestro]

The secret: you don't REPLACE engineering with vibes.
You ACCELERATE it.

AI handles repetitive translation.
You handle architecture, token hygiene & DS governance.

That's the real unlock. 🔓

[Praveen Punnen Jose @VizMaestro]

The app: warehouse users flag inventory locations for
liquidation or donation.

They save multiple shipping addresses per location —
vendors, charities, school districts.

The dashboard decides WHERE it ships.

Real users. Real stakes. Real code.

[Greg Brockman @gdb]

o1 is a different kind of model. great performance requires using it in a new way relative to standard chat models.

[Praveen Punnen Jose @VizMaestro]

@AdamMico1 @RobertJanezic @_gringuinho_ @salesforce @tableau @Benioff Stopped consulting and recommending Tableau to anyone for the past 2 years. The tools is heavily priced and the web UX is mediocre. The last couple version rollouts clearly shows data heavy updates over visuals. When was there was a major update on the standard visuals library?

[Raphael Lacoste @raphaellacoste]

3D Scene —- >> Final Image

[Praveen Punnen Jose @VizMaestro]

@punitweb

[Raphael Lacoste @raphaellacoste]

Sketch ———————> Final

[Adolfo Arranz @adolfux]

Today's back page in @SCMPNews, we compare the 16 years of Angela Merkel with the mandataries of other countries.
#infographic @SCMPgraphics

[Adobe XD @AdobeXD]

What will you create after you learn about the 7 core principles of UI/UX design? https://t.co/mTa0DzqWGC

[Praveen Punnen Jose @VizMaestro]

@rajvivan @tableau Congratulations bhai....this is just great 👌👌

[Praveen Punnen Jose @VizMaestro]

Morning bliss - A snowy winter morning in the woods. Sketch created using #procreate on my #ipad https://t.co/bOUhjOYWyD