skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

frontend-design

Generate distinctive production-grade frontend interfaces with intentional aesthetics and working HTML, CSS, or React code.

1|Updated Aug 17, 2025
Search Tags:#typography#react#design system#css#ui design#frontend design#web interface
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill frontend-design-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill frontend-design-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, relying on default fonts, safe palettes, and template-like layouts. This Skill enforces a deliberate design process so every interface has a clear aesthetic direction, a memorable visual anchor, and production-ready code. ## Core Features & Use Cases - Design Feasibility & Impact Index (DFII): Scores a proposed aesthetic direction across impact, fit, feasibility, performance, and consistency risk before any code is written. - Structured Design Thinking Phase: Requires defining purpose, tone, and a differentiation anchor so the UI is recognizable even without a logo. - Enforced Execution Rules: Non-negotiable standards for typography, color variables, spatial composition, motion, and accessibility, plus an anti-pattern blacklist (system fonts, default Tailwind layouts, SaaS gradients). - Use Case: Ask for a landing page for a coffee brand and receive an editorial-brutalist design with a DFII score, a design system snapshot, full working code, and an explicit note on how it avoids generic UI. ## Quick Start Ask the AI to design and build a landing page for your product with a distinctive aesthetic direction and production-ready code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a non-generic frontend design with AI?▼

Define an explicit aesthetic direction such as editorial brutalism or luxury minimal before writing code, then score it with the DFII framework. Commit to expressive typography, a dominant color story via CSS variables, and one memorable visual anchor instead of default layouts.

What is the DFII score in frontend design?▼

DFII is the Design Feasibility and Impact Index, calculated as Impact plus Fit plus Feasibility plus Performance minus Consistency Risk, ranging from -5 to 15. Scores of 12-15 mean execute fully, 8-11 proceed with discipline, and 3 or below means rethink the aesthetic direction.

Which fonts should I avoid in production web UI design?▼

Avoid system and AI-default fonts such as Inter, Roboto, and Arial, which signal generic template design. Instead pair one expressive display font with one restrained body font and use typography structurally through scale, rhythm, and contrast.

Does this design approach work with React and Tailwind?▼

Yes, it supports HTML/CSS with modern native features and React with functional composable components, using CSS-first animation and Framer Motion only when justified. Default Tailwind or ShadCN layouts are explicitly flagged as anti-patterns and must be customized.

When should I not use a maximalist aesthetic direction?▼

Avoid maximalist directions when the DFII consistency risk is high, when the design must scale across many screens, or when performance and accessibility would suffer. In those cases reduce scope, simplify effects, or choose a more restrained aesthetic.

Related Skills

Explore More Design & Creative Skills→
hoavdchoavdc
21

codexkit-brand-positioning-canvas

Articulate audience, category, differentiators, proof points, and tone into a positioning canvas.

Community
Intermediate
marcusfelixmarcusfelix

ab-test-setup

Plan, design, and analyze A/B tests for product optimization.

Community
Advanced
liangdabiaoliangdabiao
42

amazon-a-plus-content

Plan and create Amazon A+ content with module layouts and comparison charts.

Community
Advanced
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate