@mytechtoday/augment-extensions 1.2.2 → 1.3.0

package/augment-extensions/visual-design/examples/ai-prompt-generation.md

@@ -0,0 +1,233 @@
+# AI Image Generation Prompt Helper
+
+## Overview
+
+This example demonstrates how to use the Visual Design module to generate effective prompts for AI image generation platforms (Midjourney, DALL-E, Stable Diffusion).
+
+## Scenario
+
+**Goal**: Generate prompts for creating marketing visuals for a tech startup
+
+**Platforms**: Midjourney, DALL-E 3, Stable Diffusion
+
+## Using the AI Prompt Helper Domain
+
+```typescript
+import { AI_PROMPT_HELPER_DOMAIN } from './domains/other/ai-prompt-helper';
+import { defaultStyleSelector } from './style-selector';
+
+// Get vendor style for color/typography guidance
+const vendorStyle = defaultStyleSelector.selectVendorStyle('google');
+
+// Apply AI Prompt Helper domain
+const promptHelper = {
+  ...vendorStyle,
+  domain: AI_PROMPT_HELPER_DOMAIN,
+  platform: 'midjourney', // or 'dalle', 'stable-diffusion'
+  style: 'modern-tech',
+  subject: 'tech startup hero image'
+};
+```
+
+## Example 1: Hero Image for Landing Page
+
+### Requirements
+- Modern, professional aesthetic
+- Technology theme
+- Vibrant colors (Google Material 3 palette)
+- High quality, photorealistic
+
+### Generated Prompt (Midjourney)
+
+```
+A modern tech startup office with diverse team collaborating around a holographic display, 
+vibrant purple and blue color scheme (#6750A4, #0078D4), 
+natural lighting from large windows, 
+clean minimalist interior design, 
+photorealistic, 
+cinematic composition, 
+8k resolution, 
+professional photography, 
+depth of field, 
+--ar 16:9 --v 6 --style raw
+```
+
+### Generated Prompt (DALL-E 3)
+
+```
+Create a photorealistic image of a modern tech startup office. 
+Show a diverse team of professionals collaborating around a futuristic holographic display. 
+Use a vibrant color palette with purple (#6750A4) and blue (#0078D4) accents. 
+The scene should have natural lighting from large windows, 
+clean minimalist interior design with modern furniture. 
+High quality, professional photography style, 
+cinematic composition with depth of field. 
+16:9 aspect ratio.
+```
+
+### Generated Prompt (Stable Diffusion)
+
+```
+modern tech startup office, diverse team collaboration, holographic display, 
+vibrant purple and blue colors, natural window lighting, minimalist interior, 
+photorealistic, professional photography, cinematic, 8k, depth of field, 
+high detail, sharp focus, 
+(masterpiece:1.2), (best quality:1.2), (ultra-detailed:1.2)
+```
+
+## Example 2: Product Icon
+
+### Requirements
+- Simple, recognizable icon
+- Material Design style
+- Flat design with subtle depth
+- 1024x1024 resolution
+
+### Generated Prompt (Midjourney)
+
+```
+A simple, modern app icon for a productivity tool, 
+Material Design 3 style, 
+flat design with subtle gradient, 
+purple and white color scheme (#6750A4), 
+rounded square shape with 20% corner radius, 
+minimalist, 
+clean lines, 
+centered composition, 
+--ar 1:1 --v 6 --style raw
+```
+
+## Example 3: Social Media Post
+
+### Requirements
+- Instagram post (1080x1080)
+- Eye-catching, vibrant
+- Text overlay space
+- Brand colors
+
+### Generated Prompt (DALL-E 3)
+
+```
+Create a vibrant social media graphic for Instagram. 
+Abstract geometric shapes in purple (#6750A4) and teal (#00BCD4) gradients. 
+Modern, energetic composition with plenty of negative space in the center for text overlay. 
+Smooth gradients, rounded shapes, 
+Material Design 3 aesthetic. 
+1:1 square aspect ratio, 
+high contrast, 
+professional graphic design.
+```
+
+## Prompt Template Structure
+
+### Basic Template
+
+```
+[Subject] + [Style] + [Color Palette] + [Lighting] + [Composition] + [Quality] + [Technical Parameters]
+```
+
+### Detailed Breakdown
+
+1. **Subject**: What you want to generate
+   - "modern tech office"
+   - "app icon"
+   - "abstract background"
+
+2. **Style**: Visual aesthetic
+   - "Material Design 3"
+   - "Fluent Design"
+   - "photorealistic"
+   - "minimalist"
+   - "cinematic"
+
+3. **Color Palette**: Specific colors from vendor styles
+   - Google: `#6750A4, #EADDFF`
+   - Microsoft: `#0078D4, #F3F2F1`
+   - Amazon: `#0972D3, #16191F`
+
+4. **Lighting**: Light quality and direction
+   - "natural window lighting"
+   - "soft studio lighting"
+   - "dramatic side lighting"
+   - "golden hour"
+
+5. **Composition**: Layout and framing
+   - "centered composition"
+   - "rule of thirds"
+   - "negative space"
+   - "depth of field"
+
+6. **Quality**: Output quality descriptors
+   - "8k resolution"
+   - "high detail"
+   - "professional photography"
+   - "masterpiece"
+
+7. **Technical Parameters**: Platform-specific
+   - Midjourney: `--ar 16:9 --v 6 --style raw`
+   - DALL-E: Aspect ratio in description
+   - Stable Diffusion: `(masterpiece:1.2), (best quality:1.2)`
+
+## Platform-Specific Tips
+
+### Midjourney
+- Use `--ar` for aspect ratio (16:9, 1:1, 9:16)
+- Use `--v 6` for latest version
+- Use `--style raw` for more photorealistic results
+- Use `--no` to exclude elements
+
+### DALL-E 3
+- Be descriptive and specific
+- Use natural language
+- Specify aspect ratio in description
+- Avoid technical jargon
+
+### Stable Diffusion
+- Use weighted keywords: `(keyword:1.2)`
+- Use negative prompts: `--neg`
+- Specify model-specific keywords
+- Use quality tags: `masterpiece, best quality`
+
+## Combining with Vendor Styles
+
+### Google Material 3 Prompts
+
+```
+Material Design 3 aesthetic, 
+dynamic color theming, 
+rounded corners, 
+subtle shadows, 
+vibrant purple (#6750A4), 
+modern and expressive
+```
+
+### Microsoft Fluent 2 Prompts
+
+```
+Fluent Design System, 
+Acrylic material effect, 
+soft transparency, 
+layered depth, 
+professional blue (#0078D4), 
+clean and corporate
+```
+
+### Amazon Cloudscape Prompts
+
+```
+Enterprise dashboard aesthetic, 
+neutral color palette, 
+data visualization, 
+clean and functional, 
+AWS blue (#0972D3), 
+professional and minimal
+```
+
+## Next Steps
+
+- Experiment with different prompt structures
+- Test across multiple platforms
+- Refine prompts based on results
+- Build a prompt library for your brand
+- Combine vendor styles with domain-specific keywords
+

