Design System Consistency Auditor

Transforms any idea into a clean, premium, Apple-inspired UI system with real design discipline and production-ready structure. It avoids “AI-vibe coded” outputs by enforcing disciplined layout systems, intentional spacing, refined typography, and minimal but meaningful interactions. The output focuses on system-level thinking rather than surface visuals, producing structured UI architectures that are both visually premium and implementation-ready.

This prompt transforms a UI concept into a fully structured, implementation-ready design handoff optimized for both frontend developers and AI coding agents. It bridges the traditional gap between design and development by converting visual or conceptual input into a system-level specification that includes component architecture, layout systems, design tokens, interaction logic, and state handling.

Reverse-engineers any UI to reveal why it converts (or fails) using behavioral and UX analysis. Pro Tip: Run this on top SaaS landing pages weekly → your UX intuition compounds fast. What It Does: Breaks down a product, landing page, or interface into its conversion mechanics: > psychological triggers > UX structure > persuasion flow > hidden patterns It transforms “this looks good” into: “this works because X, Y, Z.”

Systematically checks a built design against its intended specification across browsers, devices, and edge cases. This is the designer's QA not functional testing, but visual fidelity and interaction quality. Produces a categorized issue list with exact reproduction steps and suggested fixes

Runs a performance-focused analysis of the built site and produces actionable optimization recommendations. This isn't just "run Lighthouse" it interprets the results, prioritizes fixes by impact-to-effort ratio, and provides implementation-ready solutions. Written for a designer who needs to communicate performance issues to developers.

Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design "should feel," this document provides machine-parseable specifications with zero ambiguity. Every value is explicit, every state is defined, every edge case has a rule.

Create a feature testing page design for Enterprise WeChat/DingTalk focusing on address book management, calendar/schedule management, and message sending/receiving. The design should be user-friendly, sleek, and have a technological appeal.

This prompt will help you to build your web site page by page after the kick starter prompt

This prompt will help you to refine and polish over the design iteration.

This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory. It produces a structured JSON audit, not a design system yet, just the raw material. Run this first before any organization or documentation happens. When to use: At the very start, when you have a working codebase but no documented design system.

Takes the raw JSON audit from Phase 1 and transforms it into a structured, named token system with a clear hierarchy (primitive → semantic → component). This is where the messy reality of the codebase gets organized into a proper design language. Claude will also flag what to rename, merge, or deprecate.

A prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.