frontend-design

Guides creation of distinctive, non-templated visual designs for web UI projects.

Updated Jul 26, 2026
One-click install
npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill frontend-design-dhruv-ghanchi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Dhruv-Ghanchi/Portfolio-Webiste/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill frontend-design-dhruv-ghanchi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to cluster around a few generic looks, producing pages that feel templated and interchangeable. This Skill provides a disciplined design methodology that grounds every palette, typography, and layout choice in the specific subject of the brief. ## Core Features & Use Cases - Subject-Grounded Design Direction: Pins down the product, audience, and page purpose before designing, deriving visual choices from the subject's own world and materials. - Structured Two-Pass Process: Brainstorms a compact token system (color, type, layout, signature element), critiques it against generic defaults, then builds only after the plan is confirmed distinctive. - Copy and Restraint Guidance: Covers interface writing principles, deliberate motion use, and self-critique practices like spending boldness on one signature element. - Use Case: When asked to build a landing page for a new product, use this Skill to produce a design with an intentional type pairing, a justified palette, and one memorable signature element instead of a default hero-with-gradient layout. ## Quick Start Use the frontend-design skill to design a landing page for my project with a distinctive visual identity.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated web designs look less generic?

Ground every design choice in the specific subject of the brief rather than reaching for default patterns. Define a compact token system with named colors, deliberate type pairings, and one signature element, then critique the plan against common AI design defaults before building.

What is the process for planning a distinctive page design?

Work in two passes: first brainstorm a design plan covering color, typography, layout, and a signature element, then review it against the brief to remove anything that reads as a generic default. Only write code after the revised plan is confirmed specific to the brief.

How should typography be chosen for a web page design?

Pair a characterful display face used with restraint with a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes a memorable part of the design.

When should animation be used in web design?

Use animation only where it serves the subject, such as a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment usually lands harder than scattered effects, and excess animation can make a design feel AI-generated.

What are common AI-generated design defaults to avoid?

Three overused looks are a warm cream background with serif display and terracotta accent, a near-black background with a single acid accent, and a broadsheet layout with hairline rules. These are legitimate when the brief demands them, but should not be the automatic choice for open briefs.