The Spooky Stylist

Your AI-Powered Guide to Discovering the Perfect Halloween Costume

Comment

🎃 The Spooky Stylist: Project Story

Inspiration

The idea for The Spooky Stylist came from a simple observation: every Halloween, people struggle to find the perfect costume that truly represents their personality. We've all been there—scrolling through endless costume websites, feeling uninspired by generic options that don't capture who we are.

I wanted to create something that combines the magic of Halloween with the power of AI to deliver a personalized costume experience. Instead of browsing through hundreds of costumes, what if an AI could understand your personality, fears, and preferences, then recommend the perfect costume just for you?

The vision was to build a mysterious, engaging chatbot—The Spooky Stylist—that acts as your personal Halloween consultant, guiding you through a mystical journey of self-discovery to reveal your ideal Halloween persona.

What I Learned

Building this project was an incredible learning experience across multiple domains:

1. Conversational AI Design

  • Designing a natural, engaging conversation flow that feels personal
  • Creating a distinct AI personality with voice and tone guidelines
  • Balancing information gathering with entertainment value
  • Using the Kiro AI framework for structured conversation management

2. Personality Analysis Algorithms

I implemented a keyword-based scoring system that analyzes user responses across multiple dimensions:

$$\text{Score}{archetype} = \sum{i=1}^{n} w_i \cdot \text{match}(keyword_i, response)$$

Where:

  • $w_i$ represents the weight of each keyword
  • $\text{match}(keyword_i, response)$ returns 1 if keyword is found, 0 otherwise
  • The dominant archetype is: $\arg\max_{a \in A} \text{Score}_a$

This simple yet effective approach allows the system to categorize users into five distinct personality archetypes.

3. React & Modern Web Development

  • Building responsive, animated UIs with React and TailwindCSS
  • Managing complex state across multiple components
  • Creating smooth user experiences with loading states and transitions
  • Implementing dark-themed, atmospheric designs

4. Kiro AI Framework

  • Structuring projects with spec.yaml for requirements and design
  • Creating event-driven hooks for conversation management
  • Writing steering documents to control AI behavior
  • Understanding MCP (Model Context Protocol) for external integrations

5. Image Integration Strategies

  • Initially explored DALL-E 3 API integration for AI-generated images
  • Pivoted to curated image libraries for faster, cost-free results
  • Learned about Unsplash API and free image resources
  • Balanced quality, speed, and cost considerations

How I Built It

Architecture Overview

The project follows a modular, event-driven architecture:

┌─────────────────────────────────────────────────┐
│              User Interface (React)              │
│  ┌──────────────────┐  ┌────────────────────┐  │
│  │  ChatInterface   │  │   ResultsPanel     │  │
│  └──────────────────┘  └────────────────────┘  │
└─────────────────┬───────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────────┐
│         Conversation Logic Layer                 │
│  ┌──────────────────────────────────────────┐  │
│  │  costumeGenerator.js                     │  │
│  │  - Conversation Flow                     │  │
│  │  - Personality Analysis                  │  │
│  │  - Costume Generation                    │  │
│  └──────────────────────────────────────────┘  │
└─────────────────┬───────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────────┐
│              Kiro AI Framework                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────────┐  │
│  │  Hooks   │  │ Steering │  │  Spec.yaml   │  │
│  └──────────┘  └──────────┘  └──────────────┘  │
└─────────────────────────────────────────────────┘

Step-by-Step Build Process

Phase 1: Project Structure & Kiro Configuration

  1. Created .kiro/spec.yaml: Defined requirements, conversation flow, personality archetypes, and costume categories
  2. Wrote .kiro/steering.md: Established the AI's mysterious, playful personality with specific voice guidelines
  3. Built hooks:
    • onUserMessage.js: Manages conversation state and personality scoring
    • onConversationComplete.js: Generates costume concepts
    • onCostumeReady.js: Builds image generation prompts

Phase 2: Frontend Development

  1. Set up React + Vite + TailwindCSS: Modern, fast development environment
  2. Created custom color scheme: javascript colors: { 'spooky-purple': '#6B21A8', 'spooky-orange': '#EA580C', 'spooky-dark': '#1A0B2E', 'spooky-darker': '#0F0520', }
  3. Built three main components:
    • Header.jsx: Animated title with floating emojis
    • ChatInterface.jsx: Conversational UI with message history
    • ResultsPanel.jsx: Displays costume details and images

Phase 3: Conversation Logic

Implemented a 6-question conversation flow:

  1. Personality Description: Captures core traits
  2. Fears & Thrills: Understands comfort levels
  3. Halloween Vibe: Determines desired aesthetic
  4. Event Type: Considers context
  5. Makeup Preference: Assesses commitment level
  6. Color Preferences: Refines visual style

Each answer updates personality scores:

const personalityScores = {
  dark_romantic: 0,
  thrill_seeker: 0,
  playful_spirit: 0,
  mystical_soul: 0,
  classic_horror: 0
};

Phase 4: Costume Library

Created 15 unique costumes across 5 archetypes, each with:

  • Unique name and description
  • Curated image URL
  • Color palette (4 colors)
  • Accessory list (5 items)
  • Detailed makeup guide
  • Personalized "why it fits" explanation

Phase 5: Image Strategy Evolution

  • Initial approach: DALL-E 3 API integration
  • Challenge: Cost and API key requirements
  • Solution: Pivoted to curated Unsplash images
  • Result: Instant, free, high-quality images

Technical Implementation Highlights

Personality Analysis Algorithm

