What problem does it solve? UI work in an AI-assisted project drifts when every agent invents its own components and tokens. This Skill establishes one design system per project and produces per-story screen designs just-in-time, so frontend and backend work stay consistent and each story's design gate is cleared before its build. ## Core Features & Use Cases - Design system picker: Filters a catalogue of design systems by platform (Flutter, SwiftUI, React, Next.js, Vue, WinUI, and more), then writes the choice to .archflow/design-system.yaml with platform, library, and theme settings. - Custom brand tokens: Supports a custom-tokens option that imports an existing tokens.json, generates a starter token file from a brand color, or defers the decision to Phase 2. - Per-story design gate: Resolves a story id like S7-20, checks its needs_design gate and status, dispatches a ux-designer agent scoped to that story, and advances the story status only after human acceptance. - Use Case: A developer runs /archflow-design pick to choose Material 3 for a Flutter app, then later runs /archflow-design S7-20 to generate and approve the screens for that story before its build begins. ## Quick Start Ask the agent to run /archflow-design pick to choose a design system for the project, or run /archflow-design followed by a story id to design that story's screens.
