Day 9: Codematic Hackathon: Build with Google Cloud

Day 9 marked the crucial pivot from backend infrastructure to the user-facing product experience. My application—a mobile home hunt service built with React Native (Expo)—needs a superb user interface, but I lack the product design experience to build one quickly in Figma. I couldn't afford to let this non-core skill become a bottleneck.

The solution? Treating Gemini as a Chief Design Assistant for rapid prototyping, leveraging structured prompt frameworks to generate high-fidelity design artifacts instantly.

Lessons Learned: Design Engineering

Bypassing the Bottleneck

• Roadblock: If I designed the mobile application manually in Figma, it would take days just to map out the component states, user flows, and general aesthetic. This time would be stolen directly from critical backend development.

• Solution: The breakthrough was realizing that AI tools could generate a high-quality prototype faster than I could create a low-fidelity wireframe. This was a paradigm shift: my job wasn't to design pixels, but to engineer the perfect prompt.

Structured Prompting is Design

I learned that generic requests yield generic screens. To generate the detailed, usable mobile flow needed for the React Native team, I had to adopt advanced prompt engineering frameworks (thanks to the insights from Day 2 of Road to Google DevFest Port Harcourt 2025!).

I used these frameworks to translate my application's functional requirements directly into actionable design requests:

• GUIDE Prompt Framework (Goal, User, Instructions, Details, Examples): Used this to define the scope and functional requirements. This ensured the design included specific elements necessary for my product, like map overlays for power infrastructure and custom filter components.

• MIRROR Prompt Framework (Medium, Intent, Readers, Replicas, Outline, References): Used this to define the output format and structure. This guaranteed the final Figma prototype had a clear flow (Outline) and followed a familiar mobile aesthetic (Medium/Replicas), which is critical for smooth handoff to the frontend team.

By using these frameworks, I ensured the design covered every important aspect of the product's UX without requiring me to spend a minute moving boxes in Figma.

✅ Daily Accomplishments

Rapid Prototyping with Figma and AI

I successfully used the generative AI capabilities integrated into the Figma ecosystem—which I'll refer to broadly as Figma Make. Figma Make is an ecosystem of powerful generative AI tools, plugins, and features integrated within the Figma platform, allowing designers and developers to rapidly translate structured requirements, text prompts, or existing code into complete, editable, high-fidelity design artifacts, prototypes, and user flows.

• Complete Prototype Generated: I produced a detailed, complete Figma prototype for the mobile application, covering the entire user journey: location selection, preference filtering, map view, and personalized results display.

• Design Artifact Ready: The prototype is now the single source of truth for the mobile development (when I start), ensuring I maintain good user experience (UX) and product cohesion.

• Backend Planning Advanced: By defining what the frontend needs to display, I finalized the specific integration points for the next backend development phase.

Tips for Fellow Hackers

1. AI for Non-Core Skills is the Accelerator

If you have a skill that is necessary but not your competitive edge (like design, marketing copy, or technical documentation), leverage an LLM/Generative AI to handle 90% of the work. Focus your limited time on your strongest domains.

2. Learn to Prompt, Not Just to Code

Stop using simple, conversational prompts for creative tasks. Investing a few minutes to structure your prompt using frameworks like GUIDE or MIRROR provides exponentially better results. Structured input leads to structured output.

3. Defer Until Ready

I haven't started mobile development yet. The power of this approach is that the prototype is done, and now I can pivot back to the backend without losing momentum.

Next Step

My focus shifts back to the NestJS core service, integrating the intelligence needed to power the beautifully designed frontend:

• Vertex AI / Gemini API: I will be implementing the Gemini API into my NestJS service to provide insightful, descriptive, and user-centric data based on raw geographical coordinates (e.g., generating a summarized safety profile or neighborhood description).

• Google Maps APIs: I will be integrating the Places API to enrich feeder locations with nearby points of interest and the Routes API where necessary to calculate optimized paths or commuting times relevant to the home search service.