frontend-design

Generates distinctive visual design direction and frontend code for web UI projects.

Updated Jun 12, 2026
One-click install
npx skills add https://github.com/DotNetVibeCoderz/Vibe_Startup --skill frontend-design-dotnetvibecoderz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/DotNetVibeCoderz/Vibe_Startup/tree/main/WashUp/.claude/skills/frontend-design
Command: npx skills add https://github.com/DotNetVibeCoderz/Vibe_Startup --skill frontend-design-dotnetvibecoderz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces tend to converge on generic, templated looks—cream backgrounds with serif headlines, dark themes with acid accents, or broadsheet layouts—regardless of the subject. This Skill guides the creation of intentional, subject-specific visual design so each page has a distinctive identity rather than a default aesthetic. ## Core Features & Use Cases - Design Planning Workflow: Produces a compact token system covering color palette (4-6 named hex values), typography pairings, 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, then critiques the built result again after implementation. - Copywriting Guidance: Applies interface writing principles—active voice, plain verbs, consistent action names, and purposeful error and empty states—so copy matches the design's intentionality. - Use Case: When asked to build a landing page for a new product, use this Skill to first derive a palette, type system, and signature element from the product's own world, then implement a responsive page that avoids recognizable AI-generated design patterns. ## Quick Start Design and build a landing page for my product with a distinctive visual identity that avoids generic template aesthetics.

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 design look less generic?▼

Ground every design choice in the subject's own world—its materials, vocabulary, and artifacts—rather than reaching for default palettes. Plan a token system of named colors, deliberate type pairings, and one signature element before writing any code.

How to choose typography for a web page design?▼

Pair a characterful display face used with restraint against 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 typography itself becomes memorable.

What are common AI-generated design patterns to avoid?▼

Three overused looks are cream backgrounds with serif display type and terracotta accents, near-black backgrounds with acid-green accents, and broadsheet layouts with hairline rules. These are valid only when the brief specifically calls for them.

When should I use animation 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 lands better than scattered effects, and excess animation often signals AI-generated work.

Why do my CSS styles cancel each other out?▼

Conflicting selector specificity is the usual cause, especially when type-based selectors like .section collide with element-based selectors like .cta on padding and margins. Structure selectors carefully so section spacing rules do not override each other.