Does this skill generate production React or Vue code?

No, it focuses on generating a detailed UI specification (ui.md) that serves as the blueprint for the subsequent frontend architecture and implementation phases.

What inputs does the UI skill require to function?

The skill requires a functional requirements document (spec.md) and a backend design document (arch-be.md) to accurately map screens to available API endpoints.

How does it handle responsive design requirements?

During the setup phase, you can choose between Mobile-only, Desktop-only, or Responsive (Mobile First) strategies, which will be reflected in the generated layout specifications.

Why does the skill use ASCII wireframes instead of images?

ASCII wireframes provide a lightweight, version-controllable way to define structural layout and component placement without getting distracted by high-fidelity visual design details.

ArchFlow UI Spec Generator

Name: ArchFlow UI Spec Generator
Author: samdae

bysamdae

0•

デザインツール

Generates comprehensive UI specifications and component hierarchies by mapping functional requirements to backend API designs.

The ArchFlow UI skill automates the transition from backend architecture to frontend design by deriving screen lists, interaction patterns, and component hierarchies directly from your API endpoints and requirements documents. It produces detailed markdown specifications—complete with ASCII wireframes and state definitions for loading, empty, and error scenarios—ensuring that your user interface is perfectly aligned with your backend capabilities and business logic before frontend development begins.

主な機能

01Generation of structural ASCII wireframes for layout visualization

02Comprehensive UI state definitions (Loading, Empty, Error, Loaded) for every screen

03Automatic screen derivation based on RESTful API endpoint patterns

04Configurable responsive design strategies for Mobile, Desktop, or Cross-platform targets

05Detailed component hierarchy and reusable shared component mapping

060 GitHub stars

ユースケース

01Rapidly prototyping frontend structures based on an existing backend API design

02Generating standardized UI documentation for team alignment and development handoff

03Bridging the gap between functional requirements and technical frontend architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samdae/archflow ui

For use in Claude.ai and ChatGPT

Download Skill