semrush-design-skill

Convert vague product requirements into Semrush design-system-aligned UI specifications.

Updated Apr 11, 2026

Search Tags:#typography #consistency #frontend #design-system #ui-patterns #component-design #semrush

Ready to run

npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill semrush-design-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: semrush-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/semrush-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill semrush-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Semrush design-system patterns help teams translate product goals into a consistent, implementation-ready UI that matches Semrush conventions, reducing design drift and rework.

Core Features & Use Cases

Propose UI structure (layout, information density, and sections) aligned with Semrush patterns.
Recommend typography, spacing, color tokens, and interaction states to ensure cross-page consistency.
Use Case: When designing dashboards or marketing pages, guide component choices and behavior across screens to accelerate delivery.

Quick Start

Describe a Semrush-aligned UI for a dashboard including layout, typography, and components.

Frequently Asked Questions about semrush-design-skill

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

FAQPage Schema

What is the best way to align UI components with Semrush design-system patterns?▼

To align UI components with Semrush design-system patterns, translate product requirements into layout, typography, and color token specifications. This ensures consistent cross-page decisions for dashboards and marketing pages, reducing design drift.

How do I convert product requirements into UI specifications for frontend teams?▼

Converting product requirements into UI specifications involves defining layout structures, spacing, and interaction states. This process yields implementation-ready guidance for React or Next.js frontend teams to build consistent interfaces.

Can I use this approach to design responsive dashboards and marketing pages?▼

Yes, you can design responsive dashboards and marketing pages by applying Semrush conventions. It guides component choices, information density, and behavior across screens to accelerate frontend delivery.

Does this design-system guidance work with React and Next.js?▼

This design-system guidance provides implementation-ready specifications tailored for React and Next.js. It defines typography, color tokens, and interaction states so frontend teams can build UI components that match Semrush conventions.

How do I ensure typography and color consistency across multiple interface designs?▼

Ensure typography and color consistency by applying standardized design tokens and UI patterns. Recommending specific spacing and interaction states maintains visual alignment across all dashboards and marketing pages.