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:
parent
3fe1cd3ca5
commit
fa234e7233
|
|
@ -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
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue