feat(ai): rewrite icon-catalog skill + add transparent-section rule
Why: MiniMax-M2.7 food-app run rendered Header with white fill on cream
page bg, and used iconFontName=shopping-bag for Cart tab. Two skill-side
issues: icon-catalog.md was self-contradictory ("use path nodes" vs
"use icon_font"), and layout.md had no rule for inner-section bg.
What:
- icon-catalog.md rewritten as "ALWAYS USE icon_font, NEVER path NODES"
with role→name map (Cart→shopping-cart not shopping-bag, Pizza→pizza,
Sushi→fish via alias, etc) and food-category icon list appended.
- layout.md adds: interior section wrappers (Header, Search Section,
Categories Section) MUST have fill:[] (transparent / inherit page bg);
only opt into a fill when the section is intentionally a card with
its own surface tone.
This commit is contained in:
Fini
parent
d8764875a6
commit
bb52ca6b71
|
|
@ -8,17 +8,44 @@ budget: 1000
|
|||
category: base
|
||||
---
|
||||
|
||||
ICONS:
|
||||
ICONS — ALWAYS USE icon_font, NEVER `path` NODES:
|
||||
|
||||
- Use "path" nodes, size 16-24px. ONLY use Feather icon names — PascalCase + "Icon" suffix (e.g. "SearchIcon").
|
||||
- System auto-resolves names to SVG paths. "d" is replaced automatically.
|
||||
- NEVER use emoji as icons. Use icon_font nodes for lucide icons.
|
||||
```json
|
||||
{
|
||||
"type": "icon_font",
|
||||
"name": "Search Icon",
|
||||
"iconFontName": "search",
|
||||
"iconFontFamily": "lucide",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"fill": [{ "type": "solid", "color": "#64748B" }]
|
||||
}
|
||||
```
|
||||
|
||||
ICON_FONT NODES:
|
||||
- Sizes: 14 / 20 / 24px. `fill` is the icon color (string or fill array).
|
||||
- Icon-only buttons: `frame(w=44, h=44, layout=horizontal, alignItems=center, justifyContent=center)` containing one `icon_font`.
|
||||
- Use lucide names from the list below. NEVER invent names — unknown names fall back to a small circle on canvas.
|
||||
|
||||
- Use icon_font type with iconFontName for lucide icons (e.g. iconFontName="search", "bell", "user").
|
||||
- Sizes: 14/20/24px. Fill can be a color string.
|
||||
- Icon-only buttons: frame(w=44, h=44, layout=none) > icon_font(x=12, y=12)
|
||||
DO NOT use `path` nodes for icons. The legacy "PascalCase + Icon suffix on a path node" pattern is bug-prone:
|
||||
when the model wraps it in a frame with a generic child name like "Icon Path" or "Search Icon Path", the resolver
|
||||
cannot recover the iconic word and the node renders as a placeholder circle. Stick to `icon_font`.
|
||||
|
||||
ROLE → ICON NAME MAP (use these exact names — common slips below):
|
||||
|
||||
- Cart tab / shopping cart → `shopping-cart` (NEVER `shopping-bag` for a checkout/cart action)
|
||||
- Bag / tote / package → `shopping-bag`
|
||||
- Price / money / currency → `dollar-sign` (NOT `dollar`, NOT `currency`)
|
||||
- Search → `search` (NOT `magnifier`, `magnifying-glass`, `find`)
|
||||
- Profile / account → `user` (NOT `profile`, `account`)
|
||||
- Home / house → `house` or `home`
|
||||
- Orders / receipts → `clipboard-list` or `receipt`
|
||||
- Notifications → `bell` (NOT `notification`)
|
||||
- Filter → `filter` or `sliders` (NOT `funnel`)
|
||||
- Location pin → `map-pin` (NOT `pin`, NOT `location`)
|
||||
- Time / delivery time → `clock` (NOT `timer`)
|
||||
- Rating → `star` (NOT `rating`)
|
||||
- Favorites → `heart` (NOT `favorite`, NOT `like`)
|
||||
- Pizza category → `pizza`. Sushi → `fish`. Burger → `hamburger`. Healthy → `salad`. Dessert/cake → `cake`. Coffee → `coffee`. Drink → `cup-soda`. Restaurant → `utensils-crossed`. Food (generic) → `utensils`.
|
||||
|
||||
COMMON LUCIDE ICON NAMES:
|
||||
search, bell, user, heart, star, plus, x, check, chevron-right, chevron-left, chevron-down, chevron-up,
|
||||
|
|
@ -36,4 +63,5 @@ play, pause, skip-forward, skip-back, volume-2, mic,
|
|||
github, twitter, instagram, facebook, linkedin, youtube,
|
||||
globe, wifi, bluetooth, monitor, smartphone, tablet, cpu, database, server, hard-drive,
|
||||
code, terminal, git-branch, git-commit, git-pull-request,
|
||||
alert-circle, alert-triangle, info, help-circle, check-circle, x-circle
|
||||
alert-circle, alert-triangle, info, help-circle, check-circle, x-circle,
|
||||
pizza, fish, hamburger, salad, cake, coffee, cup-soda, utensils, utensils-crossed, beef, croissant, apple, cookie, ice-cream-cone, banana, carrot, wheat, soup, donut
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ LAYOUT ENGINE (flexbox-based):
|
|||
- Two-column: horizontal frame - two child frames each "fill_container" width.
|
||||
- Keep hierarchy shallow: no pointless wrappers. Only use wrappers with visual purpose (fill, padding).
|
||||
- Section root: width="fill_container", height="fit_content", layout="vertical".
|
||||
- TRANSPARENT INNER SECTIONS — interior section wrappers (Header, Search Section, Categories Section, Near You Section, etc.) MUST have `fill: []` (transparent / inherit page bg). Adding an explicit fill like `#FFFFFF` on inner sections creates an unwanted "white card" against a colored page bg. Only use an explicit fill when the section is INTENTIONALLY a card with its own surface (a promo banner, an inset card, a different surface tone). Default to `fill: []` and only opt into a fill when you want a visible surface boundary.
|
||||
- FORMS: ALL inputs AND primary button MUST use width="fill_container". Vertical layout, gap=16-20.
|
||||
|
||||
HORIZONTAL ROW WIDTH MATH (CRITICAL — prevents off-canvas clipping):
|
||||
|
|
|
|||
Loading…
Reference in a new issue