package/augment-extensions/visual-design/examples/basic-usage.md

@@ -0,0 +1,216 @@
+# Basic Usage Example
+
+## Overview
+
+This example demonstrates the fundamental workflow for using the Visual Design module with Augment AI.
+
+## Scenario
+
+**Goal**: Generate a modern landing page design using Google Material 3 Expressive style.
+
+**Requirements**:
+- Clean, modern aesthetic
+- Accessible color contrast
+- Responsive layout
+- Mobile-first approach
+
+## Step-by-Step Workflow
+
+### Step 1: Query the Module
+
+```bash
+augx show visual-design
+```
+
+This loads the core design elements, principles, and vendor styles into the AI context.
+
+### Step 2: Select Vendor Style
+
+The module uses default priority: **google → microsoft → amazon**
+
+For this example, we'll use Google Modern (Material 3 Expressive):
+
+```typescript
+import { defaultStyleSelector } from './style-selector';
+import { GOOGLE_MODERN } from './domains/web-page-styles/google-modern';
+
+// Get the default vendor style (Google)
+const vendorStyle = defaultStyleSelector.selectVendorStyle();
+// Returns: GOOGLE_MODERN
+
+// Or explicitly request Google
+const googleStyle = defaultStyleSelector.selectVendorStyle('google');
+```
+
+### Step 3: Apply Design Elements
+
+#### Color Palette
+
+```css
+:root {
+  /* Primary Colors (Material 3 Dynamic Color) */
+  --color-primary: #6750A4;
+  --color-on-primary: #FFFFFF;
+  --color-primary-container: #EADDFF;
+  --color-on-primary-container: #21005D;
+
+  /* Secondary Colors */
+  --color-secondary: #625B71;
+  --color-on-secondary: #FFFFFF;
+
+  /* Neutral Colors */
+  --color-surface: #FFFBFE;
+  --color-on-surface: #1C1B1F;
+  --color-outline: #79747E;
+
+  /* Semantic Colors */
+  --color-error: #B3261E;
+  --color-success: #4CAF50;
+}
+```
+
+#### Typography
+
+```css
+/* Google Sans for headings, Roboto for body */
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500&display=swap');
+
+:root {
+  --font-heading: 'Google Sans', sans-serif;
+  --font-body: 'Roboto', sans-serif;
+
+  /* Type Scale */
+  --font-size-h1: 3.5rem;    /* 56px */
+  --font-size-h2: 2.75rem;   /* 44px */
+  --font-size-h3: 2rem;      /* 32px */
+  --font-size-body: 1rem;    /* 16px */
+  --font-size-caption: 0.875rem; /* 14px */
+
+  /* Line Heights */
+  --line-height-heading: 1.2;
+  --line-height-body: 1.5;
+}
+```
+
+#### Layout (Responsive Grid)
+
+```css
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 24px;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(8, 1fr);
+    gap: 20px;
+  }
+}
+```
+
+### Step 4: Apply Design Principles
+
+#### Hierarchy
+
+```html
+<header>
+  <h1>Welcome to Our Product</h1>
+  <p class="subtitle">The best solution for your needs</p>
+</header>
+
+<section>
+  <h2>Features</h2>
+  <div class="feature-grid">
+    <div class="feature-card">
+      <h3>Fast</h3>
+      <p>Lightning-fast performance</p>
+    </div>
+  </div>
+</section>
+```
+
+#### Contrast (WCAG AA: 4.5:1 for text)
+
+```css
+/* Ensure sufficient contrast */
+.text-on-primary {
+  color: #FFFFFF; /* White on #6750A4 = 7.2:1 ✓ */
+}
+
+.text-on-surface {
+  color: #1C1B1F; /* Dark on #FFFBFE = 15.8:1 ✓ */
+}
+```
+
+### Step 5: Generate Output
+
+**HTML Structure**:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Modern Landing Page</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="hero">
+    <div class="container">
+      <h1>Transform Your Workflow</h1>
+      <p class="subtitle">Powerful tools for modern teams</p>
+      <button class="cta-button">Get Started</button>
+    </div>
+  </header>
+
+  <main>
+    <section class="features">
+      <div class="container">
+        <h2>Why Choose Us</h2>
+        <div class="grid">
+          <div class="feature-card">
+            <h3>Fast</h3>
+            <p>Lightning-fast performance</p>
+          </div>
+          <!-- More feature cards -->
+        </div>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
+```
+
+## Result
+
+A modern, accessible landing page following Google Material 3 Expressive design principles with:
+- ✅ Dynamic color theming
+- ✅ Proper typography hierarchy
+- ✅ Responsive grid layout
+- ✅ WCAG AA contrast ratios
+- ✅ Mobile-first approach
+- ✅ Consistent spacing (8px grid)
+
+## Next Steps
+
+- Explore other vendor styles (Microsoft Fluent 2, Amazon Cloudscape)
+- Try different domains (Web-app, Mobile, Print)
+- Customize color palettes
+- Add motion and elevation
+

package/augment-extensions/visual-design/examples/domain-workflows.md

@@ -0,0 +1,257 @@
+# Domain-Specific Workflows
+
+## Overview
+
+This example demonstrates how to use the Visual Design module for different domains: Website, Web-app, Mobile, .NET Application, Linux, Windows, Motion Picture, AI Prompt Helper, and Print Campaigns.
+
+## 1. Website Domain
+
+**Use Case**: Multi-page marketing website with blog
+
+**Workflow**:
+
+```typescript
+import { WEBSITE_DOMAIN } from './domains/other/website';
+import { defaultStyleSelector } from './style-selector';
+
+// Select vendor style (Google Material 3)
+const vendorStyle = defaultStyleSelector.selectVendorStyle('google');
+
+// Apply website domain characteristics
+const websiteDesign = {
+  ...vendorStyle,
+  domain: WEBSITE_DOMAIN,
+  pages: ['home', 'about', 'services', 'blog', 'contact'],
+  navigation: 'horizontal-menu',
+  layout: 'multi-page-with-sidebar'
+};
+```
+
+**Key Characteristics**:
+- Multi-page structure with consistent navigation
+- SEO-optimized layouts
+- Content-focused typography
+- Blog post templates
+- Contact forms
+
+## 2. Web-app Domain
+
+**Use Case**: Interactive SPA dashboard
+
+**Workflow**:
+
+```typescript
+import { WEB_APP_DOMAIN } from './domains/other/web-app';
+
+const webAppDesign = {
+  ...vendorStyle,
+  domain: WEB_APP_DOMAIN,
+  features: ['client-side-routing', 'state-management', 'real-time-updates'],
+  layout: 'app-shell-with-sidebar',
+  components: ['data-tables', 'charts', 'modals', 'notifications']
+};
+```
+
+**Key Characteristics**:
+- Single-page application architecture
+- App-like navigation (sidebar, tabs)
+- Interactive components (charts, tables)
+- State management patterns
+- Real-time data updates
+
+## 3. Mobile Application Domain
+
+**Use Case**: iOS/Android mobile app
+
+**Workflow**:
+
+```typescript
+import { MOBILE_APPLICATION_DOMAIN } from './domains/other/mobile-application';
+
+const mobileDesign = {
+  ...vendorStyle,
+  domain: MOBILE_APPLICATION_DOMAIN,
+  platform: 'ios', // or 'android'
+  navigation: 'bottom-tab-bar',
+  interactions: ['touch', 'swipe', 'pull-to-refresh'],
+  safeAreas: true
+};
+```
+
+**Key Characteristics**:
+- Touch-first interaction design
+- Native navigation patterns (iOS/Android)
+- Gesture-based interactions
+- Bottom navigation and tab bars
+- Safe area inset handling
+- Haptic feedback
+
+## 4. .NET Application Domain
+
+**Use Case**: WPF desktop application
+
+**Workflow**:
+
+```typescript
+import { DOTNET_APPLICATION_DOMAIN } from './domains/other/dotnet-application';
+
+const dotnetDesign = {
+  ...vendorStyle,
+  domain: DOTNET_APPLICATION_DOMAIN,
+  framework: 'WPF', // or 'WinForms', 'MAUI', 'Blazor'
+  architecture: 'MVVM',
+  layout: 'ribbon-with-sidebar'
+};
+```
+
+**Key Characteristics**:
+- XAML-based UI definition
+- MVVM architecture pattern
+- WPF/WinForms/MAUI controls
+- Dependency injection support
+- Visual Studio designer support
+
+## 5. Linux Platform Domain
+
+**Use Case**: GNOME desktop application
+
+**Workflow**:
+
+```typescript
+import { LINUX_PLATFORM_DOMAIN } from './domains/other/linux-platform';
+
+const linuxDesign = {
+  ...vendorStyle,
+  domain: LINUX_PLATFORM_DOMAIN,
+  desktopEnvironment: 'GNOME', // or 'KDE', 'XFCE'
+  toolkit: 'GTK4',
+  layout: 'headerbar-with-sidebar'
+};
+```
+
+**Key Characteristics**:
+- GNOME HIG / KDE HIG compliance
+- GTK/Qt integration
+- Desktop environment theming
+- System integration (notifications, tray)
+
+## 6. Windows Platform Domain
+
+**Use Case**: Windows 11 application
+
+**Workflow**:
+
+```typescript
+import { WINDOWS_PLATFORM_DOMAIN } from './domains/other/windows-platform';
+
+const windowsDesign = {
+  ...vendorStyle,
+  domain: WINDOWS_PLATFORM_DOMAIN,
+  version: 'Windows 11',
+  materials: ['Acrylic', 'Mica'],
+  layout: 'navigation-view-with-command-bar'
+};
+```
+
+**Key Characteristics**:
+- Windows 11 design principles
+- Acrylic/Mica materials
+- Fluent Design System
+- WinUI 3 controls
+
+## 7. Motion Picture Design Domain
+
+**Use Case**: Film title sequence design
+
+**Workflow**:
+
+```typescript
+import { MOTION_PICTURE_DOMAIN } from './domains/other/motion-picture';
+
+const motionDesign = {
+  ...vendorStyle,
+  domain: MOTION_PICTURE_DOMAIN,
+  medium: 'film', // or 'tv', 'web-series'
+  aspectRatio: '2.39:1', // Cinemascope
+  colorGrading: 'cinematic-teal-orange',
+  typography: 'bold-sans-serif-titles'
+};
+```
+
+**Key Characteristics**:
+- Cinematography principles
+- Color grading techniques
+- Composition rules (rule of thirds)
+- Visual storytelling
+- Motion graphics
+
+## 8. AI Prompt Helper Domain
+
+**Use Case**: Generate image prompts for Midjourney/DALL-E
+
+**Workflow**:
+
+```typescript
+import { AI_PROMPT_HELPER_DOMAIN } from './domains/other/ai-prompt-helper';
+
+const promptDesign = {
+  ...vendorStyle,
+  domain: AI_PROMPT_HELPER_DOMAIN,
+  platform: 'midjourney', // or 'dalle', 'stable-diffusion'
+  style: 'photorealistic',
+  keywords: ['cinematic lighting', '8k', 'detailed']
+};
+```
+
+**Key Characteristics**:
+- Platform-specific prompt templates
+- Style keyword suggestions
+- Composition guidance
+- Lighting and mood descriptors
+
+## 9. Print Campaign Domain
+
+**Use Case**: Event poster design
+
+**Workflow**:
+
+```typescript
+import { PRINT_CAMPAIGNS_DOMAIN } from './domains/other/print-campaigns';
+
+const printDesign = {
+  ...vendorStyle,
+  domain: PRINT_CAMPAIGNS_DOMAIN,
+  format: 'poster', // or 'flyer', 'banner', 'billboard'
+  size: '24x36',
+  colorMode: 'CMYK',
+  resolution: '300dpi'
+};
+```
+
+**Key Characteristics**:
+- Print-specific color (CMYK)
+- High resolution (300 DPI)
+- Bleed and safe zones
+- Physical media constraints
+- Large-format typography
+
+## Choosing the Right Domain
+
+| Domain | Best For | Key Features |
+|--------|----------|--------------|
+| **Website** | Marketing sites, blogs | Multi-page, SEO, content-focused |
+| **Web-app** | Dashboards, SaaS | Interactive, state-driven, real-time |
+| **Mobile** | iOS/Android apps | Touch-first, native patterns |
+| **.NET** | Desktop apps | XAML, MVVM, Windows integration |
+| **Linux** | Linux desktop apps | GTK/Qt, HIG compliance |
+| **Windows** | Windows apps | Fluent Design, Acrylic/Mica |
+| **Motion Picture** | Film, TV, video | Cinematography, color grading |
+| **AI Prompt** | Image generation | Prompt templates, keywords |
+| **Print** | Posters, flyers | CMYK, high-res, physical media |
+
+## Next Steps
+
+- Explore vendor-specific implementations for each domain
+- Combine multiple domains (e.g., Website + Mobile)
+- Customize domain characteristics for your use case
+