Skip to content

스킬 검색.../

Agent Skill Search Engine

검색

검색
카테고리
직업

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Hero Banner Art Direction | Skills Pool

스킬 파일

Hero Banner Art Direction

Use when designing or rebuilding hero sections for high-impact visual storytelling, campaign landing, ecommerce conversion, Figma-to-frontend handoff, and award-level UI direction. Keywords: hero banner, art direction, visual hierarchy, conversion zone, figma, frontend.

hey-im-edward0 스타2026. 4. 1.

직업
카테고리: 영업 및 마케팅

스킬 내용

Khi nào dùng

Thiết kế mới hoặc refactor hero cho trang home, catalog, campaign.
Muốn nâng chất lượng thị giác theo hướng thi thiết kế.

Mục tiêu

Hero phải truyền tải thông điệp thương hiệu ngay lần nhìn đầu.
Vừa đẹp vừa có khả năng chuyển đổi (CTA rõ, trust signals rõ).

Framework bố cục 4 lớp

Narrative Layer: headline, subheadline, brand tone.
Focal Visual Layer: hình chủ đạo hoặc composition sản phẩm.
Conversion Layer: CTA chính, CTA phụ, value proposition ngắn.
Trust Layer: social proof, shipping, rating, guarantee.

Quy trình chuẩn

Chốt một visual story duy nhất cho hero.
Xác định reading path theo thứ tự nhìn mắt: headline -> visual -> CTA -> trust.
Tạo grid responsive cho desktop/tablet/mobile.
Tạo biến thể cho 3 trạng thái: default, hover/interactive, reduced-motion.

관련 스킬

빠른 설치

Hero Banner Art Direction

npx skillvault add hey-im-edward/hey-im-edward-zephyr-github-skills-hero-banner-art-direction-skill-md

Skill 다운로드 저장소 열기

작성자: hey-im-edward
스타: 0
업데이트: 2026. 4. 1.
직업

이 페이지의 내용

01Khi nào dùng

Kiểm tra contrast và độ đọc trên overlay/gradient.

Kiểm tra conversion clarity (CTA không bị chìm).

Thư viện và kỹ thuật gợi ý

Layout + component: Tailwind CSS + CVA.
Motion: framer-motion cho reveal/entrance nhẹ.
Fine control timeline: gsap khi cần animation phức tạp.
Image optimization: next/image với sizes rõ ràng.

Checklist trước khi hoàn tất

Hero có một focal point rõ ràng.
Typography không bị vỡ nhịp trên mobile.
CTA chính nhìn thấy ngay không cần cuộn.
Tải trang vẫn mượt, không làm LCP tăng đột biến.

Đầu ra kỳ vọng

Hero mới có concept rõ ràng + code triển khai.
Danh sách quyết định visual (font, màu, motion, CTA).
Ghi chú rủi ro hiệu năng và cách giảm thiểu.

02

Mục tiêu

03Framework bố cục 4 lớp

04Quy trình chuẩn

05Thư viện và kỹ thuật gợi ý

06Checklist trước khi hoàn tất

07Đầu ra kỳ vọng

아트 디렉터

영업 및 마케팅

Taskflow Inbox Triage

Example TaskFlow authoring pattern for inbox triage. Use when messages need different treatment based on intent, with some routes notifying immediately, some waiting on outside answers, and others rolling into a later summary.

영업 및 마케팅

Accessibility

Primary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and also applies to updates of existing UI. Covers accessibility help dialogs, accessible views, verbosity settings, signals, ARIA announcements, keyboard navigation, and ARIA labels/roles.

microsoft184.0k

영업 및 마케팅

Open a Pull Request

Open a pull request with proper PR template, test coverage, and review workflow. Guides agents through creating a PR that follows repo conventions, ensures existing behaviors aren't broken, covers new behaviors with tests, and handles review via bot when local testing isn't possible. TRIGGER when user asks to "open a PR", "create a PR", "make a PR", "submit a PR", "open pull request", "push and create PR", or any variation of opening/submitting a pull request.

Significant-Gravitas183.5k

영업 및 마케팅

Investor Materials

Create and update pitch decks, one-pagers, investor memos, accelerator applications, financial models, and fundraising materials. Use when the user needs investor-facing documents, projections, use-of-funds tables, milestone plans, or materials that must stay internally consistent across multiple fundraising assets.

영업 및 마케팅

Continuous Agent Loop

具有质量门、评估和恢复控制的连续自主代理循环模式。

영업 및 마케팅

Configure Ecc

Everything Claude Code 的交互式安装程序 — 引导用户选择并安装技能和规则到用户级或项目级目录，验证路径，并可选择优化已安装文件。

아트 디렉터