# design-fundamentals

> Claude/Codex skill by [@incubyte](https://omgskills.com/library/incubyte/index.md) · 18 stars · Updated 2026-10-16

This skill should be used when making UI/UX decisions, designing layouts, choosing colors and typography, writing UI specs, or reviewing visual components. Contains the two-path design flow (existing system vs greenfield discovery), accessibility rules, typography pairing, color palette guidance using Sanzo Wada's Dictionary of Color Combinations, spatial composition, anti-generic rules, and visual quality checklist.

## Install

```sh
git clone https://github.com/incubyte/ai-plugins /tmp/ai-plugins && ln -s /tmp/ai-plugins/bee/skills/design-fundamentals ~/.claude/skills/design-fundamentals
```

## From README

Design Fundamentals Reference principles for any Bee agent producing, evaluating, or documenting UI work. These apply universally — the target project's design system provides specific values on top of these. --- Two-Path Design Flow Before applying any design principle, determine which path you're on: Path A — Existing Design System: The project has design tokens, Tailwind config, CSS custom properties, or a component library. Follow what exists. Never override. Never suggest alternatives. Extract, document, and ensure new work is consistent with the established system. Path B — Greenfield (No Design System): No design system detected. Run a design discovery with the developer using AskUserQuestion before making any visual decisions. See the Design Discovery section below.

## Links

- HTML page: https://omgskills.com/library/incubyte/ai-plugins/bee/skills/design-fundamentals/
- GitHub: https://github.com/incubyte/ai-plugins
- Author: [@incubyte](https://omgskills.com/library/incubyte/index.md)

## More from this repo

- [ai-ergonomics](https://omgskills.com/library/incubyte/ai-plugins/bee/skills/ai-ergonomics/index.md) — This skill should be used when evaluating how well code supports LLM-assisted development.
   - [@incubyte](https://omgskills.com/library/incubyte/index.md) · 18 stars
- [ai-workflow](https://omgskills.com/library/incubyte/ai-plugins/bee/skills/ai-workflow/index.md) — This skill should be used when explaining why Bee follows spec-first TDD workflows, or when teaching mode is on.
   - [@incubyte](https://omgskills.com/library/incubyte/index.md) · 18 stars
- [architecture-patterns](https://omgskills.com/library/incubyte/ai-plugins/bee/skills/architecture-patterns/index.md) — This skill should be used when evaluating architecture options, checking dependency direction, or deciding between...
   - [@incubyte](https://omgskills.com/library/incubyte/index.md) · 18 stars