skills.rest
tntdev21
tntdev21COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Extract design guidelines from images and implement frontend interfaces.

Updated Nov 24, 2025
Search Tags:#typography#visual-analysis#design-guidelines#frontend-design#asset-generation#ai-multimodal
One-click install
npx skills add https://github.com/tntdev21/3d --skill frontend-design-tntdev21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tntdev21/3d/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/tntdev21/3d --skill frontend-design-tntdev21

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Input Types & Workflows

When User Provides Screenshot/Image/Design Reference

MANDATORY workflow for screenshot/image/design inputs:

  1. Extract Design Guidelines using ./references/design-extraction-overview.md:

    • Analyze screenshot/image with ai-multimodal skill
    • Extract: colors (hex codes), typography (fonts, sizes, weights), spacing scale, layout patterns, visual hierarchy
    • Document findings in project docs/design-guidelines/extracted-design.md
    • See ./references/extraction-prompts.md for comprehensive analysis prompts

  2. Implement Code following extracted guidelines:

    • Use exact colors from extraction (hex codes)
    • Match typography specifications (fonts, sizes, weights, line-heights)
    • Replicate layout structure and spacing system
    • Maintain visual hierarchy and component patterns
    • Preserve aesthetic direction and mood

  3. Verify Quality using ./references/visual-analysis-overview.md:

    • Compare implementation to original screenshot
    • Check color accuracy, spacing consistency, typography matching
    • Ensure all design elements preserved

Important: Do NOT skip to implementation. Extract design guidelines FIRST, then code.

When Building from Scratch (No Screenshot Provided)

Follow "Design Thinking" process below to create original design.

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

  • Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available (Use anime.js for animations: ./references/animejs.md). Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
  • Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
  • Visual Assets: Use ai-multimodal skills to generate the assets and media-processing skill to remove the background of generated assets if needed

Working with Visual Asse

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a production-grade frontend design from a screenshot or design reference?▼

Extract design guidelines first by analyzing the screenshot to identify colors (hex codes), typography, spacing, and layout patterns. Document these in a design guidelines file, then implement HTML/CSS/JS code that matches the extracted specifications exactly, verifying color accuracy and spacing consistency against the original.

Can I use AI to generate visual assets and extract design guidelines from images?▼

Yes. Use ai-multimodal skills to analyze screenshots and extract design guidelines including colors, fonts, sizes, weights, and layout patterns. The Skill includes comprehensive extraction prompts to document findings, and media-processing can remove backgrounds from generated assets.

What makes a frontend design avoid generic AI aesthetics?▼

Choose distinctive, characterful typography paired with cohesive color palettes; use intentional spatial composition with asymmetry and negative space; add motion and micro-interactions strategically; and apply contextual visual details like gradients, textures, and layered transparencies that reinforce a clear aesthetic direction.

How do I ensure my HTML/CSS/JavaScript implementation matches design specifications for color accuracy and responsive behavior?▼

Use CSS variables for color consistency, implement exact hex codes and typography specifications from design extraction, verify layout fidelity and spacing scales against the original, test responsive behavior across breakpoints, and check accessibility conformance before deployment.

Can I build a complete web application or just individual components with this Skill?▼

The Skill handles both. Build individual web components, single pages, or full applications. Whether creating from scratch using design thinking or implementing from screenshots, produce production-grade, functional code with exceptional attention to aesthetic detail and creative choices.

What animation libraries does this Skill support for frontend motion design?▼

For HTML, prioritize CSS-only animations. For React, use Motion library when available. The Skill provides anime.js references for orchestrated page-load animations with staggered reveals, scroll-triggering, and hover states that create high-impact moments.

Related Skills

Explore More Design & Creative Skills→
michsindlingermichsindlinger
1

Design System Extraction Skill

Extract design tokens like colors, typography, and spacing from web URLs or screenshots.

Community
Intermediate
neuron-oneneuron-one
25

screen-coder

Convert UI design screenshots into responsive HTML/CSS code.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

magic-animator

Transform static design assets into animated Lottie, GIF, or MP4 motion graphics.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate