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

web-designer

Design user interfaces and design systems for web and mobile experiences.

35|3|Updated Jun 24, 2025
Search Tags:#design#accessibility#UI/UX#prototyping#wireframes#design-systems
One-click install
npx skills add https://github.com/intelligentcode-ai/intelligent-claude-code --skill web-designer-intelligentcode-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-designer
Source: https://github.com/intelligentcode-ai/intelligent-claude-code/tree/main/src/skills/web-designer
Command: npx skills add https://github.com/intelligentcode-ai/intelligent-claude-code --skill web-designer-intelligentcode-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams convert ideas into polished UI concepts, cohesive designs, and accessible interfaces, reducing design iteration time and misalignment.

Core Features & Use Cases

  • User Research & Personas: Translate user insights into compelling interface directions.
  • Visual Design & Systems: Create a consistent visual language, design tokens, and component libraries.
  • Accessibility & Responsiveness: Ensure WCAG-compliant, responsive designs across devices.
  • Use Case: When building a web app, outline IA, wireframes, and a draft style guide to align stakeholders.

Quick Start

Outline the target user, device constraints, and branding goals for your interface to start.

Frequently Asked Questions about web-designer

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

FAQPage Schema
How do I design intuitive interfaces and create a cohesive design system for web apps?▼

You can design intuitive interfaces by translating user insights into wireframes, visual design specifications, and cohesive design systems. This process establishes a consistent visual language using design tokens and component libraries for web and mobile apps.

What is the best way to ensure my UI design is WCAG-compliant and responsive across devices?▼

The best way to ensure WCAG-compliant UI design is to integrate accessibility and responsiveness checks throughout the visual design phase. This ensures your interfaces meet accessibility standards across all web and mobile device constraints.

How do I convert user research and personas into a visual design direction?▼

You convert user research into visual design by translating user insights and personas into compelling interface directions. This involves defining the target user, device constraints, and branding goals to guide the visual language and component library.

Can I use this approach to generate design tokens and component libraries for mobile interfaces?▼

Yes, you can generate design tokens and component libraries for mobile interfaces using this approach. The process supports creating a consistent visual language tailored to specific device constraints across both web apps and mobile platforms.

Do I need prior UX research to start building wireframes and a style guide?▼

You do not need prior UX research to start, but providing target user details, device constraints, and branding goals is required. This initial input enables the process to draft information architecture, wireframes, and a style guide effectively.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
truongnattruongnat

ux-design-pro

Support UX design with user research, information architecture, wireframing, and WCAG accessibility standards.

Community
Advanced