skills.rest
RobinMillford
RobinMillfordCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates distinctive production-grade frontend interfaces with explicit aesthetic direction and working code.

Updated Apr 5, 2026
Search Tags:#typography#design#ui#frontend#css#web design#aesthetic
One-click install
npx skills add https://github.com/RobinMillford/GopherNotebook --skill frontend-design-robinmillford
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/RobinMillford/GopherNotebook/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/RobinMillford/GopherNotebook --skill frontend-design-robinmillford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, relying on default fonts, safe palettes, and template-like layouts. This Skill enforces an intentional design process so every frontend output has a clear aesthetic point of view, memorable visual anchors, 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. - Mandatory Design Thinking Phase: Requires defining purpose, a dominant tone (e.g., brutalist, editorial, luxury minimal), and a differentiation anchor before implementation. - Strict Execution Rules: Enforces expressive typography, committed color stories via CSS variables, intentional asymmetry, purposeful motion, and semantic accessible HTML. - Use Case: Ask for a landing page for a new product and receive a named aesthetic direction, a DFII score, a design system snapshot, and complete working HTML/CSS/JS that avoids generic AI UI patterns. ## Quick Start Use the frontend-design skill to build a landing page for my product with a distinctive editorial aesthetic and full working code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI-generated UI design?▼

Define an explicit aesthetic direction before coding, such as editorial brutalism or luxury minimal, and commit to it through typography, color, and layout choices. This Skill enforces that process with a mandatory design thinking phase and a differentiation anchor that must be visible in the final UI.

What is the DFII score in frontend design?▼

DFII stands for Design Feasibility and Impact Index. It scores a design direction from -5 to +15 by adding aesthetic impact, context fit, implementation feasibility, and performance safety, then subtracting consistency risk. Scores of 8 or above indicate the direction is worth executing.

Which fonts should I use instead of Inter or Roboto?▼

Pair one expressive display font with one restrained body font rather than relying on system defaults. The Skill treats Inter, Roboto, and Arial as anti-patterns and requires typography to carry structural weight through scale, rhythm, and contrast.

Does this design approach work with React and Tailwind?▼

Yes, the implementation standards cover HTML/CSS and React with functional components and composable styles. However, default Tailwind or ShadCN layouts are flagged as anti-patterns, so the framework must serve the aesthetic direction rather than dictate it.

When should I not use a maximalist design direction?▼

Avoid maximalist directions when the DFII score falls to 7 or below, when performance or accessibility would suffer, or when the aesthetic does not fit the product audience. In those cases the Skill recommends reducing scope or rethinking the direction entirely.

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
keremtoker468-dotcomkeremtoker468-dotcom

web-ui-review

Audit web interfaces for accessibility, performance, and code quality.

Community
Advanced
marvelousempiremarvelousempire

copywriting

Generate and improve marketing copy for website pages.

Community
Advanced
renpayerorenpayero

tailwind-design-system

Centralize design tokens and components for consistent Tailwind-based UI development.

Community
Advanced