skills.rest
ThanhNguyenDat
ThanhNguyenDatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate frontend code with enforced design systems and aesthetic constraints.

Updated Apr 26, 2026
Search Tags:#design#ui#frontend#css#aesthetic#web-development
One-click install
npx skills add https://github.com/ThanhNguyenDat/agent-skills --skill frontend-design-thanhnguyendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ThanhNguyenDat/agent-skills/tree/main/frontend-design
Command: npx skills add https://github.com/ThanhNguyenDat/agent-skills --skill frontend-design-thanhnguyendat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of generic, template-based UI generation by enforcing a rigorous design-engineering process that prioritizes aesthetic intent, technical precision, and user memorability.

Core Features & Use Cases

  • Design System Enforcement: Mandates intentional typography, color stories, and spatial composition to avoid AI-default aesthetics.
  • DFII Scoring: Uses a proprietary Design Feasibility & Impact Index to validate design directions before implementation.
  • Use Case: Use this skill when you need to build a landing page or component that requires a strong, unique brand identity (e.g., editorial brutalism or luxury minimal) rather than a standard SaaS layout.

Quick Start

Use the frontend-design skill to create a landing page for a new luxury watch brand using an editorial aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate frontend code that avoids generic AI layout patterns?▼

A design feasibility and impact index validates design directions before implementation by scoring them. This proprietary mechanism ensures aesthetic intent and technical precision are evaluated early, preventing wasted effort on low-impact user interface designs.

How do I build a landing page with a strong brand identity using web development?▼

Build a landing page with strong brand identity by applying rigorous spatial composition, color stories, and intentional typography. This web development approach enforces aesthetic constraints to produce high-craft, production-ready interfaces like editorial brutalism or luxury minimalism.

Can I use this approach to create unique UI components for a luxury brand?▼

Yes, this approach suits luxury brand interfaces by enforcing intentional design systems and aesthetic constraints. It mandates strict adherence to typography, color, and spatial rules to produce high-impact, production-ready components with unique brand identities.

Does this frontend design method maintain technical accessibility and performance standards?▼

Yes, this frontend design method maintains technical accessibility and performance standards while enforcing intentional design systems and aesthetic constraints. It ensures production-ready interfaces meet rigorous technical precision without sacrificing user memorability.

What is the best way to enforce intentional typography and color stories in UI generation?▼

The best way to enforce intentional typography and color stories in UI generation is through a rigorous design-engineering process. This mandates strict adherence to spatial composition and aesthetic rules, avoiding AI-default aesthetics to ensure high-craft frontend code.

Related Skills

Explore More Design & Creative Skills→
kazdenckazdenc
42

design-brief

Explore codebases and ask user-centric questions to synthesize design context.

Community
Intermediate
arvindbattulaarvindbattula

performance

Measure real user metrics to identify performance bottlenecks across pages, APIs, and bundles.

Community
Advanced
synqingsynqing
1

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Community
Advanced
SirPedrSirPedr

bencium-innovative-ux-designer

Design distinctive frontend interfaces with unique visual expression and production-grade code.

Community
Advanced