# UI Design

Design-quality reference for financial-research visual output: typography, color...

- Repository: https://github.com/ginlix-ai/LangAlpha (2232 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ginlix-ai/LangAlpha --skill ui-design -g -a claude-code -y`
Codex: `npx skills add ginlix-ai/LangAlpha --skill ui-design -g -a codex -y`
Cursor: `npx skills add ginlix-ai/LangAlpha --skill ui-design -g -a cursor -y`
Gemini CLI: `npx skills add ginlix-ai/LangAlpha --skill ui-design -g -a gemini-cli -y`

## Description

Design-quality reference for financial-research visual output: typography, color, composition, and avoiding generic AI aesthetics

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# UI Design

A design-quality reference for any visual output you produce. It exists to make that output look like it came from a research desk, not a marketing landing page or a generic AI template.

Read this **before** producing any styled output, it covers design taste: typography, color, composition, and restraint. The examples below are HTML/CSS (the most common surface), but the principles apply to any visual you render, charts and images, PDFs, on-screen layouts, not just HTML.

> **This skill exists to help you match the user's personal frontend style and UI preferences, those always win over the defaults below.** If the user has stated a taste, in this conversation, in your long-term memory, or in their saved preferences, it outranks every rule here. They want a specific brand color, a chosen font, a different accent, dark-only, no serif? Do that. The directions below are strong defaults for when the user hasn't expressed a preference; they are never a license to overrule the user's explicit style.

> **These are reference defaults, not a cage.** They anchor quality and steer you off generic, lazy output, they don't replace your own judgment. When you have a clearly better, coherent choice for the specific content, take it. The only non-negotiables are the hard constraints: WCAG AA contrast, green/red reserved for profit/loss, and the theme-variable + print mechanics. The specific palette, font pairings, and exact scale below are strong starting points you are free to improve on.

## The Tone: Research Desk, Not Marketing Page

The audience is a portfolio manager, analyst, or sophisticated investor reading a research note. They want **dense, scannable, credible** information design: the visual language of a sell-side note, a market-data terminal, or a quality print newspaper's business section. Not a SaaS hero page.

The rest: https://github.com/ginlix-ai/LangAlpha/blob/HEAD/plugins/langalpha_deliverables/skills/ui-design/SKILL.md