메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/nguyenphp/antigravity-marketing --skill frontend-design명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | frontend-design |
| description | Frontend design principles for marketing websites and landing pages. |
| allowed-tools | Read, Glob, Grep |
Design principles for converting marketing websites.
| Section | Purpose |
|---|---|
| Hero | Hook, value prop, CTA |
| Social Proof | Trust logos, numbers |
| Problem | Pain point resonance |
| Solution | How you help |
| Features | What you offer |
| Testimonials | Social proof |
| Pricing | Clear options |
| FAQ | Objection handling |
| Final CTA | Last push |
| Color | Association | Use For |
|---|---|---|
| Blue | Trust, stability | Finance, tech |
| Green | Growth, health | Wellness, eco |
| Orange | Energy, action | CTAs |
| Purple | Premium, creative | Luxury, SaaS |
| Red | Urgency, passion | Sales, food |
| Black | Luxury, power | Premium |
| Rule | Application |
|---|---|
| 60-30-10 | Primary-Secondary-Accent |
| CTA contrast | Stand out from page |
| Consistency | Same meaning everywhere |
| Type | Style | Example |
|---|---|---|
| Headlines | Bold, distinctive | Playfair, Poppins |
| Body | Clean, readable | Inter, Open Sans |
| Factor | Recommendation |
|---|---|
| Line length | 50-75 characters |
| Line height | 1.5-1.7 for body |
| Paragraph | 3-4 sentences max |
1. Hero headline (largest)
2. Supporting image
3. Subheadline
4. CTA button
5. Secondary content
| Technique | Effect |
|---|---|
| Size | Bigger = more important |
| Color | Brand color = emphasis |
| Whitespace | Isolation = attention |
| Position | Top-left gets seen first |
| Do | Don't |
|---|---|
| Real photos | Generic stock |
| Show product in use | Empty product shots |
| People looking at CTA | People looking away |
| High quality | Low resolution |
| Format | Use |
|---|---|
| WebP | Photos, complex images |
| SVG | Icons, illustrations |
| PNG | Transparency needed |
| Approach | Impact |
|---|---|
| 1 field (email only) | Highest conversion |
| 2-3 fields | Good balance |
| 4+ fields | Significant drop-off |
| Element | Best Practice |
|---|---|
| Labels | Above field |
| Placeholders | Examples only |
| Errors | Inline, immediate |
| Submit | Action-oriented text |
| Element | Minimum Size |
|---|---|
| Buttons | 44x44px |
| Links | 44x44px tap area |
| Form fields | Full width |
| Desktop | Mobile |
|---|---|
| Multi-column | Single column |
| Hover effects | Tap feedback |
| Fixed nav | Hamburger |
| Load Time | Effect |
|---|---|
| 1 second | Baseline |
| 3 seconds | -7% conversions |
| 5 seconds | -20% conversions |
| Action | Impact |
|---|---|
| Compress images | High |
| Lazy loading | Medium |
| Minify CSS/JS | Medium |
| CDN | High |
| Element | Where |
|---|---|
| Logos | Below hero |
| Security badges | Near forms |
| Testimonials | Before pricing |
| Guarantees | Near CTAs |
| Element | Why |
|---|---|
| Headlines | Biggest attention grabber |
| CTAs | Direct conversion impact |
| Hero image | First impression |
| Social proof | Trust factor |
| Element | Why |
|---|---|
| Button colors | Minor effect |
| Font choices | Subtle impact |
| Spacing | Minimal change |
Remember: Beautiful design that doesn't convert is just art. Always optimize for action.