ui-engineering

概述

UI Engineering Skill 提供了一套全面的 UI 工程规范库。每份规范充当一份“逻辑样式表”，为某种特定风格定义精确的颜色、排版、交互和心智模型。

何时使用

当出现以下类型的需求时可使用该技能：

• “设计一个像 Apple 的网站”
• “创建一个个人博客”
• “构建一个像 Stripe 的仪表盘”
• “制作一个 PPT 风格的网站”

使用方式

1. 识别风格 首先，确定最适合用户请求的风格。查阅 Registry 获取 60 多个风格的完整列表。

2. 阅读规范 确定风格后（例如 stripe、personal_blog），阅读对应的参考文件。 示例：如果风格是 stripe，则阅读 references/stripe.md。

3. 应用规则 使用规范 references/[spec_name].md 中定义的 Design Tokens、Component Recipes 和技术栈来生成代码。除非明确要求，不要偏离规范中定义的十六进制色值或物理规则。

可用参考

• 核心注册表

  • Meta Registry：所有风格的主索引，按行业和调性分类。

• 高频风格

  • SaaS / 金融科技：Stripe、Linear
  • 内容 / 博客：Personal Blog、Notion
  • 演示：Presentation Scroll
  • 大型科技公司：Apple、Google、Microsoft

技能结构

ui-engineering/
├── SKILL.md
└── references/
    ├── _meta_registry.md  <- START HERE
    ├── apple.md
    ├── stripe.md
    ├── personal_blog.md
    ├── ... (60+ specs)

限制

关于该技能的收费、价格、支持的平台、生成效果或具体使用步骤的更多细节，资料暂未提供。