frontend-design

Generates distinctive visual design direction for web UI including palette, typography, and layout.

Updated Nov 29, 2025
One-click install
npx skills add https://github.com/achyutkneupane/Blog-Kit --skill frontend-design-achyutkneupane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/achyutkneupane/Blog-Kit/tree/main/.ai/skills/frontend-design
Command: npx skills add https://github.com/achyutkneupane/Blog-Kit --skill frontend-design-achyutkneupane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to cluster around a few templated looks, making pages feel generic and interchangeable. This Skill guides the creation of distinctive, intentional frontend designs grounded in the specific subject and brief rather than default patterns. ## Core Features & Use Cases - Design Planning Workflow: Produces a compact token system covering color palette (4-6 named hex values), typography roles, layout concepts with ASCII wireframes, and a single signature element before any code is written. - Self-Critique Process: Reviews the design plan against the brief to detect generic defaults, revises weak choices, and critiques the built result for restraint and cohesion. - UX Writing Guidance: Applies intentional copywriting rules for labels, errors, empty states, and calls to action so interface text supports navigation. - Use Case: When asked to build a landing page for a new product, use this Skill to first define a subject-specific palette, type pairing, and signature element, then implement the page following that plan exactly. ## Quick Start Design a landing page for my product using the frontend-design skill, starting with a design plan before writing any code.

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 choice in the specific subject of the brief rather than default patterns. Define a named color palette, deliberate type pairing, and one signature element before coding, then critique the plan for anything that reads as a templated default.

What is a design token system for a web page?▼

A design token system is a compact plan covering color (4-6 named hex values), typography (display, body, and utility faces), layout concept, and a signature element. It is created before writing code so every CSS decision derives from the plan.

How should typography be chosen for a distinctive website?▼

Pair a characterful display face used with restraint with a complementary body face, avoiding the same families used on every project. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes memorable.

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 better than scattered effects, and excess animation can make a design feel AI-generated.

Why do AI-generated designs tend to look similar?▼

They cluster around a few default looks, such as cream backgrounds with serif display type, near-black backgrounds with acid accents, or broadsheet newspaper layouts. These are defaults rather than choices, so distinctive results require deliberate, brief-specific decisions.