design-ui

design-ui

An end-to-end agent skill for defining, implementing, rendering, and refining distinctive product interfaces.

It combines creative-direction exploration and design-system definition with an evidence-based frontend iteration loop. The skill starts at the right phase for the request: greenfield direction, design-system work, implementation, or rendered UI review.

Reference research starts with Pinterest for visual discovery and checks original product sources for interaction evidence. No paid reference library is required. The research workflow covers source attribution, diverse shortlists, flow/state coverage, and fallbacks when access is limited.

Install

npx skills add octa0rismail/design-ui --skill design-ui

Use

Invoke $design-ui with a product brief, an optional art-direction cue, an existing DESIGN_SYSTEM.md, or a UI implementation/review request.

Examples:

Use $design-ui to design and build a responsive marketplace for independent furniture makers.

Use $design-ui with direction: playful retro to define the system, then implement the inventory page in React.

Use $design-ui to render and refine the current dashboard at desktop and mobile sizes.

Use $design-ui to research Pinterest references for a furniture marketplace, verify browsing and filtering patterns against original product sources, then propose creative directions.

What it enforces

• Product-specific creative direction before styling
• A binding, accessible DESIGN_SYSTEM.md when the system is unresolved
• Intentional hierarchy, geometry, surfaces, typography, imagery, and motion
• Proportionate use of GSAP or Motion when helpful, with CSS/native animation for simpler interactions
• Responsive and state-complete implementation
• At least one render → review → revise → render cycle
• Evidence-backed handoff with inspected routes, viewports, and states

Repository layout

The installable skill is at skills/design-ui.

License

MIT