Define visual systems, color palettes, typography scales, and layout patterns for web UI.
npx skills add https://github.com/shirulot/codex-skill --skill ui-design-shirulot
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/shirulot/codex-skill/tree/main/ui-design Command: npx skills add https://github.com/shirulot/codex-skill --skill ui-design-shirulot
This skill solves the problem of inconsistent, generic, or AI-default UI design by providing a structured framework for building high-quality, human-centric interfaces.
Use the ui-design skill to generate a layout plan for a new SaaS dashboard following the product UI track.
High-intent search queries and answers about installing and using this skill.
To establish a consistent visual system, you need a structured framework that defines color palettes, typography scales, and layout patterns. This generates reusable design tokens and component styling rules to maintain cohesive visual direction across your web application.
Designing a layout hierarchy for a SaaS dashboard requires prioritizing information density and efficiency. Using a product UI track framework establishes clear visual hierarchy and interaction standards, ensuring the interface remains usable while handling complex data visualization.
Generating design tokens involves defining your foundational visual systems, typography scales, and color palettes first. These definitions are then translated into code-ready tokens that standardize component styling and ensure a premium, human-centric interface quality.
Yes, this UI design framework supports both marketing landing pages and admin panels. It provides a marketing UI track prioritizing visual impact and storytelling, alongside a product UI track focused on information density and efficiency for dashboards.
Generic web interfaces often lack a defined layout hierarchy and established interaction standards. Fix this by applying a structured design system foundation that provides aesthetic direction, motion guidelines, and design-in-code planning for a premium look.
aymenhamoudiiExtract design tokens and brand assets into .impeccable.md.
MunreaderConvert design requirements into React, TypeScript, and Tailwind CSS frontend workflows.
johnnyelwailerConvert Figma designs into React components with token-based styling.
lastnight030506Guide users through structured frontend design discovery and generate code.
