设计规范生成器

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install design-spec-generator
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 design-spec-generator。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

设计规范生成器可将项目需求转化为适用于小程序、移动应用、大屏界面、网站和多平台产品的统一设计规范。它将色彩、字体、间距、组件和平台限制等视觉决策整理成实用的交付文档，供开发人员和团队使用。
作为用于设计文档编制的 Openclaw Skills 之一，它使用特定平台的模板和一致的设计令牌命名方式，让规范更易于实施和维护。最终内容可以在聊天中展示，也可以保存为 Markdown 或 DOCX 文件。

应用场景

为新的小程序、应用、网站或大屏产品创建设计系统。
统一现有产品的视觉语言。
为开发人员或其他团队成员准备详细的设计交付文档。
定义可复用的颜色、字体、间距、圆角、阴影、图标和组件令牌。
记录安全区域、屏幕尺寸、断点和触控目标等平台要求。
生成多平台基础规范，并说明各平台的具体差异。

工作原理

收集项目名称、平台、业务领域，以及可提供的品牌颜色或风格方向。
询问缺失的关键信息，尤其是目标平台或业务领域；如果输入很少，则采用合理的平台默认值并说明假设。
从技能的 assets/ 目录中选择匹配的模板：小程序、App、大屏、Web 或多平台。
使用一致的视觉系统填写模板，包括颜色、字体、4pt 或 8pt 间距网格、组件令牌和相关平台指南。
检查规范的无障碍性、层级、命名一致性、组件覆盖范围和平台限制。
在聊天中展示完整规范，或在用户提出要求时将其保存为工作区中的 .md 或 .docx 文件。

配置指南

在支持 Openclaw Skills 的环境中使用此技能。技能文档未指定单独的软件包安装步骤或 CLI 命令。请确保技能的 assets/ 目录及其平台模板可用。
收到提示后提供项目详情：
项目名称。
平台：小程序、App、大屏、Web 或多平台。
业务领域，例如电商、教育、金融、医疗、政务或 IoT。
品牌颜色或主色调（如有）。
期望的风格方向（如有），例如极简、活泼、科技感、高端、扁平或拟物化。
此技能可以在聊天中展示规范。如果需要文件，请提出 Markdown 或 DOCX 格式输出；如果工作区根目录不合适，请指定保存位置。

数据架构

此技能生成的是设计规范文档，而不是数据库或持久化应用数据模型的说明。它会根据请求的平台从 assets/ 中选择模板：
平台 模板
小程序 mini-program-spec.md
App app-spec.md
大屏 large-screen-spec.md
Web web-spec.md
多平台 multi-platform-spec.md（基础规范加平台差异）
生成的规范包括项目概述和设计原则；颜色值及其用法；字体大小级别、字体系列、字重和行高；间距、网格和断点；圆角和阴影级别；图标指南；组件令牌；平台规则；以及交付说明。令牌名称遵循一致的分类体系，例如 color-primary-500、color-neutral-100、font-size-base、spacing-4、radius-md 和 shadow-1。内容会在聊天中展示，或按要求保存为工作区中的 .md 或 .docx 文件。

高级特性

面向平台的规范涵盖小程序、App、大屏界面、Web 和多平台产品。
多平台工作流使用共享的基础规范，并补充各平台的具体差异。
小程序指南包括 750px 设计宽度、rpx 换算、导航栏和标签栏尺寸、安全区域以及最小触控目标。
App 指南包括 iOS 和 Android 尺寸、状态栏和导航栏、标签栏、触控目标以及 iOS 安全区域。
大屏指南涉及常见分辨率、12 列或 24 列网格、数据可视化、对比度和缩放策略。
设计令牌涵盖语义色和中性色、字体大小、间距、圆角和层级。
交付检查清单会检查 WCAG AA 文本对比度、字体层级、间距一致性、平台限制、组件覆盖范围和令牌命名。
支持通过聊天交付，也可选择生成 Markdown 或 DOCX 工作区文件。

name: design-spec-generator description: "Generate complete design system specification documents for mini-program, App, and large-screen interfaces. Use when user needs a design spec, design system, style guide, or design handoff document."

Design Spec Generator

Generates complete, production-ready design system specification documents for 小程序 (mini-program), App, and 大屏 (large-screen) interfaces. Produces a cohesive spec that can be handed directly to developers or team members.

When to Use

