skills.rest
noartem
noartemCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Build production-grade frontend interfaces with bold, designerly aesthetics.

Updated Jun 8, 2025
Search Tags:#typography#css#ui-design#aesthetics#web-components#design-systems#frontend-design
One-click install
npx skills add https://github.com/noartem/kawa --skill frontend-design-noartem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/noartem/kawa/tree/main/ui/.ai/skills/frontend-design
Command: npx skills add https://github.com/noartem/kawa --skill frontend-design-noartem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, dashboards, posters, or applications. It ensures UI work avoids generic AI aesthetics and delivers polished code and visuals.

Core Features & Use Cases

  • Produce working UI components, pages, dashboards, and visual assets that adhere to a bold aesthetic direction.
  • Provide guidance on typography, color, motion, and spatial composition to achieve a cohesive design system.
  • Use Case: design a landing page with unique typography and layout that stands out in a competitive market.

Quick Start

Describe the frontend artifact you want (component, page, or application) along with constraints (framework, accessibility, performance) to generate a production-grade UI.

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 UI components that avoid generic AI aesthetics?▼

To build frontend UI components that avoid generic aesthetics, apply a bold design direction enforcing typography, color systems, motion, and layout to produce distinctive, production-grade web components and pages.

What is the best way to create a design system for web dashboards?▼

The best way to create a design system for web dashboards is to establish cohesive typography, color, motion, and spatial composition rules that align with production-grade code quality and accessibility standards.

Can I generate production-grade landing pages with custom typography and layout?▼

Yes, you can generate production-grade landing pages with custom typography and layout by specifying your frontend artifact and constraints to output polished UI that satisfies performance and design-system alignment.

Does this approach to frontend design enforce accessibility and performance constraints?▼

Yes, this approach to frontend design enforces accessibility and performance constraints by satisfying production-grade code quality standards while building distinctive web components and applications.

How do I start building a distinctive web application interface?▼

To start building a distinctive web application interface, describe the desired frontend artifact along with your constraints like framework, accessibility, and performance requirements to generate a production-grade UI.

Related Skills

Explore More Design & Creative Skills→
kkingsbekkingsbe

frontend-design

Create production-grade frontend interfaces in HTML/CSS/JS or framework components.

Community
Advanced
wojonswojons
4

testing-compatibility

Test application compatibility across browsers, devices, and operating systems.

Community
Intermediate
loadinglucianloadinglucian
1

frontend-design

Transform vague frontend requirements into production-ready HTML/CSS/JS components.

Community
Advanced
J03Fr0stJ03Fr0st

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced