design-os-product-planning

Guides product planning, data modeling, and UI design through a structured TypeScript workflow.

4|Updated May 16, 2026

Search Tags:#typescript #design system #design tokens #data modeling #handoff #ui design #product planning

Ready to run

npx skills add https://github.com/reason-machines/design-skills --skill design-os-product-planning-reason-machines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-os-product-planning
Source: https://github.com/reason-machines/design-skills/tree/main/skills/design-os-product-planning
Command: npx skills add https://github.com/reason-machines/design-skills --skill design-os-product-planning-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents the "build first, understand later" problem by establishing a complete design specification—product vision, data model, design system, and screen designs—before any implementation begins. ## Core Features & Use Cases - Structured Product Planning: Define product vision, roadmap features, and entity data models with explicit relationships. - Design System Configuration: Specify color palettes, typography scales, spacing tokens, and export them as CSS variables or design tokens. - Handoff Package Export: Generate implementation-ready specifications including components, tests, types, and documentation for coding agents. - Use Case: Before building a SaaS dashboard, walk through the Design OS process to define your User and Order entities, configure a design system, design the dashboard screens, and export a complete handoff package for your coding agent. ## Quick Start Clone the design-os repository, install dependencies with npm or bun, add your Anthropic or OpenAI API key to a .env file, and run npm run dev to start the guided design process.

Frequently Asked Questions about design-os-product-planning

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

FAQPage Schema

How do I set up Design OS for product planning?▼

Clone the design-os repository from GitHub, install dependencies with npm install or bun install, then create a .env file with your ANTHROPIC_API_KEY or OPENAI_API_KEY. Run npm run dev to start the interactive guided design process.

What does a Design OS handoff package include?▼

A handoff package contains the product specification with requirements and data models, the design system with screens and components, implementation code with tests and type definitions, plus context like design decisions and constraints for coding agents.

Does Design OS work with OpenAI or only Anthropic?▼

Design OS supports both providers. Set either ANTHROPIC_API_KEY or OPENAI_API_KEY in your .env file, and optionally configure the AI_MODEL environment variable to choose a specific model.

How do I export design tokens as CSS variables?▼

Define your color and spacing scales in the design system configuration, then use the token export pattern to generate CSS custom properties like --color-primary-500 and --spacing-sm under a :root selector.

Why does the AI generate designs that don't match my vision?▼

Generic outputs usually mean insufficient context. Provide explicit constraints with must, mustNot, and preferences lists, plus realistic sample data and a clear product vision statement covering problem, target users, and differentiators.

What are the limitations of Design OS?▼

Design OS requires Node.js 18+ or Bun and an external AI provider API key, so it cannot run fully offline. It produces specifications and starter code rather than complete production applications, and output quality depends on the detail of the context you provide.