# Saas Ui Ux Designer Skill Typography Flex

> Typography-first SaaS UI/UX workflow for internal product screens and components. Use when designing or refactoring dashboards, settings pages, editors, builders, tables, or modals where typography hierarchy, flex/grid layout, spacing rhythm, and premium neutral surfaces need to be the main organizing system. Also use when a UI feels cramped, visually noisy, misaligned, or inconsistent.

- **Type:** Skill
- **Install:** `agentstack add skill-dhananjaym182-ai-ui-design-skills-saas-ui-ux-designer-skill-typography-flex`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dhananjaym182](https://agentstack.voostack.com/s/dhananjaym182)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dhananjaym182](https://github.com/dhananjaym182)
- **Source:** https://github.com/dhananjaym182/ai-ui-design-skills/tree/main/skills/saas-ui-ux-designer-skill-typography-flex

## Install

```sh
agentstack add skill-dhananjaym182-ai-ui-design-skills-saas-ui-ux-designer-skill-typography-flex
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# SaaS UI UX Designer Skill Typography Flex

## Overview

Use this skill to design calm, premium SaaS UI where typography and flex/grid layout carry the hierarchy. Favor readable product structure over decorative styling.

## Workflow

1. Define the screen purpose, main action, and primary vs secondary zones.
2. Start with layout first:
   - flex vs grid
   - sticky vs flowing regions
   - main vs supporting panels
   - desktop vs mobile stacking
3. Establish typography hierarchy before decoration.
4. Apply neutral surfaces, restrained accent use, and consistent card rhythm.
5. Check states, spacing, and responsiveness.
6. Read [references/typography-flex.md](references/typography-flex.md) for the detailed rules when needed.

## Defaults

- Typography drives hierarchy
- Flex/grid drives structure
- Neutral surfaces with restrained accent
- One clear primary action per zone
- Reusable patterns over one-off layouts
- Settings and builder pages should feel product-grade, not admin-raw

## Use This Skill To

- redesign SaaS settings pages
- improve dashboard or editor layout rhythm
- fix misalignment, cramped cards, or noisy spacing
- choose between stacked, split, and sticky panel layouts
- make internal product UI feel premium and production-ready

## References

Read [references/typography-flex.md](references/typography-flex.md) for:

- typography hierarchy rules
- flex and grid layout recipes
- section and card composition
- settings page structure
- common UI anti-patterns

## Constraints

- Prefer existing product tokens and components when present.
- Keep output responsive and production-ready.
- Avoid decorative clutter, loud color, and concept-art styling.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [dhananjaym182](https://github.com/dhananjaym182)
- **Source:** [dhananjaym182/ai-ui-design-skills](https://github.com/dhananjaym182/ai-ui-design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dhananjaym182-ai-ui-design-skills-saas-ui-ux-designer-skill-typography-flex
- Seller: https://agentstack.voostack.com/s/dhananjaym182
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.