Frontend Design Standards

Expert-level design guidance for creating memorable, production-grade interfaces.

Core Design Principles

Intentionality Over Trends

Every design decision must be purposeful:

• Why this color? → Brand meaning, accessibility, contrast

• Why this font? → Readability, personality, performance

• Why this animation? → User feedback, spatial understanding

Distinctive Over Generic

Avoid "AI slop" aesthetics:

• ❌ Default purple gradients, Inter everywhere, card-with-shadow templates

• ✅ Committed aesthetic vision, unique typography pairs, contextual layouts

Technical Excellence

High-quality design = high-quality code:

• Semantic HTML first

• CSS custom properties for theming

• Performance-minded animations

• Accessibility as foundation

Tools

Tool Purpose Rule

generate_image

UI icons, avatars, backgrounds, illustrations Follow .agent/rules/nano-banana.md

Asset Creation Capability

The designer skill includes a specialized workflow for creating high-quality, transparent assets (icons, avatars, game sprites) using the generate_image tool and a custom background removal script.

Workflow

Prompt Engineering:

• Follow the formula in .agent/rules/nano-banana.md : [Core Subject]

• [Visual Style]
• [Lighting/Color]
• [Technical/Quality specs] .

• Ensure the visual style is compatible with extraction (e.g., "clean background", "minimalist").

Generation:

• Use generate_image to create the initial asset.

• Save it with a descriptive name (e.g., hero_robot_raw ).

Transparency Processing:

• Run the helper script to remove the background: python3 .agent/skills/designer/scripts/remove_background.py <input_path> <output_path>

• Parameters:

• <input_path> : Path to the image file you want to process.

• <output_path> : File path where the result should be saved.

Example

To create a "Blue Potion Icon":

• Generate: "Blue glass potion bottle, round shape, cork stopper, flat vector style, soft blue lighting, white background, detailed 4k" -> leads to blue_potion_raw.png

• Process: python3 .agent/skills/designer/scripts/remove_background.py blue_potion_raw.png blue_potion_final.png

Integration

Works with frontend-developer skill for implementation handoff:

• Designer Role: Creates visual designs, tokens, and Motion Specs.

• Frontend Role: Writes the actual CSS/JS code based on these specs.

References

Load references based on task context:

Reference Path Purpose

Branding references/branding.md

Creating logos, visual identity, brand guidelines

Color Theory references/color-theory.md

Choosing palettes, dark mode, semantic colors

Typography references/typography.md

Font pairing, scales, text rendering

Layout references/layout.md

Grids, spacing, responsive design

Motion references/motion.md

Micro-interactions, transitions, performance

Accessibility references/accessibility.md

WCAG compliance, keyboard nav, screen readers

Design Systems references/design-systems.md

Design tokens, component patterns, documentation

Trends references/trends.md

2024-2025 trends, emerging CSS features

Creation references/creation.md

New components, pages, creative direction

Review references/review.md

Code review, compliance checks, quality audit

Concepts

Distinct visual aesthetics to drive design direction:

Concept Path Description

Apple Glassmorphism concepts/apple-glass.md

Premium, translucent depth (VisionOS Style)

Neo-Brutalism concepts/neo-brutalism.md

Raw, high-contrast, bold borders

Claymorphism concepts/claymorphism.md

Soft 3D, inflated shapes, tactile feel

Aurora Gradients concepts/aurora-gradients.md

Ethereal, moving blurred color meshes

Bento Grids concepts/bento-grids.md

Modular, grid-based content layout

Templates

Template Path Purpose

Motion Spec templates/design-motion-spec.md

Motion Specification - animation timeline, triggers, easing. Use for handoff animation specs to frontend