skills.rest
lgtm-hq
lgtm-hqOFFICIAL
Explore all skills by this author →
GitHub

design

Create styled webpage layouts from specified aesthetic themes using HTML, CSS, and JS.

Updated Aug 23, 2026
Search Tags:#web development#frontend#CSS#animations#creative#UI design#visual aesthetics
One-click install
npx skills add https://github.com/lgtm-hq/claude-skills --skill design-lgtm-hq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/lgtm-hq/claude-skills/tree/main/skills/design
Command: npx skills add https://github.com/lgtm-hq/claude-skills --skill design-lgtm-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Crafting unique, high-quality frontend designs that stand out and resist generic aesthetics.

Core Features & Use Cases

  • Design Conceptualization: Helps define and commit to a strong aesthetic direction for web interfaces.
  • Implementation Guidance: Provides detailed instructions and principles for producing visually compelling code in HTML, CSS, JS, React, Vue, etc.
  • Use Case: When designing a landing page requiring a vibrant, maximalist style, follow the guidelines to produce an intricate, animated UI that captures attention.

Quick Start

Use the design skill to generate a complete, styled webpage layout based on a specified aesthetic theme.

Frequently Asked Questions about design

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

FAQPage Schema
How do I create a web interface with a bold aesthetic that stands out?▼

You can conceptualize a strong aesthetic direction and receive detailed implementation guidance for HTML, CSS, and JS to produce visually compelling, distinctive frontend interfaces that resist generic aesthetics.

Can I use this approach to build animated landing pages in React or Vue?▼

Yes, this approach provides detailed instructions and visual storytelling principles for producing animated UI layouts in frameworks like React and Vue, ensuring high design quality for vibrant digital experiences.

What is the best way to define a visual style for a custom frontend design?▼

Design conceptualization helps define and commit to a strong aesthetic direction for web interfaces, ensuring your custom frontend design follows a cohesive visual style rather than generic templates.

Do I need advanced CSS knowledge to produce visually compelling web UI?▼

Yes, an advanced understanding of CSS, animations, and visual storytelling techniques is required to effectively implement the intricate, polished frontend interfaces and distinctive aesthetic visions for web UI.

How do I generate a complete webpage layout based on a specific aesthetic theme?▼

You provide a specific aesthetic theme to receive guidelines that translate your visual direction into detailed principles and instructions for crafting visually compelling code across your chosen web stack.

Related Skills

Explore More Design & Creative Skills→
vs4vijayvs4vijay

css-animations

Define and control CSS keyframe animations for HyperFrames with precise timing.

Community
Basic
MerkyorLynnMerkyorLynn
37

frontend-design

Generate production-grade frontend interface code with cohesive typography and color variables.

Community
Advanced
mustafazeydanimustafazeydani

frontend-design

Create distinctive web interfaces using HTML, CSS, and JavaScript.

Community
Advanced
BrunoAlpezdevBrunoAlpezdev

frontend-design

Creates distinctive, production-ready frontend interfaces with HTML/CSS/JS or React, including typography, color themes, motion, and spatial composition.

Community
Intermediate