feat: add design-intelligence skill — distilled from impeccable, minimalist-ui, design-taste-frontend, ui-ux-pro-max, wordpress-elementor (6 skills, 45k context)
This commit is contained in:
@@ -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?
|
||||||
Reference in New Issue
Block a user