ui-ux-design

スター12

フォーク2

更新日2026年5月2日 04:50

Use when a task changes UI structure, visual design, interaction states, accessibility, responsive behavior, design systems, landing pages, dashboards, mobile screens, forms, charts, or frontend polish.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

ソース

Merchantlee99

Merchantlee99/Vibebuilder

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

UI/UX Design Intelligence

Use this skill whenever the work changes how a product looks, feels, moves, or is interacted with.

Trigger

Use for:

landing pages, dashboards, admin panels, SaaS screens, portfolio, blog, e-commerce, mobile app UI
components: buttons, forms, modals, navbars, sidebars, cards, tables, charts
styling: color, typography, spacing, layout, animation, dark mode, responsive behavior
UX review, visual polish, accessibility checks, design-system creation

Skip for pure backend, API, database, infra, or non-visual automation work.

Design Workflow

Identify product type, user goal, platform, stack, and primary action.
Create or update a design system before implementing visuals.
Define semantic tokens: color, typography, spacing, radius, elevation, motion.
Choose a visual direction intentionally. Avoid generic AI defaults.
Design mobile-first, then scale to desktop.
Validate accessibility, interaction states, forms, responsive layout, and performance.
Run a pre-delivery UI/UX anti-pattern check.

Priority Checks

Accessibility: contrast, labels, keyboard navigation, focus states, alt text.
Touch and interaction: 44px+ targets, loading feedback, hover-independent actions.
Layout and responsive: no horizontal scroll, safe spacing, readable line lengths.
Typography and color: semantic tokens, 16px base body, consistent type scale.
Forms and feedback: visible labels, inline errors, recovery path.
Motion: 150-300ms meaningful transitions, reduced-motion support.
Performance: image dimensions, lazy loading, avoid layout shift.
Visual quality: coherent style, one icon language, one primary CTA per screen.

Required Artifacts For Normal+ UI Work

docs/ai/current/UI-UX-Brief.md
docs/ai/current/Design-System.md
docs/ai/current/UI-Review.md

Templates are available under templates/.

Output Contract

Return:

product and user goal
design direction
design tokens
page/component structure
accessibility and responsive checks
implementation notes
UX risks or follow-ups

このリポジトリの他の Skills

同じリポジトリ

codex-skill-router

Merchantlee99/Vibebuilder

Explicit GPT-5.6 native-first router for auditing, designing, installing, or validating Codex skill combinations, global skill setup, routing fixtures, and harness behavior. Use when the user explicitly invokes $codex-skill-router or asks to change or inspect Codex skills, routing, AGENTS guidance, or global harness configuration. Do not use for ordinary coding, review, debugging, research, or UI work merely because the task is complex.

2026-07-0912

domain-language

Merchantlee99/Vibebuilder

Use when work introduces or changes shared nouns, states, IDs, ownership, authority, or customer-facing vocabulary.

2026-05-2412

eval-loop

Merchantlee99/Vibebuilder

Use when changing harness gates, routing rules, skills, or automation behavior and benchmark/eval evidence is needed to avoid slowing normal coding performance. Do not use for ordinary app code changes.

2026-05-2412

grill-me

Merchantlee99/Vibebuilder

Use when a request is early, ambiguous, or lacks a codebase-backed shared language; interview the user to expose assumptions before planning.

2026-05-2412

grill-with-docs

Merchantlee99/Vibebuilder

Use when a codebase, docs, ADRs, tests, prior reviews, or team traces exist; align new work with existing shared language before implementation.

2026-05-2412

intent-routing

Merchantlee99/Vibebuilder

Use first for normal or high-risk natural-language work to choose task mode, tier, grill path, spec layers, team-rule scan, and required gates before implementation.

2026-05-2412

UI/UX Design Intelligence

Use this skill whenever the work changes how a product looks, feels, moves, or is interacted with.

Trigger

Use for:

landing pages, dashboards, admin panels, SaaS screens, portfolio, blog, e-commerce, mobile app UI

components: buttons, forms, modals, navbars, sidebars, cards, tables, charts

styling: color, typography, spacing, layout, animation, dark mode, responsive behavior

UX review, visual polish, accessibility checks, design-system creation

Skip for pure backend, API, database, infra, or non-visual automation work.

Design Workflow

Identify product type, user goal, platform, stack, and primary action.

Create or update a design system before implementing visuals.

Define semantic tokens: color, typography, spacing, radius, elevation, motion.

Choose a visual direction intentionally. Avoid generic AI defaults.

Design mobile-first, then scale to desktop.

Validate accessibility, interaction states, forms, responsive layout, and performance.

Run a pre-delivery UI/UX anti-pattern check.

Priority Checks

Accessibility: contrast, labels, keyboard navigation, focus states, alt text.

Touch and interaction: 44px+ targets, loading feedback, hover-independent actions.

Layout and responsive: no horizontal scroll, safe spacing, readable line lengths.

Typography and color: semantic tokens, 16px base body, consistent type scale.

Forms and feedback: visible labels, inline errors, recovery path.

Motion: 150-300ms meaningful transitions, reduced-motion support.

Performance: image dimensions, lazy loading, avoid layout shift.

Visual quality: coherent style, one icon language, one primary CTA per screen.

Required Artifacts For Normal+ UI Work

docs/ai/current/UI-UX-Brief.md

docs/ai/current/Design-System.md

docs/ai/current/UI-Review.md

Templates are available under templates/.

Output Contract

Return:

product and user goal

design direction

design tokens

page/component structure

accessibility and responsive checks

implementation notes

UX risks or follow-ups

name	ui-ux-design
description	Use when a task changes UI structure, visual design, interaction states, accessibility, responsive behavior, design systems, landing pages, dashboards, mobile screens, forms, charts, or frontend polish.