Design Token Audit

Find hardcoded colors/spacing and map them to design tokens.

Prompt

Copy the prompt, then replace the placeholders with your own context.

Audit this UI for design system consistency. Find: - Hardcoded colors, spacing, radii, typography - One-off components duplicating existing primitives - Dark mode gaps Propose token mappings using existing theme variables. Minimal visual change unless fixing clear bugs.

Related prompts

More prompts with similar tags or categories.

Design

Any model

Empty State Microcopy

Write helpful empty states that guide the next action.

133 copies

Write empty state copy for this screen. Include: - Title (what's empty) - One sentence of context - Primary action label - Optional secondary action Friendly but concise. No illustrations suggestions unless asked.

copy

by prompts!

View

Coding

Any model

Extract and Simplify Component

Split an oversized component into focused pieces without behavior change.

168 copies

This component is too large. Refactor without changing behavior. Steps: 1. List distinct responsibilities in the current file 2. Propose extraction boundaries (hooks, subcomponents, utils) 3. Keep public props stable unless noted 4. Run/tests or describe manual checks for parity Prefer composition over prop drilling. Match existing file and naming conventions.

react

refactoring

by prompts!

View

Design

Any model

Accessibility UI Pass

Fix keyboard, focus, labels, and semantics — not just color contrast.

220 copies

Review this UI for accessibility before merge. Check: - Keyboard navigation and focus order - Visible focus states - Labels, roles, and live regions for screen readers - Color contrast and non-color cues - Form errors associated with fields - Motion / reduced-motion respect List issues by WCAG impact. Provide minimal code fixes, not a full redesign.

accessibility

frontend

a11y

by prompts!

View