Software UI Design

软件UI设计辅助技能，涵盖设计文件解析（Figma/Sketch/Adobe XD）、自动标注、切图整理、UI规范检查、设计稿对比、设计系统文档生成。触发场景：解析设计稿、自动标注、设计资产导出、UI规范验证、切图整理、设计转代码、颜色/字体规范提取。

Security Scan

The skill broadly matches a UI-design helper, but there are multiple inconsistencies (missing scripts, data-format mismatches, and metadata vs. docs disagreement) that merit caution before providing Figma tokens or design files.

Purpose & Capability

The declared purpose (Figma/Sketch/XD parsing, annotation, exporting, design-to-code) broadly matches included code that targets Figma. However SKILL.md and the '核心脚本' list many scripts (sketch_parser.py, annotate.py, export_assets.py, design_to_code.py) and reference files/references that are not present in the package. That gap makes it unclear whether the skill truly implements the claimed capabilities. Additionally, the two provided scripts implement only part of the workflow (Figma parsing and a UI checker) rather than the full feature set described.

Instruction Scope

Runtime instructions describe using the Figma API and user-provided tokens/files, which is consistent with the figma_parser calling api.figma.com. The instructions don't request unrelated system files or external endpoints. However the SKILL.md workflow assumes other parsing/export scripts and a particular report shape; the ui_checker expects a report with an 'elements' array, while figma_parser produces keys like 'colors', 'textStyles', and 'components' — these data-shape mismatches mean following the documented workflow will likely fail without additional glue code.

Install Mechanism

There is no install spec (instruction-only deployment) and no downloads or third-party installers; the included Python scripts run locally. This is low-risk from an install standpoint.

Credentials

Registry metadata lists no required env vars, but SKILL.md explicitly states Figma Personal Access Token is needed and figma_parser expects a token CLI argument. Requesting a Figma PAT is proportionate to the stated Figma integration, but the metadata omission (no declared env requirement) and lack of guidance about minimum token scope are inconsistencies the user should note.

Persistence & Privilege

The skill is not always-enabled and does not request elevated or persistent privileges. It does not modify other skills or agent-wide config. The agent is allowed to invoke the skill autonomously (platform default), which by itself is not unusual.

What to consider before installing

What to consider before installing or using this skill: - The package is incomplete: several scripts and reference files listed in SKILL.md are missing. Expect parts of the described workflow (Sketch/XD parsing, export, design-to-code) to be unimplemented. - Data-format mismatch: figma_parser outputs keys like 'colors', 'textStyles', and 'components', while ui_checker expects a report with an 'elements' array. You will likely need to transform outputs locally or update scripts to interoperate. - Token handling: The skill requires a Figma Personal Access Token to call api.figma.com. Only provide a token with the smallest possible scope (read-only, limited to specific files if possible) and prefer using a temporary token. If unsure, run the provided Python scripts locally yourself rather than handing the token to a remote agent. - Code review: The two included scripts are short and readable and call only api.figma.com and local file I/O; no obfuscated code or hidden endpoints were found. Still, review or run the scripts in a sandbox first. - If you need the missing features, ask the publisher for the complete source or the missing scripts (sketch_parser.py, annotate.py, export_assets.py, design_to_code.py and referenced docs). Consider forking and implementing the missing pieces locally rather than trusting an incomplete third-party package. Recommended actions: 1) Do not share broad-scope or long-lived Figma tokens; create a token with minimal permissions and expire it after use. 2) Test the scripts locally on a disposable account or test file before using real project files. 3) Verify/patch the data-flow between figma_parser output and ui_checker input before relying on automated checks. 4) If you want full functionality described in SKILL.md, request the missing scripts or choose another tool with a complete implementation. Confidence note: Assessment is "medium" because the code that exists is benign-looking and coherent for Figma parsing, but the missing files and documentation discrepancies create ambiguity about the package's completeness and intent.

Software UI Design - UI设计自动化

核心能力

设计文件解析

• Figma：通过 Figma API / figma-python 解析文件，提取图层、组件、样式
• Sketch：解析 .sketch 文件（JSON 格式），提取画板、符号、样式
• Adobe XD：解析 .xd 文件（ZIP + JSON），提取 artboard、组件

自动标注

• 提取元素位置、尺寸、间距、颜色、字体信息
• 生成标注文档（Markdown / HTML / JSON）
• 支持多状态标注（默认/悬停/激活/禁用）

切图 & 资产导出

• 自动识别需要导出的元素
• 支持多分辨率导出（1x / 2x / 3x）
• 输出格式：PNG / SVG / PDF / WebP
• 整理为规范目录结构

UI 规范检查

• 颜色规范验证（品牌色是否正确使用）
• 字体规范验证（字号/字重/行高）
• 间距规范验证（8px 栅格系统）
• 输出规范差距报告

设计转代码

• 生成 CSS / Tailwind / Flutter / SwiftUI / Jetpack Compose 代码片段
• 从设计稿提取组件结构和样式属性

关键脚本

• scripts/figma_parser.py - Figma API 文件解析
• scripts/sketch_parser.py - Sketch 文件解析
• scripts/annotate.py - 自动标注生成
• scripts/export_assets.py - 批量导出切图
• scripts/ui_checker.py - UI 规范检查
• scripts/design_to_code.py - 设计转代码片段

参考资源

• references/figma-api.md - Figma API 文档
• references/design-systems.md - 主流设计系统规范参考

工作流程

1. 获取设计文件：用户提供 Figma 链接 / Sketch / XD 文件路径
2. 解析提取：调用解析脚本获取图层结构
3. 执行任务：标注 / 切图 / 规范检查 / 代码生成
4. 输出交付：文档 / 资产包 / 报告

注意事项

• Figma 需要用户提供 Personal Access Token
• Sketch/XD 文件较大，建议压缩或提供具体画板范围
• 切图优先导出 SVG 再转 PNG
• 代码生成仅作参考，需人工审核