Iteration & Polish

Generates a comprehensive, project-specific pre-launch checklist covering every category a designer should verify before going live. Not a generic list it's tailored to the specific project's tech stack, features, and requirements.

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

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

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.

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.

Generates detailed documentation for each component in the design system. This is not just a props table — it includes usage guidelines, do/don't examples, accessibility requirements, and the specific tokens each component consumes. The output becomes the component section of the CLAUDE.md.

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.”

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.

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.

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.

Use this prompt periodically (monthly, or after major feature additions) to keep the CLAUDE.md in sync with the actual codebase. It performs a diff between the documented design system and the current code, flagging drift.

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