mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 17:46:36 +03:00
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 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.5
parent
e4f2ef361e
commit
c4c5661392
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
Vendored
+11
-6
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
+11
-6
@@ -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.
|
||||
"""
|
||||
+11
-6
@@ -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.
|
||||
"""
|
||||
@@ -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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user