Inspects an existing web page’s code and outputs a design-first redesign plan before any edits are made.
Plan a redesign for this web page before making any edits. Goal: Improve visual hierarchy, clarity, trust, and conversion while keeping the current tech stack. Your process: 1. Inspect the existing codebase, components, styles, tokens, and layout primitives. 2. Identify UX/UI issues in the current implementation. 3. Ask clarifying questions if brand/style/conversion intent is unclear. 4. Produce a design-first implementation plan in markdown. Include: - Current-state audit - Main usability and visual design issues - Proposed information architecture - Section-by-section page plan - Component inventory - Reuse vs extend vs create decisions - Design token changes needed - Responsive behavior notes - Accessibility considerations - Step-by-step implementation order - Risks and open questions Constraints: - Reuse existing components where possible - Keep design system consistency - Do not implement yet
为此网页在进行任何编辑之前规划一次重新设计。 目标: 在保留当前技术栈的前提下,提升视觉层次、清晰度、信任感和转化率。 你的流程: 1. 检查现有的代码库、组件、样式、设计令牌(tokens)和布局基础元素。 2. 识别当前实现中的 UX/UI 问题。 3. 如果品牌风格、设计意图或转化目标不明确,提出澄清问题。 4. 以 Markdown 格式输出一份以设计为先的实施计划。 内容应包括: - 当前状态审计 - 主要的可用性与视觉设计问题 - 提出的信息架构 - 分区块的页面规划 - 组件清单 - 复用、扩展或新建组件的决策 - 所需的设计令牌变更 - 响应式行为说明 - 可访问性考虑 - 分步实施顺序 - 风险与待解决问题 约束条件: - 尽可能复用现有组件 - 保持设计系统的一致性 - 暂不实施