frontend-design

Generate production-grade frontend designs with typography, color, motion, and accessibility guidance.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/indigoai-us/hq --skill frontend-design-indigoai-us
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/indigoai-us/hq/tree/main/template/workers/public/impeccable-designer/skills/frontend-design
Command: npx skills add https://github.com/indigoai-us/hq --skill frontend-design-indigoai-us

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams often produce generic, aesthetically inconsistent frontend work; this skill provides distinctive, production-grade UI design and implementation guidance to raise quality and cohesion.

Core Features & Use Cases

  • Clear design direction and token-based typography, color, and motion guidelines that align with a cohesive brand.
  • Implementation guidance for web components, pages, posters, and applications that maintain visual fidelity across platforms.
  • Accessibility and responsive design considerations embedded in every recommendation.

Quick Start

Provide a project brief with constraints and request a complete frontend design concept ready for development.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI aesthetics in frontend UI design?

Distinctive frontend UI design replaces generic AI aesthetics by enforcing design-system standards, token-based typography, and cohesive color guidelines. This ensures production-grade visual fidelity and accessibility across web components and applications.

What's the best way to build production-grade web components with accessibility?

The best way to build accessible web components is to embed accessibility and responsive design considerations directly into the design direction. This yields implementation-ready guidance that maintains visual fidelity and enforces design-system standards across platforms.

Can I use this to generate design tokens for typography and color?

Yes, you can generate clear design direction with token-based typography, color, and motion guidelines. These tokens align with a cohesive brand identity to ensure consistent visual fidelity across your web components and application pages.

How do I create a frontend design concept ready for development?

Provide a project brief with constraints to request a complete frontend design concept ready for development. This generates cohesive layout, motion, and accessibility guidance tailored to your specific application requirements.

Does this frontend design approach support responsive layout and motion design?

Yes, this frontend design approach supports responsive layout and motion design. It applies cohesive design direction to guide layout, motion, and interaction behaviors while maintaining accessibility and implementation-ready standards.

Why does my frontend design lack visual fidelity across different platforms?

Your frontend design lacks visual fidelity if it does not enforce design-system standards and token-based guidelines. Applying cohesive design direction ensures consistent typography, color, and motion across all web components and pages.