function analyzePersonality(answers) {
  const scores = { /* initialize archetypes */ };
  const text = Object.values(answers).join(' ').toLowerCase();

  // Keyword matching with weighted scoring
  for (const [archetype, keywords] of Object.entries(keywordMap)) {
    for (const keyword of keywords) {
      if (text.includes(keyword)) {
        scores[archetype] += 1;
      }
    }
  }

  // Return dominant archetype
  return Object.entries(scores)
    .sort(([, a], [, b]) => b - a)[0][0];
}

Random Costume Selection

To ensure variety across multiple uses:

const template = templates[archetype];
const costume = template.costumes[
  Math.floor(Math.random() * template.costumes.length)
];

This gives users different costumes even with similar personality profiles.

Challenges Faced

Challenge 1: Balancing Personality Complexity

Problem: How many personality dimensions should we track? Too few = generic results, too many = overcomplicated.

Solution: Settled on 5 distinct archetypes that cover the Halloween spectrum:

  • Dark Romantic (gothic elegance)
  • Thrill Seeker (horror enthusiast)
  • Playful Spirit (fun and cute)
  • Mystical Soul (magical and witchy)
  • Classic Horror (traditional monsters)

This provides enough variety while remaining manageable.

Challenge 2: Creating Engaging Conversation Flow

Problem: How to gather information without feeling like a boring survey?

Solution:

  • Wrote conversational, atmospheric questions
  • Added personality to every response
  • Used Halloween-themed language throughout
  • Kept it to 6 questions (sweet spot between thorough and tedious)

Challenge 3: Image Generation Cost & Speed

Problem: DALL-E 3 costs ~$0.04 per image and takes 10-20 seconds to generate.

Solution:

  • Curated 15 high-quality images from Unsplash
  • Instant results with zero cost
  • Trade-off: Less personalization, but better UX
  • Future option: Allow users to generate custom images if desired

Challenge 4: Keyword-Based Scoring Limitations

Problem: Simple keyword matching can miss nuance and context.

Example: User says "I'm not scary" → system still scores "scary" keyword

Potential Solutions (for future iterations):

  1. Implement sentiment analysis
  2. Use NLP libraries for better context understanding
  3. Integrate actual AI models for semantic analysis
  4. Weight keywords based on sentence structure

Current Mitigation: Multiple questions provide redundancy, so one misinterpretation doesn't dominate the result.

Challenge 5: Windows PowerShell Execution Policy

Problem: npm commands blocked by PowerShell security settings.

Solution: Used cmd /c prefix to run commands through Command Prompt instead:

cmd /c npm install
cmd /c npm run dev

Challenge 6: State Management Across Components

Problem: Sharing costume data and images between ChatInterface and ResultsPanel.

Solution: Lifted state to parent App component:

const [costume, setCostume] = useState(null);
const [imageUrl, setImageUrl] = useState(null);

Props drilling kept the architecture simple for this project size.

Technical Specifications

Performance Metrics

  • Initial Load Time: < 2 seconds
  • Conversation Response: Instant (no API calls)
  • Costume Generation: < 1 second
  • Image Display: Instant (pre-loaded URLs)

Scalability Considerations

Current architecture supports:

  • Costume Library: Easily expandable (just add objects to arrays)
  • Question Flow: Modifiable in conversationFlow array
  • Personality Archetypes: Can add new archetypes with minimal code changes
  • Styling: TailwindCSS makes theme changes trivial

Code Statistics

  • Total Files: 22
  • Lines of Code: ~1,418
  • Components: 3 React components
  • Hooks: 3 Kiro hooks
  • Costume Variations: 15 unique costumes
  • Personality Archetypes: 5 distinct types

Future Enhancements

Short-term Improvements

  1. Better Image Matching: Replace placeholder Unsplash URLs with actual costume photos
  2. Share Functionality: Allow users to share their costume on social media
  3. Save Results: Let users download or email their costume recommendations
  4. Multiple Languages: Add Arabic, Spanish, French support

Long-term Vision

  1. AI-Generated Images: Optional DALL-E integration for custom visualizations
  2. Shopping Integration: Link to actual costume pieces on Amazon/Etsy
  3. Community Features: User-submitted costumes and ratings
  4. Advanced Personality Analysis: Use GPT-4 for deeper understanding
  5. AR Try-On: Virtual costume preview using phone camera
  6. Makeup Tutorials: Video guides for each costume's makeup look

Mathematical Model Enhancement

Current scoring could evolve to weighted multi-factor analysis:

$$S_{final} = \alpha \cdot S_{keywords} + \beta \cdot S_{sentiment} + \gamma \cdot S_{context}$$

Where:

  • $S_{keywords}$: Current keyword matching score
  • $S_{sentiment}$: Sentiment analysis score (-1 to 1)
  • $S_{context}$: Contextual understanding score
  • $\alpha, \beta, \gamma$: Tunable weights ($\alpha + \beta + \gamma = 1$)

Conclusion

The Spooky Stylist successfully combines conversational AI, personality analysis, and web development to create a unique Halloween experience. The project demonstrates:

✅ Effective use of Kiro AI framework for structured conversation management
✅ Clean, maintainable React architecture with component separation
✅ Engaging UX design with atmospheric theming and smooth interactions
✅ Practical problem-solving (pivoting from DALL-E to curated images)
✅ Scalable foundation for future enhancements

The most rewarding aspect was seeing how a simple idea—"What if AI could recommend Halloween costumes?"—evolved into a fully functional, engaging web application that brings a touch of magic to costume selection.

Whether you're a dark romantic seeking gothic elegance, a thrill seeker craving horror, or a playful spirit wanting something cute, The Spooky Stylist has a costume destiny waiting for you! 🎃✨

Built with: React, TailwindCSS, Vite, Kiro AI Framework
Inspired by: The magic of Halloween and the power of personalization
Powered by: Creativity, code, and a love for spooky season 👻

Built With

Share this project:

Updates