workflow-ui-build-order

Name: workflow-ui-build-order
Availability: InStock
Author: akourmaz

Orchestrate a 9-phase UI build process from tokens to polish.

Updated Mar 2, 2026

Search Tags:#workflow #frontend #ui-design #design-system #design-tokens #token-driven

Ready to run

npx skills add https://github.com/akourmaz/translate2 --skill workflow-ui-build-order

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: workflow-ui-build-order
Source: https://github.com/akourmaz/translate2/tree/main/.agents/skills/workflow-ui-build-order
Command: npx skills add https://github.com/akourmaz/translate2 --skill workflow-ui-build-order

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This protocol provides a structured, 9-phase workflow to orchestrate UI implementation from tokens to polish, ensuring design consistency and coordination across teams.

Core Features & Use Cases

Phase sequencing: establishes a deterministic order (tokens → layout → components → states → polish) to reduce ambiguity.
Codified prompts: includes ready prompts for @coder during each phase to speed up delivery.
Design-system alignment: links token creation to layout, components, states, and polish for cohesive UX.
Use Case: ideal for frontend feature development, major UI redesigns, and component library builds where consistency is critical.

Quick Start

Begin Phase 1 to outline design tokens and start the 9-phase workflow for UI implementation.

Frequently Asked Questions about workflow-ui-build-order

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is a token-driven UI build order and why is it needed for frontend development?▼

A token-driven UI build order establishes a deterministic sequence from design tokens to layout, components, states, and polish, reducing ambiguity and ensuring design consistency across teams during frontend feature development.

How do I structure a phased UI workflow to prevent scope creep in component library builds?▼

You structure a phased UI workflow by enforcing a strict 9-phase order with explicit prompts at each stage, guarding against scope creep while ensuring token-driven styling, accessibility checks, and consistent UX outcomes.

Does this UI build process work for major frontend redesigns without existing design tokens?▼

Yes, the workflow begins with Phase 1 to outline design tokens, making it suitable for major UI redesigns and component library builds even when starting without a pre-existing token system.

What's the best way to sequence design system implementation from tokens to final polish?▼

The best way to sequence design system implementation is following the deterministic order: tokens first, then layout, components, states, and finally polish, linking each phase cohesively for consistent UX.

Can I use this phase-driven workflow for individual component development or is it only for full design systems?▼

The phase-driven workflow applies to frontend feature development, design-system initiatives, and component-library work, making it effective for both individual component development and full design system implementation.

Why does my frontend UI implementation lose consistency without a codified phase sequence?▼

Frontend UI implementation loses consistency without a codified phase sequence because there is no deterministic order enforcing token-driven styling and accessibility checks across tokens, layout, components, states, and polish.