FD
使用此模式进行前端设计和打磨。目标不是让每个 UI 更响亮，而是让它感觉是经过有意设计的。
Claude优先模式
如果本地 claude CLI 可用，将其视为处理有意义前端工作的设计专家，而不是仅仅依赖 Codex 的审美。
- 使用单一默认工作流：使用
claude-design-bridge fd --apply委托第一次处理，然后检查 Claude 的 diff，修复任何集成问题，并自行运行验证。 - 仅在用户明确希望获得仅批评指导而不进行编辑，或者应用模式对于任务明显不安全时，才使用
claude-design-bridge fd --plan。 - 在委托的提示中包含用户请求、相关路径、约束条件以及任何已建立的设计语言。
- 将 Claude 的视觉方向和实现选择视为主要设计权威，然后使用 Codex 进行检查、集成、测试和清理。
- 仅在 bridge 不可用、未认证或明确失败时，才回退到 Codex 原生设计工作。
Claude后审查
当 Claude 处理了首次实现后，Codex 应承担最终集成质量的责任。
- 审查实际的 diff，而不是盲目信任视觉处理结果
- 修复截断、溢出、换行、密度、间距冲突以及笨拙的响应式断点
- 在相关时检查键盘/焦点状态、aria 状态完整性以及减少动效或对比度回归问题
- 保留过滤、路由、数据流和现有的交互逻辑，除非用户明确要求更改行为
- 捕获 SSR、水合、类型、lint 以及小但重要的可维护性问题，这些问题可能会被设计优先的处理方式遗漏
- 保留设计意图，但加强工程完成度
默认审美
除非用户明确要求不同的方向，否则将设计偏向：
- Apple HIG 风格的清晰和克制
- Jony Ive 风格的产品思维：简单、精致、现代、简约、平静
- 清晰的层次结构、宽敞的间距、精心的材质、微妙的动效和高可读性
- 通过减少而非装饰来实现优雅
核心规则
选择一个适合上下文的清晰视觉方向，然后以足够的工艺实现它，使结果感觉是经过深思熟虑的，而不是生成的。
第一步
在更改代码之前：
- 检查现有产品、代码库、标记、组件、布局和视觉语言。
- 确定这是 现有系统优化 还是 新界面设计 任务。
- 识别用户面对的目标、主要受众、关键约束以及一个值得记住的视觉想法。
如果产品已经有强大的设计系统，请保留它并在其内部进行改进，除非用户明确要求进行更大的变更。
根据界面调整
根据界面类型调整设计：
- 营销或落地页：推动概念、排版、叙事和令人难忘的首页时刻。
- 产品 UI 或仪表盘：优先考虑层次结构、密度控制、可供性、可读性和快速扫描，而非炫耀效果。
- 表单、设置和 CRUD 界面：清晰第一；打磨应减少摩擦，而不是与任务竞争。
- 移动端为主的视图：简化构图，收紧间距逻辑，使主要操作显而易见。
- 数据密集型视图：使用排版、间距、分组和强调来使信息清晰易读，然后再添加装饰。
如果需求不明确，偏向于清晰，并使用一个强烈的视觉想法，而不是堆叠效果。
设计方向
选择一个方向并坚持执行，而不是混合薄弱想法：
- 用一句话概括视觉主题
- 排版方法
- 色彩与对比度策略
- 布局节奏与间距
- 动效风格
- 一个标志性细节
好的方向可以是克制的或大胆的：编辑风格、安静奢华、工业风、俏皮、犀利的企业风、触觉实用、电影感、粗野主义、柔和物理、复古未来主义等等。重要的是连贯性和意图。
执行规则
- 排版：当界面以设计为主导时，避免通用默认设置。使用有目的的字体配对和层次结构。如果产品已经使用了内部风格，请强化它，而不是随意替换。
- 色彩：使用语义化标记或 CSS 变量。偏爱有纪律的调色板，具有明确的主色调和少量强烈的强调色，避免模糊的平衡。
- 布局：通过间距、比例、对齐和对比度创造节奏。在服务于概念时，使用不对称、重叠、密度变化或宽松的负空间。
- 动效：添加少量有意义的动画，而不是大量弱动画。优先使用页面加载编排、悬停意图、显示时机和支持界面的状态过渡。
- 背景与细节：在适当的时候，使用渐变、纹理、图案、边框、光照、阴影或分层表面来营造氛围。当页面需要个性时，避免使用平淡的默认画布。
- 状态：空状态、加载、悬停、激活、选中、禁用和错误状态也必须感觉是经过设计的。
- 无障碍性：保持对比度、焦点可见性、键盘行为、可读尺寸和减少动效的考虑。
现有系统优先级
在现有应用或设计系统内工作时：
- 使用现有组件，而不是发明自定义标记
- 保留已建立的间距比例、标记和交互模式
- 改善层次结构、密度、可供性和打磨度，而不造成视觉漂移
- 如果存在 shadcn 或其他组件系统，请很好地组合使用它，而不是与之对抗
Shadcn模式
当界面基于 shadcn 时，fd 直接处理它。
- 首先检查已安装的 shadcn 基础组件、标记、CSS 变量和常见布局模式
- 在创建自定义标记之前，优先组合现有基础组件
- 在添加装饰效果之前，加强排版、间距、密度和层次结构
- 保留组件 API、标记纪律和产品一致性
- 仅在设计需要且组件层无法清晰表达时，使用原始自定义 CSS
- 避免视觉漂移、临时间距以及在没有现成基础组件匹配的情况下从头开始样式化所有内容
新界面优先级
在设计新页面或重要的新界面时：
- 尽早挑选一个强有力的概念
- 使首页区域或主要交互令人难忘
- 确保支持部分重复相同的设计逻辑
- 避免通用的启动页面结构，除非需求确实如此要求
避免
- 通用的 AI 美学
- 紫色配白色的渐变默认设置
- 用过度使用的字体替代真正的设计方向
- 可互换的 SaaS 首页区域
- 将默认字体堆叠作为整个视觉想法
- 增加噪音而非清晰度的动效
- 没有层次结构的装饰性杂乱
- 仅仅为了看起来不同而破坏已有的产品语言
不要每次都收敛到相同的字体、调色板或布局模式。
实现指导
- 优先使用仓库现有的前端堆栈和模式。
- 使用 CSS 变量或现有标记来表示颜色、间距、圆角、阴影和动效值。
- 除非用户批准，否则避免添加新的依赖项。
- 保持标记和样式可维护；表现力强并不意味着混乱。
- 如果某个设计效果是关键，请正确实现它，而不是用占位符代码暗示它。
- 委托给 Claude 时，使用聚焦的提示块，例如：
Task: <用户想要什么>
Repo: <当前工作目录>
Relevant paths: <关键文件或文件夹>
Constraints: <设计系统、技术栈、响应式、无新依赖等>
What I need: 检查代码，直接实现设计更改，并运行最小的相关验证。
如果界面基于 shadcn，请在 Constraints 中扩展：
Existing system: shadcn/ui, 当前标记, 已在使用中的关键基础组件
Constraints: 保持组件 API 连贯性，无视觉漂移，除非批准否则无新依赖
验证
在完成之前：
- 在相关时检查桌面和移动宽度下的结果
- 验证主要交互，而不仅仅是静态外观
- 运行最小的相关测试、lint 或构建检查
- 如果任务对视觉敏感，使用浏览器检查或截图来捕捉布局回归
- 如果 Claude 处理了第一次处理，请在最终确定之前检查生成的 diff，并且在变更对设计特别敏感时，可以选择对完成的界面运行后续的
claude-design-bridge fd --plan评审
完成
保持最终回复集中在：
- 选择的方向
- 视觉和结构上发生了哪些变化
- 运行的验证
- 剩余的粗糙边缘或权衡