Design skills

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

household-finance-dashboard-builder

Generates a single self-contained static HTML dashboard for a household finance JSON store, with embedded D3.js, inlined data, and six standard panels (net worth over time, monthly cash flow, recurring & subscriptions, goals progress, asset allocation, vigilance feed). Applies cognitive-design principles for visual hierarchy and visual-storytelling-design for narrative annotations. Use when emitting a weekly or monthly finance dashboard, or when user mentions weekly dashboard, household dashboard, finance HTML report, or static dashboard.

133 repo starsObserved in 1 repos
Design
GitHub

prototype-annotation

原型标注替代 PRD 时使用：把页面目录、组件说明、状态说明和补充文档接入可运行原型，供评审、交付和后续需求说明使用。

133 repo starsObserved in 1 repos
Design
GitHub

prototype-comments

批注、微调、编辑原型时使用：读取本地原型批注并定位页面元素，修改文案、样式、布局或交互，完成后删除已处理批注任务。

133 repo starsObserved in 1 repos
Design
GitHub

prototype-to-figma

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype", "break prototype into flows", "Figma specs from code", or wants to make a working prototype legible to non-technical stakeholders. Even if the user just says "put this in Figma" or "make this reviewable" in the context of a prototype, use this skill.

133 repo starsObserved in 1 repos
Design
GitHub

screenshot-to-prototype

Use only when 用户明确要求把本地截图、设计稿或高保真界面图还原成 Axhub Make client 可运行原型；或显式调用 $screenshot-to-prototype。仅提供图片作为素材、参考图、需求图或风格上下文时不要使用。

133 repo starsObserved in 1 repos
Design
GitHub

ui-design-image

Use when 为 Axhub Make client 项目生成 UI 设计图、高保真原型视觉、生产风格网站截图、整页界面稿、UI 素材、图标、占位图或参考位图；尤其是请求提到 Image Gen、AI 图片生成、设计图、UI assets、prototype visuals 或需要判断移动端/PC 端画布比例时。

133 repo starsObserved in 1 repos
Design
GitHub

visual-storytelling-design

Transforms data into compelling visual narratives by applying narrative structure, annotation techniques, scrollytelling patterns, and honest framing to data journalism, presentations, and infographics. Use when creating data-driven articles or reports, designing infographics with narrative, building scrollytelling experiences, annotating charts to guide interpretation, or when user mentions data storytelling, presentation design, annotated chart, narrative visualization.

133 repo starsObserved in 1 repos
Design
GitHub

scientific-figure

Use when the user has scientific data (or a prompt alluding to scientific data) and wants a publication-quality figure made from it. A generator drafts and renders a figure that lands a frozen communication goal; an adversarial critic critiques it hard and grades it 1-5 per axis against a fixed rubric (message, aesthetic, clarity, integrity, and a conditional domain-completeness axis), aggregates to 0-100, and decides pass; the generator revises against the critic's findings until the grade clears a threshold or the budget is hit. Both roles may consult the literature (Semantic Scholar + arXiv) to verify domain content (e.g. a pathway figure's gene set, or a benchmark's reported numbers), and conform to / grade against a named journal's figure spec fetched via web search. Not for writing a paper or analyzing a dataset, and not for editing an existing finished image — this renders a figure from data/brief and iterates on it.

132 repo starsObserved in 2 repos
Design
GitHub

agent-figure-gallery

Query visual scientific figure references, show candidates for human preference selection, export selected reference bundles, and guide plotting agents from human-selected visual examples to code action.

132 repo starsObserved in 1 repos
Design
GitHub

Design Spec

Convert a PRD into a durable UX design document with states, flows, copy, and accessibility.

132 repo starsObserved in 1 repos
Design
GitHub