frontend-design

Craft frontend interfaces with intentional aesthetics and DFII evaluation.

70|42|Updated Mar 27, 2026

Search Tags:#design-system #css-variables #frontend-design #aesthetic-direction #accessible-ui #dfii #intentional-ui

Ready to run

npx skills add https://github.com/tranhieutt/software_development_department --skill frontend-design-tranhieutt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill frontend-design-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generic, templated AI UI outputs lack intentional direction and memorable identity, while this Skill forces an aesthetic thesis, DFII evaluation, and production-grade craftsmanship before any code is written so every interface feels deliberate.

Core Features & Use Cases

Intentional direction & DFII: Define a bold tone, score it on the DFII scale, and use that metric to decide whether to execute, adjust scope, or rethink the aesthetic.
Execution standards: Deliver semantic, accessible code with expressive typography, CSS variable-driven theming, purposeful motion, and cohesive restraint that matches the declared aesthetic stance.
Differentiation anchor & use case: Reference a visible, non-generic anchor (e.g., editorial brutalism or luxury minimalism) so a dashboard, component, or page is instantly recognizable even without its logo.

Quick Start

Use the frontend-design skill to articulate a bold aesthetic, score it with DFII, and deliver the matching HTML/CSS for the requested interface.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I make AI generated frontend interfaces look less generic?▼

To make AI generated frontend interfaces look less generic, you must establish an intentional aesthetic direction with a visible differentiation anchor before writing any code. This ensures the UI has a cohesive, non-generic visual identity rather than defaulting to a standard template.

What is DFII evaluation in frontend design?▼

DFII evaluation in frontend design is a metric used to score a declared aesthetic thesis. You use this score to decide whether to execute the UI design, adjust the project scope, or completely rethink the visual direction before moving forward.

How do I create a cohesive web UI design system using CSS variables?▼

Create a cohesive web UI design system using CSS variables by defining a bold tone, scoring it with DFII, and delivering semantic HTML with expressive typography and CSS variable-driven theming. Purposeful motion and accessible UI standards are applied to match the aesthetic stance.

Can I use this approach to design accessible dashboards with expressive typography?▼

Yes, you can design accessible dashboards with expressive typography by applying an intentional aesthetic thesis and scoring it with DFII. The execution delivers semantic, accessible code that satisfies accessibility standards while maintaining cohesive visual restraint.

When do I need an intentional aesthetic direction for a web component?▼

You need an intentional aesthetic direction for a web component when it must be instantly recognizable even without a logo. Applying a visible, non-generic anchor like editorial brutalism or luxury minimalism ensures the component has a memorable, high-craft visual identity.