design

Name: design
Availability: InStock
Author: noin-ai

Generate UI design specs with responsive and dark mode variants.

Updated Jan 15, 2026

Search Tags:#design #ui #accessibility #layout #component #responsive #designer

Ready to run

npx skills add https://github.com/noin-ai/plugins --skill design-noin-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/noin-ai/plugins/tree/main/plugins/noin-ai/skills/design
Command: npx skills add https://github.com/noin-ai/plugins --skill design-noin-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing UI components and layouts is time-consuming and error-prone; this skill accelerates creation by leveraging the designer agent to produce clear specs and reusable patterns.

Core Features & Use Cases

Generate UI design specs for components and screens.
Produce component structure, accessibility considerations, and responsive breakpoints.
Optional: generate implementation code with --implement and refine designs into code.

Quick Start

Request a design for your component using /design <component> and add --implement if you want code.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate UI design specs for responsive components?▼

Generate UI design specs by requesting a component design, which produces structure, accessibility considerations, and responsive breakpoints. Specify the component and add flags to return a usable design artifact with dark mode variants.

Can I get implementation code along with my UI layout design?▼

Yes, you can get implementation code by appending the --implement flag to your design request. This refines the generated component specifications into code alongside the standard design artifacts.

What is the best way to create wireframes and component style guides?▼

Create wireframes and style guides by defining your functional requirements for the UI task. The designer agent processes these constraints to produce clear specifications and reusable layout patterns.

Does the UI design process include accessibility and dark mode variants?▼

Yes, UI design generation includes accessibility considerations and supports dark mode variants. It also produces responsive breakpoints to ensure components function across different viewport sizes.

What functional requirements do I need to provide for UI component design?▼

Provide functional requirements describing the component's purpose and constraints. The designer agent uses these inputs to generate design specs, layout structures, and optional code implementations.

Can I use this for frontend screen layouts and responsive breakpoints?▼

Yes, apply this to frontend UI tasks including screen layouts and responsive breakpoints. It accelerates UX delivery by generating design artifacts tailored to your specified component or screen requirements.