Product Transformation Protocol
An AI-driven de-branding protocol using Google AI Studio's 'Visual Alchemy'.
PRID: 1804
VERIFIED
2 min read
🏭 AI-Driven De-branding Protocol (Prompt Edition)
Version: 3.6 (AI Studio Advantage Update) Platform Focus: Optimized exclusively for Google AI Studio.
🚦 Why AI Studio for this Protocol?
This protocol leverages the Visual Alchemy of Gemini—a feature that is currently free and superior to paid platforms.
- Zero Subscription: You can refactor this entire scaffold without spending a dollar.
- Superior Vision: Gemini's ability to replicate a UI from a single screenshot is the "secret sauce" of this engine.
🚦 Step 0: Choose Your Starting Point
🚀 Branch C: Turbo Mode (The "Visual Alchemy" Path)
Best for: "I have a screenshot/sketch and I want my site to look like that right now."
Action: In AI Studio, upload a design screenshot or sketch you admire.
Copy this prompt:
📋 Copy Turbo Prompt:
textAct as a Chief Product Architect. I have uploaded an image (Mood Board / Sketch). **Goal:** Rebuild this Instant Ship scaffold into a product that matches this image's design and intent. **The AI Studio Advantage:** - Use your vision to extract the semantic colors (Primary, Background, Surface). - Use your vision to replicate the layout hierarchy seen in the image. - Remember: Since this is AI Studio, we are building for FREE and with HIGHER precision than paid tools. **Execution Tasks:** 1. **Config**: Output `site.config.ts` with a name based on the image's vibe. 2. **Design**: Update `tailwind.config.js` colors using semantic tokens extracted from the image. 3. **Landing Page**: Rewrite `routes/$lang.index.tsx`. Use your vision to structure the sections based on the uploaded visual. 4. **Translation**: Update `i18n.ts` with a brand-new narrative. No hardcoded hex colors in components. Use semantic classes.