frontend-design_skill

Overview

This skill helps create distinctive, production-grade frontend interfaces with a deliberate, non-generic aesthetic. It guides the full workflow: extract design intelligence from references, choose a bold aesthetic direction when building from scratch, and implement meticulously crafted code. The goal is visually striking, usable, and production-ready UI that avoids cookie-cutter AI outputs.

How this skill works

When given screenshots or designs, the skill first extracts concrete design guidelines (colors, typography, spacing, layout, hierarchy) via an ai-multimodal analysis and documents them in a project-design file. Only after extraction does it implement code that uses exact color hexes, typography specs, spacing scales, and layout structure. When building from scratch, it follows a design-thinking process to pick a clear aesthetic direction and then produces polished HTML/CSS/JS or framework components with considered motion, texture, and composition.

When to use it

• You have screenshots or images and need an accurate, production-grade replication or inspired implementation.
• You want a high-design frontend component, page, or small application with a distinctive aesthetic.
• You need code that follows extracted design guidelines (exact colors, fonts, spacing).
• You require non-generic, memorable UI work that prioritizes visual storytelling.
• You need guidance on aesthetic direction before coding (tone, constraints, differentiation).

Best practices

• For image inputs: always run the mandatory design extraction step before writing any code.
• Use CSS variables for colors, spacing, and typographic scales to ensure consistency and easy theming.
• Choose a single, strong aesthetic direction and execute it precisely rather than mixing neutral choices.
• Prefer CSS-first motion for simple micro-interactions; use anime.js for orchestrated page-level animations.
• Document extracted guidelines (colors, fonts, sizes, spacing) so implementation can be verified visually.

Example use cases

• Replicate a marketing hero section from a client screenshot with pixel-accurate colors and typography.
• Build a product card grid with an asymmetrical layout and layered textures inspired by a provided moodboard.
• Create a small dashboard UI with a refined minimal aesthetic and performant CSS-only interactions.
• Generate a landing page using a bold, editorial direction from scratch with distinctive display fonts and layered backgrounds.
• Extract a color and spacing system from an app screenshot and deliver matching React components and theme variables.