ia-frontend-design
CommunityDesign frontends that feel intentional.
Design & Creative#design systems#frontend design#react patterns#interactive states#ui aesthetics#nextjs app router#performance guardrails
Authoriliaal
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents AI-generated UIs from looking generic by enforcing a disciplined, context-aware visual design process that produces cohesive, production-ready frontend layouts.
Core Features & Use Cases
- Context Detection & Design Matching: Assess existing tokens, component libraries, CSS frameworks, typography, and motion patterns, then extend the existing system instead of imposing new aesthetics.
- Design Philosophy First (for full interfaces): Write a three-sentence intent/signature/constraint philosophy to lock identity before any implementation begins.
- Premium UI Guardrails: Enforce interactive states (loading, empty, error, tactile press), mobile collapse rules, performance constraints, and Next.js Server/Client component safety.
- AI Aesthetic De-Templating: Actively avoid banned AI design patterns (common gradients, centered card grids, generic copy, etc.) and require design variance parameters to reduce convergence.
Quick Start
Ask the AI to use ia-frontend-design to build a landing page with a distinctive hero and pricing section that matches the project’s existing Tailwind/CSS setup.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ia-frontend-design Download link: https://github.com/iliaal/whetstone/archive/main.zip#ia-frontend-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.