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

必备准备工作

Context Gathering (Do This First)

收集背景信息（优先完成）

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.
Attempt to gather these from the current thread or codebase.
  1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Guessing leads to generic AI slop.
没有必要的背景信息，你无法出色完成任务，比如目标受众（至关重要）、预期使用场景（至关重要）、品牌个性/调性，以及优秀的人类设计师所需的所有其他信息。
尝试从当前对话线程或代码库中收集这些信息。
  1. 如果你无法找到确切信息，必须从现有设计和功能中推断，你必须停止并{{ask_instruction}}确认你的推断是否正确。
  2. 否则，如果你无法完全推断，或你的置信度为中等及以下，你必须先{{ask_instruction}}提出澄清问题，以完善背景信息。
在得到答案前不要继续推进。猜测会导致千篇一律的AI垃圾设计。

Use frontend-design skill

使用frontend-design技能

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.
运用frontend-design技能获取设计原则与反模式知识。在该技能执行完毕、你明确所有注意事项前，请勿继续推进。

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_instruction}}
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."
分析设计为何显得保守或乏味：
  1. 识别问题根源：
    • 通用化选择：系统字体、基础色彩、标准布局
    • 保守的比例：所有元素均为中等尺寸，缺乏视觉张力
    • 低对比度：所有元素视觉权重相近
    • 静态化：无动效、无活力、无生气
    • 可预测性：采用标准模式，毫无惊喜
    • 扁平化层级：没有元素能脱颖而出或吸引注意力
  2. 理解背景语境：
    • 品牌个性是什么？（我们能突破到什么程度？）
    • 设计目的是什么？（营销类设计可比金融仪表板更大胆）
    • 目标受众是谁？（什么设计能引起他们的共鸣？）
    • 有哪些约束条件？（品牌规范、可访问性、性能要求）
如果从代码库中无法明确以上任何一点，请{{ask_instruction}}
关键提示：“更大胆”并不意味着混乱或花哨。它指的是独特、令人难忘且自信的设计。要的是有意图的视觉张力，而非随机的混乱。
警告 - AI垃圾设计陷阱：在让设计“更大胆”时，AI往往会陷入雷同的套路：青/紫渐变、毛玻璃效果、深色背景上的霓虹装饰、数据指标的渐变文字。这些恰恰是“大胆”的反面——它们是通用化的设计。在推进前，请务必查阅frontend-design技能中的所有“禁忌”准则。大胆意味着独特，而非“添加更多效果”。

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)
  • 替换通用字体：用独特字体替代系统字体（可参考frontend-design技能获取灵感）
  • 极端比例差：打造极具戏剧性的尺寸差异（3-5倍差距，而非1.5倍）
  • 字重对比：将900字重与200字重搭配，而非600与400字重
  • 非常规选择：可变字体、标题用装饰性字体、压缩/扩展字宽、将等宽字体作为刻意的装饰元素（而非偷懒的“开发工具”默认选项）

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)
  • 提高饱和度：转向更鲜艳、有活力的色彩（但避免霓虹色）
  • 大胆配色方案：采用出人意料的色彩组合——避开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
  • 极端尺寸跳跃：让重要元素比周围元素大3-5倍
  • 打破网格：让核心元素突破容器边界
  • 不对称布局：用充满张力的不对称布局替代居中、平衡的布局
  • 充裕留白：戏剧性地使用留白（100-200px间距，而非20-40px）
  • 元素叠加：刻意叠加元素以营造层次感

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
  • 戏剧性阴影：大尺寸、柔和的阴影以营造层次感（而非圆角矩形上的通用投影）
  • 背景处理：网格图案、噪点纹理、几何图案、有意图的渐变（而非紫蓝渐变）
  • 纹理与深度：颗粒感、半色调、双色调、分层元素——禁用毛玻璃效果（这是被过度使用的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延迟的交错式、戏剧性页面加载动画
  • 滚动效果：视差、渐显动画、滚动触发的序列动画
  • 微交互：令人愉悦的悬停效果、点击反馈、状态变化动画
  • 过渡动画：流畅且明显的过渡效果，使用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)
  • 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效果”。
记住：大胆的设计是自信的设计。它敢于冒险、表达立场、打造难忘的体验。但缺乏策略的大胆只是喧闹。要有意图、有戏剧性、令人难忘。