whatisgithub

What is xianxin-design-workflow?

lxxgg92/xianxin-design-workflow — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

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

What do people build with it?

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.

What is it built with?

JavaScript

How does it compare?

lxxgg92/xianxin-design-workflowccpt5/comfyui-berninistudiohemsby/tdns-stats
Stars232323
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasymoderatemoderate
Complexity2/53/52/5
Audiencevibe codervibe coderops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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.

Frequently asked questions

What is xianxin-design-workflow?

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.

What language is xianxin-design-workflow written in?

Mainly JavaScript. The stack also includes JavaScript.

What license does xianxin-design-workflow use?

No license information is mentioned in the explanation.

How hard is xianxin-design-workflow to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is xianxin-design-workflow for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.