frontend-design

Create production-grade frontend interfaces with design system tokens and accessibility.

3|Updated May 23, 2026

Search Tags:#typography #accessibility #frontend #ui-design #design-system #color-palette

Ready to run

npx skills add https://github.com/waynesutton/finder9 --skill frontend-design-waynesutton

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/waynesutton/finder9/tree/main/.codex/skills/frontend-design
Command: npx skills add https://github.com/waynesutton/finder9 --skill frontend-design-waynesutton

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Distinctive, production-grade frontend interfaces avoid generic AI aesthetics, ensuring teams deliver polished, cohesive user experiences.

Core Features & Use Cases

Design System Guidance: defines typography, color, spacing, and components for a cohesive product aesthetic.
Quality Assurance: enforces accessibility, semantic tokens, and token-based theming to ensure scalable, maintainable UI across platforms.
Use Case: when building web apps, dashboards, or marketing sites that require a unique brand expression with robust UX.

Quick Start

Generate a production-ready frontend design for a marketing landing page given brand assets.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a production-grade frontend interface that follows a cohesive design system?▼

Maintain scalable UI by enforcing accessibility rules, semantic tokens, and token-based theming. Defining typography, color palettes, and spacing tokens ensures modular components remain cohesive across platforms without manual visual adjustments.

Can I use design tokens for theming and accessibility in a web app component library?▼

Yes, you can use design tokens for theming. Enforce semantic tokens, accessibility rules, and responsive design principles to ensure token-based theming delivers maintainable, scalable UI assets across your component library and web apps.

What is the best way to avoid generic AI aesthetics when creating marketing site visuals?▼

The best way to avoid generic AI aesthetics is to align frontend interfaces with a cohesive design system. Apply distinctive typography, color palettes, and brand assets to deliver polished, unique brand expression for marketing sites.

Does this frontend design approach work for dashboards and component libraries?▼

Yes, this frontend design approach works for dashboards and component libraries. It enforces modular components, spacing tokens, and responsive rules to deliver scalable, maintainable UI assets requiring strong UX and polished visuals.