skills.rest
noin-ai
noin-aiOFFICIAL
Explore all skills by this author →
GitHub

design

Generate UI design specs with responsive and dark mode variants.

Updated Jan 15, 2026
Search Tags:#design#ui#accessibility#layout#component#responsive#designer
One-click install
npx skills add https://github.com/noin-ai/plugins --skill design-noin-ai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
lpjhelderlpjhelder

frontend-ui-ux

Generate UI/UX designs for frontend projects via MCP tools or a designer agent.

Community
Intermediate
k-negishik-negishi
1

functional-design

Convert PRDs into functional design documents with Mermaid diagrams and data models.

Community
Advanced
krzysztofsurdykrzysztofsurdy
20

frontend-dev

Implement UI components, integrate backend APIs, and ensure accessibility and responsive behavior.

Community
Advanced
CrashBytesCrashBytes
6

ux-ui-developer

Design accessible user interfaces, build design systems, and audit WCAG 2.1 AA compliance.

Community
Advanced