feat: add design-intelligence skill — distilled from impeccable, minimalist-ui, design-taste-frontend, ui-ux-pro-max, wordpress-elementor (6 skills, 45k context)

2026-06-02 19:02:16 +00:00
parent 5328edf75d
commit 2f16474b24
1 changed files with 314 additions and 0 deletions
@@ -0,0 +1,314 @@
+---
+name: design-intelligence
+description: Consolidated design intelligence for Elementor landing page building. Distilled from impeccable, minimalist-ui, design-taste-frontend, ui-ux-pro-max, and wordpress-elementor skills. Covers: typography, color, layout, spacing, motion, component rules, Elementor-specific patterns, and anti-patterns.
+version: 1.0.0
+auto-load: true
+tags: [design, ui, ux, elementor, typography, color, layout, motion]
+---
+
+# Design Intelligence — Elementor Edition
+
+Distilled from: impeccable, minimalist-ui, design-taste-frontend, ui-ux-pro-max, wordpress-elementor.
+Applied to: Elementor page building via MCP tools.
+Purpose: Produce pages that look like $150k agency builds, not AI templates.
+
+---
+
+## DESIGN VARIANCE ENGINE
+
+Before building any page, commit silently to one combination:
+
+### Vibe (pick 1 based on industry)
+1. **Cinematic Dark** — OLED black `#050505`, mesh gradients (purple/emerald orbs), glass panels, wide geometric type → SaaS, AI, Web3, agency
+2. **Editorial Warm** — Warm cream `#FDFBF7`, muted sage or espresso, variable serif headings, film-grain texture → luxury, real estate, lifestyle, legal
+3. **Clean Authority** — White or `#F7F6F3`, off-black `#111111`, 1px borders `#EAEAEA`, bento grid, muted pastels → medical, dental, health, finance
+4. **Athletic Dark** — Near-black, neon accent (red or electric blue), dramatic spot lighting, condensed type → gym, sport, fitness
+5. **Warm Sensory** — Rich amber, bokeh, warm Edison tones, serif display type → restaurant, food, cafe, hospitality
+
+### Layout (pick 1)
+1. **Asymmetric Split** — Content left 55%, media right 45%, slight overlap → hero, features
+2. **Editorial Z-flow** — Alternating left/right content blocks as you scroll → services, how-it-works
+3. **Bento Grid** — Asymmetric CSS grid, varied column spans → features, benefits
+4. **Full-bleed Cinematic** — Image/video 100vw, text overlay with gradient → hero, CTA
+
+Never center-align everything. Never use identical padding on every section. Never default to the same layout twice.
+
+---
+
+## TYPOGRAPHY — ELEMENTOR SETTINGS
+
+### Scale (set in Elementor Typography controls)
+```
+H1 hero:       72-96px / line-height 1.05 / letter-spacing -0.03em / weight 700-800
+H1 section:    52-64px / line-height 1.1  / letter-spacing -0.02em / weight 700
+H2:            36-48px / line-height 1.15 / letter-spacing -0.015em / weight 600-700
+H3:            24-32px / line-height 1.25 / letter-spacing -0.01em  / weight 600
+Body:          16-18px / line-height 1.65 / letter-spacing 0        / weight 400
+Caption/label: 11-13px / line-height 1.4  / letter-spacing 0.1em   / weight 500 uppercase
+```
+
+### Font pairing by vibe
+```
+Cinematic Dark  -> Syne (display) + DM Sans (body)              — Google Fonts
+Editorial Warm  -> Playfair Display (display) + Lato (body)     — Google Fonts
+Clean Authority -> Plus Jakarta Sans (all) OR Nunito Sans (all) — Google Fonts
+Athletic Dark   -> Barlow Condensed (display) + Barlow (body)   — Google Fonts
+Warm Sensory    -> Libre Baskerville (display) + Lato (body)    — Google Fonts
+```
+
+In Elementor: Site Settings → Default Fonts → set heading and body fonts globally, then override per widget via Typography control.
+
+### Hard rules
+- H1 must never exceed 3 lines on desktop. Wider container or smaller size until it fits.
+- Body text max-width: 65-72ch (roughly 650-720px). Set on text widget container.
+- Never use Inter, Roboto, Arial, Open Sans as primary display fonts.
+- Letter spacing on body: 0. Letter spacing on UPPERCASE labels: 0.1-0.2em.
+- Weight contrast between H1 and body must be at least 300 units (e.g. 700 heading, 400 body).
+
+---
+
+## COLOR — SYSTEM AND STRATEGY
+
+### Four color strategies (pick 1 per page)
+1. **Restrained** — Tinted neutrals + one accent ≤10% of page → medical, legal, dental
+2. **Committed** — One saturated color carries 30-60% of surface → SaaS, agency
+3. **Drenched** — Surface IS the color, full-bleed → dark hero, restaurant warmth
+4. **Editorial** — High contrast black/white, color only as punctuation → portfolio, luxury
+
+### Never use
+- Pure `#000000` or `#FFFFFF` — always tinted
+- "AI purple" gradient glows as default accent
+- Neon on neon (web3 is fine, but only one neon at a time)
+- Multiple accent colors (one per page, max)
+- Warm and cool grays mixed in the same page
+
+### Reference palette by vibe
+```
+Cinematic Dark:
+  BG: #050505 / #070612    Surface: #0F0F1A    Accent: indigo #6366F1 or emerald #10B981
+  Text: #FFFFFF             Muted: #A1A1AA      Border: rgba(255,255,255,0.08)
+
+Editorial Warm:
+  BG: #FDFBF7               Surface: #F3F0EB    Accent: terracotta #C5592A or sage #5A7A5C
+  Text: #1A1A1A             Muted: #787774      Border: #EAEAEA
+
+Clean Authority:
+  BG: #FFFFFF / #F7F6F3    Surface: #FFFFFF     Accent: blue #2563EB or teal #0891B2
+  Text: #111111             Muted: #6B7280      Border: rgba(0,0,0,0.08)
+
+Athletic Dark:
+  BG: #0A0A0A               Surface: #141414    Accent: red #EF4444 or cyan #22D3EE
+  Text: #FFFFFF             Muted: #9CA3AF      Border: rgba(255,255,255,0.10)
+
+Warm Sensory:
+  BG: #FBF5EE               Surface: #F5ECD9    Accent: amber #D97706 or rose #BE185D
+  Text: #1C1C1E             Muted: #78716C      Border: #E7DDD0
+```
+
+In Elementor: Site Settings → Global Colors → set these as named color tokens.
+
+---
+
+## SPACING — MACRO WHITESPACE
+
+Sections must breathe. Same padding everywhere = template. Variation = premium.
+
+```
+Hero section:            padding-top 160-200px / padding-bottom 160-200px
+Major content sections:  padding-top 100-130px / padding-bottom 100-130px
+Feature card sections:   padding-top 80-100px  / padding-bottom 80-100px
+CTA strip:               padding-top 80-100px  / padding-bottom 80-100px
+Logo/stats strip:        padding-top 40-60px   / padding-bottom 40-60px
+Footer:                  padding-top 60-80px   / padding-bottom 60-80px
+```
+
+Mobile: reduce by ~40% using Elementor responsive padding controls.
+Column gap in feature grids: 40-60px desktop, 24-32px mobile.
+
+---
+
+## CONTAINER ARCHITECTURE — DOUBLE-BEZEL RULE
+
+Every premium card/feature box needs layered depth. Never flat container with content directly inside.
+
+For cards, feature boxes, team cards, testimonials:
+1. **Outer wrapper** — Background: slight tint (5-8% opacity). Border: 1px at 8-10% opacity. Border radius: 20-28px. Padding: 8-12px.
+2. **Inner container** — Own background (slightly different shade). Border radius: outer_radius - padding. Optional inset shadow top.
+
+In Elementor: outer container → background + border → inner container → own background + smaller radius.
+
+---
+
+## BACKGROUND TREATMENTS
+
+Alternate section backgrounds. Never all white, never all dark.
+
+Dark site: deep dark → dark surface → deep dark → medium → full dark CTA
+Light site: white → off-white → white → light accent-tinted → white → dark CTA
+
+Types available:
+- Classic color: hex, never pure black/white
+- Gradient: 135deg, 2 stops max
+- Image: attachment_id from media tools — ALWAYS add overlay
+- Video: mp4_url, Autoplay ON, Mute ON, Loop ON, fallback image required
+
+Overlay rule for background images:
+```
+Left-aligned text:  rgba(0,0,0,0.65) 0% → rgba(0,0,0,0.15) 100%, left→right
+Centered text:      rgba(0,0,0,0.55) 0% → rgba(0,0,0,0.20) 100%, top→bottom
+Dark site tint:     rgba(7,6,18,0.75) 0% → rgba(7,6,18,0.20) 100%
+```
+
+---
+
+## BUTTONS
+
+Primary CTA rules:
+- Solid background accent color. White text on dark, dark text on light. No exceptions.
+- Padding: 20-24px vertical, 36-48px horizontal
+- Border radius: 6-8px (professional) or 100px (pill — consistent with page style)
+- Font weight: 600
+- Hover: darken/lighten 10-15%
+- Active: transform scale(0.98)
+- Never: ghost/outline as primary. Outline = secondary only.
+- Never: invisible text contrast
+
+---
+
+## GRID AND LAYOUT RULES
+
+- 3-column default for features. 2 for 3-4 items. 3 for 5-6. Never 4 uniform columns.
+- Vary column widths: 60/40 instead of 50/50 for hero splits.
+- Cards only when genuinely the best affordance. Alternating blocks, timelines, numbered lists often better.
+- Identical cards banned. Vary size, tint, or featured treatment.
+- Nested cards always wrong. Remove outer wrapper.
+
+---
+
+## RESPONSIVE RULES
+
+```
+Containers:   width 100% on mobile
+Typography:   H1 → 38-48px mobile, body minimum 16px (iOS auto-zoom prevention)
+Columns:      stack to single column below 768px
+Section pad:  60-80px vertical on mobile
+Hero height:  min-height 100dvh (not 100vh — iOS Safari jump bug)
+Buttons:      full width on mobile
+Video BG:     always set fallback image (mobile autoplay often blocked)
+Grid gap:     never less than 16px mobile, 24px safe
+```
+
+---
+
+## MOTION AND CSS (inject via Elementor Custom CSS)
+
+### Scroll entry animation
+```css
+{{WRAPPER}} {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
+}
+{{WRAPPER}}.is-visible { opacity: 1; transform: translateY(0); }
+```
+Activate with IntersectionObserver via Elementor Kit → Custom JS.
+
+### Card hover lift
+```css
+{{WRAPPER}} {
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+{{WRAPPER}}:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.14); }
+{{WRAPPER}}:active { transform: scale(0.98); }
+```
+
+### Hero height + overlay
+```css
+{{WRAPPER}} { min-height: 100dvh; position: relative; overflow: hidden; }
+{{WRAPPER}}::before {
+  content: ''; position: absolute; inset: 0; z-index: 1;
+  background: linear-gradient(105deg, rgba(7,6,18,0.80) 0%, rgba(7,6,18,0.35) 50%, rgba(7,6,18,0.05) 100%);
+}
+```
+
+### Floating nav pill
+```css
+{{WRAPPER}} {
+  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
+  background: rgba(10,10,20,0.72); backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 100px; padding: 10px 28px; z-index: 999;
+}
+```
+
+### Performance non-negotiables
+- Animate ONLY transform and opacity. Never top, left, width, height, padding.
+- backdrop-filter only on fixed/sticky elements. Never on scrolling containers.
+- Always IntersectionObserver. Never window.addEventListener('scroll').
+
+---
+
+## ELEMENTOR TECHNICAL RULES
+
+### DOING_CRON — mandatory in all CLI build scripts
+```php
+define('DOING_CRON', true); // before require wp-load.php
+```
+Without this, Elementor's object cache bug causes only the last element to survive.
+
+### Page template — set via meta only
+```php
+// Wrong: wp_update_post(['page_template' => 'elementor-full-width'])
+// Correct:
+wp_update_post(['ID' => $pid, 'post_status' => 'publish']);
+update_post_meta($pid, '_wp_page_template', 'elementor-full-width');
+update_post_meta($pid, '_elementor_edit_mode', 'builder');
+```
+
+### CSS cache flush after every build
+```php
+if (class_exists('\Elementor\Core\Files\CSS\Post')) {
+    (new \Elementor\Core\Files\CSS\Post($page_id))->update();
+}
+```
+
+### Slug cleanup after repeated builds
+```php
+global $wpdb;
+$wpdb->update($wpdb->posts, ['post_name' => 'clean-slug'], ['ID' => $pid]);
+flush_rewrite_rules(true);
+```
+
+---
+
+## ABSOLUTE BANS
+
+- Side-stripe borders (border-left: 4px solid accent on cards)
+- Gradient text (background-clip: text)
+- Glassmorphism as default card style (one accent element per page max)
+- Identical card grids (vary something)
+- Hero with no media background (always real photo or video)
+- All-white or all-dark section sequence (alternate)
+- Center-aligned hero as default (left-aligned split is the default)
+- Ghost button as primary CTA
+- Low-contrast button text
+- Placeholder copy (Lorem ipsum, Feature 1, Coming soon)
+- AI clichés (Elevate, Seamless, World-class, Passionate, Cutting-edge)
+- h-screen on hero (use min-height: 100dvh)
+- Emojis as icons
+- Nested cards
+
+---
+
+## AI SLOP TEST
+
+Before returning page URL:
+- Could someone say "AI built that" at a glance? If yes — failed.
+- Are backgrounds varied (not all white, not all dark)?
+- Does the hero have real media?
+- Is H1 under 3 lines on desktop?
+- Do fonts feel intentional for this industry?
+- Is there one genuinely surprising or premium layout moment?
+- Is copy specific and credible, not generic?