frontend-design-direction

Guides product-specific visual design decisions for web UI implementation.

5|15|Updated Jul 8, 2026

Search Tags:#typography #frontend #web design #ui design #visual hierarchy #responsive layout #design direction

Ready to run

npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill frontend-design-direction-clfigueiredo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design-direction
Source: https://github.com/clfigueiredo/hermes-infra-skills/tree/main/.hermes/skills/curso-hermes/frontend-design-direction
Command: npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill frontend-design-direction-clfigueiredo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often end up generic, flat, or mismatched to their product domain. This Skill provides a structured design-direction process so dashboards, landing pages, and components feel purposeful and appropriate to their audience instead of templated. ## Core Features & Use Cases - Design Direction Framework: Defines purpose, audience, tone, memorable detail, and constraints before any code is written. - Implementation Guidance: Covers typography, color palettes, CSS variables, responsive constraints, motion, and asset usage grounded in existing project conventions. - Anti-Pattern Checklist: Flags common generated-UI mistakes such as purple gradients, nested cards, decorative blobs, and marketing copy hiding the actual product. - Use Case: When asked to build a NOC dashboard for an ISP, the Skill steers the result toward a dense, scannable, utilitarian layout rather than a generic landing-page composition. ## Quick Start Ask the agent to redesign the dashboard UI with a clear design direction suited to a network operations tool.

Frequently Asked Questions about frontend-design-direction

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

FAQPage Schema

How do I make a web UI look less generic?▼

Define an explicit design direction first: purpose, audience, tone, one memorable detail, and constraints. Then match typography, color, and layout to the product domain instead of defaulting to common generated patterns like purple gradients or oversized hero text.

What design direction fits a dashboard or operations tool?▼

A SaaS operations tool should usually be dense, quiet, and scannable, with stable grids, toolbars, and controls. Expressive editorial or maximal styles fit portfolios and launch pages, not repeated daily workflows.

Does this replace the official Anthropic frontend-design skill?▼

No. ECC intentionally does not rebundle the canonical Anthropic frontend-design skill. This is an ECC-specific salvage of design-direction guidance, and the official skill can be installed separately from anthropics/skills.

What UI anti-patterns should I avoid in generated interfaces?▼

Avoid purple gradients, decorative blobs, cards nested inside cards, vague hero copy, single-hue palettes, and hiding the actual product behind marketing sections. Also avoid adding dependencies for purely decorative flourishes.

When should I not use a landing-page style layout?▼

Do not force landing-page composition onto tools used repeatedly every day. The first viewport should show the actual usable product or workflow, with visual hierarchy optimized for scanning rather than marketing impact.