skills.rest
paulalarosa
paulalarosaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

top-design

Codify a design system covering typography, motion, color, and responsive layouts.

Updated Aug 27, 2026
Search Tags:#typography#layout#motion#design-systems#award#top-design
One-click install
npx skills add https://github.com/paulalarosa/lumihub --skill top-design-paulalarosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/paulalarosa/lumihub/tree/main/skills/.agents/skills/_all_skills/top-design
Command: npx skills add https://github.com/paulalarosa/lumihub --skill top-design-paulalarosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing immersive, award-worthy digital experiences is hard without a structured craft system that codifies typography, motion, layout, and accessibility across projects.

Core Features & Use Cases

  • Establishes a rigorous design language and process for world-class websites and apps.
  • Guides typography, motion, color, and grid systems to deliver consistent, premium experiences.
  • Provides patterns for scroll-based storytelling, responsive layouts, and performance-conscious visuals.
  • Use cases include premium brand sites, portfolio projects, editorial campaigns, and product pages.

Quick Start

Generate a complete Top-Design plan for a premium brand site, detailing typography, motion, and layout strategy.

Frequently Asked Questions about top-design

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

FAQPage Schema
How do I create a design system for premium brand sites?▼

Create a design system for premium brand sites by codifying typography, motion, color, and accessibility rules into a structured process. This approach enforces a 12-column grid, custom easing, and scroll-based storytelling to deliver consistent, award-winning visual language across projects.

What is scroll-based storytelling in web design?▼

Scroll-based storytelling in web design is a pattern that guides users through immersive narratives via scroll-triggered motion and visual transitions. It relies on custom easing and responsive layouts to deliver premium, performance-conscious editorial campaigns and product pages.

How do I ensure accessibility and performance in immersive web experiences?▼

Ensure accessibility and performance in immersive web experiences by applying a codified design system that integrates responsive layouts and performance-conscious visuals. Enforcing structured visual language and custom easing maintains premium quality without sacrificing accessible interaction.

Can I use a 12-column grid for editorial layouts and portfolio projects?▼

Yes, you can use a 12-column grid for editorial layouts and portfolio projects to establish consistent visual language. It provides the structural foundation needed to guide typography, motion, and responsive layouts across award-winning digital experiences.

Best way to manage typography and motion across multiple web campaigns?▼

The best way to manage typography and motion across multiple web campaigns is codifying them into a comprehensive design system. This process enforces consistent visual language, custom easing, and accessible design patterns across all portfolio and product sites.

Related Skills

Explore More Design & Creative Skills→
antoniorv6antoniorv6

elevated-design

Transform web interfaces using an Apple-inspired design system with whitespace and typography.

Community
Advanced
deomiarndeomiarn

responsive-patterns

Create mobile-first responsive web layouts with CSS grid and media queries.

Community
Basic
TheGoat395TheGoat395
117

ui-screenshot-composition

Arrange UI screenshots within web layouts for feature sections.

Community
Intermediate
ZiadNagarZiadNagar

scroll-experience

Build scroll-driven web narratives with parallax and scroll-triggered animations.

Community
Advanced