Apply named aesthetic philosophies to frontend UI builds and critiques.
npx skills add https://github.com/hschne/pi-stuff --skill design-principles-hschne
Please help me install this Agent Skill. Skill: design-principles Source: https://github.com/hschne/pi-stuff/tree/main/skills/design-principles Command: npx skills add https://github.com/hschne/pi-stuff --skill design-principles-hschne
This Skill eliminates the common issue of generic, indistinguishable AI-generated frontend interfaces by guiding users to apply intentional, named aesthetic philosophies for unique, production-grade UI builds and critiques.
Use the design-principles skill to build a hero section for a Japanese minimalist e-commerce product page, following the Ma aesthetic philosophy guidelines for typography, spacing, and motion.
High-intent search queries and answers about installing and using this skill.
To avoid generic AI aesthetics in frontend UI components, apply named aesthetic philosophies like Swiss Typographic or Japanese Minimalism to enforce specific rules for typography, color, and layout. This ensures distinctive, production-grade interface builds.
Yes, you can apply aesthetic philosophies using Tailwind CSS and shadcn/ui by aligning the chosen design framework with your existing codebase design tokens. This approach enforces mobile-first responsive design and accessible dark mode support.
Interface critique workflows can apply eight implementation-ready aesthetic philosophies, including Dieter Rams, Brutalist, Scandinavian, and Neo-Memphis. Each provides specific rules for typography, color, layout, motion, and detail treatment.
Align new page layout designs with existing design tokens by scanning your project for current UI components, framework configurations, and font assets. This prevents duplication and ensures brand consistency across your frontend design system.
Yes, applying an aesthetic philosophy enforces compliant implementation rules including mobile-first responsive design, accessible dark mode support, and reduced motion preferences for all frontend outputs, regardless of the chosen visual style.
The best way to build a Japanese minimalist e-commerce frontend interface is to select the matching Ma aesthetic philosophy guidelines, applying its specific rules for typography, spacing, and motion to achieve a distinct, intentional design.
EzequielpereyraaScan Tailwind and CSS projects to extract design tokens and generate DESIGN.md.
wpgauravGenerate accessible React UIs with shadcn/ui, Radix UI, and Tailwind CSS.
liutao96Crafts frontend interfaces with HTML/CSS/JS or frameworks, preserving accessibility and performance.
Starchild-ai-agentDesign interfaces and generate Starchild design tokens for frontend code changes.
