Notes: OpenClaw培训-S1-1.html UI/UX Optimization

• Previous turn applied text-wrap: pretty for CJK typography.
• Added smooth hover transitions to cards.
• Fixed print styles.
• Need to verify button hierarchy and spacing.
• Updated navigation buttons to enforce single primary button rule (.nav-btn.primary for "Next").
• Checked visual hierarchy and spacing, which were already largely addressed in the previous pass.
• Updated data on Slide 16 (Model Routing & Coding Plan Cost Comparison) with latest 2026 prices for DeepSeek V3/R1, Qwen-Max, Doubao 1.5 Pro, and Kimi Latest.
• Updated the cost comparison chart to include DeepSeek R1 and Qwen-Max, adjusting the relative bar widths according to their actual API costs compared to Claude Opus/Sonnet.
• Highlighted DeepSeek V3/R1 as the preferred choice in the Lobster (OpenClaw) community due to high performance and low cost.
• Slide 2 (范式跃迁): Replaced the disconnected top generation flow and bottom 3 text cards with a unified 3-column layout. Each card now represents one generation (2023 ChatGPT, 2024 Claude Code, 2026 OpenClaw) with a clear header, title, and description, connected by arrows. This fixes the ordering issue and improves visual cohesion.
• Increased the size of the timeline SVG chart on Slide 6 (Timeline) by adjusting its height from min(22vh,220px) to min(30vh,300px) and applying a transform: scale(1.15) to make it more prominent.
• Further increased the size of the timeline SVG chart on Slide 6 (Timeline) by adjusting its height to min(35vh,350px) and applying a transform: scale(1.35). Adjusted margins to prevent overlap.
• Slide 4b (WHAT IS LOBSTER): Removed the 3 repetitive text cards (ChatGPT / Claude Code / OpenClaw comparison) which overlapped with Slide 2.
• Added a focused <div class="terra-block"> emphasizing OpenClaw's core differentiator: ToolMaker (dynamically building tools instead of using pre-set ones).
• Enlarged the GitHub Stars chart and repositioned the metrics (318K+ Stars, 13.7K+ Skills) to make the slide a strong "Traction & Core Differentiator" showcase rather than repeating basic AI definitions.
• Redesigned the GitHub Stars growth chart on Slide 4b (WHAT IS LOBSTER).
• Replaced the single growth curve with a multi-product comparison chart (React, Vue, AutoGPT, OpenClaw) to highlight the insane growth speed.
• Increased chart size (height min(32vh,320px) and scale 1.25) to make it the central visual element.
• Added callouts emphasizing "打破软件史所有纪录" (Breaking all software history records).
• Slide 4b (WHAT IS LOBSTER) chart scaling fixes: Fixed the issue where the scaled SVG was bleeding out of its bounding box and getting the bottom axis cut off. Expanded viewBox vertically, set overflow: visible, and added significant margin-bottom to push away the slide footer and allow the scale(1.35) to breathe properly.
• Updated the GitHub Stars comparison chart values using live 2026 data: React (244K+), Vue (210K+), AutoGPT (163K+), accurately reflecting the current landscape to contrast with OpenClaw's 318K.
• Slide 20b (MATURITY MODEL): Redesigned the staircase chart to explicitly show T1-T5 agent maturity levels instead of just L1-L5 auto-driving levels. Enhanced the visual styling with a vibrant gradient on T3 (current level), stronger typographic hierarchy, hover animations on the stairs, and clear descriptions mapping auto-driving to agent milestones. Improved the text layout in the terra-block below.
• Slide 20b (MATURITY MODEL): Updated the staircase descriptions with vivid auto-driving analogies: T1 (定速巡航), T2 (车道保持), T3 (FSD 端到端: 给目标，AI 自己找路), T4 (打盹接管), T5 (Robotaxi 无方向盘).
• Enhanced the bottom summary text to make the FSD analogy more explicit, comparing the L3 bottleneck to AI agent adoption: "not because AI can't read the road, but because regulations/insurance/ethics haven't caught up."
• Slide 5 (ARCHITECTURE): Re-styled the 9-layer onion diagram (left) to look like a robust stacked pyramid with staggered widths, bold typography, subtle shadows, and interactive hover effects (translateX).
• Re-styled the explanation cards (right) with deeper shadows, distinct header tags using the matching layer colors, and floating hover effects to make the information architecture visually pop and match the presentation's premium UI aesthetic.
• Slide 5 (ARCHITECTURE): Reduced the width of the right-side explanation cards by replacing .flex1 with a fixed max-width (flex:0 1 min(42vw,600px)). Also added justify-content:center to the parent .row to ensure the entire layout (left stack + right cards) is perfectly centered on the slide.
• Slide 5 (ARCHITECTURE): Adjusted the right-side cards container to use justify-content: space-between and applied flex: 1 to the body of each card so that they dynamically stretch and perfectly match the total height of the left-side onion diagram. Also slightly increased the max-width of the right column to balance the proportions visually.
• Slide 5 (ARCHITECTURE): Reverted flex:1 stretch layout on the right-side explanation cards and changed the main row to align-items: center. Restored normal justify-content: center spacing so the cards hug their content naturally and align vertically with the left onion pyramid, avoiding the awkward massive vertical gaps shown in the user's screenshot.
• Slide 5 (ARCHITECTURE): Redesigned the left-side onion layers into 3 distinct logical groups (Runtime, Config, Core) with large, color-coded left brackets (border-left) and vertically aligned floating labels to make the grouping crystal clear.
• Re-adjusted the right-side explanation cards by setting them to flex: 1 and display: flex; flex-direction: column; justify-content: center; within a justify-content: space-between container, ensuring their total height perfectly stretches and matches the total height of the left side.
• Slide 5 (ARCHITECTURE): Completely rewrote the layout into a strictly synchronized CSS Grid with align-items: stretch across 3 distinct rows. The left pyramid brackets now correctly shrink-wrap the layers (preventing them from stretching out of proportion), while the right explanation cards perfectly correspond to their respective layers horizontally. Ensured "左右总高度要一致" (total heights matching) by forcing the grid rows to dictate equal height boundaries for both the left layer groups and the right cards.
• Slide 5 (ARCHITECTURE): Completely rewrote the layout to fix the alignment issue mentioned by the user. Grouped the left layers into their logical blocks and aligned them explicitly with the right-side explanation cards using a clean, synchronized CSS Grid configuration.
• Slide 5 (ARCHITECTURE): Rewrote layout to use CSS flexbox with justify-content: space-between for both the left pyramid and the right explanation cards. Hard-coded the mapping between the 3 layers, making sure the overall flex container has align-items: stretch.
• Slide 5 (ARCHITECTURE): Re-adjusted the grid proportions for the 9-layer onion diagram. Kept the left stack aligned to its original relative proportions but increased the right side cards' width distribution to match the requested 1:1.1 aspect ratio (left 40vw, 520px to right 48vw, 700px), ensuring the right cards are wider and more prominent while still matching perfectly in height.
• Slide 5 (ARCHITECTURE): Enlarged the entire grid and adjusted constraints. Applied transform: scale(1.08) to the main layout and set max-width: min(94vw, 1350px). Slightly adjusted the right cards' padding and the left chart's layer heights so they stretch smoothly within the scaled container while maintaining the equal vertical correspondence. The footer insight box was also scaled up via transform: scale(1.05) and given more vertical margin.