skills.rest
pbdigital
pbdigitalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Automate landing page and hero section design using defined design tokens and typography systems.

Updated Dec 8, 2025
Search Tags:#typography#design#marketing#landing-page#color-palette#hero-section
One-click install
npx skills add https://github.com/pbdigital/darryl-speak-online-business-plan --skill frontend-design-pbdigital
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pbdigital/darryl-speak-online-business-plan/tree/main/.claude/skills/designer
Command: npx skills add https://github.com/pbdigital/darryl-speak-online-business-plan --skill frontend-design-pbdigital

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive landing pages and marketing materials with high design quality. This skill ensures marketing pages, hero sections, and promotional content are designed with strong visual impact and cohesive branding, avoiding dashboards or internal UIs.

Core Features & Use Cases

  • Marketing-page design: craft standout landing pages and hero sections with bold visuals, typography, and layout systems.
  • Design-system alignment: define tokens for spacing, typography, and color in line with brand guidelines.
  • Accessibility & usability: ensure contrast, focus indicators, and keyboard navigation in marketing UI.
  • Use Case: imagine launching a product and needing a complete landing page concept with sections, CTAs, and responsive behavior.

Quick Start

Design a marketing landing page concept for ProductX including hero, 3 feature blocks, and a primary CTA.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to design a marketing landing page with cohesive branding?▼

Yes, you can create complete landing page concepts by specifying sections, CTAs, and responsive behavior. This approach outputs distinctive marketing pages with bold typography and layout systems tailored for product launches and promotional content.

Do I need a design system baseline to generate a hero section?▼

Yes, defining design tokens for spacing, typography, and color is required before generating marketing pages. These tokens align the output with brand guidelines to ensure the hero sections and feature blocks maintain cohesive branding.

Can I use this approach to design dashboards or internal UI components?▼

No, this approach is strictly for marketing landing pages and promotional content requiring bold visuals. It explicitly avoids dashboards or internal UI components to focus on high-impact marketing campaigns and product launches.

How do I ensure accessibility and usability in a marketing page design?▼

You ensure accessibility and usability by applying contrast checks, focus indicators, and keyboard navigation within the marketing UI. This guarantees that high-impact landing pages remain accessible while maintaining bold visual design.

What is needed to automate a complete landing page concept for a product launch?▼

Automating a complete landing page concept for a product launch requires a design-system baseline and typography and color tokens. Providing these inputs generates a full marketing page with hero sections, feature blocks, and responsive behavior.

Related Skills

Explore More Design & Creative Skills→
MilUX-LtdMilUX-Ltd

design-system-setup

Generates a complete design system with tokens, styles, and templates from a JSON file of brand preferences.

Official
Advanced
dwaynimaydwaynimay

imagegen-frontend-web

Generate conversion-aware frontend design reference images for landing page sections.

Community
Advanced
GoogleCloudPlatformGoogleCloudPlatform
129

visual-direction

Generate cohesive marketing imagery by applying visual-direction guidelines.

Official
Intermediate
CesarAugustusGroBCesarAugustusGroB

frontend-design

Translate a bold aesthetic direction into production-ready frontend code.

Community
Advanced