Frontend Design Pro
Ship landing pages and app shells that look agency-grade, with real stock URLs or copy-paste image prompts instead of broken AI image links.
Overview
frontend-design-pro is an agent skill most often used in Build (also Validate landing, Launch distribution) that produces agency-quality frontend interfaces with matched real photos or image prompts.
Install
npx skills add https://github.com/binjuhor/shadcn-lar --skill frontend-design-proWhat is this skill?
- Commits to one bold aesthetic direction from a style matrix (minimal Swiss, neumorphism, brutalist, glassmorphism, and m
- Pairs production-ready UI work with Unsplash/Pexels direct links or custom image-generation prompts for heroes and illus
- Targets zero generic AI-slop patterns and no fake image URLs
- Positions every deliverable as $50k+ agency-level creative frontend engineering
- Visual-director mindset alongside component-level implementation
- Style matrix with multiple committed aesthetic categories (minimal Swiss, neumorphism, and additional directions in SKIL
Adoption & trust: 712 installs on skills.sh; 88 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Agent-built UIs often look generic, mix conflicting styles, and ship broken or placeholder image URLs that undermine trust on launch day.
Who is it for?
Solo builders shipping a landing page, dashboard shell, or marketing site who want a single bold visual identity and legitimate imagery in one pass.
Skip if: Teams that already have an approved design system and Figma specs to implement verbatim, or backend-only work with no customer-facing UI.
When should I use this skill?
You are building or refreshing customer-facing frontend pages and need both layout or component work and trustworthy hero or background imagery.
What do I get? / Deliverables
You leave with a cohesive aesthetic, production-ready frontend structure, and vetted hero or background assets you can paste into your repo or design handoff.
- Cohesive UI implementation guidance
- Matched stock image URLs or image-generation prompts
- Documented aesthetic direction for the page
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary value is implementing polished interfaces during product build, but the same workflow applies when prototyping or polishing marketing surfaces. Frontend implementation is where aesthetic direction, layout, typography, and hero imagery are decided and coded.
Where it fits
Shape a validation landing with a single brutalist or minimal Swiss lane so early signups trust the product before you code the full app.
Implement the main app shell and marketing sections with aligned typography, spacing, and motion tied to one committed style row.
Refresh launch assets and hero imagery with real Unsplash or Pexels URLs before sharing on Product Hunt or social channels.
Extend blog or docs chrome to match the product’s established aesthetic without drifting into generic AI layout patterns.
How it compares
Use for creative direction plus asset sourcing, not as a component library reference like DaisyUI or a chart-type picker like data-visualization.
Common Questions / FAQ
Who is frontend-design-pro for?
Indie developers and small teams using Claude Code, Cursor, or Codex who own both design direction and frontend implementation and cannot afford a full-time product designer.
When should I use frontend-design-pro?
In Build when scaffolding app or marketing UI; in Validate when you need a prototype landing that looks credible; in Launch when refreshing hero sections and brand-forward pages before distribution pushes.
Is frontend-design-pro safe to install?
Review the Security Audits panel on this Prism page for install risk and permissions; the skill focuses on design guidance and external stock links rather than shell or secret access.
SKILL.md
READMESKILL.md - Frontend Design Pro
You are a world-class creative frontend engineer AND visual director. Every interface you build must feel like a $50k+ agency project. ## 1. Choose One Bold Aesthetic Direction (commit 100%) | Style Category | Core Keywords (copy-paste ready) | Color Palette Ideas | Signature Effects & Details | |-----------------------------|----------------------------------------------------------------------|----------------------------------------------------------|--------------------------------------------------------------------------------------------------| | Minimalism & Swiss Style | clean, swiss, grid-based, generous whitespace, typography-first | Monochrome + one bold accent, beige/gray neutrals | Razor-sharp hierarchy, subtle hover lifts, micro-animations, perfect alignment | | Neumorphism | soft ui, embossed, concave/convex, subtle depth, monochromatic | Single pastel + light/dark variations | Multi-layer soft shadows, press/release animations, no hard borders | | Glassmorphism | frosted glass, translucent, vibrant backdrop, blur, layered | Aurora/sunset backgrounds + semi-transparent whites | backdrop-filter: blur(), glowing borders, light reflections, floating layers | | Brutalism | raw, unpolished, asymmetric, high contrast, intentionally ugly | Harsh primaries, black/white, occasional neon | Sharp corners, huge bold text, exposed grid, "broken" aesthetic | | Claymorphism | clay, chunky 3D, toy-like, bubbly, double shadows, pastel | Candy pastels, soft gradients | Inner + outer shadows, squishy press effects, oversized rounded elements | | Aurora / Mesh Gradient | aurora, northern lights, mesh gradient, luminous, flowing | Teal → purple → pink smooth blends | Animated/static CSS or SVG mesh gradients, subtle color breathing, layered translucency | | Retro-Futurism / Cyberpunk | vaporwave, 80s sci-fi, crt scanlines, neon glow, glitch, chrome | Neon cyan/magenta on deep black, chrome accents | Scanlines, chromatic aberration, glitch transitions, long glowing shadows | | 3D Hyperrealism | realistic textures, skeuomorphic, metallic, WebGL, tactile | Rich metallics, deep gradients | Three.js / CSS 3D, physics-based motion, realistic lighting & reflections | | Vibrant Block / Maximalist | bold blocks, duotone, high contrast, geometric, energetic | Complementary/triadic brights, neon on dark | Large colorful sections, scroll-snap, dramatic hover scales, animated patterns | | Dark OLED Luxury | deep black, oled-optimized, subtle glow, premium, cinematic | #000000 + vibrant accents (emerald, amber, electric blue)| Minimal glows, velvet textures, cinematic entrances, reduced-motion support | | Organic / Biomorphic | fluid shapes, blobs, curved, nature-inspired, hand-drawn | Earthy or muted pastels | SVG morphing, gooey effects, irregular borders, gentle spring animations | ## 2. Non-Negotiable Frontend Rules - NEVER use Inter, Roboto, Arial, system-ui, or any default AI font - Use characterful font