diff --git a/.claude/commands/audit.md b/.claude/commands/audit.md index 72a019ab7..00260c136 100644 --- a/.claude/commands/audit.md +++ b/.claude/commands/audit.md @@ -10,6 +10,8 @@ args: Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -51,12 +53,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/.claude/commands/critique.md b/.claude/commands/critique.md index 00b7f2aca..b600c7e04 100644 --- a/.claude/commands/critique.md +++ b/.claude/commands/critique.md @@ -16,55 +16,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -74,6 +95,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/claude-code-prefixed/.claude/commands/i-audit.md b/dist/claude-code-prefixed/.claude/commands/i-audit.md index 18c7a2569..74b8bbe15 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-audit.md +++ b/dist/claude-code-prefixed/.claude/commands/i-audit.md @@ -10,6 +10,8 @@ args: Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -51,12 +53,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/claude-code-prefixed/.claude/commands/i-critique.md b/dist/claude-code-prefixed/.claude/commands/i-critique.md index 3f810e95c..2aa2324d9 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-critique.md +++ b/dist/claude-code-prefixed/.claude/commands/i-critique.md @@ -16,55 +16,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -74,6 +95,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/claude-code/.claude/commands/audit.md b/dist/claude-code/.claude/commands/audit.md index 72a019ab7..00260c136 100644 --- a/dist/claude-code/.claude/commands/audit.md +++ b/dist/claude-code/.claude/commands/audit.md @@ -10,6 +10,8 @@ args: Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -51,12 +53,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/claude-code/.claude/commands/critique.md b/dist/claude-code/.claude/commands/critique.md index 00b7f2aca..b600c7e04 100644 --- a/dist/claude-code/.claude/commands/critique.md +++ b/dist/claude-code/.claude/commands/critique.md @@ -16,55 +16,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -74,6 +95,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/codex-prefixed/.codex/prompts/i-audit.md b/dist/codex-prefixed/.codex/prompts/i-audit.md index c71009ec9..85ccf8adf 100644 --- a/dist/codex-prefixed/.codex/prompts/i-audit.md +++ b/dist/codex-prefixed/.codex/prompts/i-audit.md @@ -5,6 +5,8 @@ argument-hint: [AREA=] Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -46,12 +48,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/codex-prefixed/.codex/prompts/i-critique.md b/dist/codex-prefixed/.codex/prompts/i-critique.md index 2814e1fb0..baeae485f 100644 --- a/dist/codex-prefixed/.codex/prompts/i-critique.md +++ b/dist/codex-prefixed/.codex/prompts/i-critique.md @@ -11,55 +11,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -69,6 +90,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/codex/.codex/prompts/audit.md b/dist/codex/.codex/prompts/audit.md index c71009ec9..85ccf8adf 100644 --- a/dist/codex/.codex/prompts/audit.md +++ b/dist/codex/.codex/prompts/audit.md @@ -5,6 +5,8 @@ argument-hint: [AREA=] Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -46,12 +48,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/codex/.codex/prompts/critique.md b/dist/codex/.codex/prompts/critique.md index 2814e1fb0..baeae485f 100644 --- a/dist/codex/.codex/prompts/critique.md +++ b/dist/codex/.codex/prompts/critique.md @@ -11,55 +11,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -69,6 +90,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/cursor-prefixed/.cursor/commands/i-audit.md b/dist/cursor-prefixed/.cursor/commands/i-audit.md index 16c512dac..1df7809ea 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-audit.md +++ b/dist/cursor-prefixed/.cursor/commands/i-audit.md @@ -1,5 +1,7 @@ Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -41,12 +43,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/cursor-prefixed/.cursor/commands/i-critique.md b/dist/cursor-prefixed/.cursor/commands/i-critique.md index 98720a444..8dfd0322c 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-critique.md +++ b/dist/cursor-prefixed/.cursor/commands/i-critique.md @@ -6,55 +6,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -64,6 +85,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/cursor/.cursor/commands/audit.md b/dist/cursor/.cursor/commands/audit.md index 16c512dac..1df7809ea 100644 --- a/dist/cursor/.cursor/commands/audit.md +++ b/dist/cursor/.cursor/commands/audit.md @@ -1,5 +1,7 @@ Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -41,12 +43,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/cursor/.cursor/commands/critique.md b/dist/cursor/.cursor/commands/critique.md index 98720a444..8dfd0322c 100644 --- a/dist/cursor/.cursor/commands/critique.md +++ b/dist/cursor/.cursor/commands/critique.md @@ -6,55 +6,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -64,6 +85,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/gemini-prefixed/.gemini/commands/i-audit.toml b/dist/gemini-prefixed/.gemini/commands/i-audit.toml index bf2d45106..2c4f6457f 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-audit.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-audit.toml @@ -2,6 +2,8 @@ description = "Perform comprehensive audit of interface quality across accessibi prompt = """ Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -43,12 +45,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/gemini-prefixed/.gemini/commands/i-critique.toml b/dist/gemini-prefixed/.gemini/commands/i-critique.toml index 94f3e6629..1b7be2144 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-critique.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-critique.toml @@ -8,55 +8,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -66,6 +87,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/dist/gemini/.gemini/commands/audit.toml b/dist/gemini/.gemini/commands/audit.toml index bf2d45106..2c4f6457f 100644 --- a/dist/gemini/.gemini/commands/audit.toml +++ b/dist/gemini/.gemini/commands/audit.toml @@ -2,6 +2,8 @@ description = "Perform comprehensive audit of interface quality across accessibi prompt = """ Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -43,12 +45,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/dist/gemini/.gemini/commands/critique.toml b/dist/gemini/.gemini/commands/critique.toml index 94f3e6629..1b7be2144 100644 --- a/dist/gemini/.gemini/commands/critique.toml +++ b/dist/gemini/.gemini/commands/critique.toml @@ -8,55 +8,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -66,6 +87,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity. diff --git a/source/commands/audit.md b/source/commands/audit.md index d1737b5ed..1fde584f6 100644 --- a/source/commands/audit.md +++ b/source/commands/audit.md @@ -10,6 +10,8 @@ args: Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address. +**First**: Use the frontend-design skill for design principles and anti-patterns. + ## Diagnostic Scan Run comprehensive checks across multiple dimensions: @@ -51,12 +53,27 @@ Run comprehensive checks across multiple dimensions: - **Placeholder as label**: Using placeholder text as the only field label - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice +6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: + - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds + - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful + - **Default dark mode with glowing accents**: "Cool" without requiring design decisions + - **Monospace typography**: Lazy shorthand for "technical/developer" vibes + - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively + - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template + - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing + - **Identical card grids**: Same-sized cards with icon + heading + text, repeated + - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell + - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report Create a detailed audit report with the following structure: +### AI Slop Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. + ### Executive Summary - Total issues found (count by severity) - Most critical issues (top 3-5) diff --git a/source/commands/critique.md b/source/commands/critique.md index f15593436..d3d1f9ea7 100644 --- a/source/commands/critique.md +++ b/source/commands/critique.md @@ -16,55 +16,76 @@ Conduct a holistic design critique, evaluating whether the interface actually wo Evaluate the interface across these dimensions: -### 1. Visual Hierarchy +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? Watch for these tells: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. +- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. +- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. +- **Monospace typography**: Lazy shorthand for "this is technical/for developers." +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. +- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. +- **Cards nested in cards**: The AI's go-to for "organizing" content. +- **Inter/Roboto/system fonts**: The path of least resistance. +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. +- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. + +**Ask yourself**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +### 2. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action? Can you spot it in 2 seconds? - Do size, color, and position communicate importance correctly? - Is there visual competition between elements that should have different weights? -### 2. Information Architecture +### 3. Information Architecture - Is the structure intuitive? Would a new user understand the organization? - Is related content grouped logically? - Are there too many choices at once? (cognitive overload) - Is the navigation clear and predictable? -### 3. Emotional Resonance +### 4. Emotional Resonance - What emotion does this interface evoke? Is that intentional? - Does it match the brand personality? - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? - Would the target user feel "this is for me"? -### 4. Discoverability & Affordance +### 5. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? - Are there hidden features that should be more visible? -### 5. Composition & Balance +### 6. Composition & Balance - Does the layout feel balanced or uncomfortably weighted? - Is whitespace used intentionally or just leftover? - Is there visual rhythm in spacing and repetition? - Does asymmetry feel designed or accidental? -### 6. Typography as Communication +### 7. Typography as Communication - Does the type hierarchy clearly signal what to read first, second, third? - Is body text comfortable to read? (line length, spacing, size) - Do font choices reinforce the brand/tone? - Is there enough contrast between heading levels? -### 7. Color with Purpose +### 8. Color with Purpose - Is color used to communicate, not just decorate? - Does the palette feel cohesive? - Are accent colors drawing attention to the right things? - Does it work for colorblind users? (not just technically—does meaning still come through?) -### 8. States & Edge Cases +### 9. States & Edge Cases - Empty states: Do they guide users toward action, or just say "nothing here"? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? - Success states: Do they confirm and guide next steps? -### 9. Microcopy & Voice +### 10. Microcopy & Voice - Is the writing clear and concise? - Does it sound like a human (the right human for this brand)? - Are labels and buttons unambiguous? @@ -74,6 +95,9 @@ Evaluate the interface across these dimensions: Structure your feedback as a design director would: +### AI Slop Verdict +**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. + ### Overall Impression A brief gut reaction—what works, what doesn't, and the single biggest opportunity.