Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
VisualInteractionTasteBefore / after
Same prompt, different result
Prompt — Design a product page for Cairn — a 450ml double-wall titanium camp mug. Include hero, key specs, materials, and a buy CTA.
Skill markdown
When asked for "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. Reject them first, then increase visual impact by making the existing design language more decisive, specific, and committed.
---
## Register
Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
## Assess Current State
Analyze what makes the design feel too safe or boring:
1. **Identify weakness sources**:
- **Generic choices**: The page could belong to any product in the category.
- **Timid scale**: Everything is medium-sized with no clear lead.
- **Low contrast**: Important and supporting elements have similar visual weight.
- **Static**: The surface has no meaningful moment of emphasis.
- **Predictable**: The composition follows a default pattern without a point of view.
- **Flat hierarchy**: Nothing stands out or commands attention.
2. **Understand the context**:
- What is the brand personality?
- What is the purpose of this surface?
- Who is the audience?
- What design system, tokens, components, and visual conventions already exist?
If any of these are unclear from the codebase, {{ask_instruction}}
**CRITICAL**: "Bolder" does not mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random noise.
**WARNING - AI SLOP TRAP**: Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects."
## Design-System Lock
If the project has `DESIGN.md`, tokens, theme variables, or established component styles, treat that system as the boundary. Make the existing language stronger before adding new language.
Do not invent new colors, gradients, radii, shadows, fonts, decorative backgrounds, or effects just because the request says "bolder." A bolder pass should usually change emphasis, proportion, rhythm, density, contrast, copy, artifact specificity, and layout relationships while staying inside the documented system.
If the existing system is genuinely too limited to express the bolder direction, stop and ask the user before expanding it. Name the exact additions, the role each would play, and why the current system cannot do the job. If the user approves expansion, update the design system or tokens alongside the implementation.
## Plan Amplification
Create a strategy to increase impact while maintaining coherence:
- **Focal point**: Pick one thing the viewer should remember, then make the rest support it.
- **System levers**: Identify which existing tokens, components, layout patterns, and copy structures can carry more weight.
- **Risk budget**: Decide how far the surface can push while still feeling like the same product or brand.
- **Hierarchy amplification**: Increase contrast between primary, secondary, and tertiary content instead of making every element louder.
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
## Amplify the Design
Systematically increase impact through intention, not a menu of effects:
### Typography Amplification
- Strengthen the existing type hierarchy before changing typefaces.
- Make important text meaningfully more dominant, and make supporting text quieter.
- Use weight, measure, spacing, and line breaks to sharpen the point of view.
- Add or replace fonts only after user-approved design-system expansion.
### Color Amplification
- Use the existing palette more decisively before adding colors.
- Shift the proportion, placement, and contrast of documented colors to clarify meaning.
- Treat any new color, gradient, or tint ramp as a design-system expansion that requires user approval.
- Keep color tied to hierarchy, state, or brand meaning; do not use it as surface decoration.
### Spatial Amplification
- Change proportion, density, alignment, and sequencing so the composition has a stronger point of view.
- Create clearer contrast between dense evidence and open breathing room.
- Let layout express priority and narrative order before adding ornament.
- Preserve responsive behavior and avoid text overflow at every breakpoint.
### Surface Amplification
- Use existing surface, border, radius, and shadow rules more deliberately.
- Remove timid half-measures: either give an element a clear role or simplify it.
- Add texture, depth, illustration, or decorative treatments only when already established by the system or explicitly approved.
- Make real product artifacts, imagery, data, or copy carry attention before reaching for effects.
##
…More from pbakaus
- AdaptAdapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
- AnimateEnhance UX with purposeful animation and micro-interactions that support usability and delight.
- AuditRun technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
- ClarifyImprove labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
- ColorizeIntroduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
- CritiqueEvaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.