Back to Details

bolder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
增强过于保守、通用或视觉效果不足的设计，提升视觉冲击力与个性，打造更引人注目、更令人难忘的体验。

MANDATORY PREPARATION

强制准备

Users start this workflow with 
/bolder
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
用户通过 
/bolder
启动此工作流。此 skill 激活后，加载 $frontend-design——其中包含设计原则、反模式以及 Context Gathering Protocol。继续执行前必须遵循该协议；如果尚不存在设计上下文，则必须先加载 $setup。

Assess Current State

评估当前状态

Analyze what makes the design feel too safe or boring:
  1. 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
  2. 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, ask the user directly to clarify what you cannot infer.
CRITICAL: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
Boldness should come from committed decisions: typography, color, layout, shape language, and voice. Effects are optional; point-of-view is not.
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."
Consult the ai slop detection reference when checking whether "bolder" choices are actually just generic trend cargo-culting. Consult the finishing touches when stronger personality should come from accent borders, upgraded defaults, background decoration, or more distinctive component presentation.
分析设计为何显得过于保守或乏味：
  1. 识别薄弱环节的来源：
    • 通用选择：系统字体、基础色彩、标准布局
    • 尺度 timid：所有元素都是中等尺寸，缺乏戏剧性
    • 对比不足：所有内容的视觉权重相近
    • 静态感：没有动效、活力或生命力
    • 可预测：采用标准模式，没有任何意外
    • 扁平层级：没有任何元素突出或吸引注意力
  2. 理解上下文：
    • 品牌的个性是什么？（可以推进到什么程度？）
    • 设计的目的是什么？（营销设计可以比金融仪表盘更大胆）
    • 目标受众是谁？（什么内容能引起共鸣？）
    • 有哪些限制条件？（品牌规范、无障碍、性能）
如果代码库中无法确定上述信息，应直接向用户询问无法推断的内容。
关键提示：“更大胆”并不意味着混乱或刺眼，而是意味着独特、令人难忘且自信。追求有意图的戏剧性，而非随机的混乱。
大胆应源于坚定的设计决策：字体、色彩、布局、形状语言和表达方式。效果是可选的，观点不可妥协。
警告——AI 垃圾陷阱：让设计“大胆”时，AI 往往会套用那些陈旧套路：青色/紫色渐变、玻璃拟态、深色背景上的霓虹强调色、指标数字上的渐变文字。这些恰恰与大胆相反——它们非常通用。继续执行前，请审查 frontend-design skill 中的所有 DON'T 指南。大胆意味着独特，而不是堆叠更多效果。
检查“大胆”选择是否只是盲目追随通用潮流时，请参考 ai slop detection。
当需要通过强调边框、升级默认样式、背景装饰或更具差异化的组件呈现来增强个性时，请参考 finishing touches。

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)
  • Concrete levers: Which of font choice, color temperature, border radius, copy tone, and composition will carry the personality?
IMPORTANT: Bold design must still be usable. Impact without function is just decoration.
制定一套在保持整体一致性的同时增强冲击力的策略：
  • 视觉焦点：核心亮点应该是什么？（只选一个，并将其做到极致）
  • 个性方向：极繁混乱？优雅戏剧感？俏皮活力？暗黑 moody？选择一条明确方向。
  • 风险预算：可以进行多大程度的实验？在约束范围内突破边界。
  • 强化层级：让大元素变得更大，小元素变得更小（增加对比）
  • 具体抓手：字体选择、色温、圆角、文案语气和构图中，哪些负责承载个性？
