skills.rest
fauzanazz
fauzanazzCOMMUNITY
Explore all skills by this author →
GitHub

bolder

Amplify bland designs through typography, color, layout, and motion adjustments.

Updated Apr 1, 2026
Search Tags:#typography#design#layout#color palette#animation#ui design#visual impact
One-click install
npx skills add https://github.com/fauzanazz/katalis --skill bolder-fauzanazz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bolder
Source: https://github.com/fauzanazz/katalis/tree/main/.agents/skills/bolder
Command: npx skills add https://github.com/fauzanazz/katalis --skill bolder-fauzanazz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs often end up too safe, generic, or visually underwhelming — system fonts, timid scale, low contrast, and predictable layouts that fail to create memorable experiences. This Skill systematically increases visual impact while preserving usability and accessibility. ## Core Features & Use Cases - Design Assessment: Diagnoses why a design feels boring by identifying generic choices, flat hierarchy, low contrast, and static composition. - Multi-Dimension Amplification: Applies targeted changes across typography (extreme scale, weight contrast), color (saturation, dominant palettes), spatial drama (asymmetry, grid-breaking), visual effects, and motion choreography. - AI Slop Avoidance: Explicitly guards against overused AI design tropes like purple-blue gradients, glassmorphism, and neon-on-dark clichés. - Use Case: A landing page uses default fonts and a centered, balanced layout that feels forgettable. Invoke this Skill to establish a dramatic hero focal point, introduce a bold dominant color, and add staggered entrance animations while keeping body text readable and WCAG-compliant. ## Quick Start Make this landing page design bolder and more distinctive while keeping it usable and accessible.

Frequently Asked Questions about bolder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website design look less generic?▼

Replace system fonts with distinctive typefaces, create dramatic scale contrast (3-5x size differences), adopt a dominant bold color, and break symmetric layouts with asymmetry. Focus on one hero focal point rather than making everything bold at once.

How to add visual impact without hurting usability?▼

Keep body text readable, maintain WCAG accessibility standards, and ensure users can complete tasks without distraction. Bold design means intentional drama on focal elements, not random effects applied everywhere.

What design patterns should I avoid when making bold designs?▼

Avoid overused AI-generated tropes: cyan-purple gradients, glassmorphism, neon accents on dark backgrounds, and gradient text on metrics. These read as generic rather than bold. Choose distinctive palettes, textures like grain or duotone, and intentional multi-stop gradients instead.

Does bolder design work for dashboards and data-heavy interfaces?▼

Context matters — marketing pages can push further than financial dashboards. The Skill assesses brand personality, purpose, and audience first, then sets a risk budget so amplification stays within appropriate constraints for the product type.

When should I not use a bold design approach?▼

Avoid bold amplification when strict brand guidelines limit experimentation, when accessibility constraints dominate, or when the audience expects conservative presentation. Bold without strategy becomes visual noise that undermines trust.

Related Skills

Explore More Design & Creative Skills→
CatsofsufferingCatsofsuffering
5

bolder

Amplify visual impact of bland designs while preserving usability and accessibility.

Community
Intermediate
Free-The-AiFree-The-Ai
833

emil-design-eng

Guide UI design with animation, accessibility, and performance principles.

Official
Advanced
Tea-4-LifeTea-4-Life

critique

Conduct structured UX critiques of interfaces across design principles and usability.

Official
Advanced
zhushen12580zhushen12580
184

quieter

Reduce visual intensity in designs by enforcing color, typography, and whitespace limits.

Community
Advanced