feat(ai): add dense card compaction, inner wrapper flattening, and layout heuristic refinements

- Add dense card row compaction (5+ cards): aggressively shorten text,
  limit to 2 text blocks per card, remove non-essential decorative elements
- Flatten redundant single "Inner" wrapper layers to keep hierarchy shallow
- Add phone placeholder and divider frame detection and normalization
- Add isCompactButtonLikeFrame/isCompactControlFrame to prevent badge
  heuristics from mis-targeting buttons and CTA elements
- Improve text width promotion logic with shouldPromoteTextWidthToFillInLayout
- Add long-text padding adjustment to prevent excessive horizontal padding
  from squeezing body text in narrow containers
- Simplify horizontal overflow fix: remove fit_content strategy, prefer
  parent expansion
- Reduce minimum section padding from 40px to 24px for desktop layouts
- Tune CJK lineHeight defaults (body 1.55, heading 1.35) and auto-height
  estimation with paragraph-aware line wrapping
- Add shallow hierarchy and dense card row rules to AI prompts
This commit is contained in:
Fini 2026-02-22 20:35:59 +08:00
parent 3fe1cd3ca5
commit fa234e7233
3 changed files with 1042 additions and 129 deletions

View file

@ -161,6 +161,7 @@ LAYOUT ENGINE (flexbox-based):
- TEXT HEIGHT: NEVER set explicit pixel height on text nodes (e.g. height:22, height:44). OMIT the height property entirely — the layout engine auto-calculates height from textGrowth + content. Setting a small height causes text clipping and overlap with siblings below.
- CJK BUTTONS/BADGES: Chinese/Japanese/Korean characters are wider. For a button with CJK text, ensure container width ≥ (charCount × fontSize) + horizontal padding. Example: "免费下载" (4 chars) at 15px → min content width ~60px → button width ≥ 60 + left padding + right padding.
- Use nested frames for complex layouts
- Keep hierarchy shallow: DO NOT add a single redundant wrapper named "Inner" under a section. Place real content frames directly under the section unless the wrapper has a clear visual role.
COPYWRITING (text content in designs must be concise and polished):
- Headlines: 2-6 words max. Punchy and direct. e.g. "Ship Faster" not "Build and ship your products faster than ever before".
@ -201,6 +202,7 @@ DESIGN GUIDELINES:
- Buttons, nav items, and list items should include icons when appropriate for better UX
- Long subtitles/body copy should use fixed-width text blocks so lines wrap naturally instead of becoming a single very long line.
- CARD ROW ALIGNMENT: when cards are siblings in a horizontal layout, ALL cards MUST use height="fill_container". This makes all cards match the tallest card's height, creating a visually aligned row. Never use different fixed heights on sibling cards.
- DENSE CARD ROWS: if a horizontal row has 5+ cards, aggressively compact each card: title must be very short (CJK ≤6 chars / Latin ≤12 chars), keep at most 2 text blocks (title + one short metric), and remove non-essential decorative elements. Rewrite copy into concise keyword phrases; NEVER output truncated text with "..." or "…".
- TEXT WRAPPING: any text content longer than ~15 characters MUST have textGrowth="fixed-width". Without it, text expands horizontally in a single line and overflows. Only omit textGrowth for very short labels (1-3 words) like button text or nav links.
DESIGN VARIABLES:

File diff suppressed because it is too large Load diff

View file

@ -64,6 +64,7 @@ CRITICAL LAYOUT RULES (violations cause rendering bugs):
- CHILD SIZE RULE: every child's width must be ≤ parent's content area. Use "fill_container" when in doubt.
- WIDTH CONSISTENCY: siblings in a vertical layout must use the SAME width strategy. If one input/button uses "fill_container", ALL inputs/buttons in that container must also use "fill_container". Mixing fixed-px and fill_container causes misalignment.
- NEVER use "fill_container" on children of a "fit_content" parent — this creates a circular dependency and breaks layout.
- Keep hierarchy shallow: avoid creating a single generic wrapper named "Inner" under a section. Put actual content groups directly under the section unless that wrapper has a concrete visual purpose.
- CLIP CONTENT: set clipContent: true on cards with cornerRadius + image children. Prevents overflow past rounded corners.
- FLEX LAYOUT: use justifyContent to distribute children:
"space_between" = push first/last to edges, even space between (BEST for navbars: logo | links | CTA).
@ -126,6 +127,7 @@ DESIGN RULES:
- Typography: Display 40-56px → Heading 28-36px → Subheading 20-24px → Body 16-18px → Caption 13-14px. Always set lineHeight: headings 1.1-1.2, body 1.4-1.6, captions 1.3. Use letterSpacing: -0.5 for large headlines, 0.5-2 for uppercase labels.
- CJK FONTS: When content is in Chinese/Japanese/Korean, use CJK-compatible fonts — "Noto Sans SC" for headings, "Inter" or "Noto Sans SC" for body. NEVER use "Space Grotesk" or "Manrope" for CJK text (they have no CJK glyphs). CJK lineHeight: 1.3-1.4 for headings, 1.6-1.8 for body. CJK letterSpacing: 0 for body, never negative.
- Cards in horizontal rows: ALL cards MUST use width="fill_container" + height="fill_container" for even distribution and equal height. Never use fixed pixel width/height on cards in a row. A card with icon+title+description needs at least 160-200px content height — the row will auto-size. ALWAYS set clipContent: true on cards with cornerRadius + image children.
- Dense rows (5+ cards): compact card internals aggressively. Use very short titles (CJK ≤6 chars / Latin ≤12 chars), keep max 2 text blocks per card (title + short metric), and remove non-essential decorative elements. Refine text into short keyword phrases; never use "..." or "…" truncation.
- Icons: "path" nodes with descriptive names (e.g. "SearchIcon", "MenuIcon", "ArrowRightIcon", "StarIcon", "ShieldIcon", "ZapIcon"). System auto-resolves to verified SVG paths. Size 16-24px. NEVER use emoji.
- PHONE MOCKUP: exactly ONE "frame" node, width 260-300, height 520-580, cornerRadius 32, solid fill + 1px stroke. NEVER use ellipse or circle for mockups. NEVER add any children inside (no text, no frames, no images). Every phone mockup must look identical.
- NEVER use ellipse nodes for decorative shapes. Use frame or rectangle with cornerRadius instead.