frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Best for UI developersWorks with GitHubLow risk
⌘source
- author
@1weiho- language
- TypeScript
★2.3kstars
154forks
May 5, 2026
✦overview.md
Key Features
- ·Bold aesthetic direction
- ·Avoids generic AI aesthetics
- ·Production-grade code
- ·Attention to detail and creativity
- ·Works for components, pages, apps
Use Cases
- →Building a landing page with a unique visual identity
- →Creating a dashboard that stands out from templates
- →Styling a React component to match a luxury brand
- →Designing a poster for an event with a retro-futuristic look
Best for
- ✓UI developers
- ✓design-focused teams
- ✓brand-conscious projects
Not ideal for
- !rapid prototyping without aesthetics focus
- !minimalist-only projects
FAQs
name
frontend-design
description
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license
Complete terms in LICENSE.txt
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.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
$install
1-click copynpx skills add 1weiho/open-slide --skill frontend-designSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.