🎀 Princess Studio: Coding as Dressing

"Coding is the fine art of thoughts." A high-fashion, Princess Maker 4 inspired IDE that translates complex code logic into elegant royal outfits.

🌟 Overview

Princess Studio is an experimental AI-powered coding environment that bridges the gap between Software Engineering and Aesthetic Design. Using Google Gemini 3 Pro and Flash models, it converts natural language programming requirements into:

1. Clean Code: Executable, high-quality logic.
2. Couture Mapping: A pedagogical translation of code structures (loops, variables, APIs) into fashion elements (lace, jewelry, tailoring).
3. Visual Representation: AI-generated character illustrations wearing the "Code-Gown" generated from your logic.

🎨 The "Coding as Dressing" Philosophy

We believe that code quality shares the same principles as high-end tailoring:

• Frontend (UI/UX) = Fabric & Silhouette: The touch, drape, and first impression.
• Backend (Logic) = Tailoring & Support: The internal stitching that determines durability and fit.
• Refactoring = Wardrobe Capsule: Streamlining redundancy while keeping the essentials.
• Clean Code = Minimalism: The "Old Money" aesthetic—functional, timeless, and devoid of unnecessary clutter.

🚀 Features

• Magick Command Line: Input your programming wishes in natural language.
• Princess Mirror (Visualizer): See your code come to life as a bespoke outfit for your digital princess.
• IDE Explorer: A VSCode-style file management interface for organizing your "Magic Blueprints."
• Atelier Report: Deep-dive analysis into the aesthetic mapping of your logic.
• Attribute System: Track your code's Elegance, Clarity, and Power levels.

🛠️ Tech Stack

• Framework: React 19 + TypeScript
• Styling: Tailwind CSS (with Princess Maker 4 Aesthetic Overlays)
• AI Engine:
  • gemini-3-pro-preview: For logic generation and fashion mapping.
  • gemini-2.5-flash-image: For real-time couture illustration.
• Icons & Fonts: Cormorant Garamond, JetBrains Mono, Custom Ornate Borders.

📂 Project Structure

src/
├── components/
│   ├── FileExplorer.tsx      # VSCode-style sidebar
│   └── MarkdownRenderer.tsx  # Styled report engine
├── geminiService.ts          # Core AI logic & System Instructions
├── types.ts                  # Type definitions
└── App.tsx                   # Main layout and state orchestration

📜 How to Use

1. Clone the repository.
2. Set your Gemini API Key: Ensure process.env.API_KEY is configured.
3. Start the Studio: npm start or run via your preferred hosting.
4. Input a Command: E.g., "Create a function that sorts a list of rose petals by color."
5. Observe the Magic: Watch the code appear and see the princess change into an outfit that represents that specific logic.

---

Developed with ❤️ for the intersection of logic and beauty.