重要提示：大胆设计仍然必须可用。只有冲击力而没有功能，就只是装饰。

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)
  • Voice matters too: Let labels, headings, and supporting copy reinforce the personality instead of sounding like default enterprise filler
  • 替换通用字体：用 distinctive choices 替代系统字体（可参考 frontend-design skill 获取灵感）
  • 极端尺度：制造显著的字号跳跃（差异应为 3x-5x，而不是 1.5x）
  • 字重对比：将 900 字重与 200 字重搭配，而不是 600 搭配 400
  • 意外选择：可变字体、标题专用 display font、窄体/宽体字体，以及有意作为点缀的 monospace 字体（不要将其当作偷懒的“开发者工具”默认样式）
  • 语气同样重要：让标签、标题和辅助文案强化个性，避免写成默认的企业级填充内容

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)
  • Commit to temperature: Warm palettes feel different from cool palettes; pick one on purpose
  • 提高饱和度：转向更鲜艳、更有活力的颜色（但不要使用霓虹色）
  • 大胆的配色方案：引入出人意料的颜色组合——避免紫色到蓝色的渐变式 AI 垃圾
  • 主导色策略：让一种大胆颜色占据设计的 60%
  • 锐利强调色：使用高对比度、能够脱颖而出的强调色
  • 带色中性色：用与配色方案协调的带色灰替代纯灰色
  • 丰富渐变：使用有意设计的多段渐变（而不是通用的紫色到蓝色渐变）
  • 明确色温：暖色调和冷色调会带来不同感受，应有意识地选择其中一种

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
  • De-emphasize the rest: Sometimes the fastest way to make the hero feel bold is to quiet competing elements
  • 极端尺度跳跃：让重要元素比周围元素大 3-5 倍
  • 打破网格：让核心元素突破容器并跨越边界
  • 非对称布局：用充满张力的非对称布局替代居中、平衡的布局
  • 大胆留白：戏剧化地使用留白（间距为 100-200px，而不是 20-40px）
  • 重叠：有意叠加元素，营造深度
  • 弱化其他元素：有时让竞争元素安静下来，是让核心焦点显得更大胆的最快方式

Visual Effects

视觉效果

  • Dramatic shadows: Use them when they communicate meaningful 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
  • 戏剧性阴影：当阴影能够传达有意义的层级抬升时再使用（不要在圆角矩形上添加通用投影）
  • 背景处理：网格图案、噪点纹理、几何图案、有意设计的渐变（不要使用紫色到蓝色渐变）
  • 纹理与深度：颗粒、半色调、双色调、分层元素——不要使用玻璃拟态（这是过度使用的 AI 垃圾）
  • 边框与框架：粗边框、装饰性框架、自定义形状（不要使用仅单侧带彩色边框的圆角矩形）
  • 自定义元素：插画元素、自定义图标和装饰细节，用于强化品牌个性

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)
  • 入场编排：采用错落、富有戏剧性的页面加载动画，延迟间隔为 50-100ms
  • 滚动效果：视差、显现动画、滚动触发的连续动画
  • 微交互：令人满意的 hover 效果、点击反馈和状态变化
  • 过渡：使用 ease-out-quart/quint/expo 实现平滑且明显的过渡（不要使用弹跳或弹性效果，它们会降低质感）

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)
  • Confuse "more decoration" with stronger personality
  • 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)
  • 核心时刻：用戏剧化手法打造清晰的视觉焦点
  • 对角线动线：通过斜向排列摆脱水平或垂直方向的僵化
  • 全屏元素：使用整个视口宽度或高度来增强冲击力
  • 意外比例：黄金比例？弃用它。尝试 70/30、80/20 的分割方式
绝不：
  • 毫无目的地随机添加效果（混乱 ≠ 大胆）
  • 为了美观牺牲可读性（正文必须易于阅读）
  • 让所有元素都变粗（这样就没有任何元素称得上大胆——必须形成对比）
  • 将“更多装饰”误认为更强个性
  • 忽视无障碍要求（大胆设计仍须符合 WCAG 标准）
  • 用动效造成压迫（动画疲劳确实存在）
  • 盲目模仿流行美学（大胆意味着独特，而不是衍生）

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.
确保增强后的设计仍然可用且协调一致：
  • 不是 AI 垃圾：它是否看起来与其他 AI 生成的“大胆”设计毫无区别？如果是，请重新开始。
  • 仍然具备功能性：用户能否在不被打扰的情况下完成任务？
  • 协调一致：所有元素是否都显得有意图且统一？
  • 令人难忘：用户会记住这个体验吗？
  • 性能良好：所有效果是否都能流畅运行？
  • 具备无障碍支持：是否仍符合无障碍标准？
测试方法：如果把它展示给某个人，并说“这是 AI 把它做得更大胆了”，对方会立刻相信吗？如果会，你就失败了。大胆意味着独特，而不是“增加更多 AI 效果”。
请记住：大胆设计就是自信的设计。它敢于冒险、明确表达，并创造令人难忘的体验。但没有策略的大胆只会显得喧闹。要有意图、要富有戏剧性、要令人难忘。