skills.rest
phananhtuan09
phananhtuan09COMMUNITY
Explore all skills by this author →
GitHub

design-fundamentals

Create coherent design systems with WCAG-compliant typography, color, and spacing for web interfaces.

1|Updated Oct 30, 2025
Search Tags:#typography#accessibility#ui-design#color-system#visual-hierarchy#design-fundamentals#spacing-scale
One-click install
npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill design-fundamentals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-fundamentals
Source: https://github.com/phananhtuan09/ai-agent-workflow/tree/main/.opencode/skill/design-fundamentals
Command: npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill design-fundamentals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core design principles for creating distinctive, beautiful UIs with technical excellence. Combines creative direction with practical foundation for memorable, accessible interfaces.

Core Features & Use Cases

Use when building UI without specific design specs (Figma, screenshots, design files):

  • Creating landing pages, home pages, marketing pages from scratch
  • Building web apps, dashboards, admin panels without design
  • Choosing design system: typography, colors, spacing, visual hierarchy
  • Need to propose complete design (fonts, colors, layout, spacing)
  • Building distinctive UIs that avoid generic AI aesthetics

Quick Start

Craft a complete design direction outlining typography, spacing, and color decisions for a new interface.

Frequently Asked Questions about design-fundamentals

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

FAQPage Schema
How do I create a UI design system from scratch without Figma files?▼

To create a UI design system from scratch, establish a coherent typography, color, and spacing scale. This provides principled design foundations for building distinctive, accessible interfaces directly in code without visual mockups.

What typography and color system principles ensure WCAG compliance?▼

Typography and color system principles for WCAG compliance require establishing a scalable spacing scale and visual hierarchy with sufficient contrast. This ensures accessible UI foundations that meet technical accessibility standards for web apps.

How do I avoid generic AI aesthetics when building landing pages?▼

To avoid generic AI aesthetics when building landing pages, apply creative direction with practical foundations like a distinct spacing scale and color system. This shapes memorable, distinctive UIs rather than default templates.

Can I use this to build a complete design direction for web apps and dashboards?▼

Yes, you can use this to build a complete design direction for web apps and dashboards. It outlines typography, spacing, and color decisions, providing a coherent design system applicable to admin panels without existing design specs.

What is a spacing scale and how does it impact visual hierarchy?▼

A spacing scale is a structured set of measurement units for layout consistency. It impacts visual hierarchy by establishing proportional relationships between UI elements, ensuring clear structure and technical excellence across the interface.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
PouriaRouzrokhPouriaRouzrokh

frontend-design

Define and implement production-grade frontend interfaces with typography, color tokens, spacing, and accessibility.

Community
Advanced
Takeaki0817Takeaki0817

tailwind-design-system

Codify design tokens and component architecture for Tailwind CSS design systems.

Community
Intermediate
NagyViktNagyVikt
2

figma-implement-design

Translate Figma design nodes into framework-specific application code.

Community
Advanced