design-taste-frontend

Enforces design tokens, typography, layout, motion, and accessibility rules for frontend projects.

Updated Apr 17, 2026
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill design-taste-frontend-lutimi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/taste-skill
Command: npx skills add https://github.com/Lutimi/claude2figma --skill design-taste-frontend-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain premium, consistent UI systems across projects while shipping rapidly.

Core Features & Use Cases

  • Deterministic typography and layout rules to ensure cross-project consistency.
  • Enforced color policy with a single accent color and accessible contrast standards.
  • Strict component architecture, motion guidelines, and interaction rules to reduce design debt.
  • Use Case: Applies to enterprise dashboards and web apps needing disciplined design systems from token to UI.

Quick Start

Generate a minimal frontend spec that demonstrates a left-aligned hero, glassmorphism panels, and a single accent color applied consistently across components.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I enforce consistent UI design systems across React dashboards while shipping fast?

Apply deterministic design tokens, strict component architecture, and single-accent color policies to enforce consistent UI design systems across React enterprise apps and reduce design debt while shipping rapidly.

What are deterministic typography rules for enterprise frontend design?

Deterministic typography rules for enterprise frontend design ensure cross-project consistency by enforcing strict, predictable text rendering, layout structures, and design token usage across all UI components.

How do I set up a frontend spec with a single accent color and glassmorphism panels?

Set up a frontend spec with a single accent color and glassmorphism panels by generating a minimal layout demonstrating a left-aligned hero and consistent component token application across the UI.

Can I use these design guardrails to enforce accessibility standards in web apps?

Yes, you can use these design guardrails to enforce accessibility standards in web apps, as the rules include accessible contrast standards and motion safety guidelines for enterprise dashboards.

Why does my enterprise UI struggle with cross-project consistency despite using design tokens?

Enterprise UI struggles with cross-project consistency when lacking enforced layout rules and strict interaction guidelines, causing design debt that disciplined token-to-UI architecture resolves.

What's the best way to manage motion safety and interaction rules in a React component architecture?

The best way to manage motion safety in React component architecture is enforcing strict interaction guidelines and deterministic design tokens that govern motion behaviors across all UI components.