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.
Install
$ agentstack add skill-dhananjaym182-ai-ui-design-skills-saas-ui-ux-designer-skill-typography-flex ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
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
- Define the screen purpose, main action, and primary vs secondary zones.
- Start with layout first:
- flex vs grid
- sticky vs flowing regions
- main vs supporting panels
- desktop vs mobile stacking
- Establish typography hierarchy before decoration.
- Apply neutral surfaces, restrained accent use, and consistent card rhythm.
- Check states, spacing, and responsiveness.
- 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
- Source: dhananjaym182/ai-ui-design-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.