frontend-design

Name: frontend-design
Availability: InStock
Author: x0x888

Complete a 9-section design contract before coding frontend interfaces.

3|Updated Apr 6, 2026

Search Tags:#visual design #interface design #frontend design #design-first #brand archetype

Ready to run

npx skills add https://github.com/X0x888/oh-my-claude --skill frontend-design-x0x888

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/X0x888/oh-my-claude/tree/main/bundle/dot-claude/skills/frontend-design
Command: npx skills add https://github.com/X0x888/oh-my-claude --skill frontend-design-x0x888

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps solve the problem of designing visually appealing and distinctive frontend interfaces by establishing a design-first approach, ensuring high design quality without generic AI aesthetics.

Core Features & Use Cases

Design Contract Workflow: Completes a 9-section Design Contract before coding, forcing commitment to specific design principles.
Art-Taste Calibration: Follows canonical art-historical principles for design decisions.
Brand-Archetype Priors: Offers brand-archetype starting points to avoid clone designs.
Implementation Guidelines: Ensures design decisions are applied consistently throughout implementation.
Use Case: Design a landing page with a unique aesthetic that stands out and aligns with a specific brand archetype.

Quick Start

Design a landing page interface for a tech company with a premium and modern aesthetic, starting with the brand-archetype prior "Apple."

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design a frontend interface that avoids generic AI aesthetics?▼

To design a frontend interface without generic AI aesthetics, use a design-first approach that completes a detailed design contract before coding, aligning visual decisions with specific brand archetypes and art-historical principles.

What is a design contract workflow for frontend visual design?▼

A design contract workflow for frontend visual design is a structured process that completes a 9-section agreement before coding, forcing commitment to specific design principles and ensuring a consistent design philosophy throughout development.

How to apply brand archetypes to interface design?▼

To apply brand archetypes to interface design, select a specific archetype prior such as Apple to establish a starting point, which guides visual decisions and prevents clone designs by anchoring the interface to a distinct brand personality.

Do I need to finish the design contract before coding a landing page?▼

Yes, you must finish the design contract before coding a landing page, because this design-first approach requires completing the 9-section contract to establish consistent design principles and implementation guidelines prior to development.

Can I use art-historical principles for modern interface design?▼

Yes, you can use art-historical principles for modern interface design through art-taste calibration, which applies canonical art concepts to design decisions to achieve a high-quality and distinctive visual interface.