frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

2|1|Updated Dec 19, 2022

Search Tags:#typography #design #layout #frontend #UI #motion #color-system

Ready to run

npx skills add https://github.com/nicholasgriffintn/machine-setup --skill frontend-design-nicholasgriffintn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nicholasgriffintn/machine-setup/tree/main/ai-tooling/skills/frontend-design
Command: npx skills add https://github.com/nicholasgriffintn/machine-setup --skill frontend-design-nicholasgriffintn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create distinctive, production-grade frontend interfaces that respect brand constraints, accessibility standards, and performance goals while avoiding generic visuals.

Core Features & Use Cases

Typography: Establish distinctive type systems and pairings beyond default stacks.
Color & Motion: Define tokens, palettes, and tasteful motion for engaging experiences.
Layout & Components: Create robust layouts and reusable components for web pages and apps.
Use Case: When asked to build a web app dashboard, a landing page, or a design system guideline, apply this skill to deliver cohesive visuals and code-ready assets.

Quick Start

Design a production-grade landing page with a bold aesthetic direction and a complete HTML/CSS/JS scaffold.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design production-grade frontend interfaces with strong typography and color systems?▼

Build robust layouts and reusable web components by combining distinctive typography, defined color tokens, and tasteful motion. This approach delivers cohesive visuals and production-ready code snippets for pages and applications.

What is the best way to create a web app dashboard with distinctive UI and accessible layouts?▼

The best way to create an accessible web app dashboard is to apply a skill that generates robust layouts and reusable components. This ensures your UI follows accessibility best practices while maintaining a distinctive aesthetic direction.

How do I generate design guidelines and production-ready code snippets for a landing page?▼

Generate design guidelines and production-ready code snippets by defining type systems, color palettes, and motion. This process outputs a complete HTML, CSS, and JS scaffold that adheres to performance best practices for your landing page.

Can I use this approach to build internal tools and marketing sites without generic visuals?▼

Yes, you can build internal tools and marketing sites without generic visuals by applying this design approach. It helps teams create distinctive, production-grade frontend interfaces that respect brand constraints while avoiding default visual stacks.

Does this frontend design method support motion and color token systems for web components?▼

Yes, this frontend design method supports motion and color token systems. It defines palettes and tasteful motion to create engaging experiences, outputting design guidelines and code-ready assets for reusable web components.

When do I need to establish a complete type system and design tokens for web applications?▼

You need to establish a complete type system and design tokens when building dashboards, blogs, or marketing sites. This ensures your web applications maintain cohesive visuals, distinctive typography, and accessible layouts across all components.