frontend-design

Guide frontend design with typography, color, motion, and accessibility standards.

4|1|Updated Feb 3, 2026

Search Tags:#typography #design #accessibility #frontend #aesthetics #motion

Ready to run

npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill frontend-design-lespaceman

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lespaceman/athena-workflow-marketplace/tree/main/plugins/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill frontend-design-lespaceman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures a design-first approach loads before any UI work, guiding typography, spacing, color, motion, responsiveness, and accessibility to prevent generic AI slop and deliver cohesive interfaces.

Core Features & Use Cases

Establish a bold aesthetic direction and produce production-grade frontend code with meticulous attention to typography, spacing, color, motion, and accessibility.
Provide a design-thinking framework (purpose, tone, constraints, differentiation) to align teams and accelerate UI decisions.
Deliver actionable front-end guidance for components, pages, dashboards, and marketing sites that maintain a cohesive visual system.

Quick Start

Define a bold aesthetic direction and begin implementing production-grade frontend components that align with that vision.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I create production-grade frontend interfaces that avoid generic AI design patterns?▼

To create production-grade frontend interfaces, apply a design-first framework that establishes a bold aesthetic direction before coding. This ensures typography, spacing, color, and motion decisions are cohesive, preventing generic outputs and maintaining visual consistency across components.

What's the best way to establish a design system for web components and marketing sites?▼

The best way to establish a frontend design system is to define purpose, tone, constraints, and differentiation upfront. This design-thinking framework aligns UI decisions across dashboards, pages, and marketing sites to accelerate development while maintaining a cohesive visual system.

How does typography and color theory apply to frontend accessibility?▼

Typography and color theory directly impact frontend accessibility by ensuring readable text contrast and clear visual hierarchy. Applying structured design guidance ensures that components, pages, and apps meet accessibility requirements while maintaining a distinctive aesthetic direction.

Can I use design-first frontend guidance for dashboards and complex web apps?▼

Yes, you can use design-first frontend guidance for dashboards and complex web apps. The framework applies across components, pages, apps, and marketing sites to deliver actionable front-end guidance that maintains accessibility, consistency, and performance throughout the interface.

Why does my AI-generated frontend interface lack visual consistency and performance?▼

AI-generated frontend interfaces lack visual consistency when a design-first approach is not loaded before UI work. Without structured guidance for typography, spacing, color, and motion, the output becomes generic and fails to deliver a cohesive, production-grade visual system.

Does frontend design guidance work with Claude and Codex integration workflows?▼

Yes, frontend design guidance satisfies requirements for metadata compatibility with Claude and Codex integration workflows. This ensures the design-first aesthetic direction and production-grade code output can be seamlessly integrated into automated development pipelines.