--- id: sm-bolder name: "bolder" url: https://skills.yangsir.net/skill/sm-bolder author: pbakaus domain: design tags: ["typography", "visual-hierarchy", "graphic-design", "branding", "ui-design"] install_count: 80400 rating: 4.70 (1684 reviews) github: https://github.com/pbakaus/impeccable --- # bolder > 此技能专注于运用大胆且富有冲击力的设计语言，使AI工具的界面元素更具视觉吸引力和辨识度，从而强化品牌形象并提升用户感知。 **Stats**: 80,400 installs · 4.7/5 (1684 reviews) ## Before / After 对比 ### 设计元素强调与视觉优化 ## Readme # bolder Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. ## MANDATORY PREPARATION Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. ## Assess Current State Analyze what makes the design feel too safe or boring: - **Identify weakness sources**: **Generic choices**: System fonts, basic colors, standard layouts - **Timid scale**: Everything is medium-sized with no drama - **Low contrast**: Everything has similar visual weight - **Static**: No motion, no energy, no life - **Predictable**: Standard patterns with no surprises - **Flat hierarchy**: Nothing stands out or commands attention - **Understand the context**: What's the brand personality? (How far can we push?) - What's the purpose? (Marketing can be bolder than financial dashboards) - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool 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: - **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) - **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. - **Risk budget**: How experimental can we be? Push boundaries within constraints. - **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) **IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. ## Amplify the Design Systematically increase impact across these dimensions: ### Typography Amplification - **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, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) ### Color Intensification - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) - **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop - **Dominant color strategy**: Let one bold color own 60% of the design - **Sharp accents**: High-contrast accent colors that pop - **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette - **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) ### Spatial Drama - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings - **Break the grid**: Let hero elements escape containers and cross boundaries - **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry - **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) - **Overlap**: Layer elements intentionally for depth ### Visual Effects - **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 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences - **Micro-interactions**: Satisfying hover effects, click feedback, state changes - **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) ### Composition Boldness - **Hero moments**: Create clear focal points with dramatic treatment - **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements - **Full-bleed elements**: Use full viewport width/height for impact - **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits **NEVER**: - Add effects randomly without purpose (chaos ≠ bold) - Sacrifice readability for aesthetics (body text must be readable) - Make everything bold (then nothing is bold - need contrast) - Ignore accessibility (bold design must still meet WCAG standards) - Overwhelm with motion (animation fatigue is real) - Copy trendy aesthetics blindly (bold means distinctive, not derivative) ## Verify Quality 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. Weekly Installs17.7KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/bolder/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/bolder/security/socket)[SnykPass](/pbakaus/impeccable/bolder/security/snyk)Installed oncodex17.5Kopencode17.4Kgithub-copilot17.3Kgemini-cli17.3Kcursor17.3Kamp17.3K --- *Source: https://skills.yangsir.net/skill/sm-bolder* *Markdown mirror: https://skills.yangsir.net/api/skill/sm-bolder/markdown*