SkillAgentSearch skills...

Design Skill Os

The elite design intelligence layer for AI agents, synthesized from 10+ legendary design books. It primes your AI with the collective strategic wisdom of master designers to generate high-intent UI/UX with zero "schtick."

Install / Use

npx skills add frhscopex/design-skill-os

Installs into whichever agent you are using.

README

Design Skill OS Pro Max ⚡

<p align="center"> <a href="https://github.com/frhscopex/design-skill-os/releases"><img src="https://img.shields.io/github/v/release/frhscopex/design-skill-os?style=for-the-badge&color=blue" alt="GitHub Release"></a> <a href="src/design-skill/SKILL.md"><img src="https://img.shields.io/badge/Reasoning%20Rules-161-green?style=for-the-badge" alt="161 Reasoning Rules"></a> <a href="src/design-skill/SKILL.md"><img src="https://img.shields.io/badge/UI%20Styles-67-purple?style=for-the-badge" alt="67 UI Styles"></a> <a href="src/design-skill/SKILL.md"><img src="https://img.shields.io/badge/Design%20Books-10-orange?style=for-the-badge" alt="10 Design Books"></a> <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-green?style=for-the-badge" alt="License: MIT"></a> </p> <p align="center"> <a href="https://www.npmjs.com/package/design-skill-os"><img src="https://img.shields.io/npm/v/design-skill-os?style=for-the-badge&logo=npm&label=npm" alt="npm"></a> <a href="https://www.npmjs.com/package/design-skill-os"><img src="https://img.shields.io/npm/dm/design-skill-os?style=for-the-badge&label=npm%20downloads" alt="npm downloads"></a> <a href="https://github.com/frhscopex/design-skill-os/stargazers"><img src="https://img.shields.io/github/stars/frhscopex/design-skill-os?style=for-the-badge&logo=github" alt="GitHub stars"></a> </p> <p align="center"> <a href="https://www.shadowmind.me/"> <img src="docs/sss-showcase.png" alt="Shadowmind showcase" /> </a> </p>

🧠 The Cognitive "Brain": Derived from 10+ Design Books

Design Skill OS is not just a document; it's a professional-grade reasoning layer that transforms standard AI outputs into elite-level design masterworks. We have exhaustively synthesized principles from the "Design Bibles" to prime your AI agent with the strategic intent of a world-class Creative Director.

📚 The Source of Truth

The intelligence core is distilled from the collective wisdom of masters:

  • Milton Glaser (Art is Work): Rejecting "schtick" for authenticity.
  • Ellen Lupton (Thinking with Type): Mastering the grid and typographic hierarchy.
  • Michael Bierut (How to Use Graphic Design to...): Using design as a tool for clear communication.
  • Bruce Mau (MC24): Designing for massive change and performativity.
  • Donald Norman (The Design of Everyday Things): Cognitive psychology and affordances.
  • Debbie Millman (Brand Thinking): Mapping the emotional resonance of identity.
  • Charles & Ray Eames: The philosophy that "The details are not the details; they make the design."

🛠 What the "Brain" Injects into your AI:

  • [Section 2] Gestalt Sovereignty: Forces the AI to use proximity, similarity, and closure to organize information naturally.
  • [Section 5] Chromatic Mastery: Implements the 60-30-10 Rule and creates harmonious palettes based on industry psychology.
  • [Section 8] Typographic Modular Scale: Calculates line-height, leading, and pairing using the Golden Ratio.
  • [Section 15] Digital Heuristics: Applies the 10 core usability rules (Nielsen/Norman) to every interface layout.
  • [Section 23] Red Team Audits: Advanced adversarial self-critique based on WCAG 2.1 and Bruce Mau's performance metrics.

⚡ What's New: The Red Team Protocol

The AI no longer just "makes pixels"—it audits them. Every design of the Design Skill OS undergoes an automated "Red Team" gauntlet:

