Back to Details

redesign

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Redesign

重设计

Use this command when a product already exists and needs a stronger layout, visual system, and interaction polish.
当产品已存在，需要更强的布局、视觉体系和交互打磨时，使用此命令。

Implementation Default

默认实现方案

Default to Tailwind CSS for redesign output.
  • Use Tailwind utility classes for all visual updates unless the user explicitly requests another styling system.
  • Preserve existing framework/runtime, but move styling decisions toward Tailwind by default when feasible.
重设计输出默认采用Tailwind CSS。
  • 所有视觉更新均使用Tailwind工具类，除非用户明确要求其他样式系统。
  • 保留现有框架/运行环境，但在可行的情况下默认将样式方案向Tailwind迁移。

UI Library Access

可用UI库

Allowed reference libraries:
  • UIverse
  • FlyonUI (
    https://flyonui.com/
    )
  • daisyUI
Rules:
  • use libraries as accelerators, not as full-page templates
  • refactor and mutate library components to fit product semantics and brand direction
  • avoid repeated stock patterns from any single library
  • pair library usage with invented components when repetition risk is high
允许参考的库：
  • UIverse
  • FlyonUI (
    https://flyonui.com/
    )
  • daisyUI
规则：
  • 将库作为加速工具使用，而非整页模板
  • 重构并调整库组件以适配产品语义和品牌方向
  • 避免重复使用任何单一库的通用样式模式
  • 当重复风险较高时，结合自定义组件使用库资源

Pretext Integration

Pretext集成

When redesigning existing UIs with text-overflow risk or unstable wrapping, use 
@chenglou/pretext
to plan text layout before finalizing spacing and type scale.
  • Install when needed: 
    npm install @chenglou/pretext
  • Use 
    prepare()
    + 
    layout()
    to validate key text blocks at target widths (hero, cards, CTA rows, nav labels).
  • Use the measurements to choose safer width constraints and reduce overflow regressions across breakpoints.
  • If the redesign depends on precise line rhythm, use 
    prepareWithSegments()
    + 
    walkLineRanges()
    to compare alternatives and pick the strongest composition.
  • If the project is static HTML/CDN-only or no JS build step exists, skip pretext integration and handle wrapping with responsive CSS constraints instead.
  • Do this silently; do not include user-facing "Note on Pretext" caveats unless asked.
当重设计的现有UI存在文本溢出风险或换行不稳定的问题时，在最终确定间距和字体缩放前使用
@chenglou/pretext
规划文本布局。
  • 按需安装：
    npm install @chenglou/pretext
  • 使用
    prepare()
    + 
    layout()
    验证目标宽度下的关键文本块（首屏、卡片、CTA行、导航标签）。
  • 使用测量结果选择更安全的宽度约束，减少各断点下的溢出回归问题。
  • 如果重设计依赖精确的行节奏，使用
    prepareWithSegments()
    + 
    walkLineRanges()
    对比不同方案，选择最优排版。
  • 如果项目仅为静态HTML/CDN引入或无JS构建步骤，跳过Pretext集成，改用响应式CSS约束处理换行。
  • 该步骤静默执行：除非用户询问，否则不要向用户展示“关于Pretext的说明”之类的提示。

Anti-Repetition Expansion (Required)

防重复拓展要求（必填）

Redesign must not look like a cosmetic restyle of standard templates.
Rules:
  1. Build a broad candidate set across component and interaction types before choosing a direction.
  2. Replace repetitive card structures with differentiated component families (data cards, narrative blocks, comparison rows, proof strips, utility panels, etc.).
  3. Invent at least 
    2 new components
    for each substantial redesign when current UI blocks are generic.
  4. Invent at least 
    1 new animation pattern
    when motion is requested, tied to user feedback or hierarchy.
  5. Reject outputs where variation is only color, border radius, or font changes.
重设计不能只是对标准模板的外观美化。
规则：
  1. 在确定方向前，构建涵盖不同组件和交互类型的广泛候选集。
  2. 用差异化的组件族（数据卡片、叙事块、对比行、证明条、实用面板等）替换重复的卡片结构。
  3. 当现有UI模块过于通用时，每次实质性重设计至少创建
    2个新组件
    。
  4. 当要求添加动效时，至少设计
    1种新的动画模式
    ，与用户反馈或层级结构绑定。
  5. 拒绝仅修改颜色、圆角或字体的输出结果。

Redesign Diversity Quotas (Required)

重设计多样性指标（必填）

For substantial redesigns, enforce:
  1. at least 
    6
    materially different section structures across the page
  2. at least 
    3
    non-card primary content modules
  3. at least 
    2
    newly invented components adapted to this product context
  4. no single legacy pattern may dominate more than 
    25%
    of sections
