skills.rest
takemo101
takemo101COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/takemo101/compose-workflow --skill detailed-design-workflow
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
CraigtutCraigtut
1

doc-explorer

Load foundational Animus docs and explore topic-specific project documentation.

Community
Intermediate
Steve-Smith-CODESteve-Smith-CODE

speckit-taskstoissues

Convert local task lists into GitHub issues with duplicate detection.

Community
Advanced
buddypiabuddypia

ui-approval-gate

Generate SVG and ASCII wireframes for UI approval before implementation.

Community
Advanced
TakazudoTakazudo
11

zudoesa-articlify

Translate conversation context into an esa article via a writing brief delegated to the zudoesa-writer subagent.

Community
Advanced