Design skills

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

imagineer

Fan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from. Deliberate over-generation: one concept per finding worth making hands-on, each declaring its archetype, purpose, what the reader produces, and an honest feasibility (node-checked against the Analyst's client_model). Builds NOTHING on-page — img_xx concepts are internal and never reach HTML. Outputs imagineer.json after the Analyst, before the Editor.

144 repo starsObserved in 1 repos
Design
GitHub

interaction

Build the curated interactive SET the Editor approved: the ONE narrative-bound hero centerpiece (an explorable/scrollytelling that makes the reader PRODUCE the lead finding) PLUS the ranked supporting playgrounds — each bound to a distinct finding — to the same three-layer-number standard, plus animation/transition craft. Consumes editor.json.interactives + imagineer.json + the Analyst's client_model. Outputs interaction.json (centerpiece + supporting[] + playtest_handoff) for the Programmer; may reach back into the Editor's spine when the lead finding should be hands-on.

144 repo starsObserved in 1 repos
Design
GitHub

mobile-android-design

当需要按 Material Design 3 与 Jetpack Compose 规范设计 Android 界面时使用。

144 repo starsObserved in 1 repos
Design
GitHub

mobile-ios-design

当需要按 iOS HIG 与 SwiftUI 规范设计 iOS 界面时使用。

144 repo starsObserved in 1 repos
Design
GitHub

openrouter-text2image

Generate images via OpenRouter. Default model openai/gpt-5.4-image-2; any image-modality model can be passed via --model.

144 repo starsObserved in 1 repos
Design
GitHub

responsive-design

当需要实现响应式布局（断点、流式排版、容器查询、移动优先）时使用。

144 repo starsObserved in 1 repos
Design
GitHub

visual-design-foundations

当需要优化视觉基础（字体、色彩、间距、图标与层级）并提升一致性时使用。

144 repo starsObserved in 1 repos
Design
GitHub

yohaku-design

Build new Yohaku-style UI: HTML mockups, React components, or mockup→React handoff. Triggers on "make a Yohaku mockup / design a new component / add a hero / modal / sheet / convert mockup to React / audit token compliance / 做一个 Yohaku 风的 mockup / 设计一个新组件 / mockup 转 React / 检查 token 合规".

144 repo starsObserved in 1 repos
Design
GitHub

accessibility-per-component

Run an accessibility audit on a specific design system component. Trigger when someone says: accessibility check, a11y audit, WCAG compliance, is this accessible, check accessibility, does this meet WCAG, screen reader support, keyboard navigation check, or anything about auditing the accessibility of a specific component.

143 repo starsObserved in 1 repos
Design
GitHub

ai-component-description

Generate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section format (purpose, props, anti-patterns, composition, accessibility, examples), NOT JSON schemas or structured data files. Trigger when someone says: write component description for AI, Figma MCP description, write the description for Claude to read, six-section description, describe this component for AI, or anything about writing text that makes components legible to LLMs. Do NOT trigger for JSON metadata schemas, structured constraint files, or programmatic tooling data — use metadata-schema-generator for those.

143 repo starsObserved in 1 repos
Design
GitHub