agentic-design-toolkit: Instructions file for GitHub Copilot

agentic-design-toolkit

A collection of agentic AI tools — skills and instructions — focused on design workflows.

Purpose

This toolkit provides reusable, composable components for automating design-related tasks using AI. All tools are built to work with both Claude (via Claude Code / Cowork) and GitHub Copilot (primary consumer).

Project Structure

• skills/ — Skill prompt files shared between Claude and Copilot, each scoped to a single design task or workflow
• instructions/ — VS Code-style instruction files for Copilot only. Each file uses applyTo frontmatter to scope instructions to specific file patterns (e.g., **/*.ts,**/*.html). Not loaded by Claude.

Skill Pipeline

The skills compose into a design workflow. Use this map to route a request to the right skill and to suggest the logical next step; contributors use it to see where a new skill fits.

1. design-grill — pressure-test a concept before any design work begins
2. wireframe-design — explore structural options as interactive lo-fi wireframes
3. prototype-design — build a realistic, interactive prototype of the chosen direction, delivered either as a React + Vite project or as a single self-contained HTML file (same visual fidelity, different functional ceiling; the user always makes the final format call, and companion files carry the format-specific mechanics)
4. research-plan — plan a research study (discovery interviews or a prototype-based usability test); analyzes the prototype and co-drafts themes and test scenarios with the user
5. research-synthesis — distill user research into themes, insights, and prioritized opportunities
6. prototype-audit — compare a prototype against a research synthesis; produces a prioritized implementation plan
7. spec-design — build production-ready Angular UI from a design, prototype, or audit plan

storybook-docs sits outside the pipeline — a standalone skill for documenting design-system components and foundations in Storybook.

Skills are self-contained and can be invoked at any entry point — not every project touches every stage. Cross-references between skills use the skill's folder name.