Back to Details

i-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

强制准备步骤

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
调用 /impeccable —— 它包含设计原则、anti-patterns以及Context Gathering Protocol。在继续操作前请遵循该协议——如果目前还没有设计上下文，你必须先运行 
/impeccable teach
。

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.
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 impeccable skill before proceeding. Bold means distinctive, not "more effects."
分析导致设计过于保守或乏味的原因：
  1. 找出问题来源：
    • 通用化选择：系统字体、基础配色、标准布局
    • 尺度过于保守：所有元素大小都中等，没有视觉张力
    • 低对比度：所有元素视觉权重接近
    • 静态无活力：没有动效、没有能量感、没有生命力
    • 可预测性强：全是标准模式，没有惊喜感
    • 层级扁平：没有突出的元素，无法吸引用户注意力
  2. 理解上下文信息：
    • 品牌个性是什么？（我们的调整尺度可以多大？）
    • 设计的用途是什么？（营销类设计可以比金融仪表盘更大胆）
    • 目标受众是谁？（什么样的设计能引发他们的共鸣？）
    • 有哪些约束条件？（品牌规范、无障碍要求、性能要求）
如果以上任何信息在代码库中不明确，无法推断的内容请直接询问用户确认。
关键提示：“更大胆”不代表混乱或花哨，而是代表独特、有记忆点、自信。要的是有意图的视觉张力，不是随机的混乱效果。
警告 - AI烂俗设计陷阱：在做“更大胆”的设计时，AI默认会用那些老套的手法：青紫色渐变、glassmorphism、深色背景配霓虹点缀、指标用渐变文字。这些和“大胆”完全相反——它们非常通用。在继续操作前请先查看impeccable skill中所有的禁止规范。大胆意味着独特，不是“加更多特效”。

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.
制定策略在保持设计连贯性的同时提升冲击力：
  • 视觉焦点：核心亮点应该是什么？（选一个，把它做到极致）
  • 个性方向：是极繁主义的chaos？优雅的张力？活泼的能量感？暗黑氛围感？选一个方向。
  • 风险承受度：我们可以做多高的实验性调整？在约束范围内突破边界。
  • 层级强化：大的元素做得更大，小的元素做得更小（提升对比度）
重要提示：大胆的设计仍然需要保持可用性。没有功能支撑的冲击力只是装饰。

Amplify the Design

优化设计

Systematically increase impact across these dimensions:
系统性地从以下维度提升设计冲击力：

Typography Amplification

字体优化

  • Replace generic fonts: Swap system fonts for distinctive choices (see impeccable 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)
  • 替换通用字体：把系统字体换成更有辨识度的选择（可参考impeccable skill获取灵感）
  • 极端字号差：制造明显的字号跨度（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
  • 有张力的阴影：大而柔和的阴影提升层级（不是圆角矩形配通用的投影）
  • 背景处理：网格图案、噪点纹理、几何图案、有设计意图的渐变（不是紫到蓝渐变）
  • 纹理与深度：颗粒感、半色调、双色调、分层元素——不要用glassmorphism（它是被过度使用的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的平滑、明显的过渡（不要用bounce或elastic效果——会降低设计质感）

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特效”。
记住：大胆的设计是自信的设计。它敢于冒险、有明确的表达、能创造有记忆点的体验。但没有策略的大胆只是吵闹。要有意图、有张力、让人过目不忘。