Can I use this for marketing landing pages?

No. This skill is explicitly optimized for interactive products and tools. For marketing sites and campaigns, you should use a specialized frontend-design skill.

How does this differ from standard AI CSS generation?

Most AI tools pull from generic training patterns. This skill forces Claude to perform domain exploration and 'Signature' identification before writing code, ensuring the output is unique to your specific problem.

How does the 'Signature Test' work?

The skill challenges its own output to identify specific elements that could ONLY exist for your product, failing the test if the design looks like a swappable template.

What is 'Surface Elevation' in this context?

It is a professional layering system where surfaces stack logically using subtle lightness shifts and borders, ensuring high-quality hierarchy in both light and dark modes.

Interface Design

Name: Interface Design
Author: JantonioFC

byJantonioFC

•

Herramientas de Diseño

Builds high-craft, intentional software interfaces by replacing generic AI templates with domain-specific design systems.

The Interface Design skill transforms Claude into a specialized UI architect for complex software applications, including SaaS dashboards, admin panels, and data-heavy tools. Unlike generic generators, this skill enforces a rigorous 'intent-first' methodology that requires domain exploration, signature interaction design, and sophisticated structural layering. It is specifically engineered to eliminate 'AI defaults' by deriving color palettes, typography, and layout from the specific physical and conceptual world of the product being built.

Características Principales

01Domain exploration framework to extract unique metaphors and visual signatures.

02Sophisticated CSS variable systems that reflect the product's specific identity.

03Anti-generic validation to prevent common template-like AI output.

04Intent-first design process to ensure every visual choice has a functional 'why'.

05Advanced structural layering system for professional surface elevation and hierarchy.

062 GitHub stars

Casos de Uso

01Designing cohesive admin panels with clear hierarchy and navigation scaffolding.

02Developing specialized SaaS interfaces that require a distinct, non-generic brand presence.

03Architecting high-density data dashboards for trading or monitoring tools.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank interface-design

For use in Claude.ai and ChatGPT

Características Principales

01Domain exploration framework to extract unique metaphors and visual signatures.

02Sophisticated CSS variable systems that reflect the product's specific identity.

03Anti-generic validation to prevent common template-like AI output.

04Intent-first design process to ensure every visual choice has a functional 'why'.

05Advanced structural layering system for professional surface elevation and hierarchy.

062 GitHub stars

Casos de Uso

01Designing cohesive admin panels with clear hierarchy and navigation scaffolding.

02Developing specialized SaaS interfaces that require a distinct, non-generic brand presence.

03Architecting high-density data dashboards for trading or monitoring tools.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank interface-design

For use in Claude.ai and ChatGPT