frontend-design

Generate frontend interfaces with typography, color, layout, and motion systems.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/dungle-scrubs/agent-config --skill frontend-design-dungle-scrubs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dungle-scrubs/agent-config/tree/main/stow/shared/skills/frontend-design
Command: npx skills add https://github.com/dungle-scrubs/agent-config --skill frontend-design-dungle-scrubs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers in producing distinctive, production-grade frontend interfaces that avoid generic AI aesthetics and inconsistent styling.

Core Features & Use Cases

  • Aesthetic Direction & Visual System: defines a bold design direction and a cohesive token system (typography, color, spacing, motion).
  • Reusable Frontend Artifacts: provides ready-to-use components, templates, and guidelines for web apps, dashboards, posters, and marketing assets.
  • Quality Assurance & Accessibility: enforces contrast, keyboard navigation, and responsive behavior to ensure inclusive experiences.

Quick Start

Provide a design brief describing target users and preferred aesthetic, then generate a starter UI scaffold (tokens, components, and example pages) that can be integrated into your project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design frontend interfaces that avoid generic AI aesthetics?

To avoid generic AI aesthetics in frontend design, define a bold aesthetic direction and cohesive token system. The system applies typography, color theory, spacing scales, and motion guidelines to generate distinctive, production-grade web UI components and pages.

What's the best way to create a responsive UI with accessible typography and color tokens?

Creating a responsive UI with accessible typography and color tokens involves enforcing contrast and keyboard navigation. The system generates ready-to-use design tokens, components, and starter templates ensuring inclusive experiences across web apps and dashboards.

Can I generate design tokens and starter templates for a web app dashboard?

Yes, you can generate design tokens and starter templates for a web app dashboard. Provide a design brief describing target users and preferred aesthetic, and the system outputs a starter UI scaffold including typography, color, and spacing tokens integrated with example pages.

How do I set up a cohesive frontend design system for marketing assets and posters?

Setting up a cohesive frontend design system for marketing assets and posters involves defining a bold design direction. The system provides reusable frontend artifacts, applying typography systems, color theory, and motion guidelines to deliver production-grade marketing assets.

Does frontend design work for enforcing motion guidelines and spacing scales across components?

Yes, frontend design works for enforcing motion guidelines and spacing scales across components. It applies defined design directions to generate reusable frontend artifacts, ensuring consistent styling and cohesive visual systems across pages and applications.