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

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

1. •

   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").
2. •

   Generation:

   • •Use generate_image to create the initial asset.
   • •Save it with a descriptive name (e.g., hero_robot_raw).
3. •

   Transparency Processing:

   • •Run the helper script to remove the background:
     bash

     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":

1. •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
2. •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:

Concepts

Distinct visual aesthetics to drive design direction:

Templates