garden-skills  by ConardLi

Elevate AI-generated web design with a specialized agent skill

Created 1 week ago

New!

1,588 stars

Top 25.8% on SourcePulse

GitHubView on GitHub
Project Summary

Summary This repository offers a reusable "Skill" (structured system prompt) to elevate AI-generated web designs from generic to "stunning." It tackles the common issue of cliché aesthetics in AI output by embedding sophisticated design principles and anti-patterns. Aimed at users of AI coding agents like Claude Code and Cursor, it injects design taste into functional code, improving visual appeal.

How It Works The project centers on a SKILL.md file acting as a detailed prompt for AI agents. It enforces a six-step workflow: requirements, context, design system declaration (colors, typography, spacing, motion), v0 draft, full build, and verification. Key features include an anti-cliché checklist banning common AI design tropes, use of the perceptually uniform oklch color space, curated font/color pairings, and a placeholder philosophy for assets. This structured approach ensures higher design quality and consistency.

Quick Start & Requirements Integrate the skill by copying the .agents/skills/web-design-engineer/ directory (or .claude/skills/) into your project. Compatible AI coding agents supporting SKILL.md will automatically detect and use it for front-end tasks. No specific software prerequisites beyond a compatible AI agent are listed.

Highlighted Details

  • Six-Step Workflow: Structured process from requirements to verification.
  • Anti-AI-Cliché Checklist: Explicitly prohibits common AI design tropes (e.g., specific gradients, fonts, emoji icons).
  • OKLCH Color System: Uses perceptually uniform color space for consistent palettes.
  • Curated Pairings: Six pre-validated color/font combinations for various use cases.
  • Demos: demo/ directory provides side-by-side HTML examples.

Maintenance & Community Maintained by ConardLi. The README provides no details on community channels, sponsorships, or a roadmap.

Licensing & Compatibility Released under the permissive MIT license, allowing broad compatibility, including commercial use and integration into closed-source projects.

Limitations & Caveats Effectiveness depends on the AI agent's adherence to the prompt. Primarily designed for AI agents supporting the SKILL.md format. The README does not detail known bugs or specific platform limitations beyond the format requirement.

Health Check
Last Commit

1 day ago

Responsiveness

Inactive

Pull Requests (30d)
1
Issues (30d)
2
Star History
1,597 stars in the last 7 days

Explore Similar Projects

Feedback? Help us improve.