skills.rest
hossain-khan
hossain-khanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Plan and produce production-grade frontend interfaces with token-based design systems.

Updated Mar 13, 2026
Search Tags:#typography#design#ui#accessibility#frontend#color#component-library
One-click install
npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill frontend-design-hossain-khan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/hossain-khan/hk-vision-slideshow/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill frontend-design-hossain-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality, helping teams avoid generic AI aesthetics and produce polished, ready-to-ship UI deliverables.

Core Features & Use Cases

  • Guides the creation of production-grade frontend interfaces with a strong aesthetic direction.
  • Provides design guidance across typography, color, layout, motion, and interaction for web components, pages, artifacts, posters, and applications.
  • Delivers production-ready guidance and examples that translate design decisions into implementable code and assets.

Quick Start

Tell me your target audience, preferred aesthetic, and deliverables, and I will generate a complete frontend design blueprint.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend interfaces that avoid generic AI aesthetics?▼

Crafting production-grade frontend interfaces requires bold aesthetic direction and a token-based design system. This approach guides typography, color, and layout decisions to ensure distinctive, polished outputs.

What is a token-based design system and how does it improve web component design?▼

A token-based design system standardizes typography and color variables. It improves web component design by translating bold aesthetic decisions into consistent, implementable, and production-ready code.

How do I plan typography and color layouts for accessible web applications?▼

Plan accessible web applications by applying a rigorous design workflow that includes accessibility considerations alongside bold aesthetic direction and token-based design systems for typography and color.

Can I use this approach to design posters and static artifacts, not just web pages?▼

Yes, you can design posters and static artifacts. The workflow provides design guidance across typography, color, and layout for web components, pages, artifacts, posters, and applications.

What's the best way to translate frontend design decisions into production-ready code?▼

Translate frontend design decisions into production-ready code using a token-based design system. It provides production-ready guidance and examples that map aesthetic choices directly to implementable assets.

Related Skills

Explore More Design & Creative Skills→
nielpattinnielpattin

polish

Correct alignment, spacing, consistency, and micro-details in final deliverables.

Community
Advanced
EdgeHuntEdgeHunt

ck:frontend-design

Translate design tokens and guidelines into functional frontend code.

Official
Intermediate
wjyugutouwjyugutou

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate
mklozmkloz

frontend-design

Create custom frontend interfaces with a bold aesthetic direction.

Community
Advanced