frontend-design
starsforks
How to install frontend-design?
nguyenphp/antigravity-marketing/frontend-design
$npx -y skills add nguyenphp/antigravity-marketing --skill frontend-designFrontend design principles for marketing websites and landing pages.
SKILL.md
| 1 | # Frontend Design for Marketing |
| 2 | |
| 3 | > Design principles for converting marketing websites. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Landing Page Anatomy |
| 8 | |
| 9 | ### Essential Sections |
| 10 | |
| 11 | | Section | Purpose | |
| 12 | |---------|---------| |
| 13 | | **Hero** | Hook, value prop, CTA | |
| 14 | | **Social Proof** | Trust logos, numbers | |
| 15 | | **Problem** | Pain point resonance | |
| 16 | | **Solution** | How you help | |
| 17 | | **Features** | What you offer | |
| 18 | | **Testimonials** | Social proof | |
| 19 | | **Pricing** | Clear options | |
| 20 | | **FAQ** | Objection handling | |
| 21 | | **Final CTA** | Last push | |
| 22 | |
| 23 | --- |
| 24 | |
| 25 | ## 2. Color Psychology |
| 26 | |
| 27 | | Color | Association | Use For | |
| 28 | |-------|------------|---------| |
| 29 | | **Blue** | Trust, stability | Finance, tech | |
| 30 | | **Green** | Growth, health | Wellness, eco | |
| 31 | | **Orange** | Energy, action | CTAs | |
| 32 | | **Purple** | Premium, creative | Luxury, SaaS | |
| 33 | | **Red** | Urgency, passion | Sales, food | |
| 34 | | **Black** | Luxury, power | Premium | |
| 35 | |
| 36 | ### Color Application |
| 37 | |
| 38 | | Rule | Application | |
| 39 | |------|-------------| |
| 40 | | **60-30-10** | Primary-Secondary-Accent | |
| 41 | | **CTA contrast** | Stand out from page | |
| 42 | | **Consistency** | Same meaning everywhere | |
| 43 | |
| 44 | --- |
| 45 | |
| 46 | ## 3. Typography Best Practices |
| 47 | |
| 48 | ### Font Pairing |
| 49 | |
| 50 | | Type | Style | Example | |
| 51 | |------|-------|---------| |
| 52 | | **Headlines** | Bold, distinctive | Playfair, Poppins | |
| 53 | | **Body** | Clean, readable | Inter, Open Sans | |
| 54 | |
| 55 | ### Readability |
| 56 | |
| 57 | | Factor | Recommendation | |
| 58 | |--------|----------------| |
| 59 | | Line length | 50-75 characters | |
| 60 | | Line height | 1.5-1.7 for body | |
| 61 | | Paragraph | 3-4 sentences max | |
| 62 | |
| 63 | --- |
| 64 | |
| 65 | ## 4. Visual Hierarchy |
| 66 | |
| 67 | ### Attention Flow |
| 68 | |
| 69 | ``` |
| 70 | 1. Hero headline (largest) |
| 71 | 2. Supporting image |
| 72 | 3. Subheadline |
| 73 | 4. CTA button |
| 74 | 5. Secondary content |
| 75 | ``` |
| 76 | |
| 77 | ### Creating Hierarchy |
| 78 | |
| 79 | | Technique | Effect | |
| 80 | |-----------|--------| |
| 81 | | **Size** | Bigger = more important | |
| 82 | | **Color** | Brand color = emphasis | |
| 83 | | **Whitespace** | Isolation = attention | |
| 84 | | **Position** | Top-left gets seen first | |
| 85 | |
| 86 | --- |
| 87 | |
| 88 | ## 5. Image Guidelines |
| 89 | |
| 90 | ### Hero Images |
| 91 | |
| 92 | | Do | Don't | |
| 93 | |----|-------| |
| 94 | | Real photos | Generic stock | |
| 95 | | Show product in use | Empty product shots | |
| 96 | | People looking at CTA | People looking away | |
| 97 | | High quality | Low resolution | |
| 98 | |
| 99 | ### Image Optimization |
| 100 | |
| 101 | | Format | Use | |
| 102 | |--------|-----| |
| 103 | | **WebP** | Photos, complex images | |
| 104 | | **SVG** | Icons, illustrations | |
| 105 | | **PNG** | Transparency needed | |
| 106 | |
| 107 | --- |
| 108 | |
| 109 | ## 6. Form Design |
| 110 | |
| 111 | ### Field Reduction |
| 112 | |
| 113 | | Approach | Impact | |
| 114 | |----------|--------| |
| 115 | | 1 field (email only) | Highest conversion | |
| 116 | | 2-3 fields | Good balance | |
| 117 | | 4+ fields | Significant drop-off | |
| 118 | |
| 119 | ### Form UX |
| 120 | |
| 121 | | Element | Best Practice | |
| 122 | |---------|---------------| |
| 123 | | Labels | Above field | |
| 124 | | Placeholders | Examples only | |
| 125 | | Errors | Inline, immediate | |
| 126 | | Submit | Action-oriented text | |
| 127 | |
| 128 | --- |
| 129 | |
| 130 | ## 7. Mobile Considerations |
| 131 | |
| 132 | ### Touch Targets |
| 133 | |
| 134 | | Element | Minimum Size | |
| 135 | |---------|--------------| |
| 136 | | Buttons | 44x44px | |
| 137 | | Links | 44x44px tap area | |
| 138 | | Form fields | Full width | |
| 139 | |
| 140 | ### Mobile Layout |
| 141 | |
| 142 | | Desktop | Mobile | |
| 143 | |---------|--------| |
| 144 | | Multi-column | Single column | |
| 145 | | Hover effects | Tap feedback | |
| 146 | | Fixed nav | Hamburger | |
| 147 | |
| 148 | --- |
| 149 | |
| 150 | ## 8. Page Speed |
| 151 | |
| 152 | ### Impact on Conversion |
| 153 | |
| 154 | | Load Time | Effect | |
| 155 | |-----------|--------| |
| 156 | | 1 second | Baseline | |
| 157 | | 3 seconds | -7% conversions | |
| 158 | | 5 seconds | -20% conversions | |
| 159 | |
| 160 | ### Quick Wins |
| 161 | |
| 162 | | Action | Impact | |
| 163 | |--------|--------| |
| 164 | | Compress images | High | |
| 165 | | Lazy loading | Medium | |
| 166 | | Minify CSS/JS | Medium | |
| 167 | | CDN | High | |
| 168 | |
| 169 | --- |
| 170 | |
| 171 | ## 9. Trust Elements |
| 172 | |
| 173 | ### Placement Strategy |
| 174 | |
| 175 | | Element | Where | |
| 176 | |---------|-------| |
| 177 | | **Logos** | Below hero | |
| 178 | | **Security badges** | Near forms | |
| 179 | | **Testimonials** | Before pricing | |
| 180 | | **Guarantees** | Near CTAs | |
| 181 | |
| 182 | --- |
| 183 | |
| 184 | ## 10. A/B Testing Priorities |
| 185 | |
| 186 | ### High Impact (Test First) |
| 187 | |
| 188 | | Element | Why | |
| 189 | |---------|-----| |
| 190 | | Headlines | Biggest attention grabber | |
| 191 | | CTAs | Direct conversion impact | |
| 192 | | Hero image | First impression | |
| 193 | | Social proof | Trust factor | |
| 194 | |
| 195 | ### Lower Impact |
| 196 | |
| 197 | | Element | Why | |
| 198 | |---------|-----| |
| 199 | | Button colors | Minor effect | |
| 200 | | Font choices | Subtle impact | |
| 201 | | Spacing | Minimal change | |
| 202 | |
| 203 | --- |
| 204 | |
| 205 | > **Remember:** Beautiful design that doesn't convert is just art. Always optimize for action. |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
