skills.rest
mymx2
mymx2COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create custom color palettes, typography scales, and layout strategies for web interfaces.

4|Updated Jun 10, 2026
Search Tags:#typography#design#branding#ui#layout#frontend
One-click install
npx skills add https://github.com/mymx2/foreman --skill frontend-design-mymx2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mymx2/foreman/tree/main/.qoder/skills.collected/skills/frontend-design
Command: npx skills add https://github.com/mymx2/foreman --skill frontend-design-mymx2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the tendency for AI-generated designs to default to generic, templated aesthetics by providing a framework for deliberate, subject-specific visual decision-making.

Core Features & Use Cases

  • Design Planning: Guides the creation of a compact token system including color palettes, typography scales, and layout concepts.
  • Aesthetic Risk Assessment: Encourages the inclusion of a unique signature element to ensure the design stands out from common AI defaults.
  • Use Case: When building a new landing page, use this skill to move beyond standard cream-background-and-serif-font templates to create a visual identity that reflects the specific subject matter and audience of the project.

Quick Start

Use the frontend-design skill to generate a design plan for a new landing page for a boutique coffee roastery.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I stop AI generated UI designs from looking generic and templated?▼

To stop AI UI designs from looking generic, use a structured methodology for creating unique, intentional visual identities that enforces deliberate, subject-specific visual decision-making rather than defaulting to common design patterns.

How do I create a custom design token system for a web interface?▼

Create a custom design token system by planning compact color palettes, typography scales, and layout concepts through a two-pass planning process that prioritizes subject-specific aesthetics before executing the structural layout.

What is the best way to plan a visual identity for a new landing page?▼

The best way to plan a landing page visual identity is to assess aesthetic risks and include a unique signature element, ensuring the design reflects the specific subject matter and audience instead of standard templates.

Does frontend design methodology require any specific frameworks or dependencies?▼

No specific frameworks or dependencies are required, as the methodology focuses on facilitating the development of custom color palettes and layout strategies through a disciplined two-pass planning process.

When should I use a structured design planning process instead of generating layouts directly?▼

Use a structured design planning process when building new web interfaces to move beyond standard cream-background-and-serif-font templates and craft a visual identity tailored to your specific project audience.

Related Skills

Explore More Design & Creative Skills→
j-showj-show

frontend-design

Generate design plans with color palettes, typography, and layout strategies.

Official
Intermediate
lucking7lucking7

frontend-design

Guides layout, typography, color, and accessibility for frontend interfaces.

Community
Basic
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
v24kuonv24kuon

frontend-design

Generate custom CSS and responsive layouts with intentional design choices.

Community
Advanced