Guide UI surface design through a four-layer process with state coverage.
npx skills add https://github.com/leifericf/agentic-sdk --skill design-ui-leifericf
Please help me install this Agent Skill. Skill: design-ui Source: https://github.com/leifericf/agentic-sdk/tree/main/skills/design-ui Command: npx skills add https://github.com/leifericf/agentic-sdk --skill design-ui-leifericf
This Skill addresses the challenge of designing UI surfaces before implementation, ensuring a clear and cohesive user experience.
Run the design-ui skill to create a UI design for your application's new feature.
High-intent search queries and answers about installing and using this skill.
The best way to structure UI design is using a four-layer process covering intent, information architecture, interaction, and presentation to ensure a cohesive user experience before development begins.
To design UI surfaces for all user states, follow a structured design process that explicitly accounts for empty, loading, success, error, and permission denied conditions during the interaction layer phase.
A UI design specification should include the surface intent, information architecture, interaction flows, presentation details, and a completed design-review checklist verifying alignment with user goals and best practices.
Yes, you need knowledge of the project's design language and token system before starting, as the UI design process requires these foundations to ensure the presentation layer adheres to established visual standards.
A four-layer UI design process improves user experience by sequentially defining the surface purpose, structuring content, mapping interactions, and applying visual presentation, preventing missed requirements and disjointed flows.
Yes, you can use this structured UI design approach for any new application feature, as it guides you from defining the initial intent through to the final presentation and design review checklist.
simotaDefine and manage design tokens for colors, spacing, and typography.
Hey-ViswaTranslate Airtable design-system patterns into implementation-ready UI guidance for React/Next.js projects.
namanchopraStructure UI/UX design processes for Next.js and React applications.
bipinksGenerate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.