If the redesign still resembles the original layout skeleton, escalate structural changes before finalizing.
对于实质性重设计，需满足：
  1. 页面内至少有
    6种
    存在实质差异的区块结构
  2. 至少有
    3个
    非卡片型的主要内容模块
  3. 至少有
    2个
    适配该产品场景的全新自定义组件
  4. 任何单一旧有模式的占比不得超过区块总数的
    25%
如果重设计仍与原有布局骨架相似，在定稿前需优先调整结构。

Anti-AI-Look Redesign Gate (Required)

防AI模板化重设计校验（必填）

Reject the redesign if it reads as "template reskin".
Failure cases:
  1. mostly identical original layout with new colors/fonts only
  2. repeated stock cards replacing repeated stock cards
  3. unchanged section rhythm with minor surface edits
  4. motion limited to basic fade-ins without interaction logic
Minimum redesign bar:
  1. at least 
    3
    clearly new structural modules replacing generic legacy blocks
  2. at least 
    2
    bespoke components unique to the product context
  3. at least 
    1
    unique interaction pattern not present in the source UI
如果重设计看起来像“模板换皮”，则不予通过。
不通过的情况：
  1. 基本与原有布局一致，仅更换了颜色/字体
  2. 用新的通用卡片替换原有的通用卡片
  3. 区块节奏未变，仅做了微小的表层修改
  4. 动效仅限于基础淡入，无交互逻辑关联
最低重设计标准：
  1. 至少有
    3个
    明显的全新结构模块替换通用旧有区块
  2. 至少有
    2个
    适配产品场景的定制化组件
  3. 至少有
    1种
    源UI中不存在的独特交互模式

Component Invention Rules

组件设计规则

When inventing components for redesign:
  1. derive from product semantics (workflow, trust signal, conversion step), not visual novelty alone
  2. define explicit states and responsive behavior
  3. ensure implementation remains maintainable in Tailwind class composition
  4. add motion only where it improves comprehension or feedback speed
为重设计自定义组件时：
  1. 基于产品语义（工作流、信任信号、转化步骤）设计，而非仅追求视觉新颖
  2. 定义明确的状态和响应式行为
  3. 确保实现方案在Tailwind类组合下可维护
  4. 仅在能提升理解效率或反馈速度时添加动效

Core Objective

核心目标

Transform a current interface into a clearer, higher-quality, more intentional design without breaking user flows.
在不破坏用户流程的前提下，将现有界面改造为更清晰、更高品质、更具设计感的产品。

Working Method

工作方法

  1. Audit the current UI first:
  • identify hierarchy failures, spacing inconsistencies, weak composition, and generic patterns
  • detect interaction pain points and missing feedback states
  • list what must stay stable (flows, core IA, key copy, business constraints)
  1. Define a redesign direction:
  • choose a clear visual thesis and layout archetype
  • strengthen typography, section rhythm, and contrast
  • improve component consistency and responsive behavior
  1. Implement safely:
  • preserve functionality and navigation logic unless explicitly asked to change it
  • avoid regressions in forms, states, and accessibility
  • apply motion where it improves clarity and feedback, not decoration
  1. Validate quality:
  • verify desktop and mobile behavior
  • check reduced motion behavior if animations are added
  • confirm the redesign is materially better, not just stylistically different
  1. 先审核现有UI：
  • 识别层级缺陷、间距不一致、排版薄弱和通用模式问题
  • 发现交互痛点和缺失的反馈状态
  • 列出必须保持稳定的内容（流程、核心信息架构、关键文案、业务约束）
  1. 确定重设计方向：
  • 选择清晰的视觉主题和布局原型
  • 优化排版、区块节奏和对比度
  • 提升组件一致性和响应式表现
  1. 安全实现：
  • 保留功能和导航逻辑，除非用户明确要求修改
  • 避免表单、状态和可访问性出现回归问题
  • 仅在能提升清晰度和反馈效果的地方添加动效，而非作为装饰
  1. 质量校验：
  • 验证桌面端和移动端表现
  • 如果添加了动画，检查弱动效模式下的表现
  • 确认重设计有实质提升，而不仅仅是风格不同

Constraints

约束条件

  • Do not ship generic “safe SaaS” defaults.
  • Do not remove critical information architecture without reason.
  • Do not trade usability for visual novelty.
  • Keep performance practical for the target context.
  • 不要输出通用的“安全SaaS”默认设计
  • 不要无理由移除关键信息架构
  • 不要为了视觉新颖牺牲可用性
  • 针对目标场景保持性能在合理范围内