skills.rest
Tea-4-Life
Tea-4-LifeOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Updated Jan 25, 2026
Search Tags:#typography#accessibility#design-system#frontend-design#color-contrast#motion-design#ui-architecture
One-click install
npx skills add https://github.com/Tea-4-Life/Tea4Life-Frontend-Website --skill frontend-design-tea-4-life
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Tea-4-Life/Tea4Life-Frontend-Website/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Tea-4-Life/Tea4Life-Frontend-Website --skill frontend-design-tea-4-life

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend teams often struggle to produce interfaces that stand out with a production-grade feel while remaining cohesive with brand identity and accessible design. This skill provides a structured approach to crafting distinctive, high-quality frontend interfaces that avoid generic AI aesthetics and deliver polished code.

Core Features & Use Cases

  • Establish a bold visual language and cohesive design system for web components, pages, posters, or applications.
  • Deliver production-ready code with meticulous typography, color, spacing, motion, and accessibility practices.
  • Scale brand-aligned UI across products and platforms, from small components to full interfaces, with consistent design tokens and interactions.

Quick Start

Provide a bold frontend component example that demonstrates your chosen aesthetic using a reusable color token and typography scale.

Frequently Asked Questions about frontend-design

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

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

Building distinctive frontend interfaces requires enforcing design context gathering, typography and color tokens, and layout rhythm to deliver a cohesive brand voice and production-grade feel.

What is the best way to scale a cohesive design system across web components?▼

Scaling a cohesive design system across web components involves applying consistent design tokens, component-driven architecture, and accessibility practices to maintain brand-aligned UI from small parts to full interfaces.

How do I establish accessible color contrast and typography tokens for a web application?▼

Establishing accessible color contrast and typography tokens requires defining a reusable color token and typography scale that enforces strict accessibility practices and layout rhythm throughout your UI architecture.

Can I use this approach to design both web pages and posters with a unified brand voice?▼

Yes, you can apply this approach to design web pages, posters, and applications by enforcing a structured visual language with consistent design tokens and motion guidelines across all outputs.

Why does my component-driven UI architecture lack a production-grade feel?▼

A component-driven UI architecture lacks a production-grade feel when it misses meticulous typography, color, spacing, and motion guidelines needed to deliver polished code and avoid generic AI aesthetics.

Related Skills

Explore More Design & Creative Skills→
haxlyshaxlys

visual-design-foundations

Codify typography, color, spacing, and iconography into design tokens and style guides.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
89jobrien89jobrien
4

design-docs

Create feature design specs and Architecture Decision Records for system architecture documentation.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced