frontend-design

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

Updated May 15, 2026

Search Tags:#typography #design #branding #ui #layout #frontend

Ready to run

npx skills add https://github.com/j-show/ai-everything --skill frontend-design-j-show

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/j-show/ai-everything/tree/main/skills/frontend-design
Command: npx skills add https://github.com/j-show/ai-everything --skill frontend-design-j-show

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, and layout concepts.
Aesthetic Direction: Encourages taking calculated risks to ensure visual identity is unique to the project's subject matter.
Use Case: When building a new landing page, use this skill to move beyond standard cream-background-serif-font templates and develop a cohesive, brand-aligned visual language that feels bespoke.

Quick Start

Use the frontend-design skill to generate a design plan for a new landing page for a boutique coffee roastery that emphasizes artisanal craft and local sourcing.

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 UI design system that doesn't look like a generic template?▼

To create a non-templated UI design system, use a structured methodology that enforces deliberate, subject-specific visual decisions through a two-pass planning and critique process. This ensures your web interface develops a cohesive, bespoke visual identity.

What is the best way to plan a color palette and typography scale for a new landing page?▼

The best way to plan a color palette and typography scale for a landing page is to follow a structured design planning framework. This approach facilitates defining tailored visual tokens and encourages calculated aesthetic risks to ensure brand alignment.

Why does AI generated UI design often default to standard cream backgrounds and serif fonts?▼

AI generated UI design defaults to standard cream backgrounds and serif fonts due to a tendency toward generic, templated aesthetics. Overcoming this requires a framework for intentional visual decision-making that enforces unique, subject-specific design choices.

Can I develop a brand-aligned visual language for a specific industry using a design planning framework?▼

Yes, you can develop a brand-aligned visual language for a specific industry by applying a structured design planning framework. This process facilitates defining tailored color palettes and typography scales that feel bespoke to the project's subject matter.

How do I ensure my web interface layout strategy feels bespoke rather than generic?▼

Ensuring a bespoke web interface layout strategy requires enforcing a two-pass planning and critique process. This methodology encourages calculated aesthetic risks and deliberate visual decision-making tailored specifically to your project brief.