skills.rest
bvshi
bvshiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate UI/UX design plans with typography, layout, and motion principles.

Updated May 25, 2026
Search Tags:#visual design#UX design#design principles#UI design#aesthetic direction
One-click install
npx skills add https://github.com/bvshi/fodswap --skill frontend-design-bvshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bvshi/fodswap/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/bvshi/fodswap --skill frontend-design-bvshi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides guidance for crafting unique and intentional visual designs for UIs and UX, breaking away from templated defaults and offering a distinctive aesthetic direction.

Core Features & Use Cases

  • Aesthetic Direction: Offers a design philosophy that emphasizes distinctive choices in color, typography, and layout.
  • Design Principles: Outlines best practices for hero elements, typography, structure, motion, and complexity.
  • Process Guidance: Walks through a structured process of brainstorming, exploring, planning, critiquing, and building designs.
  • Writing for Design: Provides guidance on writing effective and user-friendly content for design interfaces.

Quick Start

Use the frontend-design skill to generate a design plan for a new project brief, focusing on color, typography, and layout.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I break away from templated UI defaults and create a distinctive visual design?▼

To break away from templated UI defaults, you need a design plan that emphasizes intentional aesthetic choices in color, typography, and layout. This process involves brainstorming, exploring, and applying specific design principles to achieve a unique visual direction.

What design principles should I follow for hero elements, structure, and motion in UX?▼

Effective UX design principles for hero elements, structure, and motion require intentional planning and critique. You should outline best practices for complexity and motion to ensure the layout is tailored to your project brief's specific needs.

How do I generate a structured design plan for a new UI/UX project brief?▼

To generate a UI/UX design plan, walk through a structured process of brainstorming, exploring, planning, critiquing, and building. This ensures your design choices for typography and layout are intentional and tailored to the brief.

What is the best way to choose typography and color palettes for a unique UI aesthetic?▼

The best way to choose typography and color palettes is to follow a design philosophy that emphasizes distinctive aesthetic direction. This requires critiquing your choices against the project brief to ensure the visual design remains intentional.

Does this UI design process include guidance on writing content for interfaces?▼

Yes, the UI design process includes guidance on writing effective and user-friendly content for design interfaces. This ensures the writing aligns with the overall aesthetic direction and structural layout principles.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
rauell1rauell1
3

frontend-design

Design and build distinctive frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
mattwyskielmattwyskiel
1

frontend-design

Guide UI design with principles for typography, structure, and motion.

Community
Intermediate
j-showj-show

frontend-design

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

Official
Intermediate