skills.rest
MasaKagami
MasaKagamiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

impeccable

Create distinctive frontend interfaces with design guidelines for typography, color, and motion.

Updated Jan 26, 2024
Search Tags:#design system#interface design#UI design#frontend design#aesthetic design
One-click install
npx skills add https://github.com/MasaKagami/masakagami.com --skill impeccable-masakagami
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/MasaKagami/masakagami.com/tree/main/.crush/skills/impeccable
Command: npx skills add https://github.com/MasaKagami/masakagami.com --skill impeccable-masakagami

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill unit addresses the problem of creating distinctive, production-grade frontend interfaces with a focus on high design quality, avoiding generic AI aesthetics, and providing creative, polished code.

Core Features & Use Cases

  • Design Quality: Ensures that the created interfaces are distinctive and of high design quality, avoiding generic AI aesthetics.
  • Creative Code: Generates code that is creative and polished, with attention to aesthetic details and creative choices.
  • Project Context: Requires project context to be provided before any design work is done, ensuring that the design aligns with the intended use case and audience.
  • Design Directions: Offers guidance on committing to a bold aesthetic direction and implementing working code that is production-grade, visually striking, and cohesive with a clear aesthetic point-of-view.
  • Typography: Provides guidelines for choosing typography, including font selection, pairing principles, and considerations for accessibility.
  • Color & Theme: Offers principles and guidelines for choosing a cohesive palette and selecting themes, considering contrast, accessibility, and branding.
  • Layout & Space: Provides rules for creating visual rhythm, using fluid spacing, and breaking the grid for emphasis.
  • Visual Details: Outlines absolute bans for certain CSS patterns and provides guidelines for using decorative elements and motion design.
  • Motion: Offers guidelines for using motion to convey state changes, using exponential easing, and avoiding animation of layout properties.
  • Interaction: Provides principles for making interactions feel fast, using progressive disclosure, and designing empty states.
  • Responsive: Offers guidelines for responsive design, including mobile-first design, using container queries, and adapting the interface for different contexts.
  • UX Writing: Provides guidelines for writing labels, errors, and empty states, focusing on clarity and consistency.
  • AI Slop Test: Offers a critical quality check to ensure that the design does not look like AI-generated work.
  • Implementation Principles: Provides guidance on matching implementation complexity to the aesthetic vision and making unexpected choices that feel genuinely designed for the context.

Quick Start

Use the 'impeccable craft' command to begin the design process for a new project.

Frequently Asked Questions about impeccable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid generic AI aesthetics in frontend UI design?▼

To avoid generic AI aesthetics in frontend UI design, commit to a bold aesthetic direction using specific design guidelines for typography, color, layout, and motion. This ensures the interface meets high standards of creative and polished code rather than defaulting to generic patterns.

What is the best way to create distinctive, production-grade interfaces?▼

The best way to create distinctive, production-grade interfaces is to follow a structured design process covering direction, typography, color, layout, visual details, motion, interaction, responsive design, and UX writing to ensure aesthetic choices and usability are cohesive.

How do I choose typography and color for a high-quality UI?▼

Choosing typography and color for a high-quality UI involves selecting cohesive palettes and font pairings while considering contrast, accessibility, and branding. These aesthetic choices ensure the design aligns with the intended audience and avoids generic outputs.

Does this UI design approach require project context before starting?▼

Yes, this UI design approach requires project context to be provided before any design work begins. Supplying context ensures the generated frontend interface aligns perfectly with the intended use case and audience.

What guidelines should I follow for responsive design and motion?▼

For responsive design and motion, use mobile-first design with container queries and adapt interfaces for different contexts. Motion should convey state changes using exponential easing while avoiding animating layout properties.

How do I test if my interface looks like AI-generated work?▼

To test if your interface looks like AI-generated work, apply an AI Slop Test as a critical quality check. This evaluation ensures the design does not look like AI-generated work by verifying unexpected choices that feel genuinely designed for the context.

Related Skills

Explore More Design & Creative Skills→
shiroginshirogin
1

business-context

Capture project identity, principles, stakeholders, boundaries, and success criteria.

Community
Advanced
coco-researchcoco-research
264

frontend-design

Design distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced
Tea-4-LifeTea-4-Life

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Official
Advanced
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced