ufo-ai/ufo-core/design-foundations
Claude Code and agent skill by ufo-ai/ufo-core
- community
Checking that the SKILL.md file is still in the repository.
Load before visual choices without a full brand system or as fallback: color, typography, and visual hierarchy across any artifact (websites, slides, charts, documents).
Install
npx vskill@latest install ufo-ai/ufo-core/design-foundationsSKILL.md
Design Foundations
Artifact-agnostic design guidance — works for CSS, PowerPoint, matplotlib, PDF, or any visual output.
Core Principles
- Restraint — 1 accent + neutrals. 2 fonts max, 2-3 weights. Earn every element; decoration must encode meaning.
- Purpose — Every choice answers "what does this help the viewer understand?" Color encodes meaning, type size signals hierarchy, spacing groups content, animation reveals information.
- No decoration — Do not add illustrations, stock images, decorative icons, or clip art unless explicitly requested. Typography, whitespace, and layout are the primary visual tools.
- Accessibility — WCAG AA contrast (4.5:1 body, 3:1 large text). Never rely on color alone. 12px text floor, 16px body copy. Respect
prefers-reduced-motion.
The default is the house style
An artifact with no style direction of its own is drawn in the house style — the ufo-style skill this one pulled in, whose references/tokens.css holds the tokens. The references below are how that palette lands in a given medium, and what to derive when the member gave direction of their own. A member's own brand, palette, font or reference wins over the house style, whole and never mixed with it.
References
read the file that covers the choice in front of you — the principles above are the whole of what applies unconditionally.
| File | Covers | Read when | |
|---|---|---|---|
references/color.md | "Earn Every Color", the default palette (surface steps, text tones, accent and semantic hexes), custom-palette derivation, contrast rules | Picking any hex — an accent, a surface, a semantic color — or deriving a palette from user direction | |
references/typography.md | Measure/leading/scale rules, display-vs-body floors, serif-vs-sans, Font Strategy by Format, brand fonts, blacklist, size hierarchy, Slides and PDF pairings | Choosing a typeface or pairing, or setting sizes for a specific output format | |
references/dataviz.md | Chart color sequence, chart type selection, data-ink rules, chart typography, KPI cards | Building a chart, graph, or KPI tile in any medium |
Paths are relative to this skill's directory ($UFO_HOME/skills/design-foundations/).
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingextensions/documents/ufo_ext_documents/skills/design-foundations/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/ufo-ai/ufo-core/design-foundations)