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
Cognitive Anchor Sketcher for Chinese Articles
Turn Chinese articles into hand-drawn visuals that explain the idea instead of simply decorating the page. Cognitive Anchor Sketcher reads the article, finds the strongest judgments, turning points, structures, states, and metaphors, then builds a focused shot list before image generation. Each illustration communicates one idea in a clean 16:9 composition with a white background, black hand-drawn linework, generous whitespace, and short Chinese annotations. Use it for newsletters, blogs, Notion pages, product thinking, workflow documents, and methodology content. Choose between minimal-line and emotion-doodle styles, use the included Xiaohei, Tuotuo, and Xingbi characters, or work with an authorized custom IP. A guided QA flow confirms the direction, style, IP, shot list, and output settings. It can also provide cognitive-anchor analysis and illustration planning without generating images. Image generation requires a ChatGPT-authenticated Codex CLI session.
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 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产
artifact-share
Use when you need to share static web content (HTML/CSS/JS/images) via a publicly accessible URL — uploading generated files, creating shareable pages, or deploying single-page web artifacts
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 |
|---|---|---|---|---|---|
| Cognitive Anchor Sketcher for Chinese Articles | Skill | $12 | 0 | — | Verified |
| pretext-layout | Skill | Free | 8 | — | Verified |
| artifact-share | Skill | Free | 541 | — | Review |
| aster | Skill | Free | 4.7k | — | Review |
| cn-remotion | Skill | Free | 760 | — | Review |
All Design Skills
Cognitive Anchor Sketcher for Chinese Articles
Turn Chinese articles into hand-drawn visuals that explain the idea instead of simply decorating the page. Cognitive Anchor Sketcher reads the article, finds the strongest judgments, turning points, structures, states, and metaphors, then builds a focused shot list before image generation. Each illustration communicates one idea in a clean 16:9 composition with a white background, black hand-drawn linework, generous whitespace, and short Chinese annotations. Use it for newsletters, blogs, Notion pages, product thinking, workflow documents, and methodology content. Choose between minimal-line and emotion-doodle styles, use the included Xiaohei, Tuotuo, and Xingbi characters, or work with an authorized custom IP. A guided QA flow confirms the direction, style, IP, shot list, and output settings. It can also provide cognitive-anchor analysis and illustration planning without generating images. Image generation requires a ChatGPT-authenticated Codex CLI session.
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.
artifact-share
Use when you need to share static web content (HTML/CSS/JS/images) via a publicly accessible URL — uploading generated files, creating shareable pages, or deploying single-page web artifacts
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.