software-ui-design软件UI设计辅助技能,涵盖设计文件解析(Figma/Sketch/Adobe XD)、自动标注、切图整理、UI规范检查、设计稿对比、设计系统文档生成。触发场景:解析设计稿、自动标注、设计资产导出、UI规范验证、切图整理、设计转代码、颜色/字体规范提取。
Install via ClawdBot CLI:
clawdbot install xiaochunz030-spec/software-ui-designGrade Limited — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://api.figma.com/v1Audited Apr 17, 2026 · audit v1.0
Generated May 12, 2026
SaaS development teams can automatically extract layer information, generate specifications and code fragments (CSS/Tailwind) from Figma/Sketch/XD files. This reduces manual handoff effort and ensures pixel-perfect implementation, accelerating feature delivery.
E-commerce companies redesigning their platform can use the UI checker to validate color, font, and spacing standards across hundreds of screens. The gap report highlights deviations, ensuring brand consistency before deployment.
Mobile app teams can batch export icons and images at 1x, 2x, and 3x resolutions in SVG/PNG/WebP formats. The tool organizes assets into a structured directory, streamlining handoff to developers on iOS and Android.
Design system maintainers can automatically extract component styles (colors, typography, spacing) from Figma libraries to generate Markdown/HTML documentation. This keeps living documentation in sync with the source of truth.
Product designers can convert screen designs into Flutter or SwiftUI code snippets for rapid prototyping. This speeds up iteration cycles and allows non-developers to share interactive mockups quickly.
Offer a free tier with basic parsing and annotation (limited screens), and premium subscriptions for batch export, code generation, and UI checker. Revenue from monthly/annual subscriptions for professional design teams.
Sell per-seat or site licenses to large organizations needing consistent UI automation across multiple product teams. Includes custom integrations, SSO, and dedicated support.
Provide the parsing, annotation, and code generation capabilities as a public API. Third-party tools (e.g., Zeplin, Avocode alternatives) can integrate and pay per request or via monthly quotas.
💬 Integration Tip
Start by integrating the Figma parser with your team's existing API token; for Sketch/XD files, batch processing via CLI with compressed inputs yields faster results.
Scored May 12, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...