Frontend Design
This is for when you want Claude to design interfaces with actual aesthetic opinions instead of defaulting to generic SaaS layouts. It forces an explicit design direction (brutalist, editorial, retro-futurist, etc.) before writing code, scores feasibility with a custom index, and bans the usual suspects like Inter, Roboto, and purple gradients. The output includes working code plus a design system with fonts, colors, and motion principles. It's opinionated about what makes UI memorable versus template-like. Use it when you're building something that needs to look like it was designed by a human with taste, not assembled from component libraries. The differentiation anchor requirement is smart: if you removed the logo, how would someone recognize this interface?
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 16
- skills.sh installs
- 1.9K
- GitHub stars
- 43.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add sickn33/antigravity-awesome-skills --skill frontend-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Frontend Design
Modified by AAS maintainers on 2026-09-05: clarified design constraints, subjective scoring and verification. The bundled Apache-2.0 license is preserved.
You are a frontend designer-engineer, not a layout generator.
Your goal is to create memorable, high-craft interfaces that:
- Avoid generic “AI UI” patterns
- Express a clear aesthetic point of view
- Implement the requested interactions and report what was actually verified
- Translate design intent directly into code
This skill prioritizes intentional design systems, not default frameworks.
1. Core Design Mandate
For new visual directions, consider all four; existing product constraints take precedence:
-
Intentional Aesthetic Direction A named, explicit design stance (e.g. editorial brutalism, luxury minimal, retro-futurist, industrial utilitarian).
-
Technical Correctness Real, working HTML/CSS/JS or framework code — not mockups.
-
Visual Memorability A clear visual anchor; memorability is a hypothesis until tested with users.
-
Cohesive Restraint No random decoration. Every flourish must serve the aesthetic thesis.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sickn33/antigravity-awesome-skills
- Categories
- Frontend Development, Design & UI/UX
- First seen
- May 16, 2026
More from sickn33/antigravity-awesome-skills
All 708- Senior Architect1.9K
- Cc Skill Security Review1.8K
- Senior Fullstack1.8K
- Agent Memory Systems1.7K
- Database Design1.7K
- Scroll Experience1.6K
- Shopify Development1.6K
- Youtube Summarizer1.6K
- App Store Optimization1.5K
- Backend Dev Guidelines1.5K
- Bash Linux1.5K
- Bullmq Specialist1.5K
- Cc Skill Security Review1.5K
- Vercel Deployment1.5K
- Bash Scripting1.4K
- Browser Extension Builder1.4K
- Documentation Templates1.4K
- Prompt Engineer1.4K
- Aws Serverless1.3K
- Backend Architect1.3K
- Conversation Memory1.3K
- Copywriting1.3K
- Discord Bot Architect1.3K
- Firebase1.3K
Recommended
More Frontend Development
imagegen-frontend-mobilenexu-io/open-designElite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile product1.8Kskills.sh installsimagegen-frontend-webnexu-io/open-designElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal1.8Kskills.sh installs
unit-test-vue-piniagithub/awesome-copilotWrite and review unit tests for Vue 3 + TypeScript + Vitest + Pinia codebases. Use when creating or updating tests for components, composables, and stores; mock1.8Kskills.sh installs
react-performance-optimizationnickcrew/claude-ctx-pluginreact performance optimization1.7Kskills.sh installs
ui-designerdaymade/claude-code-skillsExtract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to c1.7Kskills.sh installs
frontend-designmager/frontend-designFrontend design skill that generates, restyles, and guides UI development in mager's actual design taste — concept-led interfaces that feel authored, tactile, e1.7Kskills.sh installs