User needs a design specification document (设计规范文档)
User needs a design system (设计系统) for a new project
User needs to standardize an existing product's design
User needs a design handoff document (设计交付文档) for developers
User mentions any of: 规范、设计系统、样式指南、design system、style guide

Inputs Needed

Before generating, gather (or ask if missing):

项目名称 (project name)
平台类型 (platform): 小程序 / App / 大屏 / Web / 多端
业务领域 (business domain): e.g. 电商、教育、金融、医疗、政务、IoT
品牌色或主色调 (brand color or main hue, optional)
设计风格方向 (style direction, optional): 简约/活泼/科技感/高端/国潮/扁平/拟物等

If the user gives minimal input, use sensible defaults per platform and state assumptions clearly.

Workflow

确认项目信息 — If any critical input is missing (platform, business domain), ask. Otherwise proceed with what's given.
选择模板 — Load the appropriate template from assets/:
mini-program-spec.md for 小程序
app-spec.md for App
large-screen-spec.md for 大屏
web-spec.md for Web
multi-platform-spec.md for 多端 (used with a base spec + platform deltas)
生成规范内容 — Fill in the template with:
Logically consistent color system (primary, secondary, neutral, semantic) derived from brand color
Typography scale with px/pt values appropriate to the platform
Spacing system (4pt / 8pt grid)

Component design tokens

Platform-specific constraints and best practices

输出 — Present the full spec document in chat. If user wants a file, save to .md or .docx in the workspace.

Output Structure

Every generated spec includes these sections (platform variants adjust details):

概述 & 设计原则 — Project overview, design philosophy, core principles
色彩系统 — Primary/secondary/neutral/semantic colors with HEX values and usage guidelines
字体系统 — Type scale, font families, weights, line heights
间距与栅格 — Spacing tokens, grid system, breakpoints
圆角与阴影 — Corner radius tokens, elevation/shadow levels
图标规范 — Icon size standards, stroke weight, style guidance
组件规范 — Button/input/card/navigation/etc. design tokens
平台规范 — Platform-specific: safe areas, status bar, navigation styles, screen sizes, density
交付说明 — How to hand off (切图、标注、命名规范)

Platform-Specific Notes

小程序 (Mini-Program)
Design at 750px 视觉稿宽度 (rpx convention) 1rpx = 屏幕宽度/750 TabBar: 48px 高 (iOS) / 安全区适配
NavigationBar: 44px 状态栏 + 40px 导航栏
Safe area: 底部安全区 (iPhone X+ 系列需适配)
按钮最小点击区域: 88rpx (44pt)

App

Design at 375pt / 750px base (iOS) with Android dp conversion (1pt ≈ 1dp at xxhdpi)
状态栏: iOS 44pt / Android 24dp
NavigationBar: 44pt (iOS) / 56dp (Android)
TabBar: 49pt (iOS) / 56dp (Android)
最小点击目标: 44×44pt (iOS) / 48×48dp (Android)
iOS 安全区: 刘海 44pt, 底部 home indicator 34pt
大屏 (Large Screen)
Typical resolutions: 1920×1080, 2560×1440, 3840×2160 (4K)
常用 12 列 / 24 列栅格系统
数据可视化是核心，需强化图表规范
字体: 标题建议使用较粗字重，正文保持清晰
色彩: 深色背景 (深蓝/深灰) 是主流，需注意对比度
适配策略: 建议按固定设计分辨率设计，用 scale 缩放适配

Design Token Naming

Use consistent token naming convention:

color-primary-500 → 品牌主色
color-secondary-500 → 辅助色
color-neutral-100 → 浅灰背景
color-semantic-success → 成功绿
font-size-base → 正文基准字号
spacing-4 → 4px 基础间距
radius-sm / md / lg → 圆角
shadow-1 / 2 / 3 → 阴影层级

Quality Checklist

Before delivering, verify:

✅ Color palette is harmonious and accessible (WCAG AA contrast for text)
✅ Type scale has clear hierarchy (min 3 levels: display/title/body/caption)
✅ Spacing follows a consistent base unit (4 or 8pt)
✅ Radius & shadow tokens are consistent
✅ Platform constraints are included (safe areas, minimum touch targets)
✅ Component tokens cover at least: button, input, card, navigation, feedback (toast/dialog)
✅ Naming convention is consistent throughout

Templates

Templates live in assets/. If user needs the spec as a file, generate from template and save to workspace root (or ask where to save).

小红书竞品雷达
设计交接文档生成器