What kind of design specifications does it provide?

The skill outputs visual specifications, component hierarchy, accessibility considerations (A11y), and responsive layout rules.

Does it support mobile-responsive designs?

Yes, the skill includes responsive breakpoints by default, ensuring your designs work across desktop, tablet, and mobile devices.

Can this skill generate actual code?

Yes, by using the --implement flag, the skill triggers a coder agent to transform the design specification into functional implementation code.

Can I generate dark mode versions of my UI?

Absolutely. By including the --dark flag in your command, the designer agent will generate a dark mode variant for your requested component.

AI UI/UX Design Assistant

Name: AI UI/UX Design Assistant
Author: noin-ai

bynoin-ai

•

设计工具

Generates comprehensive UI/UX designs, layouts, and implementation-ready component specifications directly within Claude Code.

The design skill for the noin-ai plugin collection empowers developers to bridge the gap between concept and code by leveraging a specialized designer agent. It automates the creation of detailed visual specifications, component structures, and responsive layouts. Whether you need a simple navigation header or a complex dashboard interface, this skill provides accessibility considerations, dark mode variations, and can even trigger a coder agent to generate the actual implementation code, streamlining the entire frontend development workflow.

主要功能

01Comprehensive design specifications including accessibility considerations

02Built-in support for responsive breakpoints and mobile-first design

03Seamless transition from design specs to production-ready implementation code

04Automated UI component and layout generation

05Optional dark mode variant generation

061 GitHub stars

使用场景

01Generating responsive layouts for web and mobile applications

02Rapidly prototyping UI components with full design specifications

03Standardizing component design systems and accessibility patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add noin-ai/plugins design

For use in Claude.ai and ChatGPT

Download Skill