skills.rest
bcassiano
bcassianoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guide web UI decisions using design thinking for components, typography, color, and layout.

Updated Aug 23, 2026
Search Tags:#typography#ui#layout#ux#design-thinking#color-system
One-click install
npx skills add https://github.com/bcassiano/MariIA --skill frontend-design-bcassiano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bcassiano/MariIA/tree/main/ag_kit_2/.agent/skills/frontend-design
Command: npx skills add https://github.com/bcassiano/MariIA --skill frontend-design-bcassiano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams apply design thinking to web UI decision-making, enabling consistent, user-centered interfaces across components, typography, color, and layout.

Core Features & Use Cases

  • Guided UI design thinking workflow for components, typography, color systems, and layout decisions.
  • Decision trees and principles that ensure accessibility, consistency, and brand alignment across projects.
  • Real-world scenarios include dashboards, landing pages, admin interfaces, and product pages.

Quick Start

Apply a design-thinking approach to a web UI by identifying user goals, selecting layout, typography, and color tokens, and validating decisions with UX principles.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply design thinking to web UI decisions?▼

Apply design thinking to web UI by identifying user goals, selecting layout, typography, and color tokens, and validating decisions with established UX principles to ensure user-centered interfaces.

What is the best way to create consistent design tokens for typography and color systems?▼

Create consistent design tokens for typography and color by using decision trees and principles that ensure brand alignment, structured decision-making, and accessibility across all web components.

Can I use this design thinking workflow for admin interfaces and dashboards?▼

Yes, this design thinking workflow applies to real-world scenarios including dashboards, landing pages, admin interfaces, and product pages, ensuring consistent UX strategy validation across different layouts.

How do I validate UX strategy and accessibility considerations during component design?▼

Validate UX strategy and accessibility during component design by applying structured decision-making principles, documenting reuse guidelines, and checking color systems and typography choices for compliance.

Why does my web UI lack consistency across different product pages?▼

Your web UI lacks consistency if it lacks structured decision-making and documented design principles, which are required to maintain unified typography, color systems, and layout planning across projects.

Does this UI design workflow require any specific design tool dependencies?▼

No, this UI design workflow operates without specific dependencies, offering a framework of decision trees and principles that can be applied independently within any product team's environment.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

teach-impeccable

Collect project design context and persist guidelines to the AI config file.

Community
Advanced
eysenfalkeysenfalk

frontend-ui-ux

Transforms design briefs into accessible, reusable UI components with tokens and layouts.

Community
Advanced
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
Mohamed-ElkahefMohamed-Elkahef

frontend-enhancer

Enhance Next.js frontends with pre-built UI components and design system resources.

Community
Intermediate