skills.rest
jarredkenny
jarredkennyCOMMUNITY
Explore all skills by this author →
Website𝕏@jarredkennyGitHub

frontend-design

Define typography, color systems, motion, and layout for frontend interfaces.

19|4|Updated Feb 1, 2026
Search Tags:#typography#design#accessibility#frontend#aesthetics#motion#color-system
One-click install
npx skills add https://github.com/jarredkenny/agency-ai --skill frontend-design-jarredkenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jarredkenny/agency-ai/tree/main/roles/orchestrator/skills/frontend-design
Command: npx skills add https://github.com/jarredkenny/agency-ai --skill frontend-design-jarredkenny

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides teams to create distinctive, production-grade frontend interfaces that avoid generic AI-generated visuals and deliver deliberate aesthetic direction.

Core Features & Use Cases

  • Clear aesthetic direction: Establish bold or refined visual language that aligns with brand and audience.
  • Frontend stylistic guidelines: Address typography, color systems, motion, spacing, and layouts to produce cohesive components and pages.
  • Use Case: When designing a dashboard or marketing site, specify typography, color tokens, and motion patterns to achieve a unique, cohesive experience.

Quick Start

Describe your frontend goals and constraints: audience, platforms, and tech stack; then request a design direction and deliverables such as typography scales, color tokens, and component guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a frontend design system with typography and color tokens?▼

Frontend design systems solve generic AI-generated visuals by establishing deliberate aesthetic direction. They enforce a design-to-code workflow specifying typography, color systems, motion, and layout to maintain a cohesive brand language across components and pages.

How do I establish a cohesive visual language for a web dashboard?▼

Establishing a cohesive visual language requires defining typography, color systems, motion, spacing, and layouts. This approach delivers distinctive, production-grade frontend interfaces by avoiding generic visuals and enforcing deliberate aesthetic constraints.

Can I use this frontend design approach for marketing sites and components?▼

Yes, this frontend design approach applies to marketing sites, components, pages, and dashboards. It defines typography, color systems, motion, and layout to maintain a cohesive brand language and deliver production-grade visuals across different frontend applications.

What do I need to provide to generate frontend design tokens and UI guidelines?▼

You need to describe your frontend goals and constraints, including audience, platforms, and tech stack. Requesting design direction then yields deliverables such as typography scales, color tokens, motion patterns, and accessible UI guidelines.

Why do my AI-generated frontend interfaces look generic and lack brand identity?▼

AI-generated frontend interfaces look generic without deliberate aesthetic direction. Defining typography, color systems, motion, and layout constraints enforces a design-to-code workflow that maintains a cohesive brand language and avoids generic visuals.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

design-brief

Create structured design briefs with problem statements, audience, constraints, and success criteria.

Community
Intermediate
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
belokonmbelokonm
8

frontend-ui-ux-engineer

Transform basic React components into polished interfaces with typography, color, motion, and accessibility.

Community
Advanced
tomada1114tomada1114
4

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

Community
Basic