Align the design system
One set of components and assets made changes reusable across Client and Internal.
GRIDPILOT AI · 2026
From Vibe-Coded to Client-Ready
- My role
- Product design
Built entirely with Codex - Approach
- Agile iteration
Product-level quality - Team
- Product designer + founder
Codex implementation - Focus
- Workflow clarity
Design system · UI craft
Overview
Make a complex technical vision ready for a real client.
GridPilot’s ambition is a 24-hour grid interconnection workflow, bringing technical data, site evidence, and engineering models into one submission packet.
Working with the founder, I designed a client-ready prototype built entirely with Codex. I owned hierarchy, components, review states, and design acceptance; Codex implemented the screens and motion.
Hi Mengmeng,
What would you like to build today?
A client-ready product experience, in motion.
The redesigned client flow: project setup, recognizable documents, and an explicit handoff to review.
In review
Login visual, review confirmation, document transitions.
Motion Design
Character at entry. Clarity during review.
Energy imagery establishes character at entry. A glass checkmark confirms submission; moving documents signal review in progress.
01 / The challenge
Less explanation. More evidence.
The early prototype repeated progress across chat, the stage rail, and a status card. Important context was truncated while processing narration filled the screen.
I replaced repeated explanation with visible files, clear states, and deliberate actions.
Watch the original prototype
02 / MY APPROACH
Shared rules first. Focused refinement next.
I set the rules, directed Codex’s implementation, reviewed the rendered flow with the founder, and fed specific corrections into the next iteration.
Write a “Show, don’t tell” skill
Clear writing rules replaced repetitive explanations with useful content, states, and actions.
Refine the working flows
Prototype reviews with the founder turned product expectations into specific interaction decisions.
One visual language, not repeated styling decisions.
I aligned typography, controls, document previews, and state tokens before refining individual screens. The tradeoff: shared components for consistency, distinct status meanings for different responsibilities.
Let the Client interface do the explaining.
Filenames and thumbnails show the material. Missing states show what is needed. Preview and Submit for review make the next step clear.
I turned these principles into a reusable Codex skill, so the same writing rules could guide each iteration.
Method 03 / Refine the decision boundaries
Keep the task simple. Keep approval explicit.
A single green “done” state would be compact, but misleading. I separated file receipt, required sign-off, and approval so progress never implied a decision the engineer had not made.
| State | What it means | What it does not mean |
|---|---|---|
| Received | The file is present. | Its contents are approved. |
| Needs sign-off | A named reviewer must decide. | AI checks can clear the gate. |
| Approved | This individual check is complete. | The whole packet is published. |
Presets should assist, not commit.
Presets fill an editable brief instead of auto-sending. One extra action buys a chance to check it. The four-stage rail stays visible; review is a state, not another destination.
Automation stops at the human decision.
Each finding has its own source and action. Unresolved checks block continuation. Preview and visibility checks add friction before publishing, but keep internal-only files out of the client release.
The infrastructure behind the workflow.
Images from the company’s landing page provide product context. Select an image to visit GridPilot AI; marketing-site design is not included in my role.
The Impact
A working product—and reusable rules behind it.
I delivered two coordinated product surfaces, a standalone component reference, a reusable writing skill, and explicit review-to-release gates. Design decisions became rules Codex could apply across screens, not isolated visual fixes.
Built with AI. Ready to put in front of a client?
Let’s turn your idea into a product people can use and believe in.
Vibrant America
Designing the subscription workflow inside a healthcare lab-testing provider portal.