git404hub

what is xianxin-design-workflow fr?

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

Analysis updated 2026-05-18

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

tl;dr

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.

vibe map

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

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 make with this?

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

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

VIBE 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's the stack?

JavaScript

how it stacks up fr

lxxgg92/xianxin-design-workflowavbiswas/llm_visualizerccpt5/comfyui-berninistudio
Stars232323
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasymoderatemoderate
Complexity2/53/53/5
Audiencevibe coderdevelopervibe coder

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

how do i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.