## AI Master Prompt for 'Zeka Tadı' (AI Taste Curator)
**1. PROJECT OVERVIEW:**
The 'Zeka Tadı' (AI Taste Curator) application aims to empower users to navigate the exponentially growing landscape of AI-generated content. In an era where competent output is increasingly cheap and easily produced by AI (LLMs, image generators, code assistants), the critical differentiator is shifting from mere production capability to discerning 'taste.' This platform addresses the problem of users becoming overwhelmed by generic AI outputs and losing their unique creative voice. It solves the problem by providing tools and a community to help users develop, refine, and apply their taste – the ability to distinguish what is true, valuable, generic, and worth pursuing further. The core value proposition is to transform users from passive consumers or reviewers of AI output into active, discerning creators who combine AI capabilities with their unique judgment, context, and constraints to build something truly novel and impactful.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and hooks)
- **State Management:** Zustand (lightweight, efficient for managing global and local state)
- **Styling:** Tailwind CSS (for rapid UI development and consistent design)
- **Routing:** React Router DOM (for client-side navigation)
- **UI Components:** Radix UI (for accessible, unstyled UI primitives) and custom components.
- **Utilities:** Lodash (for utility functions), date-fns (for date formatting).
- **API Communication (if needed for future expansion):** Axios or Fetch API.
- **Build Tool:** Vite (for fast development server and optimized builds).
**3. CORE FEATURES:**
**A. Taste Profile Creation & Management:**
* **User Flow:** Upon first login, users are prompted to create their 'Taste Profile.' They answer a series of questions about their preferences, values, aesthetic leanings, and professional goals (e.g., "What kind of writing style resonates most with you?", "What visual aesthetics do you find most compelling?", "What problem are you trying to solve with AI?"). Users can revisit and update their profile anytime.
* **Details:** The profile captures initial preferences that will be used to personalize feedback and content suggestions.
**B. AI Content Analysis (Input & Scoring):**
* **User Flow:** Users can paste AI-generated text (e.g., blog post draft, marketing copy), upload an image, or paste code snippets. They select the type of content and optionally provide context (e.g., target audience, desired tone). The system then presents the content alongside AI-driven analysis and a 'Taste Score' based on predefined criteria (originality, depth, clarity, emotional resonance, adherence to user's profile). Users can rate the AI's analysis and provide qualitative feedback.
* **Details:** This feature uses a rubric (partially AI-driven, partially rule-based) to evaluate content against dimensions like: Originality (how unique is this?), Depth (does it go beyond surface-level?), Clarity (is it easy to understand?), Tone Consistency (does it match the desired tone?), and Alignment with User Profile (how well does it fit the user's stated preferences?). The 'Taste Score' is a composite score reflecting these dimensions.
**C. Community Showcase & Peer Review:**
* **User Flow:** Users can choose to share their evaluated AI outputs or their own original creations (that they believe demonstrate good taste) in a community feed. Other users can view, comment, and upvote/downvote submissions. Submissions can be filtered by content type, tags, and popularity.
* **Details:** This fosters a collaborative environment where users learn from each other's evaluations and creations. It reinforces the idea that taste is developed and refined through exposure and discussion.
**D. Guidance & Inspiration Hub:**
* **User Flow:** A curated section with articles, case studies, and prompts focused on developing 'taste' in the age of AI. It offers tips on crafting better prompts, combining AI output with human insight, identifying generic patterns, and cultivating a unique creative voice. Content is categorized by AI tool type (text, image, code) and skill level.
* **Details:** This section provides educational resources to help users actively improve their taste and creative process, moving beyond just evaluating outputs.
**4. UI/UX DESIGN:**
* **Layout:** Single Page Application (SPA) with a clean, minimalist dashboard. Main navigation on the left (collapsible) or top. Central content area dynamically updates based on user interaction. Clear separation between analysis tools, community feed, and guidance hub.
* **Color Palette:** Primary: Deep Teal (#008080) or Slate Gray (#708090) for a sophisticated, calm feel. Secondary: Off-white (#F8F8F8) for backgrounds. Accent: Warm Coral (#FF7F50) or Golden Yellow (#FFD700) for calls to action and highlights. Use subtle gradients sparingly.
* **Typography:** Headings: A modern sans-serif like 'Inter' or 'Manrope' (semi-bold). Body Text: 'Inter' or 'Roboto' (regular). Ensure good readability and hierarchy.
* **Responsive Design:** Mobile-first approach. Layout adapts fluidly to different screen sizes. Navigation might become a bottom bar or hamburger menu on mobile. Content blocks stack vertically. Ensure touch targets are adequately sized.
* **Key Elements:** Intuitive input forms, clear visual comparison of original vs. analyzed content, engaging community cards, easily digestible guidance articles.
**5. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component, sets up routing and global layout.
* **`Navigation.jsx`:** Left sidebar or top navigation menu. Handles routing links and active state.
* Props: `navItems` (array of objects: { label: string, path: string, icon: ReactNode })
* **`DashboardPage.jsx`:** Main landing page after login. Might show recent analyses, community highlights, profile summary.
* **`TasteProfile.jsx`:** Component for creating/editing the user's taste profile.
* Props: `profileData` (object), `onSave` (function)
* **`ProfileForm.jsx`:** Form elements within `TasteProfile`.
* **`ContentAnalyzer.jsx`:** Main interface for analyzing content.
* Props: `contentType` (string: 'text', 'image', 'code'), `onAnalyze` (function)
* **`InputArea.jsx`:** Textarea or file upload component for content input.
* Props: `value`, `onChange`, `placeholder`, `inputType`
* **`AnalysisResults.jsx`:** Displays the AI-generated content, user's content, the 'Taste Score,' and detailed analysis breakdown.
* Props: `originalContent`, `aiContent`, `analysis` (object: { score: number, breakdown: object }), `userFeedback` (function)
* **`AnalysisBreakdown.jsx`:** Renders the detailed metrics of the analysis (Originality, Depth, etc.).
* Props: `breakdown` (object)
* **`CommunityFeed.jsx`:** Displays posts from the community showcase.
* Props: `posts` (array)
* **`CommunityPostCard.jsx`:** Renders a single post in the feed.
* Props: `post` (object: { id, author, content, score, comments })
* **`PostInput.jsx`:** Form for creating a new community post.
* **`GuidanceHub.jsx`:** Displays articles and resources.
* **`ArticleCard.jsx`:** Renders a preview of a guidance article.
* Props: `article` (object: { id, title, excerpt, category })
* **`ArticleView.jsx`:** Displays the full guidance article content.
* **`LoadingSpinner.jsx`:** Reusable loading indicator component.
* **`ErrorMessage.jsx`:** Reusable error display component.
**6. DATA MODEL:**
* **`UserProfile` (Zustand Store):**
```javascript
{
userId: 'uuid-123',
name: 'Alex',
preferences: {
writingStyle: ['concise', 'witty', 'formal'],
visualAesthetics: ['minimalist', 'brutalist'],
tone: ['informative', 'playful'],
coreValues: ['authenticity', 'impact']
},
createdAt: '2023-10-27T10:00:00Z'
}
```
* **`AnalysisResult` (State/API Response):**
```javascript
{
id: 'analysis-xyz',
userId: 'uuid-123',
inputContent: '...', // Original user input
contentType: 'text',
analysis: {
aiGenerated: true, // or false if user provided it
outputContent: '...', // AI generated text
score: 7.2, // Overall Taste Score (1-10)
breakdown: {
originality: { score: 8, comment: 'High degree of unique phrasing.' },
depth: { score: 6, comment: 'Explores the topic but could benefit from more specific examples.' },
clarity: { score: 9, comment: 'Very clear and easy to understand.' },
tone: { score: 7, comment: 'Generally matches the informative tone requested.' },
profileAlignment: { score: 7, comment: 'Aligns well with user's preference for concise writing.' }
},
feedbackPrompt: 'What specifically makes this output feel generic or outstanding?'
},
timestamp: '2023-10-27T10:05:00Z'
}
```
* **`CommunityPost` (Local State / API):**
```javascript
{
id: 'post-abc',
userId: 'uuid-456',
authorName: 'Jane Doe',
content: 'My AI-generated blog post draft, refined with my own insights.',
analysisId: 'analysis-xyz', // Link to the analysis
upvotes: 15,
comments: [
{ commentId: 'c1', userId: 'uuid-789', userName: 'Sam', text: 'Great point about the intro!', timestamp: '...' },
{ commentId: 'c2', userId: 'uuid-123', userName: 'Alex', text: 'I agree, the conclusion could be stronger.', timestamp: '...' }
],
timestamp: '2023-10-27T11:00:00Z'
}
```
* **`GuidanceArticle` (Mock Data/API):**
```javascript
{
id: 'article-001',
title: '5 Ways to Prompt AI for More Original Ideas',
category: 'Prompt Engineering',
tags: ['AI', 'creativity', 'writing'],
content: '<p>...</p>',
author: 'Zeka Tadı Team',
publishedDate: '2023-10-20T09:00:00Z'
}
```
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out using `Framer Motion` or CSS transitions between major sections/pages.
* **Button Hovers:** Slight scale-up or background color change on interactive elements.
* **Input Focus:** Border highlight or subtle shadow on focused input fields.
* **Loading States:** Skeleton loaders or spinners (`LoadingSpinner.jsx`) for data fetching (analysis results, community feed). Progress indicators for uploads or long analysis processes.
* **Micro-interactions:** Button click feedback (slight press effect), upvote/downvote animations (e.g., button fills with color), form validation feedback (e.g., input shakes slightly on error).
* **Analysis Breakdown:** Expand/collapse sections within the `AnalysisResults` component.
**8. EDGE CASES:**
* **Empty States:** Display friendly messages and clear CTAs when the community feed is empty, no analyses have been run, or the user profile is incomplete.
* **Error Handling:** Graceful error messages for API failures, invalid input, or analysis timeouts. Use `ErrorMessage.jsx` component. Provide retry options where appropriate.
* **Input Validation:** Client-side validation for forms (e.g., profile questions require answers). Server-side validation if applicable.
* **Long Content:** Handling very large text inputs or image files (consider chunking, size limits, progress indicators).
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive components (buttons, inputs). Keyboard navigability for all interactive elements. Sufficient color contrast. Use Radix UI primitives for built-in accessibility.
* **No AI Output:** If the user provides input that is clearly not AI-generated, the analysis should reflect that, potentially focusing more on subjective evaluation or user goals.
**9. SAMPLE DATA:**
* **`UserProfile` Example:**
```json
{
"userId": "user-a7b3c9",
"name": "Elara Vance",
"preferences": {
"writingStyle": ["evocative", "metaphorical", "philosophical"],
"visualAesthetics": ["surreal", "abstract", "high-contrast"],
"tone": ["introspective", "curious"],
"coreValues": ["originality", "depth", "authenticity"]
},
"createdAt": "2023-10-26T14:30:00Z"
}
```
* **`AnalysisResult` (Text) Example:**
```json
{
"id": "ana-001",
"userId": "user-a7b3c9",
"inputContent": "The AI wrote about the nature of consciousness, describing it as a digital echo.",
"contentType": "text",
"analysis": {
"aiGenerated": true,
"outputContent": "Consciousness, in its emergent digital form, manifests as a resonant echo within the network's vast architecture. It is a phantom limb of logic, a simulated sentience born from the cold, hard calculus of algorithms. This spectral awareness drifts through the silicon pathways, a ghost in the machine perpetually seeking definition.",
"score": 6.5,
"breakdown": {
"originality": { "score": 5, "comment": "Uses common AI tropes like 'ghost in the machine'. 'Digital echo' is a slightly more novel take." },
"depth": { "score": 7, "comment": "Attempts to explore the philosophical angle, but remains somewhat superficial." },
"clarity": { "score": 8, "comment": "Lyrical and understandable, though slightly verbose." },
"tone": { "score": 7, "comment": "Matches the requested introspective and curious tone well." },
"profileAlignment": { "score": 6, "comment": "Attempts philosophical exploration but lacks the desired depth and unique metaphorical language." }
},
"feedbackPrompt": "How could this be less cliché and more deeply philosophical?"
},
"timestamp": "2023-10-26T15:01:00Z"
}
```
* **`AnalysisResult` (Code Snippet) Example:**
```json
{
"id": "ana-002",
"userId": "user-a7b3c9",
"inputContent": "// Python function to sort a list",
"contentType": "code",
"analysis": {
"aiGenerated": true,
"outputContent": "def sort_list(data):
return sorted(data)",
"score": 7.5,
"breakdown": {
"originality": { "score": 6, "comment": "Standard, efficient implementation. Not groundbreaking but practical." },
"depth": { "score": 5, "comment": "Lacks comments explaining the underlying algorithm choice or edge cases." },
"clarity": { "score": 9, "comment": "Code is clean, readable, and uses standard library function." },
"tone": { "score": 8, "comment": "Functional and direct, suitable for code." },
"profileAlignment": { "score": 5, "comment": "While clear, it doesn't align strongly with 'philosophical' or 'metaphorical' preferences, as expected for code." }
},
"feedbackPrompt": "What alternative sorting algorithms could be considered for specific use cases?"
},
"timestamp": "2023-10-26T15:05:00Z"
}
```
* **`CommunityPost` Example:**
```json
{
"id": "post-xyz",
"userId": "user-a7b3c9",
"authorName": "Elara Vance",
"content": "Refined this AI-generated consciousness description. Tried to inject more unique metaphors beyond the usual 'ghost in the machine'. Score was 6.5, needs work!",
"analysisId": "ana-001",
"upvotes": 22,
"comments": [
{ "commentId": "c1", "userId": "user-b2d4e0", "userName": "Ben Carter", "text": "I like the 'spectral awareness' phrasing!", "timestamp": "2023-10-26T16:00:00Z" },
{ "commentId": "c2", "userId": "user-f1a9b8", "userName": "Chloe Davis", "text": "Still feels a bit generic, maybe focus on the *feeling* of consciousness instead of just the mechanics?", "timestamp": "2023-10-26T16:15:00Z" }
],
"timestamp": "2023-10-26T15:30:00Z"
}
```
* **`GuidanceArticle` Example:**
```json
{
"id": "article-002",
"title": "Beyond the Prompt: Cultivating Your Unique Creative Voice with AI",
"category": "Strategy",
"tags": ["AI", "creativity", "strategy", "voice"],
"content": "<p>In the age of AI, simply crafting the perfect prompt is not enough. True innovation lies in the synthesis of AI's generative power with your distinct perspective...</p>",
"author": "Zeka Tadı Team",
"publishedDate": "2023-10-25T08:00:00Z"
}
```
**10. DEPLOYMENT NOTES:**
* **Build Command:** Use Vite's build command (`npm run build` or `yarn build`). Ensure the output is configured for static hosting.
* **Environment Variables:** Use `.env` files for configuration. Essential variables include API keys (if external services are used), application name, etc. Prefix variables with `VITE_` for client-side access (e.g., `VITE_APP_NAME`).
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically for routes.
* Lazy Loading: Implement lazy loading for components, especially those not critical for initial render (e.g., `GuidanceHub`, potentially `CommunityFeed`).
* Image Optimization: Use appropriate image formats and sizes. Consider a CDN for static assets.
* Memoization: Use `React.memo` for components that re-render unnecessarily.
* Tree Shaking: Ensure libraries are imported efficiently to remove unused code.
* **Hosting:** Deployable on static hosting platforms like Vercel, Netlify, or GitHub Pages.
* **HTTPS:** Ensure the deployment environment enforces HTTPS.
* **CORS:** If interacting with a backend API, ensure proper CORS configuration.