skills.rest
brandonburrus
brandonburrusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Generate frontend interfaces with defined design principles for typography, color, motion, layout, and depth.

1|Updated May 7, 2022
Search Tags:#react#css#interface design#frontend development#ui design#web components#ux
One-click install
npx skills add https://github.com/brandonburrus/dotfiles --skill ui-design-brandonburrus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/brandonburrus/dotfiles/tree/main/.config/opencode/skills/ui-design
Command: npx skills add https://github.com/brandonburrus/dotfiles --skill ui-design-brandonburrus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill empowers you to create unique, high-quality frontend interfaces that avoid generic AI aesthetics, ensuring your web components, pages, or applications stand out with polished design and creative execution.

Core Features & Use Cases

  • Bespoke UI Creation: Generates custom web components, pages, and applications with a strong emphasis on aesthetic detail and user experience.
  • Aesthetic Direction: Guides the design process through defined principles for typography, color, motion, layout, and depth, allowing for a wide range of styles from minimalist to maximalist.
  • Functional UI Mode: Provides strict guidelines for building practical, usable interfaces for dashboards, admin tools, and SaaS applications, prioritizing clarity and usability.
  • Use Case: Design a landing page for a new sustainable fashion brand, focusing on an organic and natural aesthetic with a unique serif font pairing and earth-toned colors.

Quick Start

Use the ui-design skill to create a React component for a product card with a luxury aesthetic.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create React components that avoid generic AI aesthetics?▼

You can generate distinctive, production-grade frontend interfaces by applying specific design principles for typography, color, motion, layout, and depth, ensuring your web components and pages avoid generic AI styles.

What is the best way to build a web UI for a SaaS dashboard?▼

Building a web UI for a SaaS dashboard is best achieved using a functional UI mode that prioritizes usability and clarity, applying strict guidelines to produce practical interfaces for admin tools and applications.

Can I use this to design a landing page with a specific brand aesthetic?▼

Yes, you can design a landing page with a specific brand aesthetic by providing custom direction for typography and color, allowing the generation of bespoke frontend interfaces with unique, polished visual execution.

How do I style web components with production-grade design quality?▼

You style web components with production-grade design quality by enforcing defined aesthetic principles across layout and motion, guiding the creation of creative CSS and React code that elevates the overall user experience.

Does this approach support both minimalist and maximalist interface design?▼

Yes, this approach supports both minimalist and maximalist interface design by allowing wide-ranging aesthetic direction through defined principles, ensuring high design quality across diverse frontend interfaces and web components.

Related Skills

Explore More Design & Creative Skills→
Shaarav4795Shaarav4795

tailwind-theme-builder

Generate CSS-variable themes for Tailwind v4 with shadcn/ui in React.

Community
Intermediate
qilinbroqilinbro

frontend-design

Generate production-grade web components and UI elements for webpages and React applications.

Community
Advanced
ByronWilliamsCPAByronWilliamsCPA

frontend-design

Create production-grade frontend interfaces across React, Next.js, Vue, Svelte, and HTML/CSS.

Official
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate