auto-design-clawhubAuto-select and apply design systems from awesome-design-md based on project type and task context
Install via ClawdBot CLI:
clawdbot install html1602/auto-design-clawhubGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/moyubox/auto-designUses known external API (expected, informational)
raw.githubusercontent.comAudited Apr 17, 2026 · audit v1.0
Generated Jul 11, 2026
When building a new SaaS dashboard, the skill automatically selects a design system (e.g., Linear for data-dense UIs) and applies consistent colors, typography, and spacing. This accelerates prototyping and ensures professional look without manual design decisions.
For a marketing site redesign, the skill detects the project type and selects Stripe or Apple design tokens, applying elegant gradients and premium whitespace. This streamlines the rebranding process and maintains visual consistency across pages.
When developing an AI/ML product interface, the skill recommends Claude or Cohere design systems, offering warm, human-centered aesthetics. It automatically downloads and integrates design tokens, saving time on UI research.
Creating a developer tool UI triggers selection of Vercel or Cursor design systems, ensuring a clean, code-centric appearance. The skill applies the chosen palette and spacing to new components, aligning with developer expectations.
When building API documentation, the skill picks Mintlify or Notion design systems optimized for readability. It automatically applies hierarchy and typography, resulting in a polished docs site with minimal effort.
Offer the auto-design skill as a tiered subscription for teams needing consistent design systems across projects. Revenue comes from monthly or annual fees based on usage or team size.
Provide basic auto-selection for free, but charge for access to exclusive design systems or advanced customization features (e.g., custom brand integration).
License the skill to large enterprises for integration into their internal development pipelines. Revenue from annual licensing agreements with support and maintenance.
💬 Integration Tip
Install the skill via the .claude/skills directory and ensure node and curl are available. It activates automatically, but you can override brand selection with environment variables like AUTO_DESIGN_DEFAULT.
Scored Jul 11, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...