detailed-design-workflow

Generate detailed design documents and HTML mockups from basic design inputs.

Updated Jan 8, 2026

Search Tags:#design #software engineering #documentation #workflow automation #mockup generation #test specification

Ready to run

npx skills add https://github.com/takemo101/compose-workflow --skill detailed-design-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: detailed-design-workflow
Source: https://github.com/takemo101/compose-workflow/tree/main/.pi/skills/detailed-design-workflow
Command: npx skills add https://github.com/takemo101/compose-workflow --skill detailed-design-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires wireframe-generator, detailed-design-writer, test-spec-writer, approval-gate, github-graphql-api, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of detailed design documents, including backend, frontend, and screen designs, along with test specifications, from basic design inputs.

Core Features & Use Cases

Automated Design Generation: Creates detailed design documents based on input basic designs.
Mockup Creation: Generates HTML mockups and screenshots for screen designs.
Test Specification Generation: Produces test item documents based on design specifications.
Issue Management: Creates GitHub Issues for epics and sub-tasks.
Use Case: Streamline the transition from basic design to implementation by automatically generating all necessary detailed design artifacts and preparing them for development.

Quick Start

Initiate the detailed design workflow by providing the path to the basic design document.

Frequently Asked Questions about detailed-design-workflow

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

FAQPage Schema

How do I generate detailed design documents from a basic design?▼

To generate detailed design documents, provide the path to your basic design file. The workflow automates backend, frontend, and screen design creation, transforming basic inputs into comprehensive design artifacts.

Can I automate test specification generation alongside screen designs?▼

Yes, you can automate test specification generation alongside screen designs. The workflow produces test item documents based on design specifications and generates HTML mockups with screenshots.

Does the workflow automatically create GitHub issues for design epics?▼

Yes, the workflow automatically creates GitHub issues for design epics and sub-tasks. It uses the GitHub GraphQL API to manage issue creation directly from generated design artifacts.

What is needed to start automating detailed design and mockup creation?▼

To start automating detailed design and mockup creation, you need a basic design document. The workflow uses this input to generate detailed designs, HTML mockups, and test specifications.

How do approval gates work within test specification generation?▼

Approval gates within test specification generation manage quality assurance loops. They ensure user validation is required before finalizing design documents and proceeding to implementation.