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
BrandLoom: Project Logos & Covers
Need a logo and cover that feel like they belong to the same project? BrandLoom helps you turn your project idea into a clear, consistent visual set. It reads the project information, files, links, and brand materials you provide, then asks one simple question at a time. You choose the wording, style, fonts, characters, layout, language, and image size before anything is created. BrandLoom can make a square project logo image, a wide cover, and a GitHub social preview in Chinese, English, or both. It can reuse your existing company logo and approved brand assets, keep important text clear, save new versions without replacing old ones, and help with later edits, translations, and style changes. It is made for solo founders, indie developers, AI builders, creators, and anyone launching a GitHub project, Skill, app, or digital product. Made for Codex. Full image creation requires Python 3.12 or newer and access to Codex's built-in image tool.
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.
code_flow_graph
Generate interactive HTML node-graph diagrams for code visualization. Trigger when user asks to: visualize code architecture, diagram module dependencies, map call chains, graph class relationships, show UI event flows, display widget hierarchy layouts, or understand how code connects. Keywords: "visualize", "diagram", "graph", "map out", "call chain", "architecture", "code flow", "widget hierarchy", "UI layout", "界面布局", "调用链", "代码架构", "可视化", "模块依赖", "函数关系", "类图", "事件流".
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 |
|---|---|---|---|---|---|
| BrandLoom: Project Logos & Covers | Skill | $5 | 0 | — | Review |
| Cognitive Anchor Sketcher for Chinese Articles | Skill | $12 | 0 | — | Verified |
| pretext-layout | Skill | Free | 8 | — | Verified |
| BrandLoom: Project Logos & Covers | Skill | Free | 0 | — | Review |
| code_flow_graph | Skill | Free | 1.6k | — | Review |
All Design Skills
BrandLoom: Project Logos & Covers
Need a logo and cover that feel like they belong to the same project? BrandLoom helps you turn your project idea into a clear, consistent visual set. It reads the project information, files, links, and brand materials you provide, then asks one simple question at a time. You choose the wording, style, fonts, characters, layout, language, and image size before anything is created. BrandLoom can make a square project logo image, a wide cover, and a GitHub social preview in Chinese, English, or both. It can reuse your existing company logo and approved brand assets, keep important text clear, save new versions without replacing old ones, and help with later edits, translations, and style changes. It is made for solo founders, indie developers, AI builders, creators, and anyone launching a GitHub project, Skill, app, or digital product. Made for Codex. Full image creation requires Python 3.12 or newer and access to Codex's built-in image tool.
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.
BrandLoom: Project Logos & Covers
Need a logo and cover that feel like they belong to the same project? BrandLoom helps you turn your project idea into a clear, consistent visual set. It reads the project information, files, links, and brand materials you provide, then asks one simple question at a time. You choose the wording, style, fonts, characters, layout, language, and image size before anything is created. BrandLoom can make a square project logo image, a wide cover, and a GitHub social preview in Chinese, English, or both. It can reuse your existing company logo and approved brand assets, keep important text clear, save new versions without replacing old ones, and help with later edits, translations, and style changes. It is made for solo founders, indie developers, AI builders, creators, and anyone launching a GitHub project, Skill, app, or digital product. Made for Codex. Full image creation requires Python 3.12 or newer and access to Codex's built-in image tool.
code_flow_graph
Generate interactive HTML node-graph diagrams for code visualization. Trigger when user asks to: visualize code architecture, diagram module dependencies, map call chains, graph class relationships, show UI event flows, display widget hierarchy layouts, or understand how code connects. Keywords: "visualize", "diagram", "graph", "map out", "call chain", "architecture", "code flow", "widget hierarchy", "UI layout", "界面布局", "调用链", "代码架构", "可视化", "模块依赖", "函数关系", "类图", "事件流".
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.