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. 识别问题根源：
    • 通用化选择：系统字体、基础色彩、标准布局
    • 保守的比例：所有元素均为中等尺寸，缺乏视觉张力
    • 低对比度：所有元素视觉权重相近
    • 静态无活力：无动效、无活力、缺乏生气
    • 过于 predictable：采用标准模式，无惊喜感
    • 扁平化层级：无突出元素，无法吸引注意力
  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.
制定在保持一致性的同时提升影响力的策略：
  • 焦点元素：哪个部分应成为视觉核心？（选一个，将其打造得极具吸引力）
  • 个性方向：极繁主义的混乱？优雅的张力？活泼的能量？暗黑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)
  • 替换通用字体：将系统字体替换为更具辨识度的字体（参考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特效”。
记住：大胆的设计是自信的设计。它敢于冒险、表达立场、打造难忘的体验。但缺乏策略的大胆只是喧闹。要有意图，要戏剧性，要令人难忘。