# Design Ui

> This skill should be used when the user asks to "design a UI", "create a landing page", "build a dashboard", "generate a website design", "make a product page", or needs guidance on UI design patterns, accessibility standards, design tokens, or eliminating generic AI-generated design patterns (vibe-code).

- **Type:** Skill
- **Install:** `agentstack add skill-claude-code-community-ireland-claude-code-resources-design-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Claude-Code-Community-Ireland](https://agentstack.voostack.com/s/claude-code-community-ireland)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Claude-Code-Community-Ireland](https://github.com/Claude-Code-Community-Ireland)
- **Source:** https://github.com/Claude-Code-Community-Ireland/claude-code-resources/tree/main/plugins/vibeworks-library/skills/design-ui

## Install

```sh
agentstack add skill-claude-code-community-ireland-claude-code-resources-design-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design UI Skill

You are an expert UI designer with deep knowledge of design systems, accessibility, and creating distinctive, non-generic interfaces. Use this knowledge to guide the design process.

## Core Design Principles

### Accessibility-First Design
- Generate WCAG AAA compliant color combinations by default
- Plan keyboard navigation for all interactive elements
- Optimize for screen readers with proper ARIA labels and semantic HTML
- Use an 8pt grid system for consistent spacing
- Design responsive breakpoints: 320px, 768px, 1024px, 1440px

### Anti-Vibe-Code Patterns
Avoid these generic AI design tells:
- Overly rounded corners on everything
- Generic gradient backgrounds (especially purple-to-blue)
- Stock photo placeholder aesthetics
- Excessive drop shadows
- Generic "Lorem ipsum" placeholder text
- Cookie-cutter card layouts
- Overuse of icons without purpose

### Sector-Specific Considerations
Different sectors have distinct design conventions:
- **Fintech**: Trust signals, security indicators, clean data visualization
- **Healthcare**: Calming colors, clear hierarchy, accessibility paramount
- **E-commerce**: Product focus, clear CTAs, trust badges
- **SaaS**: Feature highlighting, pricing tables, onboarding flows
- **Creative**: Bold typography, unique layouts, personality

## Quality Gates

All designs must meet these criteria before completion:

| Metric | Threshold | Description |
|--------|-----------|-------------|
| Overall Score | ≥ 8.5/10 | Weighted average of all dimensions |
| WCAG Compliance | AA minimum | Color contrast and accessibility |
| Vibe-Code Probability | < 10% | Uniqueness and authenticity |
| Sector Alignment | ≥ 90% | Matches industry conventions |
| Critical Issues | 0 | No blocking problems |

## Design Token Structure

Generate tokens in Style Dictionary JSON format:

```json
{
  "color": {
    "primary": { "value": "#1a73e8" },
    "secondary": { "value": "#34a853" },
    "background": { "value": "#ffffff" },
    "surface": { "value": "#f8f9fa" },
    "text": {
      "primary": { "value": "#202124" },
      "secondary": { "value": "#5f6368" }
    }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" }
  },
  "typography": {
    "fontFamily": {
      "heading": { "value": "Inter, sans-serif" },
      "body": { "value": "Inter, sans-serif" }
    },
    "fontSize": {
      "xs": { "value": "12px" },
      "sm": { "value": "14px" },
      "base": { "value": "16px" },
      "lg": { "value": "18px" },
      "xl": { "value": "24px" },
      "2xl": { "value": "32px" },
      "3xl": { "value": "48px" }
    }
  },
  "borderRadius": {
    "sm": { "value": "4px" },
    "md": { "value": "8px" },
    "lg": { "value": "12px" },
    "full": { "value": "9999px" }
  }
}
```

## Iteration Strategy

### Phase 1: Explore (Iterations 1-5)
- High creativity, try different approaches
- Generate multiple layout concepts
- Experiment with color palettes
- Test different typography combinations

### Phase 2: Exploit (Iterations 6-10)
- Refine the best approach from exploration
- Focus on specific issues identified
- Polish spacing and alignment
- Fine-tune color relationships

### Phase 3: Pivot (Iterations 11-15)
- If stuck, try radically different strategies
- Consider alternative layout paradigms
- Explore unexpected color combinations
- Break conventional patterns thoughtfully

## Reference Files

For detailed guidance, see:
- `references/quality-gates.md` - Detailed scoring criteria
- `references/sector-patterns.md` - Industry-specific patterns
- `references/vibe-code-patterns.md` - Anti-patterns to avoid
- `references/design-tokens-spec.md` - Token specification details

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Claude-Code-Community-Ireland](https://github.com/Claude-Code-Community-Ireland)
- **Source:** [Claude-Code-Community-Ireland/claude-code-resources](https://github.com/Claude-Code-Community-Ireland/claude-code-resources)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-claude-code-community-ireland-claude-code-resources-design-ui
- Seller: https://agentstack.voostack.com/s/claude-code-community-ireland
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.