design-for-ai  by ryanthedev

AI-powered visual design system for generative interfaces

Created 4 months ago
258 stars

Top 97.9% on SourcePulse

GitHubView on GitHub
Project Summary

This Claude Code plugin addresses the common issue of AI-generated interfaces converging on generic, uninspired aesthetics. It provides a structured system for teaching AI visual design principles—typography, color theory, composition, and hierarchy—enabling developers to create interfaces with intentional design decisions grounded in established frameworks, rather than relying on vague prompts like "make it pretty." The target audience is users of Claude seeking to elevate the visual quality and intentionality of AI-assisted interface design.

How It Works

The plugin implements a four-stage workflow: /design-for-ai:research, /design-for-ai:plan, /design-for-ai:mock, and /design-for-ai:build. Design knowledge is encapsulated in deterministic "doctrine reference files" that the workflow loads on demand. A key innovation is the "design DNA" system, which allows users to "pin" specific design axes (e.g., font family, hue) before generation. This user-driven approach acts as a counter-force to AI model convergence, ensuring outputs reflect specific user taste and design intent rather than statistical averages from training data. The system breaks down design into eight core domains, including usability, content design, data visualization, and AI-native interfaces, ensuring a comprehensive approach.

Quick Start & Requirements

Installation involves adding the plugin marketplace and then installing the plugin itself:

  • bash /plugin marketplace add ryanthedev/rtd-claude-inn
  • bash /plugin install design-for-ai@rtd To update: /plugin update design-for-ai@rtd The current version is 4.2.0. This plugin operates within the Claude Code environment.

Highlighted Details

  • Comprehensive Design Domains: Covers usability, content-design, data-viz, deceptive-patterns, behavioral, journey, design-systems, and ai-native principles.
  • Deterministic Doctrine: Design knowledge is loaded deterministically, ensuring consistent application of principles across workflow stages.
  • User-Pinnable Design Axes: Allows users to constrain AI choices by pinning elements like font family, hue, chroma, and signature, preventing generic outputs.
  • Verified Briefing: The research stage includes an optional verification pass to confirm design signals.
  • Built-in Palette Generation: Features an OKLCH generator for creating 12-step neutral and accent ramps with WCAG contrast solved by construction.
  • AI-Tell Detection: Includes a script (scripts/detect.mjs) to identify AI-generated patterns.

Maintenance & Community

No specific details regarding maintainers, community channels (e.g., Discord, Slack), or roadmap were present in the provided README.

Licensing & Compatibility

The project is released under the MIT license. This license is highly permissive, generally allowing for commercial use and integration into closed-source projects without significant restrictions.

Limitations & Caveats

The "ai-native" design domain is noted as having "no settled canon yet," indicating it is an evolving area. The plugin's functionality is tightly coupled to the Claude Code environment, limiting its direct applicability outside of it. Effectiveness relies on the user's ability to strategically "pin" design axes to guide the AI.

Health Check
Last Commit

3 weeks ago

Responsiveness

Inactive

Pull Requests (30d)
0
Issues (30d)
0
Star History
31 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.