Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

image-to-ui-skill

Use when the user asks for image2 生图, 调用 image2, image-to-UI, UI screenshot to code, design to code, clickable app demo, mobile prototype, iOS preview, high-fidelity UI recreation, or generating bitmap assets for a UI. Split the reference into code-rendered UI and image2-generated assets, build a clickable preview, and verify the output.

198 repo starsObserved in 1 repos
Design

maui-accessibility

Make .NET MAUI apps accessible with semantic properties, screen reader labels/hints, heading levels, focus, announcements, AutomationProperties, touch targets, and platform checks. USE FOR: accessibility audits, WCAG UI fixes, TalkBack/VoiceOver/Narrator behavior, SemanticProperties.Description/Hint/HeadingLevel, SemanticScreenReader.Announce, SetSemanticFocus, avoiding redundant Label metadata, hiding decorative content with IsInAccessibleTree=false, and CollectionView row semantics. DO NOT USE FOR: general layout, UI automation only, or performance tuning.

198 repo starsObserved in 1 repos
Design

ai-canvas-art-director

Use when the user wants an end-to-end natural-language AI infinite canvas workflow: opening AI Canvas, generating images into holders, reading canvas annotations, handling phrases like 要求后续变更 / 按标注修改, and creating edited image versions.

197 repo starsObserved in 1 repos
Design

fill-ai-image-holder

Use when the user asks AI Canvas to generate, create, fill, or design an image into the current canvas holder, including phrases like 填充图片框, 生成广告图, 做一张海报, or Fill AI Image Holder.

197 repo starsObserved in 1 repos
Design

frontend-design-tokens

Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.

197 repo starsObserved in 1 repos
Design

html-widget

生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发,直接输出 html 代码块,前端会在安全沙箱中渲染为可交互组件。

197 repo starsObserved in 1 repos
Design

infographic

生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖,在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。

197 repo starsObserved in 1 repos
Design

mock

Create interactive HTML mocks for a feature through guided iteration with the user. Two modes: exploration (generates 3+ end-to-end variants to help the user surface ideas) and confirmation (single coherent mock to visually verify an existing design). Can be invoked standalone or from `/sculptor-workflow:spec` as input to, or output of, a spec.

197 repo starsObserved in 1 repos
Design

svg-diagram

用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块(内含 SVG),前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。

197 repo starsObserved in 1 repos
Design

absolute-ui

Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and more. Triggers on "absolute ui", "design a UI", "style this component", "make this less like AI slop", "fix the spacing/typography/color", "dark mode", "design a pricing page", "make this look better".

196 repo starsObserved in 1 repos
Design