What makes designing-frontend different from generic UI design?

It enforces context-specific aesthetics and a deliberate blueprint from concept to code, with steps to avoid generic patterns.

What should I focus on during Conceptualize?

Identify purpose and user context, choose a bold aesthetic direction, define the one unforgettable element, and note technical constraints (framework, performance, accessibility).

Which tools and techniques support its guidelines?

Use production-grade HTML/CSS/JS (or React/Vue), CSS variables for themes, motion for interactions, and layouts that break grid conventions to create distinctive interfaces.

designing-frontend

Scanned

npx machina-cli add skill Byunk/claude-code-essentials/designing-frontend --openclaw

Files (1)

SKILL.md

2.3 KB

Designing Frontend

Workflow

Conceptualize
- Identify purpose and user context
- Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
- Define the one unforgettable element
- Note technical constraints (framework, performance, accessibility)
Implement
- Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
- Apply aesthetic guidelines below
Verify
- Check visual hierarchy and cohesion
- Test interactions and animations
- Validate accessibility requirements
- Confirm no generic patterns emerged
Iterate
- Refine details based on verification
- Enhance distinctiveness where needed

Aesthetic Guidelines

Typography

Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)
Pair expressive display fonts with refined body fonts

Color & Theme

Build cohesive palettes with CSS variables
Use dominant colors with sharp accents, not evenly-distributed schemes
Avoid clichéd combinations (purple gradients on white)

Motion

Create high-impact moments with orchestrated page loads and staggered reveals
Use CSS animations for HTML; Motion library for React
Add surprising hover states and scroll-triggered effects

Spatial Composition

Break from grid conventions: asymmetry, overlap, diagonal flow
Use generous negative space OR intentional density

Backgrounds & Visual Effects

Layer gradient meshes, noise textures, geometric patterns
Apply contextual effects: layered transparencies, dramatic shadows, decorative borders
Add atmosphere through depth and texture

Implementation Principles

Match complexity to vision: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography
Vary every design: Different fonts, themes, aesthetics for each project
Never converge: Avoid repeated choices (Space Grotesk, common layouts)
Context-specific: Design should feel genuinely crafted for its purpose

Source

git clone https://github.com/Byunk/claude-code-essentials/blob/main/essentials/skills/designing-frontend/SKILL.mdView on GitHub

Overview

Designing Frontend guides you to craft interfaces with memorable aesthetics that shine in production. It emphasizes context-specific design over generic patterns, ensuring components, pages, or apps feel purpose-built and cohesive.

How This Skill Works

It starts with Conceptualize, where you select a bold aesthetic direction and define one unforgettable element while noting technical constraints. Implement translates the concept into production-grade HTML/CSS/JS or framework components, applying typography, color, motion, and spatial guidelines. Verify checks visual hierarchy, cohesion, interactions, accessibility, and absence of generic patterns; Iterate to refine distinctiveness.

When to Use It

Starting a new web component with a bold, distinctive identity.
Designing a page or app that needs a memorable aesthetic beyond templates.
Creating interfaces where non-generic patterns are essential.
Applying strong typography, color systems, and motion to elevate UX.
Prototyping interfaces that break grid norms with asymmetry and depth.

Quick Start

Step 1: Conceptualize purpose, user context, and the one unforgettable element; pick a bold aesthetic and constraints.
Step 2: Implement with production-grade HTML/CSS/JS (or a framework); apply typography, color, motion, and spatial rules.
Step 3: Verify visual hierarchy, interactions, accessibility, and absence of generic patterns; iterate to enhance distinctiveness.

Best Practices

Define a bold aesthetic direction and the one unforgettable element at the outset.
Build cohesive palettes with CSS variables and select dominant colors with sharp accents.
Use motion thoughtfully: orchestrated loads, staggered reveals, hover states, and scroll effects.
Break away from grids: embrace asymmetry, overlap, diagonal flow and varying density.
Keep context-specific design: avoid generic patterns and refuse repeated choices.

Example Use Cases

Brutalist dashboard for a fintech app with bold typography and angular cards.
Luxury fashion brand site with layered shadows, gradients, and decorative borders.
Retro-futuristic portfolio featuring kinetic reveals and diagonal layouts.
E-commerce product page using gradient mesh backgrounds and vivid accents.
Creative studio site with maximalist typography and unique page transitions.

Frequently Asked Questions

Add this skill to your agents