frontend-design

Generates distinctive visual design direction and code for web UI pages.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/bond23869/skills --skill frontend-design-bond23869
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bond23869/skills/tree/main/frontend-design/1.1.0/skills/frontend-design
Command: npx skills add https://github.com/bond23869/skills --skill frontend-design-bond23869

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to converge on templated, generic looks that lack a distinctive point of view. This Skill guides the creation of intentional, subject-grounded visual designs with deliberate choices in palette, typography, layout, and motion. ## Core Features & Use Cases - Design Planning: Produces a compact token system covering color (4-6 named hex values), typography (display, body, and utility faces), layout concepts with ASCII wireframes, and a single signature element. - Self-Critique Workflow: Reviews the design plan against the brief to eliminate generic defaults before writing any code, then critiques again during the build. - Copywriting Guidance: Applies interface writing principles covering active voice, error states, empty states, and consistent vocabulary. - Use Case: When asked to build a landing page for a new product, use this Skill to first define a distinctive visual direction grounded in the product's subject matter, then implement the page following that plan exactly. ## Quick Start Design and build a landing page for my product with a distinctive visual identity that avoids generic template looks.

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 subject's own world, materials, and vernacular rather than default patterns. Plan a token system with named colors, deliberate type pairings, and one signature element, then critique the plan against common AI design defaults before coding.

How to choose typography 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 typography itself becomes a memorable part of the design.

What are common AI-generated design patterns to avoid?

Three overused looks are warm cream backgrounds with serif display type and terracotta accents, near-black backgrounds with acid-green accents, and broadsheet layouts with hairline rules. These are legitimate when the brief requests them, but should not be defaults when the direction is open.

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

How do I write better UI copy for interfaces?

Write from the end user's perspective using active voice and plain verbs, naming things by what people control rather than how the system is built. Keep actions consistent across flows, treat errors and empty states as directional guidance, and match tone to the brand.