スキルを探す

Extract Design System from Frontend Code

Google Stitch

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

• design systems
• documentation

Baseline UI

ibelick

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

• ui design
• frontend

Refactoring UI Design System

wondelai

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

• ui design
• frontend

Image to UI by Uizze

UIZZE

Implement an interface from a screenshot or mockup and compare the rendered result with the reference.

• frontend
• image to code

Vue Best Practices

vuejs-ai community

Apply Vue 3 component, reactivity and SSR guidance in a Vue project.

• vue
• frontend

Make Interfaces Feel Better

Jakub Krehel

Polish frontend interfaces with concrete rules for typography, nested corners, shadows, icons, hit areas and restrained motion, plus structured quick or full reviews.

• ui-design
• ux-design
• interaction-design

UI Craft

educlopez

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

• ui design
• frontend

Vite

Anthony Fu

Work with Vite configuration, plugins, server-side rendering and library builds.

• vite
• frontend

Vue

Anthony Fu

Use Vue component, reactivity and Composition API references.

• vue
• frontend

swiftui-design-skill

Wholiver

design skill for Claude AI. Grade A. SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use when designing new SwiftUI views, reviewing UI quality, creating iOS prototypes, choosing visual styles, improving app aesthetics, or when the UI looks generic or AI-generated.

• design
• go
• swift

Cloudflare Turnstile Setup

Cloudflare

Set up or repair Turnstile verification in an existing frontend and backend.

• cloudflare