skills.rest
ldk-hub
ldk-hubCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with coherent design systems and accessible code.

Updated Apr 25, 2026
Search Tags:#typography#ui#frontend#color#design-system#visual-design#design-led
One-click install
npx skills add https://github.com/ldk-hub/broke-shopping --skill frontend-design-ldk-hub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ldk-hub/broke-shopping/tree/main/.agent/.agents/skills/frontend-design
Command: npx skills add https://github.com/ldk-hub/broke-shopping --skill frontend-design-ldk-hub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Brings clarity and coherence to frontend UI by ensuring visual direction and design systems are prioritized alongside code quality.

Core Features & Use Cases

  • Visual Direction Establishment: Define a coherent look and feel for dashboards, landing pages, or app shells.
  • Design System Implementation: Build and apply typography, color, spacing, and motion guidelines across components.
  • Real-World Translation: Convert product concepts into concrete UI directions that can be implemented in code.

Quick Start

Describe the desired frontend direction and provide any reference assets to begin implementing a design-led UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a coherent visual direction for a frontend UI?▼

To establish a coherent visual direction for a frontend UI, define a distinctive look and feel by systematically applying typography, color, spacing, and motion guidelines across all components. This ensures clarity and coherence alongside code quality.

What is the best way to build a design system for a web app dashboard?▼

Building a design system for a web app dashboard involves creating production-grade interfaces with clear typography, layout, and motion guidelines. It translates product concepts into concrete, accessible UI directions ready for code implementation.

Can I use this approach for landing pages and app shells, or only full applications?▼

Yes, you can apply this design-led approach to landing pages, app shells, and UI components. It satisfies requirements for establishing a coherent design system and production-ready, accessible code across various frontend interface types.

How do I convert product concepts into production-ready, accessible UI code?▼

To convert product concepts into production-ready, accessible UI code, describe the desired frontend direction and provide reference assets. This implements a design-led UI that prioritizes visual identity and system coherence.

Does frontend design require specific frameworks or dependencies?▼

No specific frameworks or dependencies are required. The focus is on implementing a design system with typography, color, spacing, and motion guidelines to create a distinctive visual direction for accessible frontend interfaces.

Related Skills

Explore More Design & Creative Skills→
gvkhoslagvkhosla
8

design-direction-setter

Generate a design-brief.md with typography, color palette, and visual tone.

Community
Intermediate
datamonsterrdatamonsterr

frontend-design

Generate HTML/CSS/JS frontend interfaces from aesthetic direction and technical constraints.

Community
Advanced
MrlykMrlyk

frontend-design

Generate production-grade frontend UI components from user requirements.

Community
Advanced
mrgizmo212mrgizmo212

frontend-design

Generate frontend interfaces with specified visual directions and design aesthetics.

Community
Advanced