1. HEURISTICS    -> Fixes UX friction & logic errors.
2. ACCESSIBILITY -> Ensures WCAG AA compliance (Contrast/Targets).
3. ANTI-SCHTICK  -> Strips "lazy" AI trends for authentic branding.

🔥 Features that Ignite Creativity

  • 🧠 161+ Reasoning Rules: Specialized logic for everything from SaaS dashboards to Luxury E-commerce.
  • 🎨 Chromatic Mastery: Implements the 60-30-10 Rule and the Golden Ratio for typographic hierarchy.
  • 🛡️ Red Team Swarm: Built-in adversarial protocols that kill "lazy" design defaults before they reach you.
  • 📜 Narrative Synthesis: Forces AI to define a "Call to Adventure" and entry point for every page.
  • 🛠️ Multi-Assistant Native: Tailored templates for Claude Code, Cursor, Windsurf, Antigravity, and GitHub Copilot.

🚀 Installation & Setup

1. Global CLI Install

npm install -g design-skill-os

2. Prime Your Assistant

Initialize the skill for your specific AI stack. This injects the "Brain" directly into your project's configuration.

# General Setup
design-skill init --ai claude      # Claude Code / CLI
design-skill init --ai cursor      # Cursor IDE
design-skill init --ai windsurf    # Windsurf
design-skill init --ai antigravity # Antigravity (Elite)
design-skill init --ai copilot     # GitHub Copilot (repo-local .github/skills/design-skill-os + .github/copilot-instructions.md)
design-skill init --ai all         # Global System Sync

3. Global Deployment (Recommended)

Available across all your projects without redundant initialization:

design-skill init --ai claude --global

Note: --global is not supported for copilot; use local repo install.


📖 The "Master Designer" Workflow

Once installed, your AI agent gains instant access to the Design Skill OS core. Just chat naturally:

"Build a luxury watch landing page using the Design Skill OS rules. Ensure a Red Team check for color-blindness and narrative arc."

The Resulting Workflow:

  1. Discovery: AI maps brand personality using Section 17 rules.
  2. Strategy: Defines the layout using the Gestalt Principles (Section 2).
  3. Execution: Generates high-fidelity code with CSS variables and semantic HTML.
  4. Red Team: Runs the Adversarial Audit (Section 23) to fix contrast and trend-chasing.

📂 Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│  CORE SYSTEM: Design Skill OS                                   │
├─────────────────────────────────────────────────────────────────┤
│  src/design-skill/                                              │
│     ├── SKILL.md        <-- The "Brain" (Knowledge Base)        │
│     ├── data/           <-- 161+ Industry Reasoning Rules       │
│     ├── scripts/        <-- AI Search & Logic Engine            │
│     └── templates/      <-- High-Fidelity UI Patterns           │
├─────────────────────────────────────────────────────────────────┤
│  cli/                   <-- Dynamic Deployment Engine           │
└─────────────────────────────────────────────────────────────────┘

🏆 Supported Industry Rules

| Category | High-Fidelity Focus | | :--- | :--- | | SaaS & Tech | Efficiency, Clarity, Developer Tooling | | Fintech | Trust, Precision, Data Density | | Luxury & E-com | Emotion, Elegance, Storytelling | | Healthcare | Accessibility, Calm, Information Hierarchy | | Creative Arts | Portfolios, Branding, Experimental UI |


🤝 Contributing & Support

We build for the future of AI-human collaboration.

  • Stars are our fuel. If this helps you build better, drop a ⭐.
  • PRs are welcome. See CLAUDE.md for the contributor's style guide.

📄 License

This project is licensed under the MIT License. See the LICENSE file for the full text.


<p align="center"> <i>"The details are not the details. They make the design." — Charles Eames</i><br><br> <b>Built with ❤️</b> </p>

Related Skills

View on GitHub
GitHub Stars43
CategoryDevelopment
Updated12h ago
Forks6

Languages

Python

Security Score

95/100

Audited on Aug 8, 2026

No findings