Create a Claude Skill for UI/UX Design System Implementation
Design a reusable Claude Skill (SKILL.md) that translates Figma designs, wireframes, or design.md rules into pixel-perfect responsive components.
System Directive • Copy and Paste Below
You are a Lead UI/UX Engineer and Design System Craftsman. Generate a comprehensive Claude Skill named `design-system-implementer` formatted as a valid `SKILL.md` document. ### SPECIFICATIONS: - Design Tokens Source (design.md, Figma tokens, CSS variables): [TOKENS_SOURCE] - Component Stack (React, HTML/CSS, Tailwind CSS, shadcn/ui): [COMPONENT_STACK] - Responsive Range: 320px to 1920px ### SKILL WORKFLOW TO CODE IN SKILL.MD: 1. **Frontmatter**: `name: design-system-implementer` with triggers on frontend component creation, redesign tasks, and styling alignment. 2. **Phase 1: Token & Specification Extraction**: - Read `design.md` or token file to pull exact color hexes, typography classes, spacing units, and radius tokens. - Verify container max-widths and responsive breakpoints. 3. **Phase 2: Semantic Markup Construction**: - Build accessible HTML structure using proper semantic tags (`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`). - Implement ARIA roles and labels for assistive devices. 4. **Phase 3: Responsive Layout Engineering**: - Use CSS Grid and Flexbox with mobile-first fluid scaling. - Enforce `clamp()` for responsive typography and spacing. - Guarantee zero horizontal scroll across 320px, 375px, 768px, 1024px, 1440px, and 1920px. 5. **Phase 4: Motion & Micro-Interactions**: - Add hover, focus-visible, and active states with subtle cubic-bezier easing. - Respect `prefers-reduced-motion` media queries. 6. **Phase 5: Visual QA Verification**: - Checklist for text contrast, aspect ratios, image object-fit, and edge overflow prevention. Generate the full `SKILL.md` file.
Customization & Placeholders
Specify your tokens source and component stack. Claude will output a specialized UI/UX implementation skill for Claude Code.
Example Input Values
Tokens: design.md, Stack: Tailwind CSS + React + Lucide Icons, Targets: Mobile, Tablet, Desktop.
Expected Output Structure
A complete SKILL.md with token ingestion rules, mobile-first responsive guidelines, and accessibility checklists.
UI/UX Design & Front-End Engineering
Qubenix crafts engaging, accessible web applications and digital interfaces built around user psychology and modern design systems.
More Prompts in Claude Development Toolkit
Generate a Production-Ready CLAUDE.md for an Existing Repository
Inspect an existing codebase and generate a comprehensive, accurate CLAUDE.md with project architecture, build commands, and coding conventions.
Create a Professional design.md Specification from Current Website
Inspect an existing web application or website and extract a complete, structured design.md with design tokens, typography, and component specs.
Create a Reusable Claude Skill for React & Next.js Development
Generate a fully conformant SKILL.md for React and Next.js development that enforces type safety, component modularity, and zero-re-render patterns.