Frontend Design
Ship landing pages, dashboards, and app shells with a deliberate visual direction instead of generic AI-looking UI.
Overview
Frontend Design is an agent skill most often used in Build (also Validate) that guides production-grade web UI with a committed visual direction, typography, and motion—not only working code.
Install
npx skills add https://github.com/affaan-m/everything-claude-code --skill frontend-designWhat is this skill?
- 9-step design workflow from framing purpose through visual system to implementation
- Commits to one aesthetic direction (minimal, editorial, industrial, luxury, playful, geometric, retro-futurist, soft org
- Defines type hierarchy, color variables, spacing rhythm, layout logic, and motion rules before coding
- Targets product pages, dashboards, app shells, and components where look and feel matter as much as correctness
- Originates from Everything Claude Code (ECC) for agent-driven frontend builds
Adoption & trust: 1.8k installs on skills.sh; 210k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can ship working React or HTML fast, but the result looks interchangeable and forgettable because no one locked a visual system first.
Who is it for?
Solo builders creating or refreshing marketing sites, SaaS dashboards, or app shells where brand and layout quality are part of the MVP.
Skip if: Teams that only need bug fixes, API wiring, or strict design-system compliance from an existing Figma spec with no creative direction.
When should I use this skill?
User asks to build web components, pages, or applications where visual direction matters as much as code quality.
What do I get? / Deliverables
You leave with a framed interface, a coherent visual system, and implementation guidance so the shipped surface feels designed and memorable.
- Visual direction brief
- Token-level type/color/spacing/motion rules
- Implemented frontend surfaces aligned to the chosen aesthetic
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill drives implementation of components, pages, and visual systems in code. Subphase frontend matches web surfaces, typography, motion, and layout execution rather than backend or PM work.
Where it fits
Translate a positioning concept into a landing page with a single bold aesthetic before you commit to the full build.
Implement an app shell and component library that share one type scale, color variables, and spacing rhythm.
Refresh launch assets and embed pages so the public face matches the product’s emotional tone.
How it compares
Use instead of asking the agent for generic responsive components without a stated aesthetic or hierarchy plan.
Common Questions / FAQ
Who is frontend-design for?
Indie and solo builders using Claude Code or similar agents who own both implementation and visual direction for web products.
When should I use frontend-design?
Use it when building a landing page or dashboard from scratch, upgrading a bland UI, or when typography, composition, and motion matter—especially in Validate for landing prototypes and in Build for full app surfaces.
Is frontend-design safe to install?
Review the Security Audits panel on this Prism page for the parent package; the skill itself is procedural design guidance and does not require special permissions beyond normal agent filesystem access.
SKILL.md
READMESKILL.md - Frontend Design
# Frontend Design Use this when the task is not just "make it work" but "make it look designed." This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI. ## When To Use - building a landing page, dashboard, or app surface from scratch - upgrading a bland interface into something intentional and memorable - translating a product concept into a concrete visual direction - implementing a frontend where typography, composition, and motion matter ## Core Principle Pick a direction and commit to it. Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices. ## Design Workflow ### 1. Frame the interface first Before coding, settle: - purpose - audience - emotional tone - visual direction - one thing the user should remember Possible directions: - brutally minimal - editorial - industrial - luxury - playful - geometric - retro-futurist - soft and organic - maximalist Do not mix directions casually. Choose one and execute it cleanly. ### 2. Build the visual system Define: - type hierarchy - color variables - spacing rhythm - layout logic - motion rules - surface / border / shadow treatment Use CSS variables or the project's token system so the interface stays coherent as it grows. ### 3. Compose with intention Prefer: - asymmetry when it sharpens hierarchy - overlap when it creates depth - strong whitespace when it clarifies focus - dense layouts only when the product benefits from density Avoid defaulting to a symmetrical card grid unless it is clearly the right fit. ### 4. Make motion meaningful Use animation to: - reveal hierarchy - stage information - reinforce user action - create one or two memorable moments Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects. ## Strong Defaults ### Typography - pick fonts with character - pair a distinctive display face with a readable body face when appropriate - avoid generic defaults when the page is design-led ### Color - commit to a clear palette - one dominant field with selective accents usually works better than evenly weighted rainbow palettes - avoid cliché purple-gradient-on-white unless the product genuinely calls for it ### Background Use atmosphere: - gradients - meshes - textures - subtle noise - patterns - layered transparency Flat empty backgrounds are rarely the best answer for a product-facing page. ### Layout - break the grid when the composition benefits from it - use diagonals, offsets, and grouping intentionally - keep reading flow obvious even when the layout is unconventional ## Anti-Patterns Never default to: - interchangeable SaaS hero sections - generic card piles with no hierarchy - random accent colors without a system - placeholder-feeling typography - motion that exists only because animation was easy to add ## Execution Rules - preserve the established design system when working inside an existing product - match technical complexity to the visual idea - keep accessibility and responsiveness intact - frontends should feel deliberate on desktop and mobile ## Quality Gate Before delivering: - the interface has a clear visual point of view - typography and spacing feel intentional - color and motion support the product instead of decorating it randomly - the result does not read like generic AI UI - the implementation is production-grade, not just visually interesting