Skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Build production-quality UIs. Use when building or modifying user-facing interfaces, creating components, implementing layouts, or managing state.

A format specification for describing visual identity to coding agents. Gives AI agents a persistent, structured understanding of a design system with export to Tailwind and DTCG tokens.

AI-powered design tool from Google Labs that generates UI designs from text prompts. Produces HTML, CSS, design tokens, and DESIGN.md files for seamless design-to-code workflows.

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审，需求模糊时给设计方向。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。

Typeset professional documents and product landing pages: resumes, one-pagers, white papers, letters, portfolios, slide decks, landing pages. Warm parchment, ink-blue accent, serif-led hierarchy.

用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。

When you need to turn Stitch page HTML (or a Stitch URL) into a Pencil .pen design. Parses DOM and Tailwind, applies HTML→Pencil mapping and execution order, outputs sequential batch_design for layout and style fidelity (background, color, size, margin, padding, shadow). Supports multi-framework tokens.

Batch execute design changes. The Agent's 'Hands'. Core capability for inserting, updating, moving, or deleting nodes.

Batch search and read node information. The Agent's 'Eyes'. Use to find specific components e.g. all nodes named 'Button' or get child structure within a container.

Provides comprehensive guidance for Adobe XD including design creation, prototyping, components, and collaboration. Use when the user asks about Adobe XD, needs to create UI/UX designs, build prototypes, or work with Adobe XD components.