skills.rest
302ai
302aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

designer

Design accessible UI/UX interfaces with Tailwind and semantic HTML.

2|Updated Jan 26, 2026
Search Tags:#design#accessibility#frontend#responsive#tailwind#design-system#uiux
One-click install
npx skills add https://github.com/302ai/302-coding-plugins --skill designer-302ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/302ai/302-coding-plugins/tree/main/plugins/oh-my-claudecode/skills/designer
Command: npx skills add https://github.com/302ai/302-coding-plugins --skill designer-302ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and developers often struggle with translating concepts into polished, accessible, responsive interfaces, leading to inconsistent visuals and UX gaps.

Core Features & Use Cases

  • Modern responsive design and accessible UI components that scale across devices.
  • Design system implementation and typography/visual hierarchy guidance.
  • Collaboration with developers to translate concepts into code using Tailwind and semantic HTML.

Quick Start

Design a polished, accessible UI for a new feature request and generate ready-to-implement component specifications.

Frequently Asked Questions about designer

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

FAQPage Schema
How do I translate design concepts into responsive Tailwind components?▼

To translate design concepts into responsive Tailwind components, you define semantic HTML structures and apply utility classes that adapt across devices. This process yields reusable UI components with consistent visual hierarchy.

What is the best way to ensure UI components are accessible?▼

Accessible UI components require implementing semantic HTML and ARIA roles to ensure screen reader compatibility. This approach guarantees that navigation, forms, and dashboards meet modern accessibility standards.

How do I build a consistent visual hierarchy for a web interface?▼

Building a consistent visual hierarchy involves establishing typography scales and spacing rules within a design system. This creates clear user focus and consistent styling across marketing pages and dashboards.

Can I use this approach for both marketing pages and dashboards?▼

Yes, this UI/UX approach applies to web interfaces across forms, navigation, dashboards, and marketing pages. It guides implementation from initial concepts to reusable components suitable for varied layouts.

Why does my front-end UI look inconsistent across different devices?▼

Front-end UI inconsistency often stems from lacking responsive behavior and a unified design system. Applying modern styling with Tailwind and accessible semantics resolves these visual gaps across screen sizes.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
MarunionMarunion

reverse

Reverse-engineer codebases to generate spec.md and arch.md documentation.

Community
Advanced
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate
dejanvasic85dejanvasic85
1

frontend-design

Generates Tailwind and CSS-based designs and layouts for a given text description, with multiple aesthetic options to choose from.

Community
Basic