Design AI Skills
Design smarter with AI-assisted creative tools
Design skills bridge the gap between concept and implementation. Generate UI components, color palettes, design tokens, accessibility audits, and responsive layouts - all from natural language descriptions. Perfect for developers who need design output without switching to graphical tools.
Top Design Skills
aster
Your AI CoPilot on Mobile — or give your AI its own phone. Make calls, send SMS, speak via TTS on speakerphone, automate UI, manage files, search media, and 40+ more tools via MCP. Open source, self-hosted, privacy-first.
cn-remotion
用 React 代码程序化生成视频的框架，支持 CSS/Canvas/SVG/WebGL，可部署到 Lambda/Cloud Run 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产
pretext-layout
The Pretext Layout skill enables AI agents to integrate and debug high-performance multiline text measurement using the @chenglou/pretext library. It solves the common frontend performance bottleneck of "layout thrashing" by replacing slow DOM-based height probes with a fast, browser-native API approach.
What design skills can do for you
UI Component Generation
Describe what you need and get production-ready React, Vue, or HTML components. Skills produce accessible, responsive code that follows modern design patterns and your existing design system.
Design System Tools
Generate color palettes, typography scales, spacing systems, and design tokens. Maintain consistency across your project with skills that understand design fundamentals.
Accessibility Auditing
Run WCAG compliance checks, generate aria labels, and fix contrast issues. Skills catch accessibility problems before they reach production and suggest concrete fixes.
Design Skills at a Glance
| Skill | Type | Price | Downloads | Rating | Security |
|---|---|---|---|---|---|
| pretext-layout | Skill | Free | 2 | — | Verified |
| aster | Skill | Free | 3.9k | — | Review |
| cn-remotion | Skill | Free | 248 | — | Review |
All Design Skills
pretext-layout
The Pretext Layout skill enables AI agents to integrate and debug high-performance multiline text measurement using the @chenglou/pretext library. It solves the common frontend performance bottleneck of "layout thrashing" by replacing slow DOM-based height probes with a fast, browser-native API approach.
aster
Your AI CoPilot on Mobile — or give your AI its own phone. Make calls, send SMS, speak via TTS on speakerphone, automate UI, manage files, search media, and 40+ more tools via MCP. Open source, self-hosted, privacy-first.
cn-remotion
用 React 代码程序化生成视频的框架，支持 CSS/Canvas/SVG/WebGL，可部署到 Lambda/Cloud Run 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产
Common questions about design skills
What UI frameworks do design skills support?
Design skills generate components for React, Vue, Svelte, Astro, and plain HTML/CSS. Most skills auto-detect your framework from the project context and generate appropriate code.
Can skills generate entire page layouts?
Yes. Layout skills can generate full page structures from descriptions like 'pricing page with 3 tiers' or 'dashboard with sidebar navigation'. Output is responsive and production-ready.
How do accessibility skills work?
Accessibility skills scan your components for WCAG 2.1 violations - missing alt text, insufficient contrast, keyboard navigation gaps, and screen reader compatibility. They provide specific fixes, not just warnings.
Ready to supercharge your
design workflow?
Browse verified design skills and agents built by the community. One-command install, instant results.