FinSight Product: Design System Skill for AI Agents

Where this fits

A developer on FinSight asks an agent to generate a refreshed company research page showing an AI summary with supporting evidence. The agent can reason over analysis code, but without a product design system it invents colors and layout that break the workspace's restrained, evidence-first feel. finsight-product supplies the design constraints and tokens agents need to output FinSight-native surfaces directly.

Why agents benefit

• Applies token values from tokens/colors_and_type.css directly, so generated UI uses the intended warm pearl white, charcoal ink, and champagne gold without manual style copying.
• Enforces semantic color rules: red and green appear only for signed market movement and risk, and green is never a brand, action, focus, or decoration color.
• Keeps content grouped by research question instead of backend subsystem, so agents structure dense panels the way analysts reason.
• Makes evidence and data freshness visible at each conclusion, a core FinSight behavior.
• Limits gradient translucency to the navigation atmosphere, preventing eye-catching backgrounds from competing with research content.

Practical scenarios

Generating a company research page

An agent assembles an AI analysis, key charts, and cited evidence. The skill tells it to use IBM Plex Sans for interface text and IBM Plex Mono for market data, and to place evidence freshness next to each conclusion.

Building a watchlist with market movement

When rendering price changes, the agent applies red and green only to signed changes, keeps champagne gold for the sole product accent, and avoids green anywhere else. This preserves the workspace's analytical tone.

Designing an evidence retrieval panel

An agent pulls documents to answer a research question. The skill guides it to group results by that question rather than by data source, and to use translucency only in navigation atmosphere.

Add it to your agent workflow

Install it as a project skill:

npx skills add juanjuandog/FinSight-AI --skill finsight-product

Then instruct your agent before generating FinSight UI:

Use the finsight-product design system.
Follow tokens in tokens/colors_and_type.css.
Use IBM Plex Sans for interface text and IBM Plex Mono for market data.
Reserve red and green for signed market movement and risk semantics.

Compare before adopting

Compare this against a generic design-system prompt or manually copied screenshots. Look at maintenance freshness: the active repository, README quality, and clear skill boundaries are good signals, but confirm they match your current FinSight version. Evaluate alternatives like internal brand guidelines or custom CSS variables. Also weigh workflow fit: this is built specifically for FinSight AI product surfaces, so it is most useful when your agent targets that workspace.

Why it is worth tracking

The repo's community momentum shows in more than a thousand stars and a focused, well-scoped README; the skill is small enough to adopt quickly but opinionated enough to shape agent output. Track it to evaluate later when you add new FinSight surfaces or update an existing research UI. OpenAgentSkill Update flags it as a practical pattern: product-specific design systems packaged as skills keep agent-generated UI aligned with brand constraints. For a central entry, see https://www.openagentskill.com/skills/juanjuandog-finsight-product