design-skills

Q: How to install design-skills?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/design-skills.md https://raw.githubusercontent.com/ccwbb78/design-skills/main/SKILL.md. Finally, /design-skills in Claude Code.

Q: What is design-skills best for?

design-skills is categorized under General. It covers: design, agent.

New

GitHub TrendingGeneralby ccwbb78

用于优化智能体制作网站时的审美 Used to optimize aesthetics when creating agent websites Claude Code skill | UI/UX designer | 自动设计方案 | AI 前端设计

First seen 6/12/2026

Summary

This skill enhances Claude Code's ability to generate aesthetically pleasing and user-friendly designs for agent websites.

It provides UI/UX design guidance, auto-generates design schemes, and helps implement front-end design improvements, making it easier for developers to create visually appealing interfaces without deep design expertise.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/design-skills.md https://raw.githubusercontent.com/ccwbb78/design-skills/main/SKILL.md

Invoke in Claude Code

/design-skills

Use Cases

Generate a modern, minimalist color palette and typography scheme for a new agent website.

Improve the visual hierarchy and layout of an existing agent dashboard to enhance user experience.

Create responsive design components that adapt gracefully to mobile and desktop screens.

Suggest UI patterns and micro-interactions to make the agent interface more engaging.

Optimize form and button placements to increase conversion rates on a landing page.

Provide accessibility improvements to ensure the design meets WCAG standards.

Usage Examples

/design-skills Generate a color palette and font pairing for a friendly AI assistant website.

Redesign the header and navigation of my agent site to be more modern and intuitive.

Suggest a layout for a feature comparison table that is clean and easy to scan.

View source on GitHub

designagent

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is design-skills?

This skill enhances Claude Code's ability to generate aesthetically pleasing and user-friendly designs for agent websites. It provides UI/UX design guidance, auto-generates design schemes, and helps implement front-end design improvements, making it easier for developers to create visually appealing interfaces without deep design expertise.

How to install design-skills?

To install design-skills: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/design-skills.md https://raw.githubusercontent.com/ccwbb78/design-skills/main/SKILL.md. Finally, /design-skills in Claude Code.

What is design-skills best for?

design-skills is a skill categorized under General. It is designed for: design, agent. Created by ccwbb78.

What can I use design-skills for?

design-skills is useful for: Generate a modern, minimalist color palette and typography scheme for a new agent website.; Improve the visual hierarchy and layout of an existing agent dashboard to enhance user experience.; Create responsive design components that adapt gracefully to mobile and desktop screens.; Suggest UI patterns and micro-interactions to make the agent interface more engaging.; Optimize form and button placements to increase conversion rates on a landing page.; Provide accessibility improvements to ensure the design meets WCAG standards..