frontend-design

Apply principled front-end design frameworks to UI components, layouts, color systems, and typography.

4|Updated Jan 23, 2026

Search Tags:#typography #design-system #frontend-design #design-thinking #color-system #ui-architecture

Ready to run

npx skills add https://github.com/marcusagm/Mundam --skill frontend-design-marcusagm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/marcusagm/Mundam/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/marcusagm/Mundam --skill frontend-design-marcusagm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams often struggle to translate aesthetic goals into concrete, reusable UI guidelines. This Skill provides a principled framework for design thinking and decision-making to help teams create consistent, effective front-end interfaces.

Core Features & Use Cases

Principled design thinking for components, layouts, color systems, typography, and visual style.
Decision framework with reference materials to guide rapid, consistent design decisions across projects.
Use cases across prototyping, design reviews, and implementation handoff to engineering.

Quick Start

Use this Skill to draft a design-system outline for a new product’s landing page, including color, typography, spacing tokens, and sample components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I create a consistent web UI design system for my project?▼

Create a consistent web UI design system by applying principled design-thinking and decision frameworks to components, layouts, color systems, and typography. It provides reference materials to guide rapid, consistent decisions across ideation, prototyping, and production handoff.

What is the best way to plan typography and color systems for front-end interfaces?▼

Plan typography and color systems by using front-end design principles and reference materials to guide your decisions. This approach helps translate aesthetic goals into concrete, reusable UI guidelines instead of relying on ad-hoc choices.

Do I need specialized design software to apply these front-end design principles?▼

You do not need specialized design software to apply these front-end design principles. The framework operates entirely on design-thinking and decision-making logic, requiring no specific tools to guide component layout, color, and typography choices.

How to draft a design-system outline for a new product landing page?▼

Draft a design-system outline for a landing page by defining color, typography, and spacing tokens alongside sample components. Use the provided decision framework to ensure visual style and UI architecture remain consistent from ideation to implementation handoff.

Can I use this framework for design reviews and engineering handoff?▼

You can use this framework for design reviews and engineering handoff. It provides a principled decision framework that helps teams translate aesthetic goals into concrete, reusable UI guidelines, ensuring engineering teams receive consistent component specifications.

Why does my web UI design look inconsistent across different components?▼

Your web UI design looks inconsistent across components because it lacks a principled decision framework for design-thinking. Applying structured guidelines for color systems, typography, and visual style solves this by creating reusable UI standards.