frontend-design

Generate production-grade React/HTML/CSS frontend interfaces with cohesive typography and motion.

Updated Apr 24, 2026

Search Tags:#typography #landing page #frontend #react #css #ui design #motion

Ready to run

npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill frontend-design-otto-poblysh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/otto-poblysh/pedagemy-early-access/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill frontend-design-otto-poblysh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design support helps teams create distinctive, production-grade user interfaces with intentional aesthetics, avoiding generic “AI slop” patterns that feel unfinished or forgettable.

Core Features & Use Cases

Aesthetic direction planning: Converts product context into a bold, coherent visual tone with clear constraints and differentiation.
Production-grade UI implementation: Produces working frontend code (e.g., React/HTML/CSS/JS) with meticulous typography, color system, and visual composition.
Polished interaction craft: Adds high-impact motion, micro-interactions, and refined spacing/visual details for memorable pages and components.

Use cases: landing pages, dashboards, web app screens, reusable UI components, styled marketing artifacts, and any request where styling/beautifying web UI is the primary goal.

Quick Start

Use the frontend-design skill to generate a distinctive, production-ready landing page UI for my Next.js app with a cohesive visual direction, accessible typography, tasteful motion, and working component code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I generate a production-ready React landing page that doesn't look like generic AI output?▼

To generate a production-ready React landing page that avoids generic AI output, provide your product requirements and technical constraints. The skill creates distinctive UI implementations with cohesive typography, refined color systems, and polished motion details rather than cookie-cutter templates.

What is the best way to plan a cohesive visual direction for a web application UI?▼

The best way to plan a cohesive visual direction for a web application UI is to translate your product context into a bold aesthetic tone with clear constraints. This process ensures your frontend design has intentional differentiation and avoids forgettable, low-quality patterns.

Can I use this to add motion and micro-interactions to my existing CSS components?▼

Yes, you can use this to add motion and micro-interactions to existing CSS components. It applies polished interaction craft by implementing high-impact visual details, refined spacing, and tasteful animations to make your web UI components more memorable.

Does frontend design work with plain HTML and CSS or do I need a framework like React?▼

Frontend design works with both plain HTML and CSS as well as frameworks like React. It generates working frontend code tailored to your specific technical constraints, supporting web page layouts, dashboards, and reusable component generation without forcing a specific framework.

Why does my generated dashboard UI feel unfinished and lack memorable design?▼

Your generated dashboard UI feels unfinished and lacks memorable design due to generic aesthetic patterns. It requires intentional typography decisions, a refined color system, and functional code aligned to your constraints to solve the problem of low-quality, forgettable output.