How does this skill improve AI-generated code?

It forces the AI to define a unique visual 'signature' and specific domain metaphors before generating code, preventing the generic 'template' look common in standard AI outputs.

Can I use this for both web apps and marketing sites?

Yes, the skill includes specialized routing and distinct logic for functional dashboards (app.md) and promotional landing pages (marketing.md).

What are 'defaults' in the context of this skill?

Defaults are common AI patterns like standard hex codes, generic box-shadows, and uninspired layouts that make generated UIs look identical and unpolished.

Do I need to provide an existing design system?

No, the skill helps you define a unique design system from scratch by exploring the physical metaphors and emotional intent of your specific project.

What is the 'Swap Test' mentioned in the principles?

It is a quality check where the AI ensures the design feels specifically tailored to the product; if the layout could be swapped for a standard template without losing its identity, it fails the test.

Frontend Design Principles

Name: Frontend Design Principles
Author: joshuadavidthomas

byjoshuadavidthomas

•

デザインツール

Generates high-craft, intentional UI designs by rejecting generic AI defaults and grounding interfaces in domain-specific metaphors.

This skill transforms Claude from a generic code generator into a thoughtful design partner by enforcing a rigorous pre-generation discovery process. It requires the AI to define the human user, specific domain vocabulary, and unique 'signature' elements before writing any CSS or component code. By routing between specialized guidance for application dashboards and marketing sites, it ensures every interface—from internal SaaS tools to public landing pages—is built with professional-grade craft, subtle layering, and systemic intent that avoids the 'AI-generated' look.

主な機能

01Systematic rejection of common AI design 'defaults' like generic gray scales and overused shadows

02Context-aware routing for SaaS applications vs. high-impact marketing landing pages

03Mandatory design discovery process including intent questioning and domain exploration

04Subtle layering guidance for creating professional depth and hierarchy

054 GitHub stars

06Custom CSS token generation based on unique product-specific metaphors

ユースケース

01Building a data-heavy SaaS dashboard that needs to feel like a specific professional tool rather than a generic template

02Creating high-conversion marketing landing pages with a unique visual identity and intentional brand voice

03Developing a component library that avoids common 'cookie-cutter' visual patterns and generic spacing

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joshuadavidthomas/agent-skills frontend-design-principles

For use in Claude.ai and ChatGPT

Download Skill