explaingit

lxxgg92/xianxin-design-workflow

23JavaScriptAudience · vibe coderComplexity · 2/5Setup · easy

TLDR

A six-stage structured workflow that gets AI coding assistants to reliably produce UI pages matching a design spec, with ready-made adapter files for eight AI tools including Claude Code and Cursor.

Mindmap

mindmap
  root((repo))
    Six stages
      Design
      Spec
      Handoff
      Implement
      Verify
      Deliver
    Supported tools
      Claude Code
      Cursor
      Windsurf
      OpenAI Codex CLI
    What it solves
      Wrong colors
      Inconsistent components
      No acceptance standard
    Outputs
      DESIGN.md
      Task documents
      Verification report
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Generate a DESIGN.md file that locks in the color system, typography, and spacing so an AI tool cannot deviate from the visual spec during implementation.

USE CASE 2

Use the verify stage to run up to eight parallel AI agents that screenshot-compare a finished page against a reference image and produce a deviation report.

USE CASE 3

Follow the six-stage process with any of eight supported AI tools to produce a complete, spec-compliant UI page from a single design document.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 30min

Copy the relevant adapter files into the configuration folder your chosen AI tool expects, no build step is required.

No license information is mentioned in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1
I am using xianxin-design-workflow with Claude Code. Walk me through the design stage to create a DESIGN.md for a SaaS dashboard with a dark blue primary color, Inter font, and 8px base spacing.
Prompt 2
Using xianxin-design-workflow's verify stage with Claude Code, compare my finished login page screenshot against the reference image and list every deviation from the spec.
Prompt 3
I am at the handoff stage of xianxin-design-workflow. Convert this spec document into an executable task file that Claude Code can work through step by step without needing clarification.
Prompt 4
Help me install the xianxin-design-workflow adapter files for Cursor so the six-stage process runs correctly inside my existing project folder.
Open on GitHub → Explain another repo

← lxxgg92 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.