Skip to content

スキルを検索.../

Agent Skill Search Engine

検索

検索
カテゴリ
職業

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Hero Banner Art Direction | Skills Pool

Skill ファイル

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/04/01

職業
カテゴリ: 営業・マーケティング

スキル内容

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.

関連 Skill

クイックインストール

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/04/01
職業

このページの内容

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 的交互式安装程序 — 引导用户选择并安装技能和规则到用户级或项目级目录，验证路径，并可选择优化已安装文件。

アートディレクター