bolder
starsforks
How to install bolder?
heyhank-app/heyhank/bolder
$npx -y skills add heyhank-app/heyhank --skill bolderAmplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
SKILL.md
| 1 | Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. |
| 2 | |
| 3 | ## MANDATORY PREPARATION |
| 4 | |
| 5 | ### Context Gathering (Do This First) |
| 6 | |
| 7 | You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well. |
| 8 | |
| 9 | Attempt to gather these from the current thread or codebase. |
| 10 | |
| 11 | 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right. |
| 12 | 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context. |
| 13 | |
| 14 | Do NOT proceed until you have answers. Guessing leads to generic AI slop. |
| 15 | |
| 16 | ### Use frontend-design skill |
| 17 | |
| 18 | Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts. |
| 19 | |
| 20 | --- |
| 21 | |
| 22 | ## Assess Current State |
| 23 | |
| 24 | Analyze what makes the design feel too safe or boring: |
| 25 | |
| 26 | 1. **Identify weakness sources**: |
| 27 | - **Generic choices**: System fonts, basic colors, standard layouts |
| 28 | - **Timid scale**: Everything is medium-sized with no drama |
| 29 | - **Low contrast**: Everything has similar visual weight |
| 30 | - **Static**: No motion, no energy, no life |
| 31 | - **Predictable**: Standard patterns with no surprises |
| 32 | - **Flat hierarchy**: Nothing stands out or commands attention |
| 33 | |
| 34 | 2. **Understand the context**: |
| 35 | - What's the brand personality? (How far can we push?) |
| 36 | - What's the purpose? (Marketing can be bolder than financial dashboards) |
| 37 | - Who's the audience? (What will resonate?) |
| 38 | - What are the constraints? (Brand guidelines, accessibility, performance) |
| 39 | |
| 40 | If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. |
| 41 | |
| 42 | **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. |
| 43 | |
| 44 | **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." |
| 45 | |
| 46 | ## Plan Amplification |
| 47 | |
| 48 | Create a strategy to increase impact while maintaining coherence: |
| 49 | |
| 50 | - **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) |
| 51 | - **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. |
| 52 | - **Risk budget**: How experimental can we be? Push boundaries within constraints. |
| 53 | - **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) |
| 54 | |
| 55 | **IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. |
| 56 | |
| 57 | ## Amplify the Design |
| 58 | |
| 59 | Systematically increase impact across these dimensions: |
| 60 | |
| 61 | ### Typography Amplification |
| 62 | - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) |
| 63 | - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) |
| 64 | - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 |
| 65 | - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) |
| 66 | |
| 67 | ### Color Intensification |
| 68 | - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) |
| 69 | - **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop |
| 70 | - **Dominant color strategy**: Let one bold color own 60% of the design |
| 71 | - **Sharp accents**: High-contrast accent colors that pop |
| 72 | - **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette |
| 73 | - **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) |
| 74 | |
| 75 | ### Spatial Drama |
| 76 | - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings |
| 77 | - **Break the grid**: Let hero elements escape containers and cross boundaries |
| 78 | - **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry |
| 79 | - **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) |
| 80 | - **Overlap**: Layer elements intentionally for depth |
| 81 | |
| 82 | ### Visual Effects |
| 83 | - **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) |
| 84 | - **Background treatments**: |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
