From c4c56613927acf2a1023677e4f28c80adf52e18b Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 8 Jan 2026 14:11:05 -0800 Subject: [PATCH] Harden bolder command against AI slop - Added explicit AI SLOP TRAP warning before planning - Removed "monospace as accent" suggestion (contradicts skill) - Replaced glassmorphism with grain, halftone, duotone alternatives - Added anti-slop caveats to shadows and borders suggestions - Added "NOT AI slop" as first verification check - Added "the test" to verify section Co-Authored-By: Claude Opus 4.5 --- .claude/commands/bolder.md | 17 +++++++++++------ .../.claude/commands/i-bolder.md | 17 +++++++++++------ dist/claude-code/.claude/commands/bolder.md | 17 +++++++++++------ dist/codex-prefixed/.codex/prompts/i-bolder.md | 17 +++++++++++------ dist/codex/.codex/prompts/bolder.md | 17 +++++++++++------ .../.cursor/commands/i-bolder.md | 17 +++++++++++------ dist/cursor/.cursor/commands/bolder.md | 17 +++++++++++------ .../.gemini/commands/i-bolder.toml | 17 +++++++++++------ dist/gemini/.gemini/commands/bolder.toml | 17 +++++++++++------ source/commands/bolder.md | 17 +++++++++++------ 10 files changed, 110 insertions(+), 60 deletions(-) diff --git a/.claude/commands/bolder.md b/.claude/commands/bolder.md index ab46b72f1..2155bdf8b 100644 --- a/.claude/commands/bolder.md +++ b/.claude/commands/bolder.md @@ -33,6 +33,8 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -52,7 +54,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -70,11 +72,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -100,10 +102,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/claude-code-prefixed/.claude/commands/i-bolder.md b/dist/claude-code-prefixed/.claude/commands/i-bolder.md index d9bf6367b..19aa1be31 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-bolder.md +++ b/dist/claude-code-prefixed/.claude/commands/i-bolder.md @@ -33,6 +33,8 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -52,7 +54,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -70,11 +72,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -100,10 +102,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/claude-code/.claude/commands/bolder.md b/dist/claude-code/.claude/commands/bolder.md index ab46b72f1..2155bdf8b 100644 --- a/dist/claude-code/.claude/commands/bolder.md +++ b/dist/claude-code/.claude/commands/bolder.md @@ -33,6 +33,8 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -52,7 +54,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -70,11 +72,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -100,10 +102,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/codex-prefixed/.codex/prompts/i-bolder.md b/dist/codex-prefixed/.codex/prompts/i-bolder.md index a796cde5e..ef876f69b 100644 --- a/dist/codex-prefixed/.codex/prompts/i-bolder.md +++ b/dist/codex-prefixed/.codex/prompts/i-bolder.md @@ -29,6 +29,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -48,7 +50,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -66,11 +68,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -96,10 +98,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/codex/.codex/prompts/bolder.md b/dist/codex/.codex/prompts/bolder.md index a796cde5e..ef876f69b 100644 --- a/dist/codex/.codex/prompts/bolder.md +++ b/dist/codex/.codex/prompts/bolder.md @@ -29,6 +29,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -48,7 +50,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -66,11 +68,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -96,10 +98,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/cursor-prefixed/.cursor/commands/i-bolder.md b/dist/cursor-prefixed/.cursor/commands/i-bolder.md index 586059f4b..cae42fd97 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-bolder.md +++ b/dist/cursor-prefixed/.cursor/commands/i-bolder.md @@ -24,6 +24,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -43,7 +45,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -61,11 +63,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -91,10 +93,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/cursor/.cursor/commands/bolder.md b/dist/cursor/.cursor/commands/bolder.md index 586059f4b..cae42fd97 100644 --- a/dist/cursor/.cursor/commands/bolder.md +++ b/dist/cursor/.cursor/commands/bolder.md @@ -24,6 +24,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -43,7 +45,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -61,11 +63,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -91,10 +93,13 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/dist/gemini-prefixed/.gemini/commands/i-bolder.toml b/dist/gemini-prefixed/.gemini/commands/i-bolder.toml index 1006953e6..2b84827e9 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-bolder.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-bolder.toml @@ -26,6 +26,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -45,7 +47,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -63,11 +65,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -93,11 +95,14 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. """ \ No newline at end of file diff --git a/dist/gemini/.gemini/commands/bolder.toml b/dist/gemini/.gemini/commands/bolder.toml index 1006953e6..2b84827e9 100644 --- a/dist/gemini/.gemini/commands/bolder.toml +++ b/dist/gemini/.gemini/commands/bolder.toml @@ -26,6 +26,8 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -45,7 +47,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -63,11 +65,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -93,11 +95,14 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. """ \ No newline at end of file diff --git a/source/commands/bolder.md b/source/commands/bolder.md index 139746f94..aa66f9339 100644 --- a/source/commands/bolder.md +++ b/source/commands/bolder.md @@ -33,6 +33,8 @@ If any of these are unclear from the codebase, {{ask_instruction}} **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + ## Plan Amplification Create a strategy to increase impact while maintaining coherence: @@ -52,7 +54,7 @@ Systematically increase impact across these dimensions: - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed or extended widths ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) @@ -70,11 +72,11 @@ Systematically increase impact across these dimensions: - **Overlap**: Layer elements intentionally for depth ### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation -- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns -- **Blur effects**: Glassmorphism, backdrop blur, depth effects -- **Borders & frames**: Thick borders, decorative frames, custom shapes -- **Custom elements**: Illustrative elements, custom icons, decorative details +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays @@ -100,11 +102,14 @@ Systematically increase impact across these dimensions: Ensure amplification maintains usability and coherence: +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. - **Still functional**: Can users accomplish tasks without distraction? - **Coherent**: Does everything feel intentional and unified? - **Memorable**: Will users remember this experience? - **Performant**: Do all these effects run smoothly? - **Accessible**: Does it still meet accessibility standards? +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.