xianxin-design-workflow

This project is a structured workflow for getting AI coding assistants to reliably produce finished UI pages that match a design specification. The README is written primarily in Chinese and describes a six-stage process that addresses a common problem: giving an AI tool a design document still tends to produce pages where colors are wrong, components are inconsistent, and there is no clear standard for deciding whether the result is acceptable.

The six stages are named design, spec, handoff, implement, verify, and deliver. The design stage generates a file called DESIGN.md that defines the visual rules for a project, covering color systems, typography, spacing, and component behavior. The spec stage takes that foundation and breaks down a single page into its structure, interactive states, and data fields. The handoff stage converts the spec into a task document that a developer or AI agent can execute against. The implement stage covers the actual code changes, with rules about not hardcoding colors or sizes and pausing for user confirmation before writing. The verify stage compares screenshots of the result against a reference image and produces a report of deviations. The deliver stage checks nine conditions before signing off on the work.

The project supports eight AI tools: Kiro, Claude Code, OpenAI Codex CLI, Cursor, Windsurf, Trae, Google Antigravity, and a generic system prompt option for any other tool. Each stage comes with adapter files formatted for each of these tools. Installation involves copying the relevant adapter files to the configuration folder the target tool expects.

The verify stage includes an optional automated version for Kiro and Claude Code users where eight AI agents check the eight quality dimensions in parallel and merge their findings into a single report.