Web UI 设计指南：响应式、组件化与可访问性最佳实践

Web UI Design by dasien/retrowarden

4 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/dasien/retrowarden --skill 'Web UI Design'

开发设计用户体验

🇨🇳中文介绍

Web UI 设计

目的

使用 HTML/CSS/JavaScript 框架设计现代化、响应式的网页界面，遵循当前的用户体验最佳实践和可访问性标准。

使用场景

创建 Web 应用程序界面
设计响应式布局
规划组件层级结构
组织页面导航

核心能力

响应式设计 - 创建适用于所有屏幕尺寸的布局
组件化思维 - 将 UI 拆分为可复用的组件
可访问性 - 确保符合 WCAG 标准并支持屏幕阅读器

方法

采用移动优先设计，然后逐步扩展
使用网格/弹性盒子布局实现响应式设计
将 UI 拆分为可复用的组件
遵循可访问性指南（ARIA、语义化 HTML）
确保色彩对比度和键盘导航
提供加载状态和错误反馈

示例

场景：用户个人资料页面

<!-- 移动优先的响应式设计 -->
<div class="profile-container">
  <header class="profile-header">
    <img src="avatar.jpg" alt="User avatar" class="avatar">
    <h1>John Doe</h1>
  </header>
  
  <section class="profile-info">
    <div class="info-grid">
      <div class="info-item">
        <label>Email</label>
        <span>john@example.com</span>
      </div>
      <div class="info-item">
        <label>Role</label>
        <span>Developer</span>
      </div>
    </div>
  </section>
  
  <footer class="profile-actions">
    <button class="btn-primary">Edit Profile</button>
    <button class="btn-secondary">Change Password</button>
  </footer>
</div>

<style>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
}
</style>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Web UI Design

Purpose

Design modern, responsive web interfaces using HTML/CSS/JavaScript frameworks, following current UX best practices and accessibility standards.

When to Use

Creating web application interfaces
Designing responsive layouts
Planning component hierarchies
Organizing page navigation

Key Capabilities

Responsive Design - Create layouts that work on all screen sizes
Component Thinking - Break UI into reusable components
Accessibility - Ensure WCAG compliance and screen reader support

Approach

Design mobile-first, then scale up
Use grid/flexbox for responsive layouts
Break UI into reusable components
Follow accessibility guidelines (ARIA, semantic HTML)
Ensure color contrast and keyboard navigation
Provide loading states and error feedback

Example

Context : User profile page

<!-- Mobile-first responsive design -->
<div class="profile-container">
  <header class="profile-header">
    <img src="avatar.jpg" alt="User avatar" class="avatar">
    <h1>John Doe</h1>
  </header>
  
  <section class="profile-info">
    <div class="info-grid">
      <div class="info-item">
        <label>Email</label>
        <span>john@example.com</span>
      </div>
      <div class="info-item">
        <label>Role</label>
        <span>Developer</span>
      </div>
    </div>
  </section>
  
  <footer class="profile-actions">
    <button class="btn-primary">Edit Profile</button>
    <button class="btn-secondary">Change Password</button>
  </footer>
</div>

<style>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
}
</style>

Best Practices

✅ Mobile-first responsive design
✅ Semantic HTML elements (header, nav, main, footer)
✅ Accessible forms with labels and ARIA attributes
✅ Loading states and error messages
❌ Avoid: Fixed pixel widths
❌ Avoid: Relying only on color for information

Weekly Installs

–

Repository

dasien/retrowarden

GitHub Stars

First Seen